@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

/*
  Spark Techie — Neural Theme
  Shared design system for all pages.
  Original IDs/classes used by inline page scripts are preserved;
  this file only adds new classes (prefixed `st-`) plus restyles
  the legacy classes (.main-content, .headings1, .form, etc.)
  so old markup automatically inherits the new look.
*/

:root,
[data-spark-theme="neural"]{
  /* ---- color tokens ---- */
  --bg:            #090c14;
  --bg-grad-1:     #0a0f1f;
  --bg-grad-2:     #0d1326;
  --panel:         #121a2e;
  --panel-2:       #161f38;
  --panel-border:  #232f4d;
  --line:          #1c2640;

  --cyan:          #00e5ff;
  --cyan-dim:      #0891a8;
  --violet:        #7c5cff;
  --violet-dim:    #4d39a3;
  --mint:          #00ffa3;
  --coral:         #ff4d6d;
  --amber:         #ffb74d;

  --text:          #e8ecf5;
  --text-dim:      #9aa6c3;
  --text-faint:    #5f6c8f;

  --bg-radial-pos: 20% 0%;
}

[data-spark-theme="midnight"]{
  --bg:            #0b0a17;
  --bg-grad-1:     #100c22;
  --bg-grad-2:     #150f2e;
  --panel:         #181230;
  --panel-2:       #1d1638;
  --panel-border:  #2c2150;
  --line:          #241c44;

  --cyan:          #b794ff;
  --cyan-dim:      #7c5ccf;
  --violet:        #ff5cb8;
  --violet-dim:    #a83d80;
  --mint:          #7affd6;
  --coral:         #ff6b6b;
  --amber:         #ffc168;

  --text:          #f0ecff;
  --text-dim:      #ab9fd6;
  --text-faint:    #6a5f94;

  --bg-radial-pos: 80% 0%;
}

[data-spark-theme="aurora"]{
  --bg:            #061515;
  --bg-grad-1:     #07201d;
  --bg-grad-2:     #082a22;
  --panel:         #0d2620;
  --panel-2:       #103029;
  --panel-border:  #1d4438;
  --line:          #173a30;

  --cyan:          #38f9c8;
  --cyan-dim:      #1fae8c;
  --violet:        #6ee7b7;
  --violet-dim:    #2fa888;
  --mint:          #b6ff5c;
  --coral:         #ff7a7a;
  --amber:         #ffd166;

  --text:          #e8fff6;
  --text-dim:      #93c9b8;
  --text-faint:    #5c8c7c;

  --bg-radial-pos: 50% 0%;
}

[data-spark-theme="sunset"]{
  --bg:            #170a10;
  --bg-grad-1:     #200d14;
  --bg-grad-2:     #2a0f17;
  --panel:         #271018;
  --panel-2:       #30141d;
  --panel-border:  #4a2030;
  --line:          #3a1a26;

  --cyan:          #ff8c5c;
  --cyan-dim:      #cc6f47;
  --violet:        #ff5c8a;
  --violet-dim:    #cc4870;
  --mint:          #ffd166;
  --coral:         #ff4d4d;
  --amber:         #ffb84d;

  --text:          #fff0e8;
  --text-dim:      #d6a89a;
  --text-faint:    #946a5f;

  --bg-radial-pos: 30% 0%;
}

[data-spark-theme="slate"]{
  --bg:            #0c0e12;
  --bg-grad-1:     #11141a;
  --bg-grad-2:     #161a22;
  --panel:         #161a22;
  --panel-2:       #1b202a;
  --panel-border:  #2a3140;
  --line:          #232a36;

  --cyan:          #6fb8ff;
  --cyan-dim:      #4a8dcc;
  --violet:        #9aa5ff;
  --violet-dim:    #6c75cc;
  --mint:          #6fe0c0;
  --coral:         #ff7e8a;
  --amber:         #ffcb6f;

  --text:          #eef1f6;
  --text-dim:      #a3acba;
  --text-faint:    #636c7d;

  --bg-radial-pos: 50% 0%;
}

:root{
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;

  --shadow-glow-cyan: 0 0 24px rgba(0,229,255,.25);
  --shadow-glow-violet: 0 0 24px rgba(124,92,255,.25);
  --shadow-card: 0 8px 30px rgba(0,0,0,.35);

  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;
}

@media (prefers-color-scheme: light){
  :root{ /* still force dark — this brand is dark-native */ }
}

*{ box-sizing: border-box; }

html, body{
  background: var(--bg);
}

body, body.main-content, .main-content{
  background: radial-gradient(ellipse 80% 60% at var(--bg-radial-pos, 20% 0%), var(--bg-grad-2, #0e1530) 0%, var(--bg) 55%) !important;
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  margin: 0;
  position: relative;
  overflow-x: hidden;
}

/* Neural network canvas backdrop — fixed, behind everything */
#neural-bg{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: .55;
}

/* Every direct visual section sits above the canvas */
.headings1, .mainbody, .main-content > div, .form, .footer,
.st-shell, .st-card, .st-nav{
  position: relative;
  z-index: 1;
  margin-left: 20%;
}

a{ color: var(--cyan); }

::selection{ background: var(--violet); color: #fff; }

::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: var(--bg); }
::-webkit-scrollbar-thumb{ background: var(--panel-border); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover{ background: var(--cyan-dim); }

/* ============ HEADER / NAV ============ */
.headings1, .main-content .headings1{
  background: rgba(10,15,31,.75) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  height: auto !important;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 28px;
  font-family: var(--font-display);
  position: sticky;
  top: 0;
  z-index: 50;
}

.headings1 i img, .headings1 img{
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px;
  padding-top: 0 !important;
  box-shadow: var(--shadow-glow-cyan);
  object-fit: cover;
}

.headings1 b{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .2px;
  background: linear-gradient(90deg, #ffffff, var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-right: auto;
}

.headings1 .ul{
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  padding: 0;
  flex-wrap: wrap;
}

.headings1 .ul .li, .li{
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 600;
  background: transparent !important;
  color: var(--text-dim) !important;
  border: 1px solid transparent;
  padding: 9px 16px !important;
  border-radius: 999px;
  cursor: pointer;
  transition: all .18s ease;
}
.headings1 .ul .li:hover, .li:hover{
  color: #fff !important;
  background: var(--panel-2) !important;
  border-color: var(--panel-border);
}

/* top utility links (terms / privacy) */
.ul1{
  list-style: none;
  display: flex !important;
  gap: 16px;
  margin: 6px 28px 0 0 !important;
  padding: 0;
  height: auto !important;
  font-size: 12px;
  justify-content: flex-end;
}
.li1{ color: var(--text-faint) !important; }
.li1 a{ color: var(--text-faint) !important; text-decoration: none; font-size: 12px; }
.li1 a:hover{ color: var(--cyan) !important; }

/* ============ MARQUEE / NOTIFICATIONS ============ */
.notify, .main-content .notify{
  background: linear-gradient(90deg, rgba(124,92,255,.15), rgba(0,229,255,.15)) !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: var(--radius-sm);
  margin: 14px 28px 0 !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-family: var(--font-body) !important;
  color: var(--cyan) !important;
  font-weight: 600;
  width: 100%;
}

/* ============ HERO / BODY TEXT BLOCKS ============ */
.mainbody, .main-content .mainbody{
  background: transparent !important;
  margin: 48px auto 8px !important;
  font-family: var(--font-display) !important;
  font-size: 42px !important;
  font-weight: 700;
  max-width: 900px;
  padding: 0 20px;
  letter-spacing: -.5px;
  line-height: 1.15;
}
.mainbody b{
  background: linear-gradient(90deg, #fff 10%, var(--cyan) 50%, var(--violet) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body > .main-content, .main-content .main-content{
  background: transparent !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  color: var(--text-dim) !important;
  max-width: 760px;
  margin: 0 auto 28px !important;
  padding: 0 20px;
  line-height: 1.7;
}
.main-content .main-content b{ color: var(--text); font-weight: 600; }

/* generic buttons used inline across pages (signup CTA, etc.) */
body button:not(.li):not(.dropbtn),
body input[type="submit"],
body input.button{
  font-family: var(--font-display) !important;
  background: linear-gradient(135deg, var(--cyan), var(--violet)) !important;
  color: #04111c !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 700 !important;
  cursor: pointer;
  box-shadow: var(--shadow-glow-cyan);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  padding: 13px 18px;
  font-size: 16px;
}
body button:not(.li):not(.dropbtn):hover,
body input[type="submit"]:hover,
body input.button:hover{
  transform: translateY(-2px);
  filter: brightness(1.08);
}
body button:not(.li):not(.dropbtn):active,
body input[type="submit"]:active,
body input.button:active{ transform: translateY(0); }

/* ============ FORMS ============ */
.form, .main-content .form{
  background: var(--panel) !important;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  max-width: 460px;
  margin: 28px auto !important;
  padding: 32px 30px !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
}
.form h1{
  font-family: var(--font-display) !important;
  font-size: 26px;
  margin: 0 0 18px;
  background: linear-gradient(90deg, #fff, var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.form .label, .label{
  font-size: 13px !important;
  color: var(--text-dim) !important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  display: block;
  margin: 14px 0 6px;
}
.form .input, .input,
.form input[type="text"], .form input[type="email"], .form input[type="password"],
.form input[type="number"], .form select, .form textarea{
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  height: auto !important;
  width: 100% !important;
  background: var(--bg) !important;
  border: 1px solid var(--panel-border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px 14px !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form .input:focus, .input:focus,
.form input:focus, .form select:focus, .form textarea:focus{
  outline: none !important;
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 3px rgba(0,229,255,.15) !important;
}
.form .button, .button{
  width: 100% !important;
  height: auto !important;
  font-size: 16px !important;
  padding: 13px 18px !important;
  margin-top: 6px;
}

.alert, .main-content .alert{
  max-width: 460px;
  margin: 16px auto 0 !important;
  padding: 0 4px;
  font-size: 13px !important;
  color: var(--coral) !important;
  font-weight: 600;
  text-align: center;
  min-height: 18px;
}

/* ============ STAT / COUNTER CARDS ============ */
.no_of_users, .main-content .no_of_users, body .main-content .no_of_users{
  background: var(--panel) !important;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  width: 220px !important;
  height: auto !important;
  padding: 22px 18px;
  font-family: var(--font-display) !important;
  color: var(--text) !important;
  text-align: left !important;
  font-size: inherit !important;
}
.no_of_users p:first-child, .main-content .no_of_users p:first-child{
  color: var(--text-dim) !important;
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0 0 6px;
  font-weight: 600;
}
.no_of_users p:last-child, .main-content .no_of_users p:last-child{
  color: var(--mint) !important;
  font-size: 28px !important;
  font-family: var(--font-mono) !important;
  margin: 0;
  font-weight: 700;
  word-break: break-word;
  white-space: normal;
}

/* balance / username pills (dashboard etc.) */
.username, .main-content .username{
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  color: var(--text) !important;
  text-align: center;
  max-width: 460px;
  margin: 18px auto !important;
}
/* .balance is used as both a big section wrapper (dashboard) and as an
   inline figure elsewhere; only color the actual numeric figure, not
   every paragraph nested inside the wrapper. */
.balance, .main-content .balance{
  color: var(--text) !important;
  width: auto;
  text-align: center;
  max-width: 600px;
  margin: 0 auto !important;
}
.balance #balanceshow, .balance #balance,
span.balance, b.balance{
  font-family: var(--font-mono) !important;
  color: var(--mint) !important;
  font-weight: 700;
}
#balanceshow{
  font-family: var(--font-mono) !important;
  color: var(--mint) !important;
  font-weight: 700;
  font-size: 34px !important;
}
.balance p, .username p{
  font-family: var(--font-body) !important;
  color: var(--text-dim) !important;
  font-size: 15px !important;
  font-weight: 500;
  line-height: 1.6;
  margin: 10px 0;
}

/* ============ DROPDOWN / MENU ============ */
.menus{
  background: rgba(18,26,46,.85) !important;
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-top: 0 !important;
  padding: 6px 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.dropbtn{
  background: var(--panel-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-body) !important;
  font-weight: 600;
  padding: 12px 14px !important;
}
.dropdown:hover .dropbtn{ background: var(--violet-dim) !important; }
.dropdown-content{
  background: var(--panel) !important;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-card) !important;
}
.dropdown-content a{
  color: var(--text-dim) !important;
  font-size: 14px;
  padding: 11px 16px !important;
}
.dropdown-content a:hover{ background: var(--panel-2) !important; color: var(--cyan) !important; }

/* ============ TABLES ============ */
table, th, td, tr{
  border-color: var(--panel-border) !important;
}
table{
  background: var(--panel);
  border-radius: var(--radius-md);
  overflow: hidden;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  width: 100%;
  max-width: 100%;
}
th{
  background: var(--panel-2) !important;
  color: var(--text) !important;
  font-family: var(--font-display);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 12px !important;
}
td{
  color: var(--text-dim) !important;
  font-family: var(--font-mono);
  font-size: 14px;
  padding: 10px 12px !important;
}
tr:hover td{ background: rgba(0,229,255,.04); }

/* ============ PROGRESS BAR ============ */
#progress-container{
  background: var(--panel) !important;
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md) !important;
  width: 90% !important;
  max-width: 600px !important;
  height: 36px;
  margin: 24px auto !important;
  overflow: hidden;
}
#progress-bar{
  width: 0%;
  height: 100%;
  min-width: 36px;
  background: linear-gradient(90deg, var(--violet), var(--cyan)) !important;
  color: #04111c !important;
  font-family: var(--font-mono) !important;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width .15s linear;
}

/* ============ FOOTER ============ */
.footer, footer.footer{
  background: rgba(9,12,20,.9) !important;
  border-top: 1px solid var(--line);
  padding: 28px 20px 22px !important;
  margin-top: 60px;
  font-family: var(--font-body) !important;
  color: var(--text-faint) !important;
  font-size: 13px !important;
}
.footer p{ margin: 4px 0; }
.footer #visit-count{
  font-family: var(--font-mono) !important;
  color: var(--cyan) !important;
  font-size: 22px !important;
}

/* ============ UTILITY / NEW COMPONENTS ============ */
.st-shell{ max-width: 1100px; margin: 0 auto; padding: 0 20px; }

.st-card{
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 22px;
}

.st-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0,229,255,.12);
  color: var(--cyan);
  border: 1px solid rgba(0,229,255,.3);
}

.st-grid{
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.st-fade-in{ animation: stFadeIn .5s ease both; }
@keyframes stFadeIn{ from{opacity:0; transform: translateY(8px);} to{opacity:1; transform:none;} }

@media (max-width: 720px){
  .mainbody, .main-content .mainbody{ font-size: 28px !important; }
  .headings1{ justify-content: center; text-align: center; }
  .headings1 b{ margin-right: 0; width: 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ============ AD / EMBED OVERFLOW SAFETY ============
   Many ad networks here use fixed-pixel-width iframes (728px etc).
   Rather than hand-wrap every embed, contain them globally so they
   never force horizontal scroll on narrow viewports; on small screens
   they scale down and center instead of overflowing. */
body{ overflow-x: hidden; }
iframe{ max-width: 100%; }
@media (max-width: 760px){
  iframe[width]{
    max-width: 100vw;
  }
  iframe[style*="728"]{
    transform-origin: top center;
    transform: scale(0.92);
  }
}

/* ============ AI EARNINGS PREDICTOR WIDGET ============ */
.ai-predictor-card{
  background: linear-gradient(160deg, var(--panel) 0%, #0f1830 100%);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 22px 24px;
  max-width: 460px;
  margin: 24px auto;
  font-family: var(--font-body);
}
.ai-predictor-card h3{
  font-family: var(--font-display);
  font-size: 17px;
  margin: 0 0 4px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ai-predictor-card h3::before{
  content: '◆';
  color: var(--violet);
  font-size: 12px;
}
.ai-predictor-card .ai-pred-sub{
  font-size: 12.5px;
  color: var(--text-faint);
  margin: 0 0 14px;
}
.ai-pred-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 8px;
}
.ai-pred-badge{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  color: var(--violet);
  background: rgba(124,92,255,.12);
  border: 1px solid rgba(124,92,255,.3);
  padding: 4px 10px;
  border-radius: 999px;
}
.ai-pred-trend{ font-size: 13px; font-weight: 700; font-family: var(--font-mono); }
.ai-pred-svg{ width: 100%; height: 90px; display: block; }
.ai-pred-foot{ margin-top: 8px; font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); }
.ai-pred-empty{ text-align: center; padding: 18px 8px; color: var(--text-faint); }
.ai-pred-empty-icon{ font-size: 28px; color: var(--violet); margin-bottom: 8px; animation: stSpin 3s linear infinite; }
@keyframes stSpin{ to{ transform: rotate(360deg); } }
.ai-pred-empty p{ font-size: 13px; line-height: 1.6; margin: 0; }

/* ============ INDEX / MARKETING EXTRAS ============ */
.st-cta{
  display: block;
  margin: 22px auto;
  font-size: 20px !important;
  padding: 16px 38px !important;
  letter-spacing: .3px;
}
.st-ad-slot{
  max-width: 728px;
  margin: 22px auto;
  overflow-x: auto;
  text-align: center;
  border-radius: var(--radius-sm);
}
.st-hero-tag{
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
  text-align: left;
  color: var(--text);
}
@media (max-width: 600px){
  .st-hero-tag{ font-size: 22px; text-align: center; }
}

/* ============ EARN PAGE: ACTION GRID ============ */
.st-earn-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  max-width: 600px;
  margin: 30px auto;
}
.st-earn-btn{
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  padding: 22px 16px !important;
  background: linear-gradient(135deg, var(--cyan), var(--violet)) !important;
  border-radius: var(--radius-md) !important;
}

/* ============ ADMIN: PENDING LIST PANELS ============ */
.st-panel-btn{
  width: 100%;
  margin-bottom: 14px;
  font-size: 15px !important;
}
.st-scroll-list{
  height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--text-dim) !important;
  text-align: left;
}
.st-scroll-list div{
  padding: 8px 6px;
  border-bottom: 1px solid var(--line);
  word-break: break-all;
}
.st-scroll-list div:hover{ background: rgba(0,229,255,.05); color: var(--text); }
.st-scroll-list div:last-child{ border-bottom: none; }
.st-scroll-list::-webkit-scrollbar{ width: 6px; }

/* Catch remaining admin list/detail containers that still use the
   legacy inline style signature (overflow-x/y: scroll + bold 30px)
   without needing to touch their markup or JS (IDs are unchanged). */
div[style*="overflow-x: scroll"][style*="overflow-y: scroll"],
div[style*="overflow-y: scroll"][style*="overflow-x: scroll"]{
  background: var(--bg) !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--text-dim) !important;
  padding: 10px 12px !important;
  text-align: left !important;
  max-width: 100%;
}
div[style*="overflow-x: scroll"][style*="overflow-y: scroll"] div,
div[style*="overflow-y: scroll"][style*="overflow-x: scroll"] div{
  padding: 7px 4px;
  border-bottom: 1px solid var(--line);
  word-break: break-all;
}

/* Legacy black-bordered balance/info boxes used across many pages
   (border: 2px solid black or 3px solid black), without touching
   markup/JS (IDs unchanged). */
div[style*="border: 2px solid black"],
div[style*="border:2px solid black"],
div[style*="border: 3px solid black"],
div[style*="border:3px solid black"]{
  border: 1px solid var(--panel-border) !important;
  background: var(--panel) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card);
  padding: 16px !important;
  max-width: 600px;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Legacy bright/light promotional callout boxes using various inline
   rgb() background colors left over from the old light theme (e.g.
   "Special Task" banner, alert boxes). Catch the common ones generically
   so any bright inline background gets converted to the new look,
   without touching markup/JS. */
div[style*="background-color: rgb(255, 143, 227)"],
div[style*="background-color: rgb(107, 255, 39)"],
div[style*="background-color: rgb(237, 39, 255)"],
div[style*="background-color: rgb(245, 245, 245)"],
div[style*="background-color: rgb(255, 251, 10)"],
div[style*="background-color: rgb(255, 253, 254)"],
div[style*="background-color: rgb(255, 255, 255)"],
div[style*="background-color: rgb(255, 39, 140)"],
div[style*="background-color: rgb(255, 98, 208)"]{
  background: linear-gradient(135deg, rgba(124,92,255,.18), rgba(0,229,255,.18)) !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: var(--radius-lg) !important;
  padding: 18px 20px !important;
  max-width: 700px;
  margin: 18px auto !important;
}
div[style*="background-color: rgb(255, 143, 227)"] div,
div[style*="background-color: rgb(107, 255, 39)"] div,
div[style*="background-color: rgb(237, 39, 255)"] div,
div[style*="background-color: rgb(245, 245, 245)"] div,
div[style*="background-color: rgb(255, 251, 10)"] div,
div[style*="background-color: rgb(255, 253, 254)"] div,
div[style*="background-color: rgb(255, 255, 255)"] div,
div[style*="background-color: rgb(255, 39, 140)"] div,
div[style*="background-color: rgb(255, 98, 208)"] div{
  color: var(--text) !important;
  font-size: 15px !important;
  line-height: 1.7;
}
div[style*="background-color: rgb(255, 143, 227)"] a,
div[style*="background-color: rgb(107, 255, 39)"] a,
div[style*="background-color: rgb(237, 39, 255)"] a,
div[style*="background-color: rgb(245, 245, 245)"] a,
div[style*="background-color: rgb(255, 251, 10)"] a,
div[style*="background-color: rgb(255, 253, 254)"] a,
div[style*="background-color: rgb(255, 255, 255)"] a,
div[style*="background-color: rgb(255, 39, 140)"] a,
div[style*="background-color: rgb(255, 98, 208)"] a{
  color: var(--cyan) !important;
  font-weight: 600;
}
/* Same bright inline colors, but used directly on a/button elements
   as clickable CTAs rather than wrapper divs */
a[style*="background-color: rgb(255, 143, 227)"],
a[style*="background-color: rgb(107, 255, 39)"],
a[style*="background-color: rgb(237, 39, 255)"],
a[style*="background-color: rgb(255, 251, 10)"],
a[style*="background-color: rgb(255, 39, 140)"],
a[style*="background-color: rgb(255, 98, 208)"]{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--cyan), var(--violet)) !important;
  color: #04111c !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  box-shadow: var(--shadow-glow-cyan);
  padding: 10px 18px;
}
/* bright red is usually a warning/alert box, not promo - keep it readable but alert-coded */
div[style*="background-color: rgb(255, 0, 0)"]{
  background: rgba(255,77,109,.12) !important;
  border: 1px solid rgba(255,77,109,.4) !important;
  border-radius: var(--radius-lg) !important;
  padding: 18px 20px !important;
  max-width: 700px;
  margin: 18px auto !important;
}
div[style*="background-color: rgb(255, 0, 0)"] *{
  color: var(--coral) !important;
}

/* ============ DATA / HISTORY TABLES (advertise, deposits, withdrawals) ============
   These tables exist on several pages (advertise, faucetpay/zer deposit &
   withdraw, directwithdraw) with rows injected by JS into a <tbody> that
   often carries an inline `color: black` left over from the old light
   theme. Fix everything generically by tag/attribute so it works
   regardless of which page it's on, without touching markup or JS. */
table{
  width: 100%;
  max-width: 900px;
  margin: 24px auto;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
}
table thead, table tbody{
  display: table;
  table-layout: auto;
}
table th, table td{
  white-space: nowrap;
}

table#paymenttable{
  white-space: normal !important;
  max-width: 900px !important;
}
table#paymenttable th, table#paymenttable td{
  white-space: normal !important;
  vertical-align: top;
  padding: 16px !important;
}
table#paymenttable hr{
  border: none;
  border-top: 1px solid var(--line);
  margin: 10px 0;
}
table#paymenttable td p{
  margin: 4px 0;
  font-size: 14px;
  color: var(--text-dim);
}
table#paymenttable th h2{
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--text);
  margin: 0;
}
@media (max-width: 760px){
  table#paymenttable{ display: block; overflow-x: auto; }
  table#paymenttable thead, table#paymenttable tbody{ display: table; min-width: max-content; }
}
tbody[style*="color: black"], tbody[id]{
  color: var(--text-dim) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}
tbody tr td{
  color: var(--text-dim) !important;
}
table#advertTable, table + table{
  margin-top: 8px;
}

/* Section labels that precede tables (old <ul> used purely for styling
   a label, not an actual list — keep semantics, fix the look) */
div > ul:only-child{
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--text) !important;
}
.st-section-title{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  max-width: 900px;
  margin: 36px auto 12px;
}
.st-data-table{
  text-align: center;
}
.st-data-table th{ text-align: center; }

/* ============ PLAIN CONTENT PAGES (About, Terms, Privacy, Contact) ============
   These pages use bare h1/h2/h3/p/ul tags, sometimes wrapped in a single
   classless <div>, so they fall outside .main-content .main-content.
   Style them directly and constrain width for readability, without
   altering the markup. Cover both direct children and one level deep. */
body.main-content > h1, body.main-content > div > h1,
body.main-content > h2, body.main-content > div > h2,
body.main-content > h3, body.main-content > div > h3,
body.main-content > p,  body.main-content > div > p,
body.main-content > ul, body.main-content > div > ul,
body.main-content > ol, body.main-content > div > ol{
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 18px;
  margin-bottom: 18px;
  padding: 0 24px;
  text-align: left;
  position: relative;
  z-index: 1;
}
body.main-content > h1, body.main-content > div > h1{
  font-family: var(--font-display);
  font-size: 34px;
  color: var(--text);
}
body.main-content > h2, body.main-content > div > h2{
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
  margin-top: 32px;
}
body.main-content > h3, body.main-content > div > h3{
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--cyan);
  margin-top: 28px;
}
body.main-content > p, body.main-content > div > p,
body.main-content > ul, body.main-content > div > ul,
body.main-content > ol, body.main-content > div > ol{
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-dim);
}
body.main-content > ul li, body.main-content > div > ul li,
body.main-content > ol li, body.main-content > div > ol li{
  margin-bottom: 8px;
}
body.main-content > p strong, body.main-content > div > p strong,
body.main-content > ul strong, body.main-content > div > ul strong{
  color: var(--text);
}
button[style*="rgb(55, 55, 243)"]{
  background: linear-gradient(135deg, var(--cyan), var(--violet)) !important;
  color: #04111c !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  box-shadow: var(--shadow-glow-cyan);
}

/* Legacy fixed-width "550px display:inline-block" admin column wrappers
   -> responsive cards, without touching markup/JS (IDs unchanged). */
div[style*="width: 550px"][style*="display: inline-block"],
div[style*="width: 350px"][style*="display: inline-block"]{
  background: var(--panel) !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card);
  width: min(550px, 92vw) !important;
  height: auto !important;
  padding: 18px !important;
  margin: 10px !important;
  vertical-align: top;
}
div[style*="width: 550px"][style*="display: inline-block"] > button,
div[style*="width: 350px"][style*="display: inline-block"] > button{
  width: 100% !important;
  margin-bottom: 12px;
  font-size: 15px !important;
}

/* ============ HOMEPAGE V2: hero/tagline/withdraw-grid/chat-callout ============ */
.st-tagline{
  font-family: var(--font-display) !important;
  font-size: 30px !important;
  color: var(--text) !important;
}
.st-chat-callout{
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  color: var(--violet) !important;
  text-shadow: 0 0 18px rgba(124,92,255,.4);
}
.st-hero-img{
  text-align: center;
  margin: 18px auto;
}
.st-hero-img img{
  max-width: 220px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.st-withdraw-label{
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  color: var(--text) !important;
  margin-top: 18px !important;
}
.st-withdraw-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
  max-width: 600px;
  margin: 14px auto 24px;
}
.st-withdraw-item{
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  padding: 14px 10px;
  text-align: center;
}
.st-withdraw-item img{
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 8px;
}
.st-withdraw-item span{
  display: block;
  font-size: 12.5px;
  color: var(--text-dim);
  font-family: var(--font-body);
}

/* ============ THEME SWITCHER WIDGET ============ */
.st-theme-widget{
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 200;
}
.st-theme-toggle{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--panel) !important;
  border: 1px solid var(--panel-border) !important;
  box-shadow: var(--shadow-card), var(--shadow-glow-cyan);
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease;
}
.st-theme-toggle:hover{ transform: scale(1.08) rotate(8deg); }
.st-theme-panel{
  position: absolute;
  bottom: 64px;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 14px;
  width: 200px;
  opacity: 0;
  transform: translateY(8px) scale(.97);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.st-theme-panel-open{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.st-theme-panel-title{
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 10px;
}
.st-theme-swatch{
  display: flex;
  align-items: center;
  width: 100%;
  height: 38px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  margin-bottom: 8px;
  cursor: pointer;
  padding: 0 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.st-theme-swatch:last-child{ margin-bottom: 0; }
.st-theme-swatch span{
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  color: #04111c;
  text-shadow: 0 1px 2px rgba(255,255,255,.3);
}
.st-theme-swatch-active{
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--cyan);
}
@media (max-width: 600px){
  .st-theme-widget{ bottom: 14px; right: 14px; }
  .st-theme-toggle{ width: 46px; height: 46px; font-size: 19px; }
}

/* ============ INLINE WARNING TEXT (forms) ============ */
.st-inline-warning{
  display: inline-block;
  font-size: 12.5px !important;
  color: var(--amber) !important;
  font-family: var(--font-body) !important;
  line-height: 1.5;
  margin-bottom: 2px;
}

/* ============ DASHBOARD V2 ============ */
.st-dash-tip{
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  color: var(--text-dim) !important;
  text-align: center;
  max-width: 560px;
  margin: 8px auto !important;
}
.st-dash-tip a{ color: var(--cyan); font-weight: 600; }
.st-dash-rate{
  font-family: var(--font-mono) !important;
  font-size: 18px !important;
  color: var(--mint) !important;
  text-align: center;
  margin: 10px auto !important;
}
.st-dash-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 460px;
  margin: 20px auto !important;
  padding: 18px !important;
}
.st-dash-actions .button{
  width: auto !important;
  flex: 1 1 160px;
}
.st-balance-card{
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  max-width: 460px;
  margin: 24px auto;
  padding: 24px;
  text-align: center;
}
.st-balance-label{
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim) !important;
  margin: 0 0 8px !important;
}
.st-balance-figure{
  font-family: var(--font-mono) !important;
  font-size: 36px !important;
  color: var(--mint) !important;
  font-weight: 700;
  margin: 0 !important;
}
.st-bitlabs-widget{
  max-width: 460px;
  margin: 20px auto;
}

/* ============ CHAT & EARN ============ */
.st-chat-shell{
  display: grid;
  grid-template-columns: minmax(280px, 640px) minmax(260px, 360px);
  gap: 20px;
  max-width: 1040px;
  margin: 24px auto;
  padding: 0 20px;
  align-items: start;
}
@media (max-width: 900px){
  .st-chat-shell{ grid-template-columns: 1fr; }
}

#chat-box{
  position: static !important;
  bottom: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: none !important;
  background: var(--panel) !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 560px;
}
#chat-content{
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  padding: 0 !important;
}
#messages{
  flex: 1;
  overflow-y: auto !important;
  padding: 18px;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px;
}
#messages div{
  margin-bottom: 0 !important;
  padding: 0;
  border-radius: 0;
}
#messages .user-message, #messages .bot-message{
  max-width: 80%;
  padding: 10px 14px !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-body);
  font-size: 14.5px;
  line-height: 1.5;
  margin-bottom: 0 !important;
}
#messages .user-message{
  align-self: flex-end !important;
  background: linear-gradient(135deg, var(--cyan), var(--violet)) !important;
  color: #04111c !important;
  font-weight: 600;
  border-bottom-right-radius: 4px !important;
}
#messages .bot-message{
  align-self: flex-start !important;
  background: var(--panel-2) !important;
  color: var(--text) !important;
  border: 1px solid var(--panel-border);
  border-bottom-left-radius: 4px !important;
}
#messages .ad{
  align-self: center;
  margin: 10px 0;
}
#feedback-prompt{
  padding: 0 18px;
  color: var(--text-dim);
  font-size: 13px;
}
#feedback-prompt button{
  margin: 6px 6px 6px 0;
  padding: 6px 14px;
  font-size: 13px;
}
#chat-input{
  display: flex !important;
  gap: 10px;
  padding: 14px !important;
  border-top: 1px solid var(--line) !important;
  background: var(--panel-2) !important;
}
#user-input{
  flex: 1;
  width: auto !important;
  height: auto !important;
  background: var(--bg) !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
  padding: 11px 14px !important;
  font-family: var(--font-body);
  font-size: 14.5px;
}
#user-input:focus{
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(0,229,255,.15);
}
#send-button{
  width: auto !important;
  margin-left: 0 !important;
  padding: 11px 22px !important;
  font-size: 14.5px !important;
  background: linear-gradient(135deg, var(--cyan), var(--violet)) !important;
  color: #04111c !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 700 !important;
}
#send-button:hover{
  filter: brightness(1.08);
}
.ad{
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border: none !important;
  margin: 10px auto !important;
}

.st-chat-earn-card{
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 22px;
  text-align: center;
}
.st-chat-earn-amount{
  font-family: var(--font-mono) !important;
  font-size: 15px !important;
  color: var(--violet) !important;
  background: rgba(124,92,255,.1);
  border: 1px solid rgba(124,92,255,.3);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 16px;
}
.st-chat-claim-btn{
  width: 100% !important;
  font-size: 18px !important;
  padding: 16px !important;
  margin-top: 16px !important;
}

/* ============ WITHDRAW METHOD CARDS ============ */
.st-withdraw-methods{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  max-width: 900px;
  margin: 20px auto;
  padding: 0 20px;
}
.st-withdraw-method-row{
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.st-withdraw-method-row:last-child{
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.st-withdraw-method-row .button{
  width: 100% !important;
  margin-top: 10px;
}
.st-withdraw-method-icon{
  border-radius: 6px;
  margin-bottom: 8px;
  object-fit: contain;
  background: #fff;
  padding: 4px;
}
button[disabled]{
  opacity: .45 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}
button[disabled]:hover{ transform: none !important; }

/* ============ DEPOSIT CARD ============ */
.st-deposit-card .button{
  width: 100% !important;
  margin-bottom: 12px;
}
.st-deposit-card .button:last-of-type{ margin-bottom: 0; }

/* Legacy light-theme label backgrounds (gift card pages, etc.) */
label[style*="background-color: antiquewhite"],
div[style*="background-color: antiquewhite"]{
  background: rgba(255,183,77,.12) !important;
  border: 1px solid rgba(255,183,77,.3) !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 12px !important;
  display: inline-block;
  color: var(--text) !important;
}
div[style*="background-color: antiquewhite"]:empty{
  display: none !important;
  padding: 0 !important;
  border: none !important;
}

/* Plain inputs/selects that lack class="input" (a few pages use bare
   <input> tags) should still match the form aesthetic. */
input[type="text"]:not(.input),
input[type="email"]:not(.input),
input[type="password"]:not(.input),
input[type="number"]:not(.input),
input[type="url"]:not(.input),
select:not(.input),
textarea:not(.input){
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  background: var(--bg) !important;
  border: 1px solid var(--panel-border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 12px !important;
  height: auto !important;
  max-width: 100%;
}
input[type="text"]:not(.input):focus,
input[type="email"]:not(.input):focus,
input[type="password"]:not(.input):focus,
input[type="number"]:not(.input):focus,
input[type="url"]:not(.input):focus,
select:not(.input):focus,
textarea:not(.input):focus{
  outline: none !important;
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 3px rgba(0,229,255,.15) !important;
}

/* Translucent white table backgrounds (admin task tables) */
table[style*="background-color: rgba(255, 255, 255"]{
  background: var(--panel) !important;
}

/* Bare <input> with no type attribute at all defaults to text input */
input:not([type]):not(.input){
  font-family: var(--font-body) !important;
  font-size: 15px !important;
  background: var(--bg) !important;
  border: 1px solid var(--panel-border) !important;
  color: var(--text) !important;
  border-radius: var(--radius-sm) !important;
  padding: 10px 12px !important;
  height: auto !important;
  max-width: 100%;
}
input:not([type]):not(.input):focus{
  outline: none !important;
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 3px rgba(0,229,255,.15) !important;
}
form label{
  display: block;
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 10px 0 4px;
}

/* Bare <form> elements without class="form" still pick up the legacy
   stylesheet's translucent white background + black double border. */
form:not(.form){
  background: var(--panel) !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card);
  max-width: 600px;
  margin: 24px auto !important;
  padding: 26px !important;
  text-align: center;
}
form:not(.form) h2{
  font-family: var(--font-display) !important;
  font-size: 22px !important;
  color: var(--text) !important;
  margin-top: 0;
}
form:not(.form) input, form:not(.form) textarea, form:not(.form) select{
  width: 100% !important;
  max-width: 360px;
  font-size: 15px !important;
}
form:not(.form) button{
  font-size: 16px !important;
}