/* ============================================================
   SHARED/CSS/STYLE.CSS — Conversion Syndicate Link Tracker
   File ini dipakai SEMUA panel. Jangan edit per panel.
   Edit di sini = berubah di semua panel sekaligus.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --gold:#B8860B;--gold-l:#D4A017;--gold-d:#8B6914;
  --bg:#f5f6fa;--card:#fff;--nav:#fff;
  --border:rgba(0,0,0,.09);--border2:#e5e7eb;
  --text:#1a1d2e;--muted:#6b7280;--muted2:#9ca3af;
  --success:#0f6e56;--danger:#c0392b;--info:#2563eb;--warn:#d97706;
  --r:10px;--rs:6px;--shadow:0 1px 4px rgba(0,0,0,.06)
}
body{font-family:'Segoe UI',system-ui,sans-serif;font-size:13px;background:var(--bg);color:var(--text)}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}
.app{display:flex;min-height:100vh}

/* ── LOGIN ── */
.login-wrap{flex:1;display:flex;align-items:center;justify-content:center;background:#fff;padding:20px;min-height:100vh}
.login-card{width:100%;max-width:380px;background:#fff;border:1px solid var(--border2);border-radius:var(--r);padding:32px 28px;box-shadow:0 4px 24px rgba(0,0,0,.07);position:relative;overflow:hidden}
.cs-logo-svg{display:block;margin:0 auto 16px}
.login-pill{background:#faf6e9;border:1px solid #e8d9a0;border-radius:999px;padding:5px 16px;font-size:11px;color:var(--gold-d);font-family:monospace;text-align:center;margin-bottom:18px}
.login-lbl{font-size:11px;color:var(--muted);margin-bottom:4px;display:block;font-weight:500}
.login-input-wrap{display:flex;gap:6px;margin-bottom:12px}
.login-input{flex:1;background:#f9fafb;border:1px solid var(--border2);border-radius:var(--rs);padding:10px 12px;color:var(--text);font-size:13px;outline:none;transition:border .2s;font-family:inherit}
.login-input:focus{border-color:var(--gold);background:#fff}
.login-eye{background:#f9fafb;border:1px solid var(--border2);border-radius:var(--rs);padding:0 10px;cursor:pointer;color:var(--muted);font-size:14px;display:flex;align-items:center;transition:all .15s}
.login-eye:hover{border-color:var(--gold);color:var(--gold)}
.login-btn{width:100%;padding:11px;background:linear-gradient(135deg,#B8860B,#8B6914);border:none;border-radius:var(--rs);color:#fff;font-size:13px;font-weight:700;cursor:pointer;letter-spacing:.5px;text-transform:uppercase;transition:opacity .2s}
.login-btn:hover{opacity:.9}
.login-err{margin-top:8px;padding:8px;background:#fef2f2;border:1px solid #fca5a5;border-radius:var(--rs);font-size:11px;color:#dc2626;text-align:center;display:none}
.demo-box{margin-top:14px;padding:10px 12px;background:#f9fafb;border:1px solid var(--border2);border-radius:var(--rs);font-size:11px}
.demo-row{display:flex;align-items:center;justify-content:space-between;padding:3px 0;gap:6px}
.demo-slug{font-family:monospace;color:var(--gold-d);font-size:10px;flex:1}
.demo-try{background:#faf6e9;border:1px solid #e8d9a0;border-radius:4px;padding:2px 8px;font-size:10px;color:var(--gold-d);cursor:pointer;white-space:nowrap}
.demo-try:hover{background:#f0e8c8}

/* ── APP LAYOUT ── */
.sidebar{width:200px;background:#fff;flex-shrink:0;display:flex;flex-direction:column;border-right:1px solid var(--border2)}
.sb-logo{padding:14px;border-bottom:1px solid var(--border2);display:flex;align-items:center;gap:8px}
.sb-logo-name{font-size:12px;font-weight:700;color:var(--text);line-height:1.2}
.sb-logo-sub{font-size:9px;color:var(--muted);letter-spacing:.05em}
.sb-sec{padding:10px 12px 3px;font-size:9px;color:var(--muted2);letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.sbi{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:var(--rs);cursor:pointer;color:var(--muted);font-size:12px;border:none;background:none;width:calc(100% - 12px);text-align:left;margin:1px 6px;transition:all .15s}
.sbi i{font-size:14px}
.sbi:hover{background:#f5f6fa;color:var(--text)}
.sbi.active{background:#faf6e9;color:var(--gold-d);font-weight:600}
.sbi.active i{color:var(--gold)}
.sbi.danger{color:var(--danger)}.sbi.danger:hover{background:#fef2f2}
.sb-foot{margin-top:auto;padding:10px 12px 14px;border-top:1px solid var(--border2)}
.sb-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0}
.main{flex:1;background:var(--bg);display:flex;flex-direction:column;overflow-y:auto;min-width:0}
.topbar{background:#fff;border-bottom:1px solid var(--border2);padding:10px 16px;display:flex;align-items:center;gap:10px;flex-shrink:0;box-shadow:var(--shadow)}
.content{padding:14px;flex:1}

/* ── CARDS ── */
.card{background:#fff;border:1px solid var(--border2);border-radius:var(--r);padding:14px;margin-bottom:10px;box-shadow:var(--shadow)}
.card-hd{display:flex;align-items:center;gap:7px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #f0f1f5;flex-wrap:wrap}
.card-hd i{font-size:16px;color:var(--gold)}
.ct{font-size:13px;font-weight:600;color:var(--text)}

/* ── FORMS ── */
label{font-size:11px;color:var(--muted);margin-bottom:3px;display:block;font-weight:500}
input[type=text],input[type=number],input[type=password],input[type=date],select,textarea{width:100%;margin-bottom:8px;font-size:12px;background:#f9fafb;border:1px solid var(--border2);border-radius:var(--rs);padding:7px 10px;color:var(--text);outline:none;font-family:inherit;transition:border .15s}
input:focus,select:focus,textarea:focus{border-color:var(--gold);background:#fff}
select option{background:#fff;color:var(--text)}
textarea{resize:vertical}

/* ── BUTTONS ── */
.btn{padding:7px 13px;font-size:12px;font-weight:600;border-radius:var(--rs);border:1px solid var(--border2);background:#fff;color:var(--text);cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:all .15s;white-space:nowrap}
.btn:hover{border-color:var(--gold);color:var(--gold-d)}
.bb{background:linear-gradient(135deg,#B8860B,#8B6914);color:#fff;border-color:var(--gold)}.bb:hover{opacity:.9;color:#fff}
.bg{background:var(--success);color:#fff;border-color:var(--success)}.bg:hover{opacity:.88}
.br{background:var(--danger);color:#fff;border-color:var(--danger)}.br:hover{opacity:.88}
.bam{background:var(--warn);color:#fff;border-color:var(--warn)}.bam:hover{opacity:.88}
.bsm{padding:4px 9px;font-size:11px}
.bxsm{padding:3px 7px;font-size:10px}
.bic{background:#f9fafb;border:1px solid var(--border2);border-radius:var(--rs);padding:3px 8px;cursor:pointer;color:var(--muted);font-size:13px;display:inline-flex;align-items:center;transition:all .15s}
.bic:hover{border-color:var(--gold);color:var(--gold-d)}

/* ── BADGES ── */
.badge{display:inline-flex;align-items:center;gap:2px;font-size:10px;padding:2px 7px;border-radius:999px;font-weight:600}
.b-gr{background:#d1fae5;color:#065f46}.b-bl{background:#dbeafe;color:#1e40af}
.b-am{background:#fef3c7;color:#92400e}.b-rd{background:#fee2e2;color:#991b1b}
.b-gy{background:#f3f4f6;color:#374151}.b-or{background:#ffedd5;color:#9a3412}
.wap-badge{background:#fef3c7;color:#92400e;font-size:9px;padding:1px 5px;border-radius:3px;font-weight:700}
.web-badge{background:#dbeafe;color:#1e40af;font-size:9px;padding:1px 5px;border-radius:3px;font-weight:700}

/* ── TABLE ── */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed}
th{padding:8px 10px;text-align:left;font-weight:600;color:var(--muted);font-size:11px;border-bottom:1px solid #f0f1f5;background:#f9fafb;white-space:nowrap}
td{padding:7px 10px;border-bottom:1px solid #f5f6fa;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
tr:last-child td{border:none}
tr:hover td{background:#fdfbf5}
.ip-txt{color:var(--info);font-family:monospace;font-size:10px}

/* ── METRICS ── */
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.metric{background:#f9fafb;border:1px solid var(--border2);border-radius:var(--rs);padding:10px 12px}
.mv{font-size:18px;font-weight:700;color:var(--text)}.mvg{color:var(--success)}.mvb{color:var(--info)}.mva{color:var(--gold-d)}
.ml{font-size:10px;color:var(--muted);margin-top:1px}

/* ── LIVE ── */
.dot-live{width:6px;height:6px;border-radius:50%;background:var(--success);display:inline-block;animation:blink 1.5s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
.live-row{display:flex;align-items:center;gap:5px;padding:4px 0;border-bottom:1px solid #f5f6fa;font-size:11px}
.live-row:last-child{border:none}

/* ── OFFERS ── */
.offer-block{background:#f9fafb;border-radius:var(--rs);border-left:3px solid var(--gold);padding:12px;margin-bottom:8px}
.ctag{display:inline-flex;align-items:center;gap:3px;background:#fef3c7;color:#92400e;border:1px solid #fcd34d;border-radius:4px;padding:2px 7px;font-size:10px;margin:2px;font-weight:600}
.ctag button{background:none;border:none;cursor:pointer;color:#92400e;font-size:11px;padding:0 0 0 2px}
.ctry-box{min-height:32px;border:1px solid var(--border2);border-radius:var(--rs);padding:4px 7px;background:#fff;display:flex;flex-wrap:wrap;gap:2px;align-items:center;margin-bottom:5px}
.cpicker{display:none;background:#fff;border:1px solid var(--border2);border-radius:var(--rs);padding:8px;margin-top:5px;box-shadow:0 4px 12px rgba(0,0,0,.08)}
.cpicker.open{display:block}
.cgrid{display:flex;flex-wrap:wrap;gap:3px;max-height:110px;overflow-y:auto;margin-top:4px}
.cbt{padding:2px 7px;font-size:11px;border-radius:4px;border:1px solid var(--border2);cursor:pointer;background:#f9fafb;color:var(--text)}
.cbt.sel{background:var(--gold);color:#fff;border-color:var(--gold);font-weight:700}

/* ── TRAFFIC BAR ── */
.tbar{height:7px;border-radius:999px;background:#f3f4f6;overflow:hidden;display:flex;margin:5px 0}
.tseg{height:100%;border-radius:999px;transition:width .3s}

/* ── DATE RANGE ── */
.date-range-box{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--border2);border-radius:var(--rs);padding:6px 11px;font-size:12px;cursor:pointer;position:relative;color:var(--text)}
.date-range-box i{color:var(--gold-d)}
.date-dropdown{display:none;position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid var(--border2);border-radius:var(--r);padding:6px;z-index:50;min-width:240px;box-shadow:0 8px 24px rgba(0,0,0,.1)}
.date-dropdown.open{display:block}
.date-opt{padding:8px 12px;font-size:12px;border-radius:var(--rs);cursor:pointer;color:var(--text)}
.date-opt:hover{background:#faf6e9;color:var(--gold-d)}
.date-opt.active{background:#faf6e9;color:var(--gold-d);font-weight:600}
.date-custom-box{display:none;margin-top:8px;padding-top:8px;border-top:1px solid var(--border2)}

/* ── PERF BUTTONS ── */
.btn-period{padding:7px 14px;font-size:12px;border-radius:var(--rs);border:1px solid var(--border2);background:#fff;color:var(--muted);cursor:pointer;font-weight:500;transition:all .15s}
.btn-period:hover{border-color:var(--gold);color:var(--gold-d)}
.btn-period.active{background:var(--gold);color:#fff;border-color:var(--gold);font-weight:700}
.btn-net{padding:5px 12px;font-size:11px;border-radius:var(--rs);border:1px solid var(--border2);background:#fff;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:all .15s}
.btn-net.active{background:var(--gold);color:#fff;border-color:var(--gold);font-weight:700}
.btn-view{padding:5px 11px;font-size:11px;border-radius:var(--rs);border:1px solid var(--border2);background:#fff;color:var(--muted);cursor:pointer;transition:all .15s}
.btn-view.active{background:var(--gold);color:#fff;border-color:var(--gold);font-weight:700}
.cr-green{color:var(--success);font-weight:600}.cr-red{color:var(--danger);font-weight:600}.cr-zero{color:var(--muted)}

/* ── URL BOX ── */
.url-box{background:#f8f9fc;border:1px solid var(--border2);border-radius:var(--rs);padding:8px 10px;font-size:11px;font-family:monospace;line-height:1.8;word-break:break-all;white-space:pre-wrap;color:var(--info)}

/* ── INFO BANNERS ── */
.info-banner{background:#faf6e9;border:1px solid #e8d9a0;border-radius:var(--rs);padding:9px 12px;font-size:11px;color:var(--gold-d);display:flex;align-items:flex-start;gap:7px;margin-bottom:10px}
.success-banner{background:#d1fae5;border:1px solid #6ee7b7;border-radius:var(--rs);padding:9px 12px;font-size:11px;color:#065f46;display:flex;align-items:flex-start;gap:7px;margin-bottom:8px}
.warn-banner{background:#fff7ed;border:1px solid #fed7aa;border-radius:var(--rs);padding:9px 12px;font-size:11px;color:#9a3412;display:flex;align-items:flex-start;gap:7px;margin-bottom:8px}
.postback-url{font-family:monospace;font-size:10px;color:var(--info);background:#eff6ff;padding:5px 9px;border-radius:var(--rs);margin-bottom:6px;word-break:break-all}
.ns-box{font-family:monospace;font-size:11px;background:#1e2235;color:#7dd3fc;padding:8px 12px;border-radius:var(--rs);margin-bottom:4px;display:flex;align-items:center;justify-content:space-between}

/* ── IMAGE TOGGLE ── */
.img-field-wrap{position:relative;margin-bottom:8px}
.img-input-inner{padding-right:100px!important;margin-bottom:0!important}
.img-toggle-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:5px;background:#fff;border:1px solid var(--border2);border-radius:999px;padding:3px 10px;cursor:default;font-size:11px;font-weight:600;transition:all .2s;white-space:nowrap;z-index:2}
.img-toggle-btn.off{background:#fee2e2;border-color:#fca5a5;color:var(--danger)}
.img-toggle-btn.on{background:#d1fae5;border-color:#6ee7b7;color:var(--success)}
.img-toggle-dot{width:7px;height:7px;border-radius:50%;transition:background .2s}
.img-toggle-btn.off .img-toggle-dot{background:var(--danger)}
.img-toggle-btn.on .img-toggle-dot{background:var(--success)}

/* ── WL TOGGLE ── */
.switch{position:relative;display:inline-block;width:36px;height:20px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;cursor:pointer;inset:0;background:#d1d5db;border-radius:20px;transition:.3s}
.slider:before{position:absolute;content:'';height:14px;width:14px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.3s}
input:checked+.slider{background:var(--gold)}
input:checked+.slider:before{transform:translateX(16px)}
.wl-body{display:none;background:#faf6e9;border:1px solid #e8d9a0;border-radius:var(--rs);padding:12px;margin-bottom:10px}
.wl-body.open{display:block}

/* ── ADD DOMAIN TABS ── */
.tab-bar{display:flex;border-bottom:2px solid var(--border2);margin-bottom:16px}
.tab-btn{padding:9px 18px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .15s}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{color:var(--gold-d);border-bottom-color:var(--gold)}
.tab-panel{display:none}.tab-panel.active{display:block}
.ns-card{background:#1e2235;border-radius:var(--rs);padding:14px;margin-bottom:12px}
.ns-card-title{font-size:11px;font-weight:700;color:#93c5fd;letter-spacing:.05em;text-transform:uppercase;margin-bottom:10px}
.ns-row{display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:11px;color:#e2e8f0}
.ns-row:last-child{border:none}
.ns-label{color:#94a3b8;font-size:10px;min-width:80px}
.ns-val{font-family:monospace;color:#7dd3fc;flex:1}
.domain-added-row{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--border2);border-radius:var(--rs);margin-bottom:6px;background:#f9fafb}
.domain-status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.domain-status-dot.pending{background:#f59e0b;animation:blink 2s infinite}
.domain-status-dot.active{background:var(--success)}
.domain-status-dot.failed{background:var(--danger)}

/* ── PERF DETAIL ── */
.perf-detail{display:none}.perf-detail.open{display:block}

/* ── MISC ── */
.sec{display:none}.sec.active{display:block}
.sep{border:none;border-top:1px dashed #e5e7eb;margin:10px 0}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.r3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}

.login-card input[type=password]{
  background:#161616 !important;
  border:1px solid rgba(232,201,106,.3) !important;
  color:#e8e8e8 !important;
}
.login-card input[type=password]:focus{
  background:#1a1a1a !important;
  border-color:#e8c96a !important;
}

/* ── LOGIN (DARK REDESIGN) — override ── */
.login-wrap{
  background:#0a0a0a;
  background-image:radial-gradient(circle at 50% 30%, #161616 0%, #0a0a0a 70%);
}
.login-card{
  background:linear-gradient(160deg,#161616,#0c0c0c);
  border:1px solid rgba(232,201,106,.35);
  border-radius:20px;
  padding:32px 28px;
  box-shadow:0 0 50px rgba(0,0,0,.7), 0 0 0 1px rgba(232,201,106,.08) inset;
  text-align:center;
}
.login-logo{width:260px;height:auto;margin:0 auto -16px}
.login-logo img{width:100%;height:auto;object-fit:contain;display:block}

.login-glow{
  height:1px;
  margin:0 0 20px;
  background:linear-gradient(90deg,transparent,#e8c96a 50%,transparent);
  opacity:.6;
}

.login-input-wrap{position:relative;margin-bottom:14px;display:block}
.login-input{
  width:100%;
  background:#161616;
  border:1px solid rgba(232,201,106,.3);
  border-radius:12px;
  padding:12px 42px;
  font-size:13px;
  color:#e8e8e8;
}
.login-input::placeholder{color:#8a8a8a}
.login-input:focus{border-color:#e8c96a;background:#1a1a1a}

.login-icon-left{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  color:#e8c96a;font-size:16px;
}
.login-eye{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:#e8c96a;font-size:16px;
  cursor:pointer;padding:0;display:flex;align-items:center;
}
.login-eye:hover{color:#f0d27a}

.login-btn{
  width:100%;
  border:none;border-radius:12px;
  padding:13px;font-size:14px;font-weight:800;
  letter-spacing:.08em;color:#1a1303;
  background:linear-gradient(135deg,#f0d27a,#caa23a);
  text-transform:uppercase;
  margin-top:4px;
}
.login-btn:hover{opacity:.92}

#loginErr{
  margin-top:10px;background:rgba(220,38,38,.12);
  border:1px solid rgba(220,38,38,.35);color:#ff8a8a;
}

.login-copy{font-size:11px;color:#888;margin-bottom:4px}

.login-card .demo-box{
  margin-top:14px;text-align:left;
  background:#161616;border-color:rgba(232,201,106,.25);
}
.login-card .demo-slug{color:#e8c96a}
.login-card .demo-try{background:rgba(232,201,106,.1);border-color:rgba(232,201,106,.3);color:#e8c96a}
.login-card .demo-try:hover{background:rgba(232,201,106,.18)}