/* ============================================================
   TeaserCash — stylesheet (dark header + sidebar, light content)
   ============================================================ */
:root{
  --header-bg:#26313c;
  --side-bg:#2e3b47;
  --side-active:#243039;
  --blue:#29abe2;
  --blue-d:#1b8fbe;
  --green:#7cb342;
  --green-d:#689f38;
  --green-btn:#8cc63e;
  --red:#e5453d;
  --orange:#f7941e;
  --bg:#f2f4f6;
  --card:#ffffff;
  --line:#e2e6ea;
  --text:#333c44;
  --muted:#8b97a0;
  --side-text:#aab7c0;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);color:var(--text);font-size:14px;line-height:1.55;
}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.ico{width:20px;height:20px;flex:0 0 auto}

/* ---------- header ---------- */
.topbar{background:var(--header-bg);color:#fff;height:56px;display:flex;align-items:center;padding:0 20px;gap:26px;position:sticky;top:0;z-index:50}
.logo{font-size:19px;font-weight:800;letter-spacing:.5px;color:#fff;display:flex;align-items:center;gap:1px;white-space:nowrap}
.logo:hover{text-decoration:none}
.logo .logo-cur{color:var(--green);font-size:22px;margin:0 2px}
.top-balance{display:flex;align-items:center;gap:7px;font-weight:700;font-size:16px;white-space:nowrap}
.top-balance .sym{font-size:18px;font-weight:800}
.bal-main{color:var(--green)}
.bal-ad{color:var(--blue)}
.top-online{font-weight:700;font-size:17px;color:var(--orange)}
.top-online small{font-size:11px;color:#9fb0bb;font-weight:400;margin-left:5px}
.top-right{margin-left:auto;display:flex;align-items:center;gap:18px}
.top-link{color:#c7d2da;display:flex;align-items:center;gap:8px;font-size:13px}
.top-link:hover{color:#fff;text-decoration:none}
.top-user{display:flex;align-items:center;gap:9px;color:#fff;font-weight:600}
.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-weight:700;font-size:13px;text-transform:uppercase}
.guest-actions{margin-left:auto;display:flex;align-items:center;gap:14px}
.guest-actions a{color:#dbe4ea;font-weight:600;font-size:14px}
.btn-topup{background:var(--blue);color:#fff;padding:7px 16px;border-radius:4px;font-weight:700}
.btn-topup:hover{background:var(--blue-d);text-decoration:none;color:#fff}

/* ---------- layout ---------- */
.shell{display:flex;min-height:calc(100vh - 56px)}
.sidebar{width:216px;background:var(--side-bg);flex:0 0 auto;padding:10px 0;display:flex;flex-direction:column}
.side-item{display:flex;align-items:center;gap:14px;padding:13px 22px;color:var(--side-text);font-weight:600;font-size:12.5px;letter-spacing:.6px;text-transform:uppercase;border-left:3px solid transparent}
.side-item:hover{background:rgba(255,255,255,.04);color:#fff;text-decoration:none}
.side-item.active{background:var(--side-active);border-left-color:var(--blue);color:#fff}
.side-item .ico{color:#7e8f9b}
.side-item.active .ico,.side-item:hover .ico{color:var(--blue)}
.side-badge{background:var(--red);color:#fff;border-radius:50%;min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;font-size:11px;margin-left:auto;padding:0 4px}
.side-sep{height:1px;background:rgba(255,255,255,.07);margin:10px 18px}
.side-bottom{margin-top:auto}
.main{flex:1;padding:26px 30px 60px;min-width:0}

/* ---------- cards & page head ---------- */
.page-head{display:flex;align-items:flex-start;gap:24px;margin-bottom:22px;flex-wrap:wrap}
.page-head h1{font-size:27px;font-weight:300;color:#3b454d;margin:6px 0 8px}
.page-head .banner-slot{margin-left:auto}
.banner-slot{width:468px;max-width:100%}
.banner-slot img{display:block;width:468px;height:60px;object-fit:cover;border-radius:3px}
.banner-empty{width:468px;height:60px;border:2px dashed #cdd6dc;border-radius:3px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;background:#fafbfc}
.banner-meta{text-align:right;margin-top:6px;font-size:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:26px 28px;margin-bottom:22px}
.card h2{font-size:20px;font-weight:400;margin-bottom:16px;color:#2f3940}
.card h3{font-size:16px;font-weight:600;margin-bottom:10px}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.info-box{background:#eaf6fc;border:1px solid #cfe9f7;border-radius:4px;padding:14px 18px;color:#2b6a8a;margin:14px 0 18px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:4px;padding:11px 22px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;text-decoration:none;transition:background .15s}
.btn:hover{text-decoration:none}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-d);color:#fff}
.btn-green{background:var(--green-btn);color:#fff}
.btn-green:hover{background:var(--green-d);color:#fff}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:#c93a33;color:#fff}
.btn-ghost{background:#fff;border:1px solid var(--line);color:#59656e}
.btn-ghost:hover{border-color:#b8c4cc;color:#333}
.btn-big{padding:14px 34px;font-size:15px}
.btn-wide{width:100%}
.btn-sm{padding:7px 14px;font-size:12.5px}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* ---------- forms ---------- */
.form-row{margin-bottom:16px}
.form-row label{display:block;font-weight:600;margin-bottom:6px;color:#4a555e;font-size:13px}
.form-row .hint{font-size:12px;color:var(--muted);margin-top:4px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],select,textarea{
  width:100%;max-width:520px;padding:11px 13px;border:1px solid #cdd6dc;border-radius:4px;font-size:14px;font-family:inherit;background:#fff;color:var(--text)
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px rgba(41,171,226,.15)}
.form-2col{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;max-width:840px}
input[type=checkbox]{width:auto;transform:scale(1.25);margin-right:8px;accent-color:var(--blue)}
.check-row{display:flex;align-items:flex-start;gap:6px;margin:12px 0;font-size:14px;color:#4a555e}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:34px;border-bottom:2px solid var(--line);margin-bottom:22px;flex-wrap:wrap}
.tab{padding:12px 2px;font-weight:700;font-size:12.5px;letter-spacing:.7px;text-transform:uppercase;color:#7d8891;border-bottom:3px solid transparent;margin-bottom:-2px}
.tab:hover{color:var(--blue);text-decoration:none}
.tab.active{color:#2f3940;border-bottom-color:var(--blue)}

/* ---------- tables ---------- */
table.tbl{width:100%;border-collapse:collapse}
.tbl th{background:#f6f8f9;text-align:center;font-weight:600;color:#5b6770;padding:13px 12px;border:1px solid var(--line);font-size:13.5px}
.tbl td{text-align:center;padding:13px 12px;border:1px solid var(--line)}
.tbl th.l,.tbl td.l{text-align:left}
.val-green{color:var(--green);font-weight:700}
.val-blue{color:var(--blue);font-weight:700}
.val-red{color:var(--red);font-weight:700}
.val-orange{color:var(--orange);font-weight:700}

/* ---------- stats rows ---------- */
.stat-row{display:flex;flex-wrap:wrap;gap:8px 30px;padding:13px 4px;border-bottom:1px solid #eef1f3;align-items:baseline}
.stat-row:last-child{border-bottom:0}
.stat-row .lbl{color:#5b6770;min-width:150px}
.stat-row .grp{display:flex;gap:26px;flex-wrap:wrap}
.stat-row .grp span b{color:var(--blue);font-weight:600;margin-left:5px}
.stat-row .grp span b.dark{color:#3b454d}

/* ---------- teaser grid ---------- */
.teaser-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.teaser-card{border:1px solid var(--line);border-radius:4px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;background:#fff;transition:box-shadow .15s}
.teaser-card:hover{box-shadow:0 3px 10px rgba(30,45,60,.08)}
.teaser-card .t-title{font-weight:600;color:#2f3940;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.teaser-card .t-meta{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;border-radius:3px;padding:3px 9px}
.badge .ico{width:14px;height:14px}
.badge-timer{background:#eef6fb;color:#1b8fbe}
.badge-reward{background:#eef7e4;color:#5c8a26}

/* ---------- campaign cards ---------- */
.camp-card{border:1px solid var(--line);border-radius:4px;margin-bottom:16px;background:#fff}
.camp-top{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid #eef1f3;flex-wrap:wrap}
.camp-top .ctype{font-weight:800;font-size:13px;letter-spacing:.5px;color:#3b454d;text-transform:uppercase}
.camp-top .cid{color:var(--muted);font-size:12.5px}
.camp-top .camp-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.camp-body{display:grid;grid-template-columns:2fr 1.4fr 1.2fr;gap:10px 30px;padding:16px 20px}
.camp-body .cell{font-size:13.5px}
.camp-body .cell .k{color:var(--muted)}
.camp-body .cell .v{margin-top:3px}
.camp-foot{padding:12px 20px;border-top:1px solid #eef1f3;display:flex;gap:20px;align-items:center;font-size:13.5px;flex-wrap:wrap}
.dots-btn{background:none;border:0;cursor:pointer;color:#9aa6af;font-size:18px;letter-spacing:2px;padding:2px 6px}
.dot-s{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:7px}
.s-active{background:var(--green)}.s-pending{background:var(--orange)}.s-paused{background:#b0bcc4}.s-blocked{background:var(--red)}

/* ---------- balance side card ---------- */
.bal-card{border:1px solid var(--line);border-radius:4px;background:#fff;padding:20px 24px;text-align:center;margin-bottom:22px}
.bal-card .k{color:var(--muted);font-size:13px}
.bal-card .v{font-size:26px;font-weight:400;color:#3b454d;margin:6px 0 14px}
.bal-card .v small{font-size:14px;color:var(--muted)}

/* ---------- misc widgets ---------- */
.notice{padding:13px 18px;border-radius:4px;margin-bottom:18px;font-weight:600}
.notice-ok{background:#e8f5d9;color:#4c7a1e;border:1px solid #cbe6ab}
.notice-err{background:#fdecea;color:#b3352d;border:1px solid #f5c6c2}
.copy-line{display:flex;gap:10px;max-width:560px}
.copy-line input{flex:1;background:#fafbfc}
.share-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.share-btn{color:#fff;font-size:12px;font-weight:700;border-radius:3px;padding:7px 12px;display:inline-block}
.share-btn:hover{text-decoration:none;opacity:.85;color:#fff}
.sh-tg{background:#2ca5e0}.sh-wa{background:#25d366}.sh-x{background:#111}.sh-fb{background:#1877f2}.sh-rd{background:#ff4500}.sh-vk{background:#4c75a3}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 30px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:st}
.step{border:1px solid var(--line);border-radius:4px;padding:20px}
.step .n{width:34px;height:34px;border-radius:50%;background:var(--blue);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.step h4{margin-bottom:8px;font-size:15px}
.faq details{border:1px solid var(--line);border-radius:4px;margin-bottom:10px;background:#fff}
.faq summary{padding:14px 18px;font-weight:600;cursor:pointer;color:#2f3940}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq .faq-body{padding:14px 18px;color:#4a555e}
footer.site{background:var(--header-bg);color:#8fa0ac;padding:26px 30px;font-size:13px}
footer.site a{color:#c7d2da}
footer.site .foot-in{max-width:1200px;margin:0 auto;display:flex;gap:20px;flex-wrap:wrap;align-items:center}
footer.site .foot-in .pay{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
.pay-chip{border:1px solid #3c4a57;border-radius:3px;padding:4px 10px;font-size:11.5px;color:#c7d2da}

/* ---------- landing ---------- */
.hero{background:linear-gradient(135deg,#26313c 0%,#2e3f4e 100%);color:#fff;padding:64px 30px;text-align:center}
.hero h1{font-size:38px;font-weight:300;max-width:820px;margin:0 auto 14px}
.hero h1 b{font-weight:800;color:var(--blue)}
.hero p{color:#b9c7d1;max-width:640px;margin:0 auto 28px;font-size:16px}
.hero .chips{display:flex;gap:34px;justify-content:center;margin-top:38px;flex-wrap:wrap}
.hero .chips .c b{display:block;font-size:24px;color:var(--orange)}
.hero .chips .c span{color:#9fb0bb;font-size:13px}
.section{max-width:1120px;margin:0 auto;padding:46px 30px}
.section h2{text-align:center;font-size:26px;font-weight:300;margin-bottom:8px}
.section .sub{text-align:center;color:var(--muted);margin-bottom:34px}
.svc-card{border:1px solid var(--line);border-radius:5px;background:#fff;padding:26px;text-align:center}
.svc-card .svc-ico{width:58px;height:58px;border-radius:50%;background:#eaf6fc;color:var(--blue);display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.svc-card .svc-ico .ico{width:28px;height:28px}
.svc-card h3{font-size:17px;margin-bottom:10px}
.svc-card p{color:var(--muted);font-size:13.5px;min-height:60px}
.svc-card .price{margin:12px 0 16px;color:var(--green);font-weight:700;font-size:15px}

/* ---------- view / popup pages ---------- */
.view-wrap{max-width:980px;margin:26px auto;padding:0 20px}
.view-progress{height:5px;background:#e3e8eb;border-radius:3px;overflow:hidden;margin-bottom:20px}
.view-progress .bar{height:100%;width:0%;background:var(--blue);transition:width 1s linear}
.view-frame{background:#fff;border:1px solid var(--line);border-radius:4px;padding:16px}
.view-frame iframe{width:100%;height:460px;border:1px solid var(--line);border-radius:3px;background:#fff}
.view-actions{display:flex;gap:14px;margin-top:16px;flex-wrap:wrap;align-items:center}
.chip{display:inline-flex;align-items:center;gap:7px;background:#f6f8f9;border:1px solid var(--line);border-radius:4px;padding:8px 14px;font-weight:600;font-size:13.5px}
body.popup-body{background:#26313c;color:#fff;display:flex;align-items:center;justify-content:center;min-height:100vh}
.popup-box{width:min(560px,92vw);background:#fff;color:var(--text);border-radius:6px;padding:34px;text-align:center}
.ring{width:120px;height:120px;margin:18px auto;position:relative}
.ring svg{transform:rotate(-90deg)}
.ring .num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:700;color:var(--blue)}

/* ---------- video task ---------- */
.video-box{background:#000;border-radius:4px;overflow:hidden;aspect-ratio:16/9;max-width:840px;margin:0 auto 18px}
.video-box iframe{width:100%;height:100%;border:0}
.task-meta{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:4px;background:#fff;max-width:980px;margin:0 auto}
.task-meta>div{padding:16px;text-align:center;border-right:1px solid var(--line)}
.task-meta>div:last-child{border-right:0}
.task-meta .k{color:var(--muted);font-size:13px}
.task-meta .v{font-size:18px;margin-top:5px}

/* ---------- responsive ---------- */
@media(max-width:1024px){
  .camp-body{grid-template-columns:1fr 1fr}
  .grid-2,.grid-3,.steps,.form-2col{grid-template-columns:1fr}
  .task-meta{grid-template-columns:1fr}
  .task-meta>div{border-right:0;border-bottom:1px solid var(--line)}
}
@media(max-width:820px){
  .shell{flex-direction:column}
  .sidebar{width:100%;flex-direction:row;flex-wrap:wrap;padding:0}
  .side-item{border-left:0;border-bottom:3px solid transparent;padding:12px 14px}
  .side-item.active{border-left:0;border-bottom-color:var(--blue)}
  .side-bottom{margin:0;display:flex}
  .side-sep{display:none}
  .topbar{gap:12px;overflow-x:auto}
  .banner-slot{width:100%}
  .banner-empty{width:100%}
  .banner-meta{text-align:left}
}

/* ---------- v1.1: captcha, dimmed tasks, ad slots, sidebar ad ---------- */
.captcha-box{
  display:inline-flex;flex-direction:column;gap:8px;background:#f6f9fb;border:1px solid #dfe7ec;
  border-radius:8px;padding:12px 14px;margin:8px 0;max-width:340px
}
.captcha-q{font-size:13px;font-weight:700;color:#3c4c59}
.captcha-svg{background:#fff;border:1px solid #dfe7ec;border-radius:6px}
.captcha-box input[type=text]{
  padding:9px 12px;border:1px solid #cfdbe2;border-radius:7px;font-size:15px;max-width:160px;
  letter-spacing:2px;font-weight:700
}
.done-card{opacity:.55;filter:grayscale(.55)}
.unlock-chip{
  display:inline-block;background:#eef2f5;border:1px dashed #b9c8d2;color:#4a5a68;border-radius:20px;
  padding:7px 14px;font-size:12.5px
}
.unlock-chip b{color:#26313c}
.ad-slot{margin:14px 0;text-align:center;overflow:hidden}
.ad-slot iframe,.ad-slot ins{max-width:100%}
.side-ad-wrap{padding:10px 12px}
.side-ad{background:#22303b;border:1px solid #3a4a57;border-radius:8px;padding:8px;overflow:hidden;
  text-align:center;font-size:12px}
.side-ad iframe,.side-ad ins{max-width:100%}
.pulse-once{animation:tcPulse .6s ease 2}
@keyframes tcPulse{0%{box-shadow:0 0 0 0 rgba(140,198,62,.55)}70%{box-shadow:0 0 0 12px rgba(140,198,62,0)}100%{box-shadow:0 0 0 0 rgba(140,198,62,0)}}
@media(max-width:820px){
  .captcha-box{width:100%}
  .side-ad-wrap{padding:8px 14px}
}