/* Original Dashmore v3 styles — preserved verbatim. New components live in app.css. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --g9:#1A2E1A;--g8:#1E3A1E;--g7:#234A23;--g5:#2D6A2D;--g4:#3A8A3A;--g3:#4CAF50;--ga:#5DC45D;
  --gl:#E8F5E8;--gp:#F0FAF0;
  --w:#FFFFFF;--s50:#F8F9FA;--s100:#F1F3F4;--s200:#E8EAED;--s300:#DADCE0;
  --s400:#BDC1C6;--s500:#80868B;--s600:#5F6368;--s700:#3C4043;--s800:#202124;
  --red:#E53935;--ora:#FB8C00;--blu:#1976D2;--tea:#00897B;
  --tt:#FE2C55;--ttd:rgba(254,44,85,0.1);
  --sw:230px;
}
body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--s50);color:var(--s800);min-height:100vh;display:flex;overflow:hidden}

/* ─── SIDEBAR ─── */
.sb{width:var(--sw);min-width:var(--sw);background:var(--g9);display:flex;flex-direction:column;height:100vh;position:sticky;top:0}
.sb-logo{padding:20px 18px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.07)}
.logo-mk{width:32px;height:32px;background:var(--ga);border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--g9);font-size:17px}
.logo-tx{font-size:18px;font-weight:800;color:#fff;letter-spacing:-.5px}.logo-tx span{color:var(--ga)}
.sb-sec{padding:16px 12px 4px}
.sb-lbl{font-size:10px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.28);padding:0 8px 9px}
.ni{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;color:rgba(255,255,255,.52);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;margin-bottom:1px}
.ni:hover{background:rgba(255,255,255,.07);color:#fff}
.ni.act{background:var(--ga);color:var(--g9);font-weight:700}
.ni.act i{color:var(--g9)}
.ni i{font-size:16px;width:18px}
.nb{margin-left:auto;background:rgba(255,255,255,.18);color:#fff;font-size:10px;font-weight:700;padding:1px 7px;border-radius:20px;min-width:20px;text-align:center}
.ni.act .nb{background:rgba(26,46,26,.25);color:var(--g9)}
.pd{width:9px;height:9px;border-radius:3px;flex-shrink:0}
.pm{background:#1877F2}.pg{background:#EA4335}.pt{background:#FE2C55}
.sb-ft{margin-top:auto;padding:12px;border-top:1px solid rgba(255,255,255,.07)}
.ur{display:flex;align-items:center;gap:9px;padding:8px;border-radius:9px;cursor:pointer}
.ur:hover{background:rgba(255,255,255,.07)}
.av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--ga),#26A69A);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--g9);flex-shrink:0}

/* ─── MAIN ─── */
.main{flex:1;overflow-y:auto;background:var(--s50);height:100vh}
.tb{background:var(--w);border-bottom:1px solid var(--s200);padding:0 24px;height:58px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:20}
.tb-l{display:flex;align-items:center;gap:12px}
.pt{font-size:16px;font-weight:700;color:var(--s800)}
.ps{font-size:11px;color:var(--s500)}
.tb-r{display:flex;align-items:center;gap:9px}
.sb-box{display:flex;align-items:center;gap:7px;background:var(--s100);border:1px solid var(--s200);border-radius:20px;padding:6px 13px;font-size:12px;color:var(--s500);min-width:200px}
.dch{display:flex;align-items:center;gap:5px;border:1px solid var(--s200);border-radius:20px;padding:6px 11px;font-size:12px;font-weight:500;color:var(--s600);cursor:pointer;background:var(--w)}
.ib{width:32px;height:32px;border-radius:8px;border:1px solid var(--s200);background:var(--w);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--s500);font-size:15px;transition:all .15s;position:relative}
.ib:hover{background:var(--s100);color:var(--s800)}
.nd{position:absolute;top:5px;right:5px;width:7px;height:7px;background:var(--ga);border-radius:50%;border:1.5px solid var(--w)}
.ab{display:flex;align-items:center;gap:6px;background:var(--g9);color:#fff;font-size:12px;font-weight:700;padding:7px 16px;border-radius:20px;cursor:pointer;transition:opacity .15s;white-space:nowrap}
.ab:hover{opacity:.85}

/* ─── CONTENT ─── */
.ct{padding:20px 24px}
.ch{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px}
.ctit{font-size:21px;font-weight:800;color:var(--s800)}
.csub{font-size:12px;color:var(--s500);margin-top:2px}
.ptabs{display:flex;gap:6px}
.ptb{display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:20px;border:1.5px solid var(--s200);font-size:12px;font-weight:600;color:var(--s500);cursor:pointer;background:var(--w);transition:all .15s}
.ptb:hover{border-color:var(--s400);color:var(--s700)}
.ptb.al{background:var(--g9);border-color:var(--g9);color:#fff}
.ptb.me{background:rgba(24,119,242,.08);border-color:#1877F2;color:#1877F2}
.ptb.go{background:rgba(234,67,53,.08);border-color:#EA4335;color:#EA4335}
.ptb.tk{background:rgba(254,44,85,.08);border-color:#FE2C55;color:#FE2C55}

/* TOP ROW */
.tr{display:grid;grid-template-columns:250px 1fr 1fr;gap:13px;margin-bottom:13px}
.uc{background:var(--g8);border-radius:13px;padding:17px;color:#fff;display:flex;flex-direction:column;justify-content:space-between;min-height:128px;position:relative;overflow:hidden}
.uc::before{content:'';position:absolute;top:-25px;right:-25px;width:90px;height:90px;border-radius:50%;background:rgba(93,196,93,.12)}
.ubg{display:inline-flex;align-items:center;gap:4px;background:rgba(93,196,93,.2);color:var(--ga);font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px;margin-bottom:8px;width:fit-content}
.uhl{font-size:16px;font-weight:800;line-height:1.35;margin-bottom:10px;position:relative;z-index:1}
.ul{font-size:11px;color:var(--ga);font-weight:600;cursor:pointer;display:flex;align-items:center;gap:3px}
.mc{background:var(--w);border-radius:13px;border:1px solid var(--s200);padding:17px 19px;display:flex;flex-direction:column;justify-content:space-between;min-height:128px}
.ml{font-size:12px;color:var(--s500);font-weight:500;margin-bottom:7px}
.mm{font-size:11px;color:var(--s400);cursor:pointer}
.mv{font-size:28px;font-weight:800;color:var(--s800);letter-spacing:-1px;line-height:1.1;margin-bottom:7px}
.mv sup{font-size:15px;font-weight:600;vertical-align:super;margin-right:1px}
.mch{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:600}
.mch.up{color:var(--tea)}.mch.dn{color:var(--red)}
.mch .ms{font-size:11px;color:var(--s500);font-weight:400}

/* SECOND ROW */
.sr{display:grid;grid-template-columns:1fr 1fr 330px;gap:13px;margin-bottom:13px}
.cd{background:var(--w);border-radius:13px;border:1px solid var(--s200);padding:17px}
.cdh{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:13px}
.cdt{font-size:14px;font-weight:700;color:var(--s800)}
.cds{font-size:11px;color:var(--s500);margin-top:1px}
.cdm{color:var(--s400);font-size:15px;cursor:pointer}
.ct2{width:100%;border-collapse:collapse}
.ct2 th{font-size:10px;font-weight:600;color:var(--s400);text-align:left;padding:0 0 9px;border-bottom:1px solid var(--s100);text-transform:uppercase;letter-spacing:.5px}
.ct2 td{padding:8px 0;border-bottom:1px solid var(--s100);font-size:12px;color:var(--s600);vertical-align:middle}
.ct2 tr:last-child td{border-bottom:none}
.cn{font-weight:600;color:var(--s800);display:flex;align-items:center;gap:6px;font-size:12px}
.ci{width:24px;height:24px;border-radius:6px;background:var(--s100);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0;color:var(--s600)}
.sp{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;padding:3px 8px;border-radius:20px}
.sa{background:#E8F5E8;color:var(--g5)}.sps{background:#FFF3E0;color:var(--ora)}.se{background:var(--s100);color:var(--s500)}
.ru{color:var(--tea);font-weight:700}.rw{color:var(--ora);font-weight:700}.rd{color:var(--red);font-weight:700}
.rvc{font-size:28px;font-weight:800;color:var(--s800);letter-spacing:-1px;margin-bottom:3px}
.rcg{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--tea);margin-bottom:13px}
.lgr{display:flex;gap:13px;margin-bottom:11px}
.lgi{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--s500);font-weight:500}
.lgd{width:10px;height:10px;border-radius:3px}
.pbrw{display:flex;align-items:center;gap:9px;margin-bottom:11px}
.pbpl{display:flex;align-items:center;gap:6px;width:105px;flex-shrink:0}
.pbic{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0}
.pbim{background:rgba(24,119,242,.1);color:#1877F2}.pbig{background:rgba(234,67,53,.1);color:#EA4335}.pbit{background:rgba(254,44,85,.1);color:#FE2C55}
.pbtr{flex:1;height:5px;background:var(--s100);border-radius:3px;overflow:hidden}
.pbfi{height:100%;border-radius:3px}
.pfm{background:#1877F2}.pfg{background:#EA4335}.pft{background:#FE2C55}
.pbvl{font-size:12px;font-weight:700;color:var(--s800);width:48px;text-align:right;flex-shrink:0}

/* THIRD ROW */
.thr{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.kg{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.kb{background:var(--s50);border:1px solid var(--s200);border-radius:9px;padding:11px 13px}
.kbl{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--s400);font-weight:600;margin-bottom:3px}
.kbv{font-size:19px;font-weight:800;color:var(--s800);letter-spacing:-.5px}
.upc{background:var(--gp);border:1.5px solid var(--gl);border-radius:13px;padding:18px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.upc::before{content:'✦';position:absolute;top:13px;right:16px;font-size:24px;color:var(--ga);opacity:.35}
.uph{font-size:17px;font-weight:800;color:var(--g8);line-height:1.3;margin-bottom:7px}
.ups{font-size:12px;color:var(--g5);margin-bottom:16px}
.upb{display:inline-flex;align-items:center;gap:6px;background:var(--g9);color:#fff;font-size:12px;font-weight:700;padding:9px 18px;border-radius:20px;cursor:pointer;width:fit-content}
.hbi{margin-bottom:11px}
.hbl{display:flex;justify-content:space-between;font-size:12px;font-weight:500;color:var(--s700);margin-bottom:4px}
.hbc{font-size:11px;color:var(--s500);font-weight:400}
.hbt{height:7px;background:var(--s100);border-radius:4px;overflow:hidden}
.hbf{height:100%;border-radius:4px}

/* ═══════════════════════════════════════════════
   MODAL OVERLAY
═══════════════════════════════════════════════ */
.modal-overlay{
  display:none;position:fixed;inset:0;z-index:999;
  background:rgba(0,0,0,.45);
  align-items:center;justify-content:center;
}
.modal-overlay.open{display:flex}

.modal{
  background:#fff;border-radius:16px;width:680px;max-width:95vw;
  max-height:90vh;overflow:hidden;display:flex;flex-direction:column;
  position:relative;animation:mopen .2s ease-out;
}
@keyframes mopen{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.m-head{
  padding:20px 24px 0;
  display:flex;flex-direction:column;gap:14px;
  border-bottom:1px solid var(--s200);
  padding-bottom:0;
}
.m-top-row{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px;}
.m-title{font-size:18px;font-weight:800;color:var(--s800)}
.m-close{width:32px;height:32px;border-radius:8px;background:var(--s100);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--s600);transition:all .15s}
.m-close:hover{background:var(--s200);color:var(--s800)}

/* Steps bar */
.steps-bar{display:flex;gap:0;padding:0 24px;}
.step-btn{
  display:flex;align-items:center;gap:7px;
  padding:10px 0 10px;margin-right:24px;
  font-size:12px;font-weight:600;color:var(--s400);
  cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;
  white-space:nowrap;
}
.step-btn.done{color:var(--tea)}
.step-btn.active{color:var(--g5);border-bottom-color:var(--g5)}
.step-num-b{
  width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;flex-shrink:0;
  background:var(--s100);color:var(--s400);transition:all .2s;
}
.step-btn.active .step-num-b{background:var(--g5);color:#fff}
.step-btn.done .step-num-b{background:var(--tea);color:#fff}

/* Body */
.m-body{padding:22px 24px;overflow-y:auto;flex:1}
.m-page{display:none}.m-page.show{display:block}

/* Step sections */
.sec-title{font-size:13px;font-weight:700;color:var(--s800);margin-bottom:14px;display:flex;align-items:center;gap:7px}
.sec-title i{font-size:16px;color:var(--s500)}

/* Platform cards */
.plt-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:22px}
.plt-card{
  border:2px solid var(--s200);border-radius:11px;padding:14px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  transition:all .15s;text-align:center;
  background:var(--w);
}
.plt-card:hover{border-color:var(--s300);background:var(--s50)}
.plt-card.selected-meta{border-color:#1877F2;background:rgba(24,119,242,.05)}
.plt-card.selected-google{border-color:#EA4335;background:rgba(234,67,53,.04)}
.plt-card.selected-tiktok{border-color:#FE2C55;background:rgba(254,44,85,.04)}
.plt-logo{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900}
.pl-m{background:#1877F2;color:#fff}
.pl-g{background:#EA4335;color:#fff}
.pl-t{background:#010101;color:#fff;position:relative;overflow:hidden}
.plt-name{font-size:13px;font-weight:700;color:var(--s800)}
.plt-desc{font-size:11px;color:var(--s500);line-height:1.4}
.plt-check{width:18px;height:18px;border-radius:50%;background:var(--s100);display:flex;align-items:center;justify-content:center;font-size:10px;transition:all .15s}
.plt-card.selected-tiktok .plt-check{background:#FE2C55;color:#fff}
.plt-card.selected-meta .plt-check{background:#1877F2;color:#fff}
.plt-card.selected-google .plt-check{background:#EA4335;color:#fff}

/* Objective grid */
.obj-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin-bottom:22px}
.obj-card{
  border:1.5px solid var(--s200);border-radius:10px;padding:12px 13px;
  cursor:pointer;transition:all .15s;background:var(--w);
  display:flex;flex-direction:column;gap:5px;
}
.obj-card:hover{border-color:var(--s300);background:var(--s50)}
.obj-card.sel{border-color:var(--tt);background:rgba(254,44,85,.04)}
.obj-icon{font-size:18px;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--s100);color:var(--s600);transition:all .15s}
.obj-card.sel .obj-icon{background:rgba(254,44,85,.12);color:var(--tt)}
.obj-name{font-size:12px;font-weight:700;color:var(--s800)}
.obj-desc{font-size:11px;color:var(--s500);line-height:1.4}

/* Form fields */
.form-row{display:grid;gap:12px;margin-bottom:16px}
.form-row.two{grid-template-columns:1fr 1fr}
.form-row.three{grid-template-columns:1fr 1fr 1fr}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-label{font-size:11px;font-weight:600;color:var(--s600);text-transform:uppercase;letter-spacing:.5px}
.form-input{
  border:1px solid var(--s300);border-radius:8px;padding:9px 11px;
  font-size:13px;font-family:inherit;color:var(--s800);
  outline:none;transition:border-color .15s;background:var(--w);
  width:100%;
}
.form-input:focus{border-color:var(--g4)}
.form-select{
  border:1px solid var(--s300);border-radius:8px;padding:9px 11px;
  font-size:13px;font-family:inherit;color:var(--s800);
  outline:none;background:var(--w);cursor:pointer;width:100%;
  transition:border-color .15s;
}
.form-select:focus{border-color:var(--g4)}
.form-hint{font-size:11px;color:var(--s500)}

/* Age range */
.age-row{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.age-btn{
  padding:6px 13px;border:1.5px solid var(--s200);border-radius:20px;
  font-size:12px;font-weight:600;color:var(--s500);cursor:pointer;
  background:var(--w);transition:all .15s;
}
.age-btn:hover{border-color:var(--s400);color:var(--s700)}
.age-btn.sel{border-color:var(--tt);background:rgba(254,44,85,.07);color:var(--tt)}

/* Interest tags */
.tags-wrap{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px;margin-bottom:16px}
.tag{
  padding:5px 12px;border:1.5px solid var(--s200);border-radius:20px;
  font-size:12px;font-weight:500;color:var(--s600);cursor:pointer;
  background:var(--w);transition:all .15s;
}
.tag:hover{border-color:var(--s400)}
.tag.sel{border-color:var(--tt);background:rgba(254,44,85,.07);color:var(--tt);font-weight:600}

/* Budget */
.budget-toggle{display:flex;background:var(--s100);border-radius:9px;padding:3px;margin-bottom:14px;width:fit-content}
.bt-opt{padding:6px 16px;border-radius:7px;font-size:12px;font-weight:600;color:var(--s500);cursor:pointer;transition:all .15s}
.bt-opt.sel{background:var(--w);color:var(--s800);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.budget-preview-box{
  background:var(--gp);border:1px solid var(--gl);border-radius:10px;
  padding:13px 15px;display:flex;justify-content:space-between;align-items:center;
  margin-top:10px;
}
.bp-item{display:flex;flex-direction:column;gap:2px}
.bp-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--s500);font-weight:600}
.bp-val{font-size:16px;font-weight:800;color:var(--g5)}

/* Schedule */
.date-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}

/* Creative */
.upload-zone{
  border:2px dashed var(--s300);border-radius:11px;padding:28px;
  text-align:center;cursor:pointer;transition:all .15s;
  background:var(--s50);margin-bottom:14px;
}
.upload-zone:hover{border-color:var(--tt);background:rgba(254,44,85,.02)}
.upload-zone i{font-size:32px;color:var(--s400);margin-bottom:8px}
.upload-zone .uz-title{font-size:13px;font-weight:600;color:var(--s700);margin-bottom:3px}
.upload-zone .uz-sub{font-size:11px;color:var(--s500)}
.cta-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:8px}
.cta-btn{
  border:1.5px solid var(--s200);border-radius:8px;padding:8px 10px;
  font-size:12px;font-weight:600;text-align:center;cursor:pointer;
  color:var(--s600);transition:all .15s;background:var(--w);
}
.cta-btn:hover{border-color:var(--s300)}
.cta-btn.sel{border-color:var(--tt);background:rgba(254,44,85,.07);color:var(--tt)}

/* Review */
.review-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:16px}
.rv-box{background:var(--s50);border:1px solid var(--s200);border-radius:10px;padding:12px 14px}
.rv-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--s400);font-weight:600;margin-bottom:4px}
.rv-val{font-size:13px;font-weight:600;color:var(--s800)}
.rv-val.green{color:var(--g5)}
.rv-val.tktk{color:var(--tt)}
.est-box{background:var(--gp);border:1px solid var(--gl);border-radius:10px;padding:14px 16px;margin-bottom:16px}
.est-title{font-size:12px;font-weight:700;color:var(--g8);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.est-row{display:flex;justify-content:space-between;margin-bottom:6px;font-size:12px}
.est-lbl{color:var(--s500)}.est-val{font-weight:600;color:var(--s800)}

/* Footer */
.m-foot{
  padding:14px 24px;border-top:1px solid var(--s200);
  display:flex;align-items:center;justify-content:space-between;
  background:var(--w);
}
.foot-left{display:flex;align-items:center;gap:8px}
.progress-dots{display:flex;gap:6px;align-items:center}
.pdot{width:7px;height:7px;border-radius:50%;background:var(--s200);transition:all .2s}
.pdot.done-d{background:var(--tea)}
.pdot.cur{width:18px;border-radius:4px;background:var(--g5)}
.btn-back{padding:8px 16px;border:1.5px solid var(--s200);border-radius:9px;background:var(--w);font-size:13px;font-weight:600;color:var(--s600);cursor:pointer;transition:all .15s;font-family:inherit}
.btn-back:hover{background:var(--s100)}
.btn-next{padding:8px 20px;background:var(--g9);border:none;border-radius:9px;font-size:13px;font-weight:700;color:#fff;cursor:pointer;transition:opacity .15s;font-family:inherit;display:flex;align-items:center;gap:7px}
.btn-next:hover{opacity:.85}
.btn-launch{background:var(--tt);padding:8px 22px}
.btn-launch:hover{opacity:.85}

/* Success */
.success-screen{text-align:center;padding:30px 20px}
.success-icon{width:60px;height:60px;border-radius:50%;background:#E8F5E8;display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--tea);margin:0 auto 16px}
.success-title{font-size:20px;font-weight:800;color:var(--s800);margin-bottom:6px}
.success-sub{font-size:13px;color:var(--s500);margin-bottom:20px}
.success-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;text-align:left}
.ss-box{background:var(--s50);border:1px solid var(--s200);border-radius:9px;padding:11px 13px}
.ss-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--s400);font-weight:600;margin-bottom:3px}
.ss-val{font-size:14px;font-weight:700;color:var(--s800)}