/* ── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

*::-webkit-scrollbar { width: 0; height: 0; }
* { scrollbar-width: none; -ms-overflow-style: none; }

html { font-size: 16px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
input, button { font-family: inherit; font-size: 1rem; }
a { text-decoration: none; color: inherit; }

/* ── Sky background ───────────────────────────────────────────────────────── */
:root {
  --bg: #eff6ff;
  --text: #0f172a;
  --muted: #64748b;
  --border: rgba(255,255,255,0.9);
  --accent: #2563eb;
  --accent-h: #1d4ed8;
  --violet: #7c3aed;
  --green: #10b981;
  --red: #ef4444;
  --amber: #f59e0b;
  --radius: 1.5rem;
}

.sky-bg {
  background: linear-gradient(180deg,
    #bfdbfe 0%,
    #dbeafe 25%,
    #eff6ff 55%,
    #f0fdf4 80%,
    #ecfdf5 100%
  );
  min-height: 100vh;
}

/* ── Glass ────────────────────────────────────────────────────────────────── */
.glass {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.9);
}
.glass-white {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.6);
}

/* ── Utilities ────────────────────────────────────────────────────────────── */
.hidden    { display: none !important; }
.muted     { color: var(--muted); font-size: .875rem; }
.green     { color: var(--green); }
.red       { color: var(--red); }
.center    { text-align: center; }
.error-msg { color: var(--red); font-size: .875rem; margin-top: .5rem; }
.success-msg { color: var(--green); font-size: .875rem; }
.loading-text { color: var(--muted); text-align: center; padding: 2rem 0; }
.truncate  { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ── Animations ───────────────────────────────────────────────────────────── */
@keyframes float-slow {
  0%, 100% { transform: translateX(0) translateY(0); }
  33%       { transform: translateX(12px) translateY(-6px); }
  66%       { transform: translateX(-8px) translateY(4px); }
}
@keyframes float-medium {
  0%, 100% { transform: translateX(0) translateY(0); }
  50%       { transform: translateX(-15px) translateY(-8px); }
}
@keyframes float-fast {
  0%, 100% { transform: translateX(0) translateY(0); }
  40%       { transform: translateX(10px) translateY(6px); }
  80%       { transform: translateX(-6px) translateY(-4px); }
}
@keyframes drift {
  0%   { transform: translateX(-320px); opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { transform: translateX(calc(100vw + 320px)); opacity: 0; }
}
@keyframes whale-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%       { transform: translateY(-18px) rotate(2deg); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scale-in {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes bird-fly-1 {
  0%   { transform: translateX(0) translateY(0); }
  25%  { transform: translateX(18px) translateY(-10px); }
  50%  { transform: translateX(35px) translateY(-4px); }
  75%  { transform: translateX(18px) translateY(6px); }
  100% { transform: translateX(0) translateY(0); }
}
@keyframes bird-fly-2 {
  0%   { transform: translateX(0) translateY(0); }
  30%  { transform: translateX(-22px) translateY(-8px); }
  60%  { transform: translateX(-10px) translateY(5px); }
  100% { transform: translateX(0) translateY(0); }
}
@keyframes bird-fly-3 {
  0%   { transform: translateX(0) translateY(0); }
  40%  { transform: translateX(28px) translateY(8px); }
  70%  { transform: translateX(12px) translateY(-6px); }
  100% { transform: translateX(0) translateY(0); }
}
@keyframes wave-a { 0% { transform: translateX(0); }    100% { transform: translateX(-50%); } }
@keyframes wave-b { 0% { transform: translateX(-50%); } 100% { transform: translateX(0); } }
@keyframes wave-c { 0% { transform: translateX(0); }    100% { transform: translateX(-50%); } }
@keyframes whale-ltr {
  0%   { transform: translateX(-200px) scaleX(-1); opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { transform: translateX(calc(100vw + 200px)) scaleX(-1); opacity: 0; }
}
@keyframes whale-rtl {
  0%   { transform: translateX(calc(100vw + 200px)) scaleX(1); opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { transform: translateX(-200px) scaleX(1); opacity: 0; }
}
@keyframes creditsPulse {
  0%   { transform: scale(1.35); background-color: #bfdbfe; box-shadow: 0 0 0 4px rgba(59,130,246,0.35); }
  60%  { transform: scale(1.08); background-color: #dbeafe; }
  100% { transform: scale(1);    background-color: transparent; box-shadow: none; }
}

.cloud-float-1 { animation: float-slow   9s ease-in-out infinite; }
.cloud-float-2 { animation: float-medium 12s ease-in-out infinite; }
.cloud-float-3 { animation: float-fast   7s ease-in-out infinite; }
.cloud-drift   { animation: drift 60s linear infinite; }
.whale-float   { animation: whale-float 5s ease-in-out infinite; }
.fade-up   { animation: fade-up 0.7s ease forwards; }
.fade-up-1 { animation: fade-up 0.7s 0.1s  ease both; }
.fade-up-2 { animation: fade-up 0.7s 0.25s ease both; }
.fade-up-3 { animation: fade-up 0.7s 0.4s  ease both; }
.fade-up-4 { animation: fade-up 0.7s 0.55s ease both; }
.scale-in  { animation: scale-in 0.6s 0.2s ease both; }
.bird-1    { animation: bird-fly-1 7s  ease-in-out infinite; }
.bird-2    { animation: bird-fly-2 9s  ease-in-out infinite 1.5s; }
.bird-3    { animation: bird-fly-3 11s ease-in-out infinite 3s; }
.credits-pulse { animation: creditsPulse 0.65s cubic-bezier(0.22,1,0.36,1) forwards; }

/* ── Shimmer text ─────────────────────────────────────────────────────────── */
.shimmer-text {
  background: linear-gradient(90deg, #1d4ed8, #7c3aed, #0ea5e9, #1d4ed8);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s linear infinite;
}

/* ── Card hover ───────────────────────────────────────────────────────────── */
.card-hover { transition: all 0.3s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0,0,0,0.12); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; padding: .75rem 1.5rem; border-radius: 1rem;
  border: none; cursor: pointer; font-weight: 700;
  transition: all 0.3s ease;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff !important;
  position: relative; overflow: hidden; isolation: isolate;
  box-shadow: 0 4px 20px rgba(37,99,235,0.3);
}
.btn-primary::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  opacity: 0; transition: opacity 0.3s; z-index: -1;
}
.btn-primary:hover:not(:disabled)::before { opacity: 1; }
.btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(37,99,235,0.4); }

.btn-glass {
  background: rgba(255,255,255,0.7); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.9); color: #334155;
}
.btn-glass:hover:not(:disabled) { background: rgba(255,255,255,0.9); }

.btn-secondary {
  background: #f1f5f9; color: #334155; border: 1px solid #e2e8f0;
}
.btn-secondary:hover:not(:disabled) { background: #e2e8f0; }

.btn-ghost {
  background: transparent; color: var(--muted); border: 1px solid #e2e8f0;
}
.btn-ghost:hover:not(:disabled) { background: #f8fafc; }

.btn-sm  { padding: .375rem .875rem; font-size: .875rem; border-radius: .75rem; }
.btn-full { width: 100%; margin-top: .75rem; }
.btn-lg  { padding: 1rem 2.5rem; font-size: 1.125rem; border-radius: 1.25rem; }
.btn-xl  { padding: 1.1rem 3rem; font-size: 1.2rem; border-radius: 1.25rem; }

/* ── Navbar ───────────────────────────────────────────────────────────────── */
.navbar {
  position: sticky; top: 0; z-index: 100;
  padding: .75rem 1.5rem;
}
.navbar-inner {
  max-width: 64rem; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}
.navbar-logo { height: 2rem; width: auto; }
.navbar-nav  { display: none; gap: 2rem; font-size: .875rem; font-weight: 500; color: #475569; }
.navbar-nav a:hover { color: var(--accent); }
.navbar-right { display: flex; align-items: center; gap: .75rem; }

#credits-badge {
  display: flex; align-items: center; gap: .35rem;
  background: #eff6ff; border: 1px solid #bfdbfe;
  border-radius: 9999px; padding: .25rem .75rem .25rem .625rem;
}
#credits-badge img { width: 16px; height: 16px; }
#credits-value { font-size: .9rem; font-weight: 900; color: #2563eb; }
#buy-credits-btn {
  width: 1.25rem; height: 1.25rem;
  background: #10b981; color: #fff;
  border: none; border-radius: 50%;
  font-size: .75rem; font-weight: 900; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
#buy-credits-btn:hover { background: #059669; }

.user-menu-btn {
  display: flex; align-items: center; gap: .4rem;
  background: none; border: none; cursor: pointer;
  transition: opacity .15s;
}
.user-menu-btn:hover { opacity: .75; }
.user-name { font-size: .875rem; color: #64748b; font-weight: 500; max-width: 90px; }
.user-chevron { width: .875rem; height: .875rem; color: #94a3b8; transition: transform .15s; }
.user-chevron.open { transform: rotate(180deg); }
.user-avatar { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; }

/* ── User dropdown ────────────────────────────────────────────────────────── */
.user-dropdown {
  position: absolute; z-index: 999;
  background: #fff; border: 1px solid #f1f5f9;
  border-radius: 1rem; box-shadow: 0 10px 40px rgba(0,0,0,0.12);
  padding: .375rem 0; min-width: 13rem;
}
.dropdown-item {
  display: flex; align-items: center; gap: .75rem;
  width: 100%; padding: .625rem 1rem;
  background: none; border: none; cursor: pointer;
  font-size: .875rem; color: #334155; text-align: left;
  transition: background .15s;
}
.dropdown-item:hover { background: #f8fafc; }
.dropdown-divider { border: none; border-top: 1px solid #f1f5f9; margin: .25rem 0; }

/* ── Login page ───────────────────────────────────────────────────────────── */
#login-screen {
  min-height: 100vh; display: flex; align-items: center;
  justify-content: center; padding: 1.5rem; overflow: hidden;
  position: relative;
}
.login-card {
  position: relative; z-index: 10; width: 100%; max-width: 28rem;
  padding: 2.5rem 3rem; border-radius: 2rem; text-align: center;
  box-shadow: 0 25px 50px rgba(0,0,0,0.1);
}
.login-back {
  position: absolute; top: 1.25rem; left: 1.5rem;
  background: none; border: none; cursor: pointer;
  font-size: .875rem; color: #94a3b8; display: flex; align-items: center; gap: .25rem;
  transition: color .15s;
}
.login-back:hover { color: #475569; }
.login-whale { display: inline-block; margin-bottom: 1.5rem; margin-top: .5rem; }
.login-whale img { width: 96px; height: 96px; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15)); }
.login-title { font-size: 1.875rem; font-weight: 900; color: #1e293b; line-height: 1.2; margin-bottom: .75rem; }
.login-subtitle { font-size: 1rem; font-weight: 600; color: #64748b; margin-bottom: .25rem; }
.login-desc { font-size: .875rem; color: #94a3b8; line-height: 1.6; margin-bottom: .5rem; }
.login-features {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem .75rem;
  font-size: .875rem; color: #64748b; margin-bottom: 2rem;
}
.login-features .check { color: #10b981; font-weight: 700; }
.login-features .sep   { color: #cbd5e1; }
.login-widget-wrap {
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; border-radius: 1rem; padding: .5rem;
  background: rgba(37,99,235,0.06); border: 1px solid rgba(37,99,235,0.12);
}
.login-terms { font-size: .75rem; color: #94a3b8; margin-top: 1.5rem; line-height: 1.6; max-width: 18rem; margin-left: auto; margin-right: auto; }
.spinner {
  display: flex; align-items: center; gap: .5rem; justify-content: center;
  font-size: .875rem; color: #94a3b8; padding: 1rem 0;
}
.spinner-ring {
  width: 1rem; height: 1rem; border: 2px solid #e2e8f0;
  border-top-color: #3b82f6; border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Main app (authenticated) ─────────────────────────────────────────────── */
#main-app { min-height: 100vh; display: flex; flex-direction: column; }
.app-body { flex: 1; width: 100%; max-width: 64rem; margin: 0 auto; padding: 1.25rem 1rem 2rem; }

/* ── Dash tabs ────────────────────────────────────────────────────────────── */
.dash-tabs {
  display: flex; gap: .375rem;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 1.75rem;
}
.dash-tab {
  background: none; border: none; cursor: pointer;
  padding: .75rem 1.25rem; font-size: .95rem; color: #64748b;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.dash-tab:hover { color: #1e293b; }
.dash-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 700; }

.dash-panel { display: none; }
.dash-panel.active { display: block; }

/* ── Campaign cards ───────────────────────────────────────────────────────── */
.campaign-card {
  background: rgba(255,255,255,0.8); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 1.25rem; padding: 1rem 1.25rem;
  margin-bottom: .625rem;
  display: flex; align-items: center; gap: 1rem;
  transition: all .3s;
}
.campaign-card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.08); }
.camp-info { flex: 1; min-width: 0; }
.camp-name { font-weight: 700; margin-bottom: .15rem; color: #1e293b; }
.camp-meta { font-size: .8rem; color: #64748b; }
.camp-stats { font-size: .85rem; color: #64748b; white-space: nowrap; }

/* Status badges */
.badge {
  display: inline-block; font-size: .7rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .05em;
  padding: .2rem .6rem; border-radius: 9999px;
}
.badge-pending   { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.badge-active    { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.badge-paused    { background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; }
.badge-completed { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.badge-rejected  { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.badge-cancelled { background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; }

/* ── Create form ──────────────────────────────────────────────────────────── */
.form-card {
  background: rgba(255,255,255,0.8); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 1.5rem; padding: 2rem; max-width: 36rem;
}
.form-card h2 { font-size: 1.3rem; font-weight: 900; color: #1e293b; margin-bottom: 1.5rem; }
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; font-size: .875rem; color: #64748b; margin-bottom: .4rem; font-weight: 600; }
.form-group input, .form-group select {
  width: 100%; padding: .625rem .875rem;
  background: rgba(255,255,255,0.8); border: 1px solid #e2e8f0; border-radius: .75rem;
  color: #1e293b; outline: none; transition: border-color .15s;
}
.form-group input:focus, .form-group select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.field-hint { font-size: .8rem; color: #94a3b8; margin-top: .35rem; }

.type-grid { display: flex; gap: .625rem; flex-wrap: wrap; }
.type-btn {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: .75rem 1rem; border-radius: .75rem; cursor: pointer;
  background: rgba(255,255,255,0.7); border: 2px solid #e2e8f0; color: #334155;
  font-size: .85rem; font-weight: 600; transition: all .15s;
}
.type-btn img { width: 32px; height: 32px; }
.type-btn.active { border-color: var(--accent); background: rgba(37,99,235,0.08); color: var(--accent); }

.bot-check {
  background: rgba(255,255,255,0.6); border: 1px solid #e2e8f0;
  border-radius: .875rem; padding: 1rem; margin-bottom: 1.25rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
}
.bot-check p { flex: 1 1 100%; font-size: .875rem; margin: 0; color: #334155; }
#bot-check-status { font-size: .875rem; font-weight: 700; }

/* ── Buy Credits ──────────────────────────────────────────────────────────── */
.buy-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem;
}
.buy-header h2 { font-size: 1.3rem; font-weight: 900; color: #1e293b; }
.packages-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem;
}
.package-card {
  background: rgba(255,255,255,0.8); backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 1.25rem; padding: 1.5rem 1rem; text-align: center;
  cursor: pointer; transition: all .2s; position: relative;
}
.package-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(37,99,235,0.15); }
.pkg-credits { font-size: 1.5rem; font-weight: 900; color: var(--accent); }
.pkg-label   { font-size: .75rem; color: #94a3b8; margin-bottom: .5rem; }
.pkg-price   { font-size: 1rem; font-weight: 700; color: #1e293b; }
.pkg-badge {
  position: absolute; top: -10px; right: 10px;
  background: var(--green); color: #fff;
  font-size: .7rem; font-weight: 900; padding: .2rem .55rem; border-radius: 9999px;
}
#ton-connect-button { display: flex; }

/* ── Modal ────────────────────────────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15,23,42,0.5); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.modal-content {
  background: #fff; border-radius: 1.5rem;
  padding: 2rem; width: 100%; max-width: 25rem;
  box-shadow: 0 25px 60px rgba(0,0,0,0.2);
}
.modal-content h3 { font-size: 1.2rem; font-weight: 900; color: #1e293b; margin-bottom: 1rem; }
.modal-content p  { font-size: .95rem; color: #334155; margin-bottom: .5rem; }
.modal-detail-row { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0; border-bottom: 1px solid #f1f5f9; font-size: .9rem; }
.modal-detail-row:last-of-type { border-bottom: none; }
.modal-detail-label { color: #64748b; }
.modal-detail-value { font-weight: 700; color: #1e293b; }

/* ── Ocean scene ──────────────────────────────────────────────────────────── */
.ocean-scene {
  position: relative; width: 100%; height: 280px;
  overflow: hidden; flex-shrink: 0;
  background: linear-gradient(180deg, #7dd3fc 0%, #38bdf8 20%, #0ea5e9 45%, #0284c7 70%, #0369a1 100%);
}
.ocean-wave { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.ocean-wave svg { position: absolute; bottom: 0; left: 0; width: 200%; height: auto; display: block; }
.ocean-wave-a svg { animation: wave-a 12s linear infinite; z-index: 1; }
.ocean-wave-b svg { animation: wave-b 18s linear infinite; z-index: 2; }
.ocean-wave-c svg { animation: wave-c  8s linear infinite; z-index: 3; }
.ocean-whale-1 {
  position: absolute; bottom: 60px; left: 0; width: 160px; height: auto; z-index: 6;
  animation: whale-ltr 36s linear infinite;
  filter: drop-shadow(0 6px 14px rgba(2,132,199,0.5));
}
.ocean-whale-2 {
  position: absolute; bottom: 90px; left: 0; width: 110px; height: auto; z-index: 4;
  animation: whale-rtl 52s linear infinite 22s; opacity: 0;
  filter: drop-shadow(0 5px 10px rgba(2,132,199,0.4));
}
.ocean-footer {
  background: #0369a1; border-top: 1px solid rgba(255,255,255,0.15);
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer {
  background: #0369a1; padding: 1.75rem 1.5rem;
}
.site-footer-inner {
  max-width: 64rem; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
  gap: 1rem;
}
.site-footer img { height: 1.75rem; width: auto; opacity: .9; }
.site-footer-copy { color: #bae6fd; font-size: .875rem; }
.site-footer-links { display: flex; gap: 1.5rem; }
.site-footer-links a { color: #7dd3fc; font-size: .875rem; transition: color .15s; }
.site-footer-links a:hover { color: #fff; }

/* ── Scroll to top ────────────────────────────────────────────────────────── */
#scroll-top {
  position: fixed; bottom: 2rem; right: 1.5rem; z-index: 50;
  width: 3rem; height: 3rem; border-radius: .875rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  cursor: pointer; transition: all .3s; opacity: 0; transform: translateY(16px) scale(0.8);
  background: none;
}
#scroll-top.visible { opacity: 1; transform: translateY(0) scale(1); }
#scroll-top:hover { background: rgba(255,255,255,0.9); }
#scroll-top svg { width: 1.25rem; height: 1.25rem; color: #2563eb; }

/* ── Home sections ────────────────────────────────────────────────────────── */
.section { position: relative; z-index: 10; padding: 6rem 1.5rem; }
.section-inner { max-width: 64rem; margin: 0 auto; }
.section-badge {
  display: inline-block; font-size: .75rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .1em;
  padding: .4rem 1rem; border-radius: 9999px; margin-bottom: 1rem;
}
.badge-blue   { background: #eff6ff; color: #2563eb; }
.badge-violet { background: #f5f3ff; color: #7c3aed; }
.badge-green  { background: #ecfdf5; color: #059669; }
.section-title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 900; color: #1e293b; line-height: 1.1; }

/* ── Stat cards ───────────────────────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 5rem; max-width: 48rem; margin-left: auto; margin-right: auto; }
.stat-card { border-radius: 1.5rem; padding: 2rem; text-align: center; }
.stat-icon  { font-size: 1.875rem; margin-bottom: .5rem; }
.stat-value { font-size: 1.875rem; font-weight: 900; color: #1e293b; }
.stat-label { font-size: .875rem; color: #64748b; font-weight: 500; margin-top: .25rem; }

/* ── Step cards ───────────────────────────────────────────────────────────── */
.steps-grid { display: grid; gap: 1.5rem; }
.step-card { border-radius: 1.5rem; padding: 2rem; text-align: center; }
.step-num  { font-size: .75rem; font-weight: 900; color: #93c5fd; letter-spacing: .15em; margin-bottom: .75rem; }
.step-icon { font-size: 3rem; margin-bottom: 1rem; }
.step-title { font-size: 1.25rem; font-weight: 900; color: #1e293b; margin-bottom: .75rem; }
.step-desc  { font-size: .875rem; color: #64748b; line-height: 1.6; }

/* ── Feature cards ────────────────────────────────────────────────────────── */
.features-grid { display: grid; gap: 1.25rem; }
.feature-card { border-radius: 1.5rem; padding: 1.75rem; }
.feature-card img  { width: 44px; height: 44px; margin-bottom: 1rem; }
.feature-card h3   { font-size: 1.25rem; font-weight: 900; color: #1e293b; margin-bottom: .5rem; }
.feature-card p    { font-size: .875rem; color: #64748b; line-height: 1.6; }
.border-blue   { border-top: 4px solid #60a5fa; }
.border-violet { border-top: 4px solid #a78bfa; }
.border-green  { border-top: 4px solid #34d399; }

/* ── Pricing ──────────────────────────────────────────────────────────────── */
.pricing-grid { display: grid; gap: 1.5rem; }
.pricing-card { border-radius: 2rem; padding: 2.5rem 3rem; text-align: center; box-shadow: 0 25px 60px rgba(0,0,0,0.1); }
.pricing-from { font-size: .875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #64748b; margin-bottom: .75rem; }
.pricing-price { font-size: 5rem; font-weight: 900; color: #1e293b; line-height: 1; }
.pricing-unit  { font-size: 1.25rem; font-weight: 700; color: var(--accent); margin-bottom: 2rem; }
.pricing-perks { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 2.5rem; }
.pricing-perk  { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: #475569; justify-content: center; }
.cta-card { border-radius: 2rem; padding: 2.5rem; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: 0 25px 60px rgba(0,0,0,0.1); }
.cta-whale { display: inline-block; margin-bottom: 1.5rem; }
.cta-whale img { width: 96px; height: 96px; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15)); }
.cta-title { font-size: 2.25rem; font-weight: 900; color: #1e293b; margin-bottom: 1rem; }
.cta-desc  { font-size: 1.1rem; color: #64748b; margin-bottom: 2rem; max-width: 26rem; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero { position: relative; z-index: 10; padding: 2rem 1.5rem 6rem; }
.hero-inner { max-width: 64rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2rem; }
.hero-text { text-align: center; }
.hero-title { font-size: clamp(2.5rem, 7vw, 3.75rem); font-weight: 900; color: #1e293b; line-height: 1.1; margin-bottom: 1.5rem; }
.hero-sub   { font-size: 1.2rem; color: #64748b; line-height: 1.6; margin-bottom: 2.5rem; max-width: 36rem; margin-left: auto; margin-right: auto; }
.hero-btns  { display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.hero-whale { display: flex; justify-content: center; }
.hero-whale img { width: 220px; height: 220px; filter: drop-shadow(0 15px 30px rgba(0,0,0,0.15)); transform: scaleX(-1); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .hero-btns { flex-direction: row; justify-content: center; }
  .stat-grid  { grid-template-columns: repeat(4, 1fr); }
  .steps-grid { grid-template-columns: repeat(3, 1fr); }
  .features-grid { grid-template-columns: repeat(3, 1fr); }
  .pricing-grid  { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
  .hero-inner { flex-direction: row; }
  .hero-text  { text-align: left; }
  .hero-sub   { margin-left: 0; margin-right: 0; }
  .hero-btns  { justify-content: flex-start; }
  .hero-whale img { width: 280px; height: 280px; }
  .navbar-nav { display: flex; }
  .site-footer-inner { flex-direction: row; justify-content: space-between; }
}

@media (min-width: 1024px) {
  .hero-whale img { width: 340px; height: 340px; }
  .app-body { padding: 1.75rem 2rem 3rem; }
}

@media (max-width: 480px) {
  .login-card { padding: 2rem 1.5rem; }
  .form-card  { padding: 1.25rem; }
  .pricing-card { padding: 2rem 1.5rem; }
}

/* ════════════════════════════════════════════════════════════════════════════
   NEW LAYOUT CLASSES  (matching advertise.php restructured HTML)
════════════════════════════════════════════════════════════════════════════ */

/* ── Min-height wrapper ───────────────────────────────────────────────────── */
.min-h-screen { min-height: 100vh; }
.overflow-hidden { overflow: hidden; }

/* ── Drifting background cloud ────────────────────────────────────────────── */
.cloud-drift-bg {
  position: fixed; top: 2.5rem; left: 0; width: 320px; z-index: 0;
  opacity: .3; pointer-events: none;
  animation: drift 60s linear infinite;
}

/* ── Landing navbar ───────────────────────────────────────────────────────── */
.landing-nav {
  position: relative; z-index: 20; padding: 1.25rem 1.5rem;
}
.landing-nav-inner {
  max-width: 64rem; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}
.navbar-brand { display: flex; }
.navbar-brand .navbar-logo { height: 2.5rem; width: auto; }
.nav-links {
  display: none; gap: 2rem; font-size: .875rem; font-weight: 500; color: #475569;
}
.nav-links a { transition: color .15s; }
.nav-links a:hover { color: var(--accent); }

/* ── Clouds (positioned) ──────────────────────────────────────────────────── */
.cloud {
  position: absolute; pointer-events: none;
}
.cloud-left-1    { left: 5%;  top: 0;    width: 14rem; opacity: .8; animation: float-slow   9s ease-in-out infinite; }
.cloud-right-1   { right: 8%; top: 2.5rem; width: 18rem; opacity: .7; animation: float-medium 12s ease-in-out infinite; }
.cloud-top-center{ left: 35%; top: -1.25rem; width: 10rem; opacity: .6; animation: float-fast 7s ease-in-out infinite; }
.cloud-how-center{ left: 50%; transform: translateX(-50%); top: -2.5rem; width: 24rem; opacity: .4; animation: float-medium 12s ease-in-out infinite; }
.cloud-pricing-right { right: 10%; top: 2.5rem; width: 16rem; opacity: .5; animation: float-slow 9s ease-in-out infinite; }
.cloud-login-left  { left: 4%;  top: 8%;  width: 12rem; opacity: .6; animation: float-slow   9s ease-in-out infinite; }
.cloud-login-right { right: 5%; top: 15%; width: 16rem; opacity: .5; animation: float-medium 12s ease-in-out infinite; }
.cloud-login-top   { left: 40%; top: 5%;  width: 8rem;  opacity: .4; animation: float-fast    7s ease-in-out infinite; }

/* ── Birds ────────────────────────────────────────────────────────────────── */
.bird {
  position: absolute; fill: none; pointer-events: none;
}
.bird-1 { left: 15%; top: 4rem;  width: 2.5rem; opacity: .6; animation: bird-fly-1 7s ease-in-out infinite; }
.bird-2 { right: 20%; top: 6rem; width: 2rem;   opacity: .4; animation: bird-fly-2 9s ease-in-out infinite 1.5s; }
.bird-3 { left: 60%; top: 2rem;  width: 1.5rem; opacity: .5; animation: bird-fly-3 11s ease-in-out infinite 3s; }

/* ── Hero section ─────────────────────────────────────────────────────────── */
.hero-section {
  position: relative; z-index: 10;
  padding: 2rem 1.5rem 6rem;
}
.hero-inner {
  max-width: 64rem; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 3rem;
}
.hero-text { flex: 1; text-align: center; }
.hero-title {
  font-size: clamp(2.5rem, 7vw, 3.75rem); font-weight: 900;
  color: #1e293b; line-height: 1.1; margin-bottom: 1.5rem;
}
.hero-subtitle {
  font-size: 1.2rem; color: #64748b; line-height: 1.6;
  margin-bottom: 2.5rem; max-width: 36rem;
}
.hero-actions { display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.hero-whale { flex: 1; display: flex; justify-content: center; align-items: center; }
.hero-whale-img {
  width: 220px; height: 220px; object-fit: contain;
  filter: drop-shadow(0 15px 30px rgba(0,0,0,0.15)); transform: scaleX(-1);
}

/* ── Stats row ────────────────────────────────────────────────────────────── */
.stats-row {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
  max-width: 48rem; margin: 5rem auto 0;
}
.stat-card { border-radius: 1.5rem; padding: 1.5rem 1rem; text-align: center; }

/* ── Sections ─────────────────────────────────────────────────────────────── */
.section-how, .section-features, .section-pricing {
  position: relative; z-index: 10; padding: 6rem 1.5rem;
}
.section-inner { max-width: 64rem; margin: 0 auto; }
.section-header { text-align: center; margin-bottom: 4rem; }
.section-title {
  font-size: clamp(2rem, 5vw, 3rem); font-weight: 900;
  color: #1e293b; line-height: 1.1; margin-top: .5rem;
}
.section-subtitle { color: #64748b; font-size: 1.1rem; max-width: 28rem; margin: 1rem auto 0; }

/* ── Badge (section label) ────────────────────────────────────────────────── */
.badge {
  display: inline-block; font-size: .75rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .1em;
  padding: .4rem 1rem; border-radius: 9999px;
}
.badge-blue   { background: #eff6ff; color: #2563eb; }
.badge-violet { background: #f5f3ff; color: #7c3aed; }
.badge-emerald { background: #ecfdf5; color: #059669; }

/* ── Steps grid ───────────────────────────────────────────────────────────── */
.steps-grid { display: grid; gap: 1.5rem; }
.step-card {
  border-radius: 1.5rem; padding: 2rem; text-align: center;
}
.step-card h3 { font-size: 1.25rem; font-weight: 900; color: #1e293b; margin: .75rem 0; }
.step-card p  { font-size: .875rem; color: #64748b; line-height: 1.6; }

/* ── Features grid ────────────────────────────────────────────────────────── */
.features-grid { display: grid; gap: 1.25rem; }
.feature-card {
  border-radius: 1.5rem; padding: 1.75rem;
  transition: all .3s;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0,0,0,0.12); }
.feature-icon-img { width: 44px; height: 44px; margin-bottom: 1rem; }
.feature-card h3 { font-size: 1.25rem; font-weight: 900; color: #1e293b; margin-bottom: .5rem; }
.feature-card p  { font-size: .875rem; color: #64748b; line-height: 1.6; }
.border-top-blue   { border-top: 4px solid #60a5fa; }
.border-top-violet { border-top: 4px solid #a78bfa; }
.border-top-emerald{ border-top: 4px solid #34d399; }

/* ── Pricing ──────────────────────────────────────────────────────────────── */
.pricing-grid {
  display: grid; gap: 1.5rem;
}
.pricing-card {
  border-radius: 2rem; padding: 2.5rem 3rem; text-align: center;
  box-shadow: 0 25px 60px rgba(0,0,0,0.1);
  display: flex; flex-direction: column; justify-content: space-between;
}
.price-label { font-size: .875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: #64748b; margin-bottom: .75rem; }
.price-amount { font-size: 5rem; font-weight: 900; color: #1e293b; line-height: 1; }
.price-sub    { font-size: 1.25rem; font-weight: 700; color: var(--accent); margin-bottom: 2rem; }
.price-features { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 2.5rem; }
.price-feature  { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: #475569; justify-content: center; }
.pricing-cta-card {
  border-radius: 2rem; padding: 2.5rem; box-shadow: 0 25px 60px rgba(0,0,0,0.1);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.pricing-whale-wrap { display: inline-block; margin-bottom: 1.5rem; }
.pricing-whale-img  { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15)); }
.pricing-cta-card h2 { font-size: 2.25rem; font-weight: 900; color: #1e293b; margin-bottom: 1rem; }
.pricing-cta-card p  { font-size: 1.1rem; color: #64748b; margin-bottom: 2rem; max-width: 26rem; }

/* ── Ocean footer ─────────────────────────────────────────────────────────── */
.ocean-footer { background: #0369a1; padding: 1.75rem 1.5rem; border-top: 1px solid rgba(255,255,255,0.15); }
.footer-inner {
  max-width: 64rem; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.footer-logo  { height: 1.75rem; width: auto; opacity: .9; }
.footer-copy  { color: #bae6fd; font-size: .875rem; }
.footer-links { display: flex; gap: 1.5rem; }
.footer-links a { color: #7dd3fc; font-size: .875rem; transition: color .15s; }
.footer-links a:hover { color: #fff; }

/* ── Login page wrapper ───────────────────────────────────────────────────── */
.login-page-wrap {
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; overflow: hidden; position: relative;
}
.login-card {
  position: relative; z-index: 10; width: 100%; max-width: 28rem;
  padding: 2.5rem 3rem; border-radius: 2rem; text-align: center;
  box-shadow: 0 25px 50px rgba(0,0,0,0.1);
}
.login-back-btn {
  position: absolute; top: 1.25rem; left: 1.5rem;
  background: none; border: none; cursor: pointer;
  font-size: .875rem; color: #94a3b8;
  display: flex; align-items: center; gap: .25rem; transition: color .15s;
}
.login-back-btn:hover { color: #475569; }
.login-whale-wrap { display: inline-block; margin-bottom: 1.5rem; margin-top: .5rem; }
.login-whale-img  { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15)); }
.login-title     { font-size: 1.875rem; font-weight: 900; color: #1e293b; line-height: 1.2; margin-bottom: .75rem; }
.login-with-text { font-size: 1rem; font-weight: 600; color: #64748b; margin-bottom: .25rem; }
.login-desc      { font-size: .875rem; color: #94a3b8; line-height: 1.6; margin-bottom: .5rem; }
.login-features  {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem .75rem;
  font-size: .875rem; color: #64748b; margin-bottom: 2rem;
}
.login-features .check { color: #10b981; font-weight: 700; }
.login-features .dot   { color: #cbd5e1; }
.tg-widget-wrap {
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
#tg-widget-container {
  min-height: 52px; display: flex; align-items: center; justify-content: center;
  border-radius: 1rem; padding: .5rem .75rem;
  background: rgba(37,99,235,0.06); border: 1px solid rgba(37,99,235,0.12);
  width: 100%;
}
.login-spinner-wrap {
  display: flex; align-items: center; gap: .5rem;
  font-size: .875rem; color: #94a3b8; padding: 1rem 0;
}
.spinner {
  display: inline-block; width: 1rem; height: 1rem;
  border: 2px solid #e2e8f0; border-top-color: #3b82f6;
  border-radius: 50%; animation: spin .6s linear infinite; flex-shrink: 0;
}
.auth-error { color: var(--red); font-size: .875rem; }
.login-tos  { font-size: .75rem; color: #94a3b8; margin-top: 1.5rem; line-height: 1.6; max-width: 18rem; margin-left: auto; margin-right: auto; }

/* ── Dashboard page ───────────────────────────────────────────────────────── */
.dashboard-page { display: flex; flex-direction: column; }

/* Dashboard navbar */
.dash-navbar {
  position: sticky; top: 0; z-index: 20;
  padding: .75rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.6);
}
.dash-navbar-inner {
  max-width: 64rem; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}
.dash-navbar-left  { display: flex; align-items: center; gap: .625rem; min-width: 0; }
.dash-navbar-right { display: flex; align-items: center; gap: .625rem; flex-shrink: 0; }
.dash-back-btn {
  background: none; border: none; cursor: pointer;
  font-size: 1rem; color: #94a3b8; transition: color .15s; flex-shrink: 0;
}
.dash-back-btn:hover { color: #475569; }
.dash-logo { height: 2rem; width: auto; flex-shrink: 0; }
.advertiser-badge {
  display: none; font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; background: #eff6ff; color: #2563eb;
  padding: .2rem .625rem; border-radius: 9999px; border: 1px solid #bfdbfe;
  white-space: nowrap;
}

/* Credits badge */
.credits-badge-wrap {
  display: flex; align-items: center; gap: .35rem;
  background: #eff6ff; border: 1px solid #bfdbfe;
  border-radius: 9999px; padding: .25rem .25rem .25rem .625rem;
}
.credits-icon   { width: 16px; height: 16px; flex-shrink: 0; }
.credits-amount { font-size: .9rem; font-weight: 900; color: #2563eb; }
.credits-add-btn {
  width: 1.25rem; height: 1.25rem; display: inline-flex; align-items: center; justify-content: center;
  background: #10b981; border: none; border-radius: 50%; padding: 0;
  cursor: pointer; transition: background .15s; flex-shrink: 0;
}
.credits-add-btn:hover { background: #059669; }

/* User menu */
.user-menu-wrap  { position: relative; }
.user-menu-btn {
  display: flex; align-items: center; gap: .375rem;
  background: none; border: none; cursor: pointer; transition: opacity .15s;
}
.user-menu-btn:hover { opacity: .75; }
.user-menu-name { font-size: .875rem; color: #64748b; font-weight: 500; max-width: 5.5rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chevron { width: .875rem; height: .875rem; color: #94a3b8; transition: transform .15s; }
.chevron.open { transform: rotate(180deg); }
.user-avatar { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.user-dropdown {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 999;
  background: #fff; border: 1px solid #f1f5f9;
  border-radius: 1rem; box-shadow: 0 10px 40px rgba(0,0,0,0.12);
  padding: .375rem 0; min-width: 13rem;
}
.dropdown-item {
  display: flex; align-items: center; gap: .75rem;
  width: 100%; padding: .625rem 1rem;
  background: none; border: none; cursor: pointer;
  font-size: .875rem; color: #334155; text-align: left; transition: background .15s;
}
.dropdown-item:hover { background: #f8fafc; }
.dropdown-item-danger { color: var(--red); }
.dropdown-item-danger:hover { background: #fff5f5; }
.dropdown-divider { border: none; border-top: 1px solid #f1f5f9; margin: .25rem 0; }

/* Dashboard body */
.dash-body { flex: 1; width: 100%; max-width: 64rem; margin: 0 auto; padding: 1.25rem 1rem 2rem; }

/* Loading state */
.loading-state {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  color: #94a3b8; font-size: .875rem; padding: 3rem 0;
}

/* Create form */
.form-card { border-radius: 1.5rem; padding: 2rem; max-width: 36rem; }
.form-card-title { font-size: 1.3rem; font-weight: 900; color: #1e293b; margin-bottom: 1.5rem; }
.form-label { display: block; font-size: .875rem; color: #64748b; margin-bottom: .4rem; font-weight: 600; }
.form-input {
  width: 100%; padding: .625rem .875rem;
  background: rgba(255,255,255,0.8); border: 1px solid #e2e8f0; border-radius: .75rem;
  color: #1e293b; outline: none; transition: border-color .15s;
}
.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }

.bot-check {
  border-radius: .875rem; padding: 1rem; margin-bottom: 1.25rem;
  display: flex; flex-direction: column; gap: .75rem;
}
.bot-check p { font-size: .875rem; color: #334155; margin: 0; }
.bot-check-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.bot-status { font-size: .875rem; font-weight: 700; }

/* Buy credits */
.buy-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  border-radius: 1.25rem; padding: 1.5rem; margin-bottom: 1.5rem;
}
.buy-title { font-size: 1.3rem; font-weight: 900; color: #1e293b; }
.buy-desc  { font-size: .875rem; color: #64748b; margin-top: .25rem; }

/* Modal overlay */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15,23,42,0.55); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.modal-card {
  border-radius: 1.5rem; padding: 2rem; width: 100%; max-width: 25rem;
  box-shadow: 0 25px 60px rgba(0,0,0,0.2);
}

/* ── Payment modal redesign ── */
.pay-modal-card {
  background: #fff;
  border-radius: 1.75rem;
  padding: 2rem 1.75rem;
  width: 100%; max-width: 22rem;
  box-shadow: 0 32px 80px rgba(15,23,42,0.25);
}
.pay-modal-icon  { font-size: 3rem; text-align: center; margin-bottom: 1rem; }
.pay-modal-title { font-size: 1.2rem; font-weight: 900; color: #1e293b; margin-bottom: .375rem; text-align: center; }
.pay-modal-sub   { font-size: .875rem; color: #94a3b8; text-align: center; margin-bottom: 1.5rem; }
.pay-ton-btn-wrap { display: flex; justify-content: center; margin-bottom: 1rem; }

.pay-details { margin: 1rem 0 1.5rem; border: 1px solid #f1f5f9; border-radius: 1rem; overflow: hidden; }
.pay-detail-row   { display: flex; justify-content: space-between; align-items: center; padding: .65rem 1rem; border-bottom: 1px solid #f8fafc; font-size: .875rem; }
.pay-detail-row:last-child { border-bottom: none; }
.pay-detail-label { color: #94a3b8; }
.pay-detail-value { font-weight: 700; color: #1e293b; }
.pay-amount       { color: #2563eb; font-size: 1rem; }

.pay-confirm-btn {
  width: 100%; padding: .875rem; border-radius: 1rem; border: none;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: #fff; font-size: .95rem; font-weight: 800;
  cursor: pointer; transition: opacity .15s, transform .15s;
  margin-bottom: .625rem;
}
.pay-confirm-btn:hover:not(:disabled) { opacity: .9; transform: translateY(-1px); }
.pay-confirm-btn:disabled { opacity: .55; cursor: default; }

.pay-cancel-btn {
  width: 100%; padding: .625rem; border-radius: 1rem;
  background: none; border: none; color: #94a3b8;
  font-size: .875rem; font-weight: 600; cursor: pointer; transition: color .15s;
}
.pay-cancel-btn:hover { color: #475569; }
.modal-wide { max-width: 40rem; }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.modal-title  { font-size: 1.2rem; font-weight: 900; color: #1e293b; }
.modal-close-btn {
  background: none; border: none; cursor: pointer; font-size: 1rem;
  color: #94a3b8; width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center;
  border-radius: .5rem; transition: all .15s;
}
.modal-close-btn:hover { background: #f1f5f9; color: #334155; }
.modal-details { margin-bottom: 1.25rem; }
.modal-detail-row { display: flex; justify-content: space-between; padding: .5rem 0; border-bottom: 1px solid #f1f5f9; font-size: .9rem; }
.modal-detail-row:last-of-type { border-bottom: none; }
.modal-detail-label { color: #64748b; }
.modal-detail-value { font-weight: 700; color: #1e293b; }

/* Transactions list */
.transactions-list { max-height: 60vh; overflow-y: auto; }
.tx-row { display: flex; justify-content: space-between; align-items: center; padding: .75rem 0; border-bottom: 1px solid #f1f5f9; font-size: .875rem; }
.tx-row:last-child { border-bottom: none; }
.tx-type  { color: #334155; font-weight: 600; }
.tx-date  { color: #94a3b8; font-size: .8rem; }
.tx-amount { font-weight: 700; }
.tx-amount.positive { color: var(--green); }
.tx-amount.negative { color: var(--red); }

/* Account modal */
.account-desc    { font-size: .9rem; color: #334155; margin-bottom: 1.25rem; }
.account-actions { display: flex; flex-direction: column; gap: .75rem; }
.btn-danger {
  background: var(--red); color: #fff; border: none;
}
.btn-danger:hover:not(:disabled) { background: #dc2626; transform: translateY(-1px); }

/* Scroll to top */
.scroll-top-btn {
  position: fixed; bottom: 2rem; right: 1.5rem; z-index: 50;
  width: 3rem; height: 3rem; border-radius: .875rem; border: 1px solid rgba(255,255,255,0.8);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12); cursor: pointer; transition: all .3s;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(16px) scale(0.8); pointer-events: none;
  background: rgba(255,255,255,0.7); backdrop-filter: blur(20px);
}
.scroll-top-btn.visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.scroll-top-btn:hover   { background: rgba(255,255,255,0.9); }
.scroll-top-btn svg     { width: 1.25rem; height: 1.25rem; color: #2563eb; }

/* ════════════════════════════════════════════════════════════════════════════
   DASHBOARD VIEW SYSTEM
════════════════════════════════════════════════════════════════════════════ */

.dash-view-wrap { width: 100%; }

/* Spacing utility */
.dash-space-y > * + * { margin-top: 1.25rem; }

/* Typography */
.dash-h2       { font-size: 1.5rem; font-weight: 900; color: #1e293b; }
.dash-subtitle { font-size: .875rem; color: #64748b; margin-top: .2rem; }
.dash-label    { display: block; font-size: .875rem; font-weight: 600; color: #64748b; margin-bottom: .4rem; }
.dash-hint     { font-size: .8rem; color: #94a3b8; margin-top: .35rem; }
.dash-card     { border-radius: 1.25rem; padding: 1.25rem; }
.dash-card-title { font-size: 1rem; font-weight: 700; color: #1e293b; margin-bottom: .5rem; }
.dash-input {
  width: 100%; padding: .625rem .875rem;
  background: rgba(255,255,255,0.85); border: 1px solid #e2e8f0; border-radius: .75rem;
  color: #1e293b; outline: none; transition: border-color .15s; font-size: 1rem;
}
.dash-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }

/* List header */
.list-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: .75rem; }
.list-header-right { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.updated-badge { font-size: .75rem; color: #94a3b8; background: rgba(255,255,255,0.7); border: 1px solid #e2e8f0; border-radius: 9999px; padding: .2rem .75rem; }

/* Primary button (dash variant) */
.btn-dash-primary {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .4rem; padding: .6rem 1.25rem; border-radius: .875rem; border: none;
  background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff;
  font-weight: 700; font-size: .9rem; cursor: pointer;
  transition: all .25s; box-shadow: 0 4px 14px rgba(37,99,235,0.25);
}
.btn-dash-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,99,235,0.35); }
.btn-dash-primary:disabled { opacity: .45; cursor: not-allowed; }
.btn-full-wide { width: 100%; }
.btn-loading   { opacity: .7; cursor: not-allowed; }

/* Stats grid */
.stats-grid-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .875rem;
}
.dash-stat-card { border-radius: 1.25rem; padding: 1.25rem; display: flex; flex-direction: column; gap: .2rem; }
.stat-label-sm  { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #64748b; }
.stat-label-xs  { font-size: .7rem;  font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; }
.stat-val-blue  { font-size: 1.75rem; font-weight: 900; color: #2563eb; line-height: 1; }
.stat-val-green { font-size: 1.75rem; font-weight: 900; color: #059669; line-height: 1; }
.stat-val-dark  { font-size: 1.75rem; font-weight: 900; color: #1e293b; line-height: 1; }
.stat-val-md    { font-size: 1.25rem; font-weight: 900; color: #1e293b; }
.stat-val-blue-md { font-size: 1.25rem; font-weight: 900; color: #2563eb; }
.stat-sub       { font-size: .75rem; color: #94a3b8; }
.stat-buy-btn   {
  margin-top: .5rem; padding: .3rem .75rem; border-radius: 9999px;
  background: #2563eb; color: #fff; border: none; font-size: .75rem;
  font-weight: 700; cursor: pointer; transition: background .15s; align-self: flex-start;
}
.stat-buy-btn:hover { background: #1d4ed8; }

/* Status tabs */
.status-tabs-wrap  { overflow-x: auto; border-bottom: 1px solid #e2e8f0; }
.status-tabs-inner { display: flex; gap: .25rem; min-width: max-content; padding-bottom: 0; }
.status-tab {
  display: flex; align-items: center; gap: .375rem;
  padding: .625rem 1rem; border: none; background: none; cursor: pointer;
  font-size: .875rem; color: #64748b; border-bottom: 2px solid transparent;
  white-space: nowrap; transition: color .15s, border-color .15s;
}
.status-tab:hover { color: #1e293b; }
.tab-icon-sm  { font-size: .85rem; }
.tab-label-sm { font-weight: 500; }
.tab-count    { background: #f1f5f9; color: #64748b; font-size: .7rem; font-weight: 700; padding: .1rem .4rem; border-radius: 9999px; }
.tab-count-active { background: rgba(255,255,255,0.4); color: inherit; }

.tab-active-green  { color: #059669 !important; border-bottom-color: #059669; font-weight: 700; }
.tab-active-amber  { color: #d97706 !important; border-bottom-color: #d97706; font-weight: 700; }
.tab-active-red    { color: #dc2626 !important; border-bottom-color: #dc2626; font-weight: 700; }
.tab-active-slate  { color: #475569 !important; border-bottom-color: #475569; font-weight: 700; }
.tab-active-blue   { color: #2563eb !important; border-bottom-color: #2563eb; font-weight: 700; }

/* Empty state */
.empty-state { border-radius: 1.5rem; padding: 3rem 2rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.empty-icon  { font-size: 2.5rem; }
.empty-title { font-size: 1.125rem; font-weight: 700; color: #1e293b; }
.empty-sub   { font-size: .875rem; color: #64748b; max-width: 28rem; }

/* Campaign grid */
.camp-grid { display: grid; gap: .875rem; }
.camp-card { border-radius: 1.25rem; padding: 1.125rem; cursor: pointer; }
.camp-card-top   { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .625rem; }
.camp-card-left  { display: flex; align-items: center; gap: .625rem; min-width: 0; }
.camp-task-img   { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }
.camp-name       { font-weight: 700; color: #1e293b; font-size: .95rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.camp-meta-row   { font-size: .8rem; color: #64748b; margin-bottom: .5rem; }
.camp-note       { font-size: .8rem; border-radius: .5rem; padding: .5rem .75rem; margin-bottom: .5rem; }
.camp-note-red   { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.camp-note-amber { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.camp-note-slate { background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; }

/* Status badges */
.status-badge {
  display: inline-block; font-size: .7rem; font-weight: 900;
  text-transform: uppercase; letter-spacing: .05em;
  padding: .2rem .6rem; border-radius: 9999px; flex-shrink: 0;
}
.status-active    { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.status-pending   { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.status-paused    { background: #f8fafc; color: #475569; border: 1px solid #e2e8f0; }
.status-completed { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.status-cancelled { background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; }
.status-rejected  { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }

/* Progress bar */
.progress-track  { height: 6px; background: #e2e8f0; border-radius: 9999px; overflow: hidden; }
.progress-fill   { height: 100%; background: linear-gradient(90deg, #2563eb, #7c3aed); border-radius: 9999px; transition: width .4s ease; }
.progress-labels { display: flex; justify-content: space-between; font-size: .75rem; color: #94a3b8; margin-top: .25rem; }

/* Pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: .375rem; padding-top: .5rem; flex-wrap: wrap; }
.page-btn {
  min-width: 2rem; height: 2rem; padding: 0 .5rem; border-radius: .5rem;
  border: 1px solid #e2e8f0; background: rgba(255,255,255,0.8); cursor: pointer;
  font-size: .85rem; color: #334155; transition: all .15s;
}
.page-btn:hover:not(:disabled) { background: #eff6ff; border-color: #bfdbfe; color: #2563eb; }
.page-btn:disabled { opacity: .4; cursor: not-allowed; }
.page-btn-active   { background: #2563eb !important; color: #fff !important; border-color: #2563eb !important; font-weight: 700; }
.page-ellipsis     { font-size: .85rem; color: #94a3b8; padding: 0 .25rem; }

/* Back header */
.dash-back-header { display: flex; align-items: center; gap: 1rem; }
.back-arrow { background: none; border: none; font-size: 1.25rem; cursor: pointer; color: #64748b; transition: color .15s; flex-shrink: 0; }
.back-arrow:hover { color: #1e293b; }

/* Balance bar */
.balance-bar { border-radius: 1.25rem; padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; }
.balance-bar-left  { display: flex; align-items: center; gap: .625rem; }
.balance-bar-label { font-size: .875rem; color: #64748b; }
.balance-bar-val   { font-size: 1.25rem; font-weight: 900; color: #2563eb; }
.balance-big-val   { font-size: 1.75rem; font-weight: 900; color: #2563eb; }

/* Form error */
.form-error-banner { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: .75rem; padding: .625rem 1rem; font-size: .875rem; }

/* Create grid */
.create-grid { display: grid; gap: 1.25rem; }

/* Task type selector */
.type-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .625rem; }
.type-btn-card {
  display: flex; flex-direction: column; align-items: center; gap: .375rem;
  padding: .875rem .5rem; border-radius: .875rem; cursor: pointer;
  background: rgba(255,255,255,0.6); border: 2px solid #e2e8f0;
  font-size: .8rem; font-weight: 600; color: #475569; transition: all .15s;
}
.type-btn-card:hover   { border-color: #93c5fd; }
.type-btn-active       { border-color: #2563eb; background: rgba(37,99,235,0.07); color: #1d4ed8; }
.type-btn-img          { width: 36px; height: 36px; object-fit: contain; }
.type-btn-img-dim      { opacity: .45; }
.type-btn-label        { font-size: .78rem; }

/* Reward row */
.reward-row  { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .25rem; }
.reward-val  { font-size: 2rem; font-weight: 900; color: #2563eb; }
.reward-unit { font-size: .875rem; color: #64748b; }
.reward-usdt { font-size: .8rem; color: #94a3b8; }

/* Estimated reach */
.reach-card  { text-align: center; padding: 1.25rem; border-radius: 1.25rem; }
.reach-metric  { font-size: .85rem; color: #64748b; }
.reach-formula { font-size: .75rem; color: #94a3b8; margin-top: .25rem; }

/* Bot check */
.bot-check-card { border-radius: 1.125rem; padding: 1.125rem; border: 1px solid #e2e8f0; }
.bot-check-ok   { background: #f0fdf4; border-color: #a7f3d0; }
.bot-check-warn { background: #fffbeb; border-color: #fde68a; }
.bot-check-title { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: #1e293b; margin-bottom: .625rem; }
.bot-check-desc  { font-size: .8rem; color: #64748b; line-height: 1.5; margin-bottom: .75rem; }
.bot-steps       { background: rgba(255,255,255,0.7); border-radius: .75rem; padding: .875rem; display: flex; flex-direction: column; gap: .5rem; margin-bottom: .75rem; }
.bot-steps-title { font-size: .8rem; font-weight: 700; color: #334155; margin-bottom: .25rem; }
.bot-step        { display: flex; align-items: flex-start; gap: .5rem; font-size: .8rem; color: #334155; }
.bot-step-num    { font-weight: 700; color: #2563eb; flex-shrink: 0; }
.bot-check-btn   {
  width: 100%; padding: .55rem 1rem; border-radius: .75rem; border: none; cursor: pointer;
  font-size: .875rem; font-weight: 700; transition: all .15s;
}
.bot-check-btn-warn { background: #2563eb; color: #fff; }
.bot-check-btn-warn:hover:not(:disabled) { background: #1d4ed8; }
.bot-check-btn-ok   { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.bot-check-btn:disabled { opacity: .5; cursor: not-allowed; }
.bot-check-fail  { font-size: .8rem; color: #b91c1c; margin-top: .5rem; }
.spin-sm { display: inline-block; animation: spin .6s linear infinite; }
.mono-blue { font-family: monospace; color: #2563eb; font-weight: 700; }
.link-blue { color: #2563eb; text-decoration: underline; }

/* Geo breakdown */
.geo-section  { margin-top: 1rem; }
.geo-row      { display: grid; grid-template-columns: 1.5rem 2.5rem 1fr 2.5rem; align-items: center; gap: .5rem; padding: .25rem 0; }
.geo-flag     { font-size: 1.1rem; line-height: 1; }
.geo-code     { font-size: .75rem; font-weight: 700; color: #475569; text-transform: uppercase; }
.geo-bar-track{ height: 6px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.geo-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #3b82f6, #6366f1); transition: width .4s; }
.geo-count    { font-size: .75rem; font-weight: 700; color: #64748b; text-align: right; }

/* Packages grid */
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.pkg-card { border-radius: 1.375rem; padding: 1.5rem 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.pkg-card-top    { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.pkg-name        { font-size: 1rem; font-weight: 700; color: #1e293b; }
.pkg-badges      { display: flex; gap: .375rem; flex-wrap: wrap; }
.pkg-badge-discount { background: #22c55e; color: #fff; font-size: .7rem; font-weight: 900; padding: .15rem .5rem; border-radius: 9999px; }
.pkg-badge-label    { background: #fbbf24; color: #78350f; font-size: .7rem; font-weight: 900; padding: .15rem .5rem; border-radius: 9999px; }
.pkg-credits-row { display: flex; align-items: center; gap: .5rem; }
.pkg-credits-icon { width: 20px; height: 20px; flex-shrink: 0; }
.pkg-credits-val  { font-size: 1.5rem; font-weight: 900; color: #2563eb; }
.pkg-original-price { font-size: .8rem; color: #94a3b8; text-decoration: line-through; }
.pkg-rate         { font-size: .78rem; color: #94a3b8; }

/* Detail view */
.detail-card-top    { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 0; }
.detail-top-row     { display: flex; align-items: center; gap: .75rem; flex-wrap: nowrap; overflow: hidden; }
.detail-name-target { display: flex; flex-direction: column; gap: .1rem; flex: 1; min-width: 0; overflow: hidden; }
.detail-camp-name   { font-size: 1.05rem; font-weight: 900; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detail-target-url  { font-size: .75rem; color: #2563eb; text-decoration: underline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.detail-target      { margin-top: 1rem; }
.detail-actions   { margin-top: 1rem; display: flex; gap: .75rem; flex-wrap: wrap; }
.btn-pause  { padding: .55rem 1.25rem; border-radius: .75rem; border: 1px solid #e2e8f0; background: #f8fafc; color: #475569; font-weight: 700; cursor: pointer; transition: all .15s; }
.btn-pause:hover  { background: #f1f5f9; }
.btn-resume { padding: .55rem 1.25rem; border-radius: .75rem; border: 1px solid #a7f3d0; background: #ecfdf5; color: #065f46; font-weight: 700; cursor: pointer; transition: all .15s; }
.btn-resume:hover { background: #d1fae5; }
.topup-row  { display: flex; gap: .75rem; align-items: stretch; }
.topup-row .dash-input { flex: 1; }
.btn-danger-full {
  width: 100%; margin-top: .75rem; padding: .625rem 1.25rem;
  border: none; border-radius: .75rem; background: #ef4444; color: #fff;
  font-weight: 700; cursor: pointer; transition: all .15s;
}
.btn-danger-full:disabled { opacity: .4; cursor: not-allowed; }
.btn-danger-full:hover:not(:disabled) { background: #dc2626; }

/* ── Additional responsive ────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .hero-actions { flex-direction: row; }
  .hero-inner   { flex-direction: row; }
  .hero-text    { text-align: left; }
  .hero-subtitle { max-width: none; }
  .hero-whale-img { width: 280px; height: 280px; }
  .stats-row    { grid-template-columns: repeat(4, 1fr); }
  .steps-grid   { grid-template-columns: repeat(3, 1fr); }
  .features-grid{ grid-template-columns: repeat(3, 1fr); }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
  .nav-links    { display: flex; }
  .advertiser-badge { display: inline-block; }
  .footer-inner { flex-direction: row; justify-content: space-between; }
  /* Dashboard */
  .stats-grid-4  { grid-template-columns: repeat(4, 1fr); }
  .create-grid   { grid-template-columns: repeat(2, 1fr); }
  .camp-grid     { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .hero-whale-img { width: 340px; height: 340px; }
}
@media (max-width: 480px) {
  .login-card    { padding: 2rem 1.25rem; }
  .pricing-card  { padding: 2rem 1.25rem; }
  .dash-logo     { height: 1.5rem; }
  .type-grid-3   { grid-template-columns: repeat(3, 1fr); }
}