/* Progressive Faucet - v1.8.76 */
:root{
  --bg:#070a0f; --text:#eef3ff; --muted:#9aa7c4; --line:rgba(255,255,255,.08);
  --accent:#6cf0ff; --accent2:#a78bfa;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 30% -10%, rgba(108,240,255,.18), transparent 55%),
              radial-gradient(900px 600px at 90% 10%, rgba(167,139,250,.14), transparent 55%),
              var(--bg);
  color:var(--text);
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:980px; margin:0 auto; padding:18px}
.topbar{
  position:sticky; top:0; z-index:10;
  background: rgba(7,10,15,.75);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; gap:14px}
.topbar .wrap{padding:12px 16px}
@media(max-width:520px){.topbar .wrap{padding:10px 12px}}
.brand{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.brand-link{font-weight:900; letter-spacing:.5px; color:var(--text); text-decoration:none; text-shadow:0 0 18px rgba(70,240,255,.08)}

@media(max-width:520px){.brand{flex-wrap:nowrap}.brand-link{white-space:nowrap}}
.badge{
  font-size:12px; padding:4px 8px; border:1px solid var(--line);
  background:rgba(255,255,255,.03); border-radius:999px; color:var(--muted);
}
.badge2{border-color: rgba(167,139,250,.35); color:#d7ccff}
.nav{display:flex; align-items:center; gap:12px}
.nav-desktop{padding:6px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)); box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05)}
.nav a{display:inline-flex; align-items:center; justify-content:center; padding:8px 10px; border-radius:999px; color:rgba(230,238,255,.82); text-decoration:none; font-weight:650; letter-spacing:.2px; line-height:1; white-space:nowrap; transition:transform .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease}
.nav a:hover{background:rgba(70,240,255,.10); color:rgba(240,250,255,.95); box-shadow:0 0 0 1px rgba(70,240,255,.22) inset, 0 10px 26px rgba(0,0,0,.35)}
.nav a:active{transform:translateY(1px)}
.nav a.btn{border-radius:999px}
@media(max-width:900px){.nav{gap:8px}.nav a{padding:8px 9px}}
.btn{
  display:inline-flex; align-items:center; justify-content:center; max-width:100%;
  padding:8px 12px; border-radius:12px;
  border:1px solid rgba(108,240,255,.35);
  background:rgba(108,240,255,.08);
  color:var(--text); font-weight:700;
}
.hero{
  margin-top:18px; padding:22px; border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.hero h1{margin:0 0 10px 0; font-size:28px}
.grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:16px; margin-top:16px}
@media (max-width: 860px){ .grid{grid-template-columns: 1fr} }
.card{padding:16px; border-radius:16px; background:rgba(12,18,32,.78); border:1px solid var(--line);}
.card h2{margin:0 0 10px 0; font-size:18px}
.muted{color:var(--muted)}
hr.sep{border:0;border-top:1px solid var(--line); margin:14px 0}
label{display:block; font-weight:700; margin:10px 0 6px}
input, textarea{
  width:100%; padding:10px 12px; border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.25); color:var(--text);
}
textarea{min-height:220px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}
.form-actions{margin-top:12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.small{font-size:13px}
.alert{padding:10px 12px; border-radius:14px; border:1px solid var(--line); background:rgba(255,255,255,.03); margin:12px 0;}
.alert.ok{border-color: rgba(34,197,94,.35)}
.alert.err{border-color: rgba(255,92,122,.35)}
.footer{margin-top:22px; border-top:1px solid var(--line); background: rgba(0,0,0,.15);}
.footer-inner{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap}
.table{width:100%; border-collapse:collapse; font-size:14px}
.table th,.table td{padding:10px; border-bottom:1px solid var(--line); vertical-align:top}
.table th{color:var(--muted); text-align:left; font-weight:700}
.actions{display:flex; gap:10px; flex-wrap:wrap}


.task-actions{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.task-actions .btn{width:100%;text-align:center;justify-content:center}

/* Mobile: make tables stack so action buttons never bleed off-screen */
@media (max-width:520px){
  table.table{display:block}
  table.table thead{display:none}
  table.table tbody{display:block}
  table.table tr{display:block; padding:10px 0; border-bottom:1px solid var(--line)}
  table.table td{display:flex; justify-content:space-between; gap:12px; padding:6px 0; border:0; width:100%}
  table.table td:nth-child(1)::before{content:"Task"; color:var(--muted); font-weight:700}
  table.table td:nth-child(2)::before{content:"Status"; color:var(--muted); font-weight:700}
  table.table td:nth-child(3)::before{content:"Action"; color:var(--muted); font-weight:700}
}


.grid2{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:900px){.grid2{grid-template-columns:1fr 1fr}}
.list{margin:0;padding-left:18px}
.list li{margin:8px 0}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.14)}

/* v1.8.36: Fix CTA buttons bleeding into cards */
.card { padding: 20px; }
.cta-row { margin-top: 18px; }
.card .cta-row { margin-top: 20px; }

/* v1.8.36: Public ad boxes */
.adbox{margin:14px 0}
.adbox-inner{border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);border-radius:14px;padding:12px;overflow:hidden}
.adbox-top{margin-top:0}
.adbox-bottom{margin-bottom:0}

/* v1.8.36: Themed ad boxes so embeds look intentional */
.adbox{margin:18px 0}
.adbox-inner{
  position:relative;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-radius:16px;
  padding:14px 14px 12px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.adbox-label{
  position:absolute;
  top:10px;
  left:12px;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.65);
}
.adslot{
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:90px;
  padding-top:18px; /* give room for label */
}
.adslot iframe,
.adslot img,
.adslot embed,
.adslot object{
  max-width:100%;
  height:auto;
  display:block;
  border-radius:10px;
}

/* v1.8.36: Ad cards (glassy framed containers) */
.adcard{
  max-width: 900px;
  margin: 18px auto;
  padding: 14px 14px 12px;
  position: relative;
  background: rgba(10, 14, 22, 0.55);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}
.adlabel{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  margin-bottom: 10px;
}
.adslot{
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  padding: 10px;
  min-height: 90px;
}
.adslot iframe,
.adslot img,
.adslot embed,
.adslot object,
.adslot > div{
  max-width: 100% !important;
}

/* v1.8.36: Improve vertical rhythm (less cramped stacking) */
.hero{margin-bottom:26px}
.grid2{gap:22px}
.cta-row{margin-top:18px;margin-bottom:22px}
.adcard{margin:28px auto}

/* v1.8.36: Mobile-first professional layout */
:root{
  --wrap: 1120px;
  --pad: 16px;
  --radius: 16px;
}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);}
@media(min-width:700px){:root{--pad:20px}}
@media(min-width:1100px){:root{--pad:24px}}

.topbar{position:relative}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.brand-link{font-weight:900;font-size:18px}
@media(min-width:700px){.brand-link{font-size:20px}}

.nav{gap:10px;align-items:center}
.nav a{padding:10px 12px;border-radius:12px}
.nav a.btn{padding:10px 14px}
.nav-desktop{display:none}
@media(min-width:900px){.nav-desktop{display:flex}}

.nav-toggle{display:inline-flex;flex-direction:column;gap:5px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);padding:10px;border-radius:12px}
.nav-toggle span{display:block;width:20px;height:2px;background:rgba(255,255,255,.75)}
@media(min-width:900px){.nav-toggle{display:none}}

.nav-mobile{border-top:1px solid rgba(255,255,255,.08);background:rgba(10,14,22,.6);backdrop-filter:blur(10px)}
/* Mobile menu: button-like links in a tidy grid */
.nav-mobile-inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px 0}
.nav-mobile a{display:flex;align-items:center;justify-content:center;text-align:center;padding:12px 10px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);border-radius:14px;font-weight:600}
.nav-mobile a:hover{background:rgba(255,255,255,.06)}
.nav-mobile a.btn{background:rgba(20,170,255,.10);border-color:rgba(20,170,255,.25)}
.nav-mobile a.btn:hover{background:rgba(20,170,255,.16)}
@media(min-width:900px){.nav-mobile{display:none !important}}
main{padding:18px 0 36px}
.hero{margin:0 0 22px}
.hero h1{font-size:28px;line-height:1.1;margin:0 0 8px}
.hero .muted{font-size:15px}
@media(min-width:700px){.hero h1{font-size:34px}}

.card{
  border-radius:var(--radius);
  padding:18px;
  margin:0;
}
.card + .card{margin-top:14px}
@media(min-width:700px){.card{padding:20px}.card + .card{margin-top:16px}}

.grid2{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:900px){.grid2{grid-template-columns:1fr 1fr;gap:22px}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px}
@media(max-width:520px){
  .btn, .nav a.btn{width:100%}
  .cta-row{flex-direction:column}
  .form-actions{flex-direction:column;align-items:stretch}
  .form-actions a{display:inline-flex;justify-content:center}
}

.table{display:block;width:100%;overflow:auto;border-radius:14px}
.table thead, .table tbody, .table tr{width:100%}
.table td, .table th{white-space:nowrap}

.adcard{max-width:var(--wrap);margin:22px auto}

/* v1.8.36: Fix mobile nav duplication + proper toggle behavior */
.nav-desktop{display:none}
@media(min-width:900px){
  .nav-desktop{display:flex}
  .nav-mobile{display:none !important}
}
.nav-mobile{display:none}
.nav-mobile.open{display:block}
.nav-mobile[hidden]{display:none !important}
/* v1.8.36: Make hamburger visible and centered */
.nav-toggle{cursor:pointer}
.nav-toggle span{border-radius:2px}

/* v1.8.36 nav fix */
.nav-desktop{display:none}
@media(min-width:900px){
  .nav-desktop{display:flex!important}
  .nav-mobile{display:none!important}
}
@media(max-width:899px){
  .nav-desktop{display:none!important}
}

/* v1.8.36: Definitive responsive nav (mobile hamburger, desktop links) */
@media(max-width:899px){
  .nav-toggle{display:inline-flex!important}
  .nav-desktop{display:none!important}
}
@media(min-width:900px){
  .nav-toggle{display:none!important}
  .nav-desktop{display:flex!important}
  #mobileNav{display:none!important}
}

/* v1.8.36 spacing + mobile polish */
.card{margin-bottom:20px;padding:20px}
.adcard{margin:30px auto}
.grid2{gap:20px}
@media(max-width:700px){
  .wrap{padding:0 16px}
  .btn{width:100%}
}


/* v1.8.36 nav cleanup */
#mobileNav[hidden]{display:none !important;}
@media (min-width: 900px){
  #mobileNav{display:none !important;}
}


/* --- v1.8.36: Fix stray visible checkbox + improve nav spacing --- */
input.nav-toggle{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Make desktop nav breathe (wrap if needed) */
.topbar__nav{gap:14px; flex-wrap:wrap;}
.topbar__links{gap:10px; flex-wrap:wrap;}
.nav__link{padding:8px 10px;}
.nav__link.primary{padding:8px 12px;}

/* Mobile menu spacing */
@media (max-width: 820px){
  .topbar__nav{padding:10px; border-radius:14px;}
  .nav__link{width:100%; justify-content:flex-start; padding:12px 12px;}
}



/* Ticker */
.ticker { background: transparent !important; box-shadow:none !important; border:none !important; }
.ticker { background: transparent !important; box-shadow:none !important; border:none !important; }
.ticker { background: transparent !important; box-shadow:none !important; border:none !important; }
.ticker { background: transparent !important; box-shadow:none !important; border:none !important; }
.ticker { background: transparent !important; box-shadow:none !important; border:none !important; }
.ticker { background: transparent !important; box-shadow:none !important; border:none !important; }
.ticker { background: transparent !important; box-shadow:none !important; border:none !important; }

.ticker { background: transparent !important; box-shadow:none !important; border:none !important; }
.ticker { background: transparent !important; box-shadow:none !important; border:none !important; }

.ticker { background: transparent !important; box-shadow:none !important; border:none !important; }

.ticker { background: transparent !important; box-shadow:none !important; border:none !important; }

.ticker { background: transparent !important; box-shadow:none !important; border:none !important; }

.ticker { background: transparent !important; box-shadow:none !important; border:none !important; }
.ticker { background: transparent !important; box-shadow:none !important; border:none !important; }

.ticker { background: transparent !important; box-shadow:none !important; border:none !important; }

@keyframes tickerMove{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes tickerPulse{
  0%, 100% { transform: scale(1); opacity: .75; }
  50% { transform: scale(1.45); opacity: 1; }
}



/* v1.8.64: Restore ticker animation + layout (no design changes elsewhere) */
.ticker{
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 6px 0;
  color: rgba(240,245,255,.92);
  font-size: 13px;
  line-height: 1.2;
}
.ticker-inner{
  overflow: hidden;
  width: 100%;
}
.ticker-move{
  display: flex;
  width: max-content;
  align-items: center;
  animation: tickerMove 28s linear infinite;
  will-change: transform;
}
.ticker:hover .ticker-move{
  animation-play-state: paused;
}
.ticker-group{
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding-right: 28px;
}
.ticker-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .08em;
  font-size: 11px;
  color: rgba(210,255,235,.95);
  background: rgba(0, 120, 85, .18);
  border: 1px solid rgba(60, 230, 180, .28);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}
.ticker-dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(65, 255, 195, .95);
  box-shadow: 0 0 10px rgba(65,255,195,.55);
  animation: tickerPulse 1.2s ease-in-out infinite;
}
.ticker-sep{
  opacity: .65;
  margin: 0 10px;
}
.ticker-item{
  opacity: .95;
}
@media (prefers-reduced-motion: reduce){
  .ticker-move{ animation-duration: 60s; }
  .ticker-dot{ animation: none; opacity: .85; }
  .ticker { background: transparent !important; box-shadow:none !important; border:none !important; }
  .ticker { background: transparent !important; box-shadow:none !important; border:none !important; }
}

/* v1.8.44: Mobile overflow + centering hardening */
html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}
img, svg, video, canvas, iframe, embed, object{
  max-width:100%;
  height:auto;
}
.wrap, .card, .alert, .topbar, .ticker { background: transparent !important; box-shadow:none !important; border:none !important; }

/* Allow grid/flex children to shrink instead of forcing horizontal overflow */
.grid, .grid2, .topbar-inner, .brand, .nav, .ticker { background: transparent !important; box-shadow:none !important; border:none !important; }
.grid > *, .grid2 > *{
  min-width:0;
}

/* Wrap long inline text safely on small screens */
.card, .alert, .muted, .small{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Slightly tighter padding on very small screens */
@media (max-width:480px){
  :root{ --pad: 12px; }
  .card{ padding:14px; }
  .ticker { background: transparent !important; box-shadow:none !important; border:none !important; }
}

/* Dashboard countdown (next credit unlock) */
.countdown-line{
  margin-top:10px;
  padding:6px 10px;
  border-radius:12px;
  display:inline-block;
  background: rgba(0,0,0,0.12);
  border: 1px solid rgba(0,255,198,0.18);
}
.countdown-line .countdown-val{
  color:#eafff9;
  text-shadow: 0 0 8px rgba(0,255,198,0.25);
}