/* Port dari cekat-email-tab/mockup.html — widget = area main saja
   (chrome topnav/sidebar Cekat hidup di demo-host, bukan di sini). */

:root{
  --blue:#2f6bff;--blue-ink:#2746d6;--pill:#eef2ff;--ink:#1f2430;--gray:#6b7280;
  --line:#eceef2;--line2:#e6e8ee;--soft:#f7f8fa;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased}

/* main */
.main{height:100vh;min-width:0;background:#fff;display:flex;flex-direction:column;overflow:hidden}
.maintop{padding:16px 24px 0 24px}
.h1{font-size:19px;font-weight:600}
.subtabs{display:flex;gap:26px;margin-top:14px;border-bottom:1px solid var(--line)}
.subtab{font-size:13.5px;font-weight:500;color:var(--gray);padding-bottom:12px;position:relative;cursor:pointer}
.subtab.active{color:var(--blue)}
.subtab.active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--blue);border-radius:2px}

/* views */
.view{display:none;flex:1;min-height:0}
.view.active{display:flex;flex-direction:column}
.vpad{padding:20px 24px;overflow:auto;flex:1}
.viewhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.viewhead .t{font-size:16px;font-weight:600}
.pillbtn{background:var(--blue);color:#fff;border:none;border-radius:10px;padding:9px 16px;font-size:13px;font-weight:600;font-family:inherit;display:flex;align-items:center;gap:7px;cursor:pointer}
.pillbtn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line2)}
.pillbtn:disabled{opacity:.55;cursor:default}

/* cards / grid (broadcast) */
.canvas{display:grid;grid-template-columns:300px 1fr 280px;gap:18px;padding:20px 24px;flex:1;min-height:0}
.card{border:1px solid var(--line2);border-radius:14px;background:#fff;display:flex;flex-direction:column;min-height:0}
.card .ttl{font-size:13px;font-weight:600;padding:14px 16px;border-bottom:1px solid var(--line)}
.pad{padding:16px;overflow:auto}
.field{margin-bottom:14px}
.lbl{font-size:12px;font-weight:500;color:#566072;margin-bottom:6px;display:block}
.inp{width:100%;border:1px solid var(--line2);border-radius:9px;padding:9px 11px;font-size:13px;color:var(--ink);background:#fff;display:flex;align-items:center;justify-content:space-between;font-family:inherit}
input.inp,textarea.inp,select.inp{display:block}
input.inp:focus,textarea.inp:focus,select.inp:focus{outline:2px solid #cdd9ff;border-color:#aebcf0}
.inp.ph{color:#9aa1ad}
.inp.ta{min-height:58px;align-items:flex-start;line-height:1.5;font-size:12.5px;color:#3a4254;resize:vertical}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa1ad' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px}
.chev{color:#9aa1ad}
.verified{font-size:10px;font-weight:600;color:#15803d;background:#eafaf0;border:1px solid #cdeed8;border-radius:6px;padding:2px 6px;margin-left:8px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-size:11.5px;font-weight:500;background:#eef2ff;color:var(--blue-ink);border-radius:7px;padding:4px 9px;cursor:pointer;border:1px solid transparent}
.chip.active{border-color:#aebcf0;font-weight:600}
.sendbtn,.genbtn{margin-top:6px;width:100%;background:var(--blue);color:#fff;border:none;border-radius:10px;padding:11px;font-size:14px;font-weight:600;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.sendbtn:disabled,.genbtn:disabled{opacity:.55;cursor:default}
.quota{font-size:11px;color:#8b93a3;text-align:center;margin-top:10px}
.cpad{padding:16px;overflow:auto}
.tpl-row{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.tpl{font-size:12px;font-weight:500;color:#566072;border:1px solid var(--line2);border-radius:8px;padding:7px 12px;cursor:pointer}
.tpl.active{background:var(--pill);color:var(--blue-ink);border-color:#d6def8;font-weight:600}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* preview */
.previewframe{margin:14px 16px 16px;border:1px solid var(--line);border-radius:10px;overflow:hidden;flex:1;display:flex;flex-direction:column}
.pvhead{padding:9px 12px;border-bottom:1px solid var(--line);font-size:11px;color:#8b93a3}
.pvhead b{color:var(--ink);font-weight:600}
.pvbody{flex:1;background:#f3f4f7;padding:14px;overflow:hidden}
.pvmail{background:#fff;border-radius:6px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.06)}
.pvposter{height:150px;background:linear-gradient(160deg,#1b2a6b,#2f6bff 60%,#7aa2ff);position:relative}
.pvposter span{position:absolute;left:14px;bottom:34px;color:#fff;font-weight:700;font-size:15px}
.pvcta{position:absolute;left:14px;bottom:12px;background:#fff;color:#1b2a6b;font-size:10px;font-weight:700;padding:5px 12px;border-radius:5px}
.pvtext{padding:12px 14px;font-size:10px;color:#6b7280;line-height:1.5}

/* table */
.tbl{width:100%;border:1px solid var(--line2);border-radius:12px;border-collapse:separate;border-spacing:0;overflow:hidden;font-size:13px}
.tbl th{text-align:left;font-size:11px;font-weight:600;color:#8b93a3;text-transform:uppercase;letter-spacing:.4px;padding:12px 16px;background:var(--soft);border-bottom:1px solid var(--line)}
.tbl td{padding:13px 16px;border-bottom:1px solid var(--line);color:#3a4254}
.tbl tr:last-child td{border-bottom:none}
.tbl td.name{font-weight:600;color:var(--ink)}
.badge-ok{font-size:11px;font-weight:600;color:#15803d;background:#eafaf0;border:1px solid #cdeed8;border-radius:7px;padding:3px 9px}
.badge-pend{font-size:11px;font-weight:600;color:#b45309;background:#fff5e6;border:1px solid #f5dcb0;border-radius:7px;padding:3px 9px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;color:#566072}

/* template gallery */
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tcard{border:1px solid var(--line2);border-radius:12px;overflow:hidden;background:#fff}
.tthumb{height:120px;position:relative}
.tthumb.promo{background:linear-gradient(160deg,#1b2a6b,#2f6bff 60%,#7aa2ff)}
.tthumb.news{background:linear-gradient(160deg,#0f766e,#14b8a6)}
.tthumb.receipt{background:linear-gradient(160deg,#7c5800,#eab308)}
.tthumb.poster{background:linear-gradient(160deg,#5b21b6,#a855f7)}
.tthumb.welcome{background:linear-gradient(160deg,#9d174d,#ec4899)}
.tthumb.announce{background:linear-gradient(160deg,#1e3a8a,#3b82f6)}
.tthumb span{position:absolute;left:12px;bottom:12px;color:#fff;font-weight:700;font-size:13px;opacity:.95}
.tmeta{padding:11px 13px;display:flex;align-items:center;justify-content:space-between}
.tmeta .nm{font-size:13px;font-weight:600}
.tmeta .ty{font-size:10.5px;color:#8b93a3}

/* domains */
.domcard{border:1px solid var(--line2);border-radius:12px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.domcard .dn{font-size:15px;font-weight:600}
.domcard .ds{font-size:12px;color:#8b93a3;margin-top:2px}
.domcard .acts{display:flex;align-items:center;gap:10px}
.linkbtn{font-family:inherit;font-size:12px;font-weight:600;color:var(--blue-ink);background:none;border:none;cursor:pointer;padding:0}

/* reports */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.stat{border:1px solid var(--line2);border-radius:12px;padding:15px 16px}
.stat .k{font-size:11px;color:#8b93a3;font-weight:500;text-transform:uppercase;letter-spacing:.4px}
.stat .v{font-size:24px;font-weight:700;margin-top:6px}
.stat .v.good{color:#15803d}

/* quota — header pill (always visible) */
.h1row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.qpill{display:flex;align-items:center;gap:12px;border:1px solid #d6def8;background:linear-gradient(180deg,#f5f8ff,#fff);border-radius:11px;padding:8px 14px;cursor:pointer}
.qpill svg{width:16px;height:16px;color:var(--blue)}
.qpill .qp-meta{min-width:150px}
.qpill .qp-top{font-size:12px;color:#6b7280}
.qpill .qp-top b{color:var(--ink);font-weight:700;font-size:13px}
.qpill .qp-bar{height:5px;border-radius:4px;background:#e6ecfb;overflow:hidden;margin-top:5px}
.qpill .qp-bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#2f6bff,#5b8bff)}
.qpill .qp-pct{font-size:15px;font-weight:700;color:var(--blue-ink)}

/* quota — broadcast meter */
.qmeter{border:1px solid #d6def8;background:linear-gradient(180deg,#f5f8ff,#fff);border-radius:11px;padding:12px 14px;margin-top:14px}
.qmeter .qm-top{display:flex;align-items:center;justify-content:space-between}
.qmeter .qm-lbl{font-size:10.5px;font-weight:600;color:#566072;text-transform:uppercase;letter-spacing:.4px;display:flex;align-items:center;gap:6px}
.qmeter .qm-lbl svg{width:13px;height:13px;color:var(--blue)}
.qmeter .qm-pct{font-size:13px;font-weight:700;color:var(--blue-ink)}
.qmeter .qm-num{font-size:17px;font-weight:700;color:var(--ink);margin-top:8px}
.qmeter .qm-num span{font-size:11.5px;font-weight:500;color:#8b93a3}
.qmeter .qm-bar{height:7px;border-radius:5px;background:#e6ecfb;overflow:hidden;margin-top:9px}
.qmeter .qm-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#2f6bff,#5b8bff)}
.qmeter .qm-foot{font-size:10.5px;color:#8b93a3;margin-top:8px}

/* reports — date filter */
.filterbar{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:9px;overflow:hidden}
.segbtn{font-size:12.5px;font-weight:500;color:#566072;padding:7px 14px;border-right:1px solid var(--line2);cursor:pointer}
.segbtn:last-child{border-right:none}
.segbtn.active{background:var(--pill);color:var(--blue-ink);font-weight:600}
.daterange{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--ink);border:1px solid var(--line2);border-radius:9px;padding:7px 12px}
.daterange svg{width:14px;height:14px;color:#8b93a3}
.daterange input{border:none;font-family:inherit;font-size:12.5px;color:var(--ink);width:110px}
.daterange input:focus{outline:none}
.resultcount{font-size:12px;color:#8b93a3;margin-left:auto}

/* preview — expand + modal */
.ttl-row{display:flex;align-items:center;justify-content:space-between}
.expandbtn{font-family:inherit;font-size:11px;font-weight:600;color:var(--blue-ink);background:var(--pill);border:1px solid #d6def8;border-radius:7px;padding:4px 9px;display:flex;align-items:center;gap:5px;cursor:pointer}
.expandbtn svg{width:12px;height:12px}
.modal{display:none;position:fixed;inset:0;background:rgba(20,24,33,.55);z-index:50;align-items:center;justify-content:center;padding:30px}
.modal.open{display:flex}
.modal-card{background:#fff;border-radius:16px;width:min(680px,100%);max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.32)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}
.mh-t{font-size:16px;font-weight:600}
.mh-s{font-size:12px;color:#8b93a3;margin-top:2px}
.modal-tools{display:flex;align-items:center;gap:10px}
.devtoggle{display:inline-flex;border:1px solid var(--line2);border-radius:8px;overflow:hidden}
.devbtn{padding:6px 12px;font-size:12px;font-weight:500;color:#566072;cursor:pointer;border-right:1px solid var(--line2)}
.devbtn:last-child{border-right:none}
.devbtn.active{background:var(--pill);color:var(--blue-ink);font-weight:600}
.closebtn{width:32px;height:32px;border:1px solid var(--line2);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#6b7280;cursor:pointer;background:#fff}
.closebtn svg{width:15px;height:15px}
.modal-body{padding:26px;background:#f3f4f7;overflow:auto;flex:1;display:flex;justify-content:center}
.mail-lg{background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.08);width:100%;max-width:560px;align-self:flex-start;transition:max-width .2s}
.mail-lg.mobile{max-width:340px}
.mail-lg .poster{height:300px;background:linear-gradient(160deg,#1b2a6b,#2f6bff 60%,#7aa2ff);position:relative}
.mail-lg .poster span{position:absolute;left:28px;bottom:78px;color:#fff;font-weight:700;font-size:30px}
.mail-lg .poster .cta{position:absolute;left:28px;bottom:28px;background:#fff;color:#1b2a6b;font-size:14px;font-weight:700;padding:10px 22px;border-radius:7px}
.mail-lg .txt{padding:26px 28px;font-size:15px;color:#3a4254;line-height:1.7}
.mail-lg .foot{padding:16px 28px;border-top:1px solid var(--line);font-size:11px;color:#9aa1ad}
.modal-foot{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-top:1px solid var(--line);gap:12px}
.mf-meta{font-size:12px;color:#8b93a3}
.mf-meta b{color:var(--ink)}
.modal-foot .acts{display:flex;gap:10px}

/* auth screen (401) */
.authwall{display:none;height:100vh;align-items:center;justify-content:center;padding:30px}
.authwall.active{display:flex}
.authwall .box{max-width:380px;text-align:center}
.authwall .icon{width:52px;height:52px;border-radius:14px;background:#fff5e6;border:1px solid #f5dcb0;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:#b45309}
.authwall .icon svg{width:24px;height:24px}
.authwall h2{font-size:17px;font-weight:600;margin-bottom:8px}
.authwall p{font-size:13px;color:var(--gray);line-height:1.6}
.authwall code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;background:var(--soft);border:1px solid var(--line2);border-radius:6px;padding:2px 6px}

/* toast */
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);background:#1f2430;color:#fff;font-size:13px;font-weight:500;border-radius:10px;padding:11px 18px;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;z-index:99;max-width:80vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:#a02323}

/* skeleton loading */
.skeleton{color:#9aa1ad;font-size:13px;padding:8px 0}