@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');
:root{
  --bg:#0a0a0c;--panel:#121214;--panel2:#1a1a1e;--panel3:#222228;
  --line:#2a2a32;--line2:#363640;
  --orange:#ff6b1a;--orange2:#ff8442;--orange-dk:#e2540a;--orange-glow:rgba(255,107,26,0.15);
  --txt:#f4f4f6;--txt2:#a0a0ad;--txt3:#62626e;
  --green:#2ecc71;--red:#ff4757;--yellow:#ffa502;--blue:#3742fa;--cyan:#18dcff;
  --r:14px;--r2:10px;--r3:7px;
  --sh:0 4px 20px rgba(0,0,0,0.5);--sh2:0 12px 48px rgba(0,0,0,0.7);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Plus Jakarta Sans',sans-serif;background:var(--bg);color:var(--txt);font-size:14px;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:5px}
::-webkit-scrollbar-track{background:transparent}
.mono{font-family:'JetBrains Mono',monospace}

/* LOGIN */
#login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1000;
  background:radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,107,26,0.08), transparent 70%), var(--bg)}
.login-card{width:380px;background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:20px;padding:2.5rem;box-shadow:var(--sh2)}
.login-brand{display:flex;align-items:center;gap:13px;margin-bottom:2rem}
.brand-mark{width:46px;height:46px;background:linear-gradient(135deg,var(--orange),var(--orange-dk));border-radius:13px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;color:#fff;box-shadow:0 6px 20px var(--orange-glow)}
.login-brand h1{font-size:1.3rem;font-weight:800;letter-spacing:-0.5px}
.login-brand h1 span{color:var(--orange)}
.login-brand p{font-size:0.72rem;color:var(--txt3);margin-top:2px;font-weight:500}
.fld{margin-bottom:1rem}
.fld label{display:block;font-size:0.7rem;font-weight:600;color:var(--txt2);margin-bottom:7px;letter-spacing:0.4px;text-transform:uppercase}
.fld input{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:var(--r3);padding:0.7rem 0.9rem;color:var(--txt);font-size:0.9rem;font-family:inherit;outline:none;transition:.15s}
.fld input:focus{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-glow)}
.login-err{background:rgba(255,71,87,0.1);border:1px solid rgba(255,71,87,0.3);border-radius:var(--r3);padding:0.65rem 0.9rem;font-size:0.8rem;color:#ff8a95;margin-bottom:1rem;display:none}

/* SHELL */
#app{display:none;height:100vh;grid-template-columns:236px 1fr;grid-template-rows:60px 1fr}
#app.on{display:grid}
.topbar{grid-column:1/-1;background:var(--panel);border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 1.5rem;gap:1rem;z-index:50}
.tb-brand{display:flex;align-items:center;gap:11px;width:212px;flex-shrink:0}
.tb-brand .brand-mark{width:32px;height:32px;font-size:12px;border-radius:9px}
.tb-brand .nm{font-size:0.95rem;font-weight:800;letter-spacing:-0.4px}
.tb-brand .nm span{color:var(--orange)}
.tb-search{flex:1;max-width:440px;position:relative}
.tb-search input{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:0.5rem 0.9rem 0.5rem 2.3rem;color:var(--txt);font-size:0.82rem;font-family:inherit;outline:none;transition:.15s}
.tb-search input:focus{border-color:var(--orange);background:var(--panel3)}
.tb-search .ic{position:absolute;left:0.75rem;top:50%;transform:translateY(-50%);color:var(--txt3);font-size:0.9rem;pointer-events:none}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.sync-chip{display:flex;align-items:center;gap:7px;font-size:0.72rem;color:var(--txt2);background:var(--panel2);padding:0.4rem 0.75rem;border-radius:20px;border:1px solid var(--line)}
.sync-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}
.sync-dot.busy{background:var(--yellow);box-shadow:0 0 8px var(--yellow);animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.4}}
.tb-user{display:flex;align-items:center;gap:9px;cursor:pointer;padding:0.3rem 0.5rem;border-radius:9px;transition:.15s}
.tb-user:hover{background:var(--panel2)}
.avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--orange),var(--orange-dk));display:flex;align-items:center;justify-content:center;font-size:0.74rem;font-weight:700;color:#fff;flex-shrink:0}

/* SIDEBAR */
.sidebar{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow-y:auto;padding:1rem 0}
.nav-grp{margin-bottom:0.4rem}
.nav-lbl{font-size:0.6rem;font-weight:700;letter-spacing:1.6px;color:var(--txt3);text-transform:uppercase;padding:0.85rem 1.4rem 0.35rem}
.ni{display:flex;align-items:center;gap:11px;padding:0.55rem 1.4rem;color:var(--txt2);cursor:pointer;border-left:2.5px solid transparent;font-size:0.83rem;font-weight:500;transition:.12s;user-select:none}
.rlbl{display:flex;flex-direction:column;gap:0.3rem;font-size:0.72rem;color:var(--txt3);font-weight:600}
.rin{padding:0.45rem 0.6rem;border-radius:8px;background:var(--bg2);color:var(--txt);border:1px solid rgba(255,255,255,0.1);font-size:0.85rem}
.rin.sm{width:72px;padding:0.3rem 0.4rem;font-size:0.78rem}
.ni:hover{color:var(--txt);background:rgba(255,255,255,0.025)}
.ni.active{color:var(--orange);background:var(--orange-glow);border-left-color:var(--orange);font-weight:600}
.ni .ic{width:17px;text-align:center;font-size:0.95rem;opacity:.85}
.ni .ct{margin-left:auto;font-size:0.62rem;font-weight:700;background:var(--panel3);color:var(--txt2);padding:1px 7px;border-radius:10px}
.ni.active .ct{background:var(--orange);color:#fff}
.sidebar-foot{margin-top:auto;padding:1rem 1.4rem 0;border-top:1px solid var(--line)}
.sf-row{display:flex;align-items:center;gap:9px}
.sf-nm{font-size:0.8rem;font-weight:600}
.sf-rl{font-size:0.65rem;color:var(--txt3)}

/* MAIN */
.main{overflow-y:auto;display:flex;flex-direction:column}
.page{display:none;padding:1.75rem 2rem;animation:fade .25s ease}
.page.on{display:flex;flex-direction:column}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.phead{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}
.ptitle{font-size:1.5rem;font-weight:800;letter-spacing:-0.6px}
.psub{font-size:0.8rem;color:var(--txt2);margin-top:5px;font-weight:500}
.pacts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* CARDS */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.4rem}
.card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem}
.trend-toggle{display:inline-flex;gap:2px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);border-radius:8px;padding:2px}
.tt-btn{background:transparent;border:none;color:#8a8a96;font-size:11px;font-weight:600;font-family:inherit;padding:5px 12px;border-radius:6px;cursor:pointer;transition:.15s}
.tt-btn:hover{color:#c8c8d0}
.tt-btn.on{background:#ff6b1a;color:#fff}
.card-t{font-size:0.7rem;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;color:var(--orange)}

/* KPI */
.kgrid{display:grid;gap:1rem;margin-bottom:1.25rem}
.kgrid.c4{grid-template-columns:repeat(4,1fr)}
.kgrid.c3{grid-template-columns:repeat(3,1fr)}
.kgrid.c2{grid-template-columns:repeat(2,1fr)}
.kpi{background:linear-gradient(165deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:var(--r);padding:1.3rem;position:relative;overflow:hidden}
.kpi::after{content:'';position:absolute;top:-30%;right:-10%;width:120px;height:120px;border-radius:50%;background:var(--accent,var(--orange));opacity:0.07;filter:blur(20px)}
.kpi .kl{font-size:0.72rem;font-weight:600;color:var(--txt2);margin-bottom:9px}
.kpi .kv{font-size:1.95rem;font-weight:800;letter-spacing:-1px;line-height:1;color:var(--accent,var(--txt))}
.kpi .ks{font-size:0.7rem;color:var(--txt3);margin-top:7px;font-weight:500}

.kpi.yellow{--accent:var(--yellow)} .kpi.blue{--accent:var(--cyan)} .kpi.white{--accent:var(--txt)}
.vrow{display:flex;justify-content:space-between;align-items:center;padding:0.7rem 0;border-bottom:1px solid rgba(255,255,255,0.05)}
.vrow:last-child{border-bottom:none}
.vlbl{font-size:0.82rem;color:var(--txt2)}
.vval{font-size:1.05rem;font-weight:700;color:var(--txt)}

/* CHART */
.chart-row{display:grid;gap:1rem;margin-bottom:1.25rem}
.chart-row.c2{grid-template-columns:1.2fr 1fr}
.cwrap{position:relative;height:230px}

/* TABLE */
.tbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.tbl-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.twrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
thead th{text-align:left;font-size:0.64rem;font-weight:700;letter-spacing:0.7px;text-transform:uppercase;color:var(--txt3);padding:0.75rem 1.1rem;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--panel2);position:sticky;top:0}
tbody td{padding:0.7rem 1.1rem;font-size:0.8rem;border-bottom:1px solid rgba(255,255,255,0.03);color:var(--txt2);white-space:nowrap}
tbody tr{transition:.1s}
tbody tr:hover td{background:rgba(255,107,26,0.04)}
tbody tr.clk{cursor:pointer}
td.b{color:var(--txt);font-weight:600}
.empty{text-align:center;padding:3.5rem 1rem;color:var(--txt3);font-size:0.85rem}
.empty .ei{font-size:2rem;margin-bottom:0.75rem;opacity:.5}

/* PILL */
.pill{font-size:0.62rem;font-weight:700;padding:3px 9px;border-radius:20px;display:inline-block;white-space:nowrap;letter-spacing:0.2px}
.p-green{background:rgba(46,204,113,0.22);color:#5ee89a;border:1px solid rgba(46,204,113,0.5)}
.p-red{background:rgba(255,71,87,0.22);color:#ff8a95;border:1px solid rgba(255,71,87,0.5)}
.p-yellow{background:rgba(255,165,2,0.22);color:#ffc766;border:1px solid rgba(255,165,2,0.5)}
.p-blue{background:rgba(24,220,255,0.2);color:#7fe9ff;border:1px solid rgba(24,220,255,0.45)}
.p-orange{background:var(--orange-glow);color:var(--orange2);border:1px solid rgba(255,107,26,0.5)}
.p-gray{background:rgba(160,160,173,0.14);color:var(--txt2);border:1px solid var(--line2)}

/* BTN */
.btn{padding:0.5rem 1.1rem;border-radius:var(--r3);font-size:0.78rem;font-weight:600;cursor:pointer;border:none;transition:.13s;display:inline-flex;align-items:center;gap:6px;font-family:inherit;white-space:nowrap}
.btn-pri{background:linear-gradient(135deg,var(--orange),var(--orange-dk));color:#fff;box-shadow:0 4px 14px var(--orange-glow)}
.btn-pri:hover{transform:translateY(-1px);box-shadow:0 6px 20px var(--orange-glow)}
.btn-gho{background:var(--panel2);color:var(--txt2);border:1px solid var(--line)}
.btn-gho:hover{border-color:var(--orange);color:var(--orange)}
.btn-dng{background:rgba(255,71,87,0.1);color:#ff7280;border:1px solid rgba(255,71,87,0.25)}
.btn-dng:hover{background:rgba(255,71,87,0.2)}
.btn-sm{padding:0.35rem 0.8rem;font-size:0.72rem}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important}

/* FORM */
.fgrid{display:grid;gap:1rem}
.fgrid.c2{grid-template-columns:1fr 1fr}
.fgrid.c3{grid-template-columns:1fr 1fr 1fr}
.fg{display:flex;flex-direction:column;gap:6px}
.fg.sp{grid-column:1/-1}
.lbl{font-size:0.7rem;font-weight:600;color:var(--txt2);letter-spacing:0.2px}
.inp,.sel,.ta{background:var(--bg);border:1px solid var(--line);border-radius:var(--r3);padding:0.55rem 0.8rem;color:var(--txt);font-size:0.82rem;font-family:inherit;outline:none;transition:.15s;width:100%}
.inp:focus,.sel:focus,.ta:focus{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-glow)}
.ta{resize:vertical;min-height:120px;font-family:'JetBrains Mono',monospace;font-size:0.76rem;line-height:1.6}
.sel option{background:var(--panel2)}

/* TABS */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:1.25rem;overflow-x:auto}
.tab{padding:0.65rem 1.1rem;font-size:0.8rem;font-weight:500;cursor:pointer;color:var(--txt2);border-bottom:2px solid transparent;white-space:nowrap;transition:.13s}
.tab:hover{color:var(--txt)}
.tab.active{color:var(--orange);border-bottom-color:var(--orange);font-weight:600}

/* MODAL */
.mbg{position:fixed;inset:0;background:rgba(0,0,0,0.78);z-index:200;display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px)}
.mbg.on{display:flex}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:18px;width:94%;max-width:920px;max-height:92vh;display:flex;flex-direction:column;box-shadow:var(--sh2)}
.mhead{padding:1.5rem 1.6rem 0;display:flex;align-items:flex-start;justify-content:space-between}
.mtitle{font-size:1.15rem;font-weight:800;letter-spacing:-0.4px}
.msub{font-size:0.74rem;color:var(--txt2);margin-top:4px}
.mclose{background:var(--panel2);border:1px solid var(--line);color:var(--txt2);font-size:1rem;cursor:pointer;width:32px;height:32px;border-radius:8px;transition:.13s}
.mclose:hover{color:var(--txt);border-color:var(--orange)}
.mbody{padding:1.5rem 1.6rem;overflow-y:auto}

/* DETAIL */
.dgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0.85rem;margin-bottom:1.25rem}
.di .dl{font-size:0.64rem;color:var(--txt3);margin-bottom:3px;font-weight:600;letter-spacing:0.2px;text-transform:uppercase}
.di .dv{font-size:0.84rem;font-weight:600;color:var(--txt)}
.hitem{padding:0.7rem 0.9rem;border-left:2.5px solid var(--line2);margin-bottom:7px;background:rgba(255,255,255,0.02);border-radius:0 var(--r3) var(--r3) 0}
.hitem:hover{border-left-color:var(--orange)}

/* RESP BOX */
.rbox{background:var(--bg);border:1px solid var(--line);border-radius:var(--r2);padding:1rem;margin-top:1rem;display:none}
.rbox.on{display:block}
.rcode{font-family:'JetBrains Mono',monospace;font-size:0.72rem;color:var(--cyan);white-space:pre-wrap;word-break:break-all;max-height:320px;overflow-y:auto;line-height:1.6}

/* ALERT */
.alert{padding:0.8rem 1rem;border-radius:var(--r3);font-size:0.8rem;margin-bottom:1rem;line-height:1.5}
.alert-y{background:rgba(255,165,2,0.08);border:1px solid rgba(255,165,2,0.25);color:#ffb838}
.alert-b{background:rgba(24,220,255,0.07);border:1px solid rgba(24,220,255,0.2);color:#5ee3ff}

/* TOAST */
.toasts{position:fixed;bottom:1.5rem;right:1.5rem;z-index:999;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r2);padding:0.8rem 1.1rem;font-size:0.8rem;font-weight:500;display:flex;align-items:center;gap:9px;box-shadow:var(--sh);animation:slin .25s ease;max-width:340px}
.toast.ok{border-color:rgba(46,204,113,0.4)} .toast.err{border-color:rgba(255,71,87,0.4)} .toast.info{border-color:rgba(24,220,255,0.4)}
@keyframes slin{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
@keyframes slout{to{opacity:0;transform:translateX(24px)}}

/* SPINNER */
@keyframes spin{to{transform:rotate(360deg)}}
.spin{width:14px;height:14px;border:2px solid rgba(255,255,255,0.2);border-top-color:currentColor;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}

/* PAGER */
.pager{display:flex;align-items:center;justify-content:space-between;padding:0.85rem 1.1rem;border-top:1px solid var(--line)}
.pager .pi{font-size:0.74rem;color:var(--txt3)}

hr.dv{border:none;border-top:1px solid var(--line);margin:1.25rem 0}

/* ===== REDESIGN: hero card (dashboard) ===== */
.hero-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1.8rem 2rem;margin-bottom:12px;display:flex;justify-content:space-between;align-items:flex-end;grid-column:1/-1}
.hero-label{font-size:0.72rem;font-weight:600;color:var(--txt2);text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}
.hero-value{font-size:2.8rem;font-weight:800;letter-spacing:-2px;line-height:1;color:var(--txt)}
.hero-sub{font-size:0.75rem;color:var(--txt3);margin-top:10px;font-weight:500}
.hero-right{text-align:right}
.hero-ytd{font-size:0.7rem;color:var(--txt2);text-transform:uppercase;letter-spacing:0.5px;font-weight:600}
.hero-ytdval{font-size:1.4rem;font-weight:800;color:var(--txt);margin-top:5px;letter-spacing:-0.5px}

/* ===== REDESIGN: accent-bar cards (dashboard + merchant popup) ===== */
/* smaller cards (3-col grids like the merchant popup) use a tighter number so it never clips */

/* accent bars — DASHBOARD ONLY (popup + other pages keep original cards) */
#page-dashboard .kpi{position:relative;overflow:hidden;padding-left:1.5rem}
#page-dashboard .kpi::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line2)}
#page-dashboard .kpi.orange::before{background:var(--orange)}
#page-dashboard .kpi.green::before{background:var(--green)}
#page-dashboard .kpi.red::before{background:var(--red)}
#page-dashboard .kpi.yellow::before{background:var(--yellow)}
#page-dashboard .kpi.blue::before{background:var(--cyan)}
#page-dashboard .kpi.white::before{background:var(--line2)}

/* ===== Merchant popup — clean stat cards (full width, no clipping) ===== */
.mstat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:1rem}
.mstat{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:15px 17px}
.mstat-l{font-size:0.68rem;font-weight:600;color:var(--txt2);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:9px}
.mstat-v{font-size:1.5rem;font-weight:800;letter-spacing:-0.5px;line-height:1;white-space:nowrap}
.mstat-s{font-size:0.68rem;color:var(--txt3);margin-top:8px;font-weight:500}
@media(max-width:760px){.mstat-grid{grid-template-columns:repeat(2,1fr)}}