/* SurveyPay - app.css */
:root {
  --bg: #0a0c10;
  --surface: #13161d;
  --card: #1a1e28;
  --border: #252a38;
  --accent: #00e5a0;
  --accent2: #7b5cfa;
  --gold: #f5c842;
  --danger: #ff4d6d;
  --text: #e8eaf0;
  --muted: #7a8099;
  --radius: 14px;
  --font-head: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);min-height:100vh;overflow-x:hidden}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 700px 500px at 10% 20%,rgba(0,229,160,.06) 0%,transparent 70%),radial-gradient(ellipse 600px 600px at 90% 80%,rgba(123,92,250,.07) 0%,transparent 70%);pointer-events:none;z-index:0}
/* NAV */
nav{display:flex;align-items:center;justify-content:space-between;padding:18px 40px;border-bottom:1px solid var(--border);background:rgba(10,12,16,.9);backdrop-filter:blur(12px);position:sticky;top:0;z-index:100}
.logo{font-family:var(--font-head);font-size:22px;font-weight:800;letter-spacing:-.5px}
.logo span{color:var(--accent)}
.nav-links,.nav-user{display:flex;gap:10px;align-items:center}
.btn-nav{background:none;border:1px solid var(--border);color:var(--muted);padding:8px 18px;border-radius:8px;cursor:pointer;font-family:var(--font-body);font-size:14px;transition:all .2s}
.btn-nav:hover{border-color:var(--accent);color:var(--accent)}
.btn-nav.btn-primary{background:var(--accent);border-color:var(--accent);color:#0a0c10;font-weight:600}
.btn-nav.btn-primary:hover{background:#00c98a}
/* PAGES */
.page{display:none;position:relative;z-index:1}
.page.active{display:block}
/* HERO */
.hero{text-align:center;padding:90px 20px 70px;max-width:780px;margin:0 auto}
.hero-badge{display:inline-block;background:rgba(0,229,160,.1);border:1px solid rgba(0,229,160,.25);color:var(--accent);font-size:12px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;padding:6px 16px;border-radius:100px;margin-bottom:28px}
.hero h1{font-family:var(--font-head);font-size:clamp(38px,6vw,68px);font-weight:800;line-height:1.05;letter-spacing:-2px;margin-bottom:22px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p{font-size:18px;color:var(--muted);line-height:1.65;margin-bottom:40px;font-weight:300}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* BUTTONS */
.btn{padding:14px 30px;border-radius:10px;font-family:var(--font-body);font-size:15px;font-weight:600;cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:8px}
.btn-green{background:var(--accent);color:#0a0c10}
.btn-green:hover{background:#00c98a;transform:translateY(-1px)}
.btn-green:disabled{opacity:.4;pointer-events:none}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-outline:hover{border-color:var(--muted)}
.btn-purple{background:var(--accent2);color:#fff}
.btn-purple:hover{background:#6a4de0}
.btn-gold{background:var(--gold);color:#0a0c10}
.btn-gold:hover{background:#e0b430}
.btn-danger{background:var(--danger);color:#fff}
.btn-sm{padding:7px 14px;font-size:13px;border-radius:8px}
/* STATS BAR */
.stats-bar{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;padding:30px 20px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface)}
.stat{text-align:center}
.stat-val{font-family:var(--font-head);font-size:28px;font-weight:800;color:var(--accent)}
.stat-lbl{font-size:12px;color:var(--muted);margin-top:3px;letter-spacing:.5px}
/* SECTION */
.section{padding:70px 20px;max-width:1100px;margin:0 auto}
.section-title{font-family:var(--font-head);font-size:32px;font-weight:800;margin-bottom:10px;letter-spacing:-1px}
.section-sub{color:var(--muted);margin-bottom:48px;font-size:15px}
/* STEPS */
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}
.step-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px 24px;position:relative;overflow:hidden;transition:border-color .2s}
.step-card:hover{border-color:var(--accent)}
.step-num{font-family:var(--font-head);font-size:52px;font-weight:800;color:rgba(0,229,160,.08);position:absolute;top:10px;right:16px;line-height:1}
.step-icon{font-size:28px;margin-bottom:14px}
.step-card h3{font-family:var(--font-head);font-size:16px;font-weight:700;margin-bottom:8px}
.step-card p{font-size:14px;color:var(--muted);line-height:1.55}
/* SURVEYS GRID */
.surveys-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.survey-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:14px;transition:all .2s}
.survey-card:hover{border-color:var(--accent2);transform:translateY(-2px)}
.survey-header{display:flex;justify-content:space-between;align-items:flex-start}
.survey-company{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.survey-title{font-family:var(--font-head);font-size:15px;font-weight:700}
.survey-pay{background:rgba(0,229,160,.12);color:var(--accent);font-weight:700;font-size:15px;padding:6px 12px;border-radius:8px;white-space:nowrap}
.survey-meta{display:flex;gap:12px;font-size:12px;color:var(--muted)}
.survey-tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:11px;padding:3px 9px;border-radius:100px;border:1px solid var(--border);color:var(--muted)}
.progress-bar-wrap{background:var(--border);border-radius:100px;height:4px}
.progress-bar{background:var(--accent);height:4px;border-radius:100px}
/* PAYOUT EXPLAINER */
.payout-explainer{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:36px}
.check-list{display:flex;flex-direction:column;gap:10px;font-size:14px}
.check-list div{display:flex;align-items:center;gap:12px}
.check-list div::before{content:'✓';color:var(--accent);font-size:16px;min-width:16px}
.breakdown-card{background:var(--surface);border-radius:12px;padding:28px;border:1px solid var(--border)}
.breakdown-title{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:16px}
.breakdown-row{display:flex;justify-content:space-between;font-size:14px;margin-bottom:10px}
.breakdown-divider{height:1px;background:var(--border);margin:10px 0}
/* MODAL */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:200;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.modal-overlay.open{display:flex}
.modal{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:36px 32px;width:100%;max-width:420px;position:relative;animation:slideUp .25s ease}
@keyframes slideUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.modal-close{position:absolute;top:16px;right:18px;background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer}
.modal-close:hover{color:var(--text)}
.modal h2{font-family:var(--font-head);font-size:22px;font-weight:800;margin-bottom:6px;letter-spacing:-.5px}
.modal-sub{color:var(--muted);font-size:13px;margin-bottom:24px}
.modal-footer{text-align:center;margin-top:16px;font-size:13px;color:var(--muted)}
.modal-footer a{color:var(--accent);cursor:pointer;text-decoration:none}
.modal-footer a:hover{text-decoration:underline}
/* FORMS */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px;letter-spacing:.5px;text-transform:uppercase}
.form-group input,.form-group select,.form-group textarea{width:100%;background:var(--surface);border:1px solid var(--border);color:var(--text);padding:12px 14px;border-radius:10px;font-family:var(--font-body);font-size:14px;transition:border-color .2s;outline:none}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--accent)}
.form-group input::placeholder{color:var(--muted)}
.form-group input:disabled{opacity:.5;cursor:not-allowed}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.paypal-note{background:rgba(245,200,66,.08);border:1px solid rgba(245,200,66,.2);border-radius:10px;padding:12px 14px;font-size:13px;color:#f5c842;margin-bottom:16px}
/* DASHBOARD */
.dash-header{background:var(--surface);border-bottom:1px solid var(--border);padding:22px 40px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
.dash-greeting{font-size:12px;color:var(--muted);margin-bottom:2px}
.dash-header h2{font-family:var(--font-head);font-size:20px;font-weight:800}
.dash-header-right{display:flex;align-items:center;gap:14px}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--accent2),var(--accent));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;flex-shrink:0}
.dash-body{max-width:1100px;margin:0 auto;padding:30px 20px}
/* METRICS */
.dash-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:32px}
.dash-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.dash-card-label{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-bottom:10px}
.dash-card-val{font-family:var(--font-head);font-size:30px;font-weight:800}
.dash-card-val.green{color:var(--accent)}
.dash-card-val.purple{color:var(--accent2)}
.dash-card-val.gold{color:var(--gold)}
.dash-card-sub{font-size:12px;color:var(--muted);margin-top:5px}
/* TIME BAR */
.time-bar-section{margin-bottom:24px}
.time-bar-label{font-size:13px;color:var(--muted);margin-bottom:8px;display:flex;justify-content:space-between}
.time-bar-outer{background:var(--border);border-radius:100px;height:10px}
.time-bar-inner{background:linear-gradient(90deg,var(--accent),var(--accent2));height:10px;border-radius:100px;transition:width .5s}
.time-bar-note{font-size:12px;color:var(--muted);margin-top:6px}
/* TABS */
.tabs{display:flex;gap:4px;margin-bottom:24px;background:var(--surface);border-radius:10px;padding:4px;border:1px solid var(--border);width:fit-content;overflow-x:auto}
.tab-btn{background:none;border:none;color:var(--muted);padding:9px 20px;border-radius:8px;cursor:pointer;font-family:var(--font-body);font-size:14px;font-weight:500;transition:all .2s;white-space:nowrap}
.tab-btn.active{background:var(--card);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.3)}
/* SURVEY TAKING */
.survey-taking{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:32px;max-width:660px;margin:0 auto 24px}
.survey-taking h3{font-family:var(--font-head);font-size:20px;font-weight:800;margin-bottom:6px}
.q-count{font-size:12px;color:var(--muted);margin-bottom:24px}
.question{margin-bottom:22px}
.question p{font-size:15px;font-weight:500;margin-bottom:12px}
.options{display:flex;flex-direction:column;gap:9px}
.option{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 16px;cursor:pointer;font-size:14px;transition:all .15s;display:flex;align-items:center;gap:10px}
.option:hover{border-color:var(--accent2)}
.option.selected{border-color:var(--accent);background:rgba(0,229,160,.07);color:var(--accent)}
.scale-options{display:flex;gap:8px;flex-wrap:wrap}
.scale-opt{flex:1;min-width:36px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px 6px;text-align:center;cursor:pointer;font-size:14px;font-weight:600;transition:all .15s}
.scale-opt:hover,.scale-opt.selected{border-color:var(--accent);color:var(--accent);background:rgba(0,229,160,.07)}
/* TABLE */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;font-size:13px}
thead tr{border-bottom:1px solid var(--border);background:var(--surface)}
th{text-align:left;padding:12px 16px;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:600;white-space:nowrap}
td{padding:13px 16px;border-bottom:1px solid rgba(37,42,56,.5);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(255,255,255,.01)}
/* BADGES */
.badge{display:inline-block;padding:3px 10px;border-radius:100px;font-size:11px;font-weight:600;white-space:nowrap}
.badge-green{background:rgba(0,229,160,.12);color:var(--accent)}
.badge-purple{background:rgba(123,92,250,.12);color:var(--accent2)}
.badge-gold{background:rgba(245,200,66,.12);color:var(--gold)}
.badge-red{background:rgba(255,77,109,.12);color:var(--danger)}
.badge-grey{background:rgba(122,128,153,.12);color:var(--muted)}
/* PAYOUT */
.payout-box{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px;max-width:480px}
.payout-box h3{font-family:var(--font-head);font-size:18px;font-weight:800;margin-bottom:6px}
.payout-box p{font-size:13px;color:var(--muted);margin-bottom:20px}
.payout-amount{font-family:var(--font-head);font-size:48px;font-weight:800;color:var(--accent);margin-bottom:6px}
.payout-note{font-size:12px;color:var(--muted);margin-bottom:14px}
.payout-info{margin-top:14px;font-size:12px;color:var(--muted)}
/* ADMIN */
.admin-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.admin-card h4{font-family:var(--font-head);font-size:12px;font-weight:700;margin-bottom:14px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.settings-box{max-width:480px}
/* ALERT */
.alert{padding:12px 16px;border-radius:10px;font-size:13px;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.alert-green{background:rgba(0,229,160,.1);border:1px solid rgba(0,229,160,.2);color:var(--accent)}
.alert-red{background:rgba(255,77,109,.1);border:1px solid rgba(255,77,109,.2);color:var(--danger)}
.alert-yellow{background:rgba(245,200,66,.1);border:1px solid rgba(245,200,66,.2);color:var(--gold)}
/* TOAST */
#toast{position:fixed;bottom:28px;right:28px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 20px;font-size:14px;z-index:999;transform:translateY(80px);opacity:0;transition:all .3s;max-width:320px}
#toast.show{transform:translateY(0);opacity:1}
#toast.success{border-color:var(--accent);color:var(--accent)}
#toast.error{border-color:var(--danger);color:var(--danger)}
#toast.info{border-color:var(--accent2);color:var(--accent2)}
/* ── TERMS CHECKBOX ── */
.terms-check-wrap{margin-bottom:16px}
.terms-check-label{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:13px;line-height:1.5;color:var(--muted)}
.terms-check-label input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}
.terms-check-box{flex-shrink:0;width:18px;height:18px;border:2px solid var(--border);border-radius:5px;background:var(--surface);transition:all .2s;margin-top:1px;display:flex;align-items:center;justify-content:center}
.terms-check-label input:checked ~ .terms-check-box{background:var(--accent);border-color:var(--accent)}
.terms-check-label input:checked ~ .terms-check-box::after{content:'✓';color:#0a0c10;font-size:12px;font-weight:800;line-height:1}
.terms-check-label:hover .terms-check-box{border-color:var(--accent)}
.terms-check-text a{color:var(--accent);text-decoration:none}
.terms-check-text a:hover{text-decoration:underline}
/* ── HCAPTCHA DARK THEME FIX ── */
.h-captcha iframe{border-radius:8px}
.tr-launch-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:28px 32px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;position:relative;overflow:hidden}
.tr-launch-card::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 500px 300px at 0% 50%,rgba(0,229,160,.05) 0%,transparent 70%);pointer-events:none}
.tr-launch-left{flex:1;min-width:220px}
.tr-logo-badge{display:inline-block;background:rgba(0,229,160,.1);border:1px solid rgba(0,229,160,.2);color:var(--accent);font-size:11px;font-weight:700;padding:4px 12px;border-radius:100px;letter-spacing:1px;text-transform:uppercase;margin-bottom:12px}
.tr-launch-left h3{font-family:var(--font-head);font-size:20px;font-weight:800;margin-bottom:8px;letter-spacing:-.3px}
.tr-launch-left p{font-size:14px;color:var(--muted);line-height:1.55;margin-bottom:18px}
.tr-stats-row{display:flex;gap:24px;flex-wrap:wrap}
.tr-stat{display:flex;flex-direction:column;gap:3px}
.tr-stat span{font-family:var(--font-head);font-size:20px;font-weight:800;color:var(--accent)}
.tr-stat small{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.tr-launch-right{display:flex;flex-direction:column;align-items:center;gap:0}
/* MISC */
.loading{color:var(--muted);padding:30px;text-align:center;font-size:14px}
footer{text-align:center;padding:30px;border-top:1px solid var(--border);color:var(--muted);font-size:13px}
/* RESPONSIVE */
@media(max-width:640px){
  nav{padding:14px 18px}
  .dash-header{padding:16px 18px}
  .hero{padding:60px 18px 50px}
  .hero h1{letter-spacing:-1px}
  .payout-explainer{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .modal{padding:28px 20px}
  .tr-launch-card{flex-direction:column}
  .tr-launch-right{width:100%}
  .tr-launch-right .btn{width:100%}
}