[hidden]{ display:none !important }
:root{ --bg:#f5f6f8; --panel:#fff; --ink:#1c1f24; --muted:#6b7280; --line:#e5e7eb; --brand:#c2185b; --ok:#0f8a3e; --warn:#b45309; --err:#b91c1c; --radius:10px }
*{ box-sizing:border-box }
body{ margin:0; background:var(--bg); color:var(--ink); font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; display:flex; min-height:100vh }
a{ color:var(--brand) } .muted{ color:var(--muted) } .pad{ padding:40px }
.side{ width:230px; flex:none; background:#16181d; color:#e5e7eb; display:flex; flex-direction:column; position:sticky; top:0; height:100vh }
.logo{ font-weight:800; font-size:18px; padding:20px } .logo small{ display:block; font-weight:400; font-size:12px; color:#9ca3af }
.side nav{ display:flex; flex-direction:column; flex:1 } .side nav a{ color:#d1d5db; text-decoration:none; padding:10px 20px } .side nav a:hover,.side nav a.on{ background:#23262d; color:#fff }
.me{ padding:16px 20px; font-size:12px; color:#9ca3af; border-top:1px solid #2a2d35; display:flex; justify-content:space-between; gap:8px }
main{ flex:1; padding:28px; min-width:0 }
@media (max-width:860px){ body{ display:block } .side{ width:auto; height:auto; position:static } .side nav{ flex-direction:row; overflow-x:auto } .side nav a{ white-space:nowrap } main{ padding:16px } }
h1{ font-size:22px; margin:0 0 18px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap }
h2{ font-size:16px; margin:24px 0 10px }
.kpis{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; margin-bottom:18px }
.kpi{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px }
.kpi b{ display:block; font-size:22px; margin-top:4px } .kpi span{ color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em }
.kpi small{ color:var(--muted) }
.box{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:16px; overflow-x:auto }
table{ width:100%; border-collapse:collapse } th,td{ text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top } th{ font-size:12px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap }
tr.click{ cursor:pointer } tr.click:hover td{ background:#fafafa }
.r{ text-align:right; white-space:nowrap }
.pill{ display:inline-block; padding:2px 8px; border-radius:20px; font-size:12px; font-weight:600; background:#eef0f3 }
.pill.paid,.pill.active,.pill.sent{ background:#dcfce7; color:var(--ok) } .pill.pending{ background:#fef3c7; color:var(--warn) }
.pill.failed,.pill.refunded,.pill.canceled,.pill.revoked,.pill.chargeback{ background:#fee2e2; color:var(--err) }
.filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px }
input,select,textarea{ padding:9px 10px; border:1px solid var(--line); border-radius:8px; font:inherit; background:#fff; color:var(--ink) }
textarea{ width:100%; min-height:70px }
.form{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px }
.form label{ display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted) }
.form .wide{ grid-column:1/-1 } .form .check{ flex-direction:row; align-items:center; gap:8px; color:var(--ink); font-size:14px }
.btn{ background:var(--brand); color:#fff; border:0; border-radius:8px; padding:9px 14px; font:inherit; font-weight:600; cursor:pointer; text-decoration:none; display:inline-block }
.btn.ghost{ background:#fff; color:var(--ink); border:1px solid var(--line) } .btn.danger{ background:var(--err) } .btn.sm{ padding:5px 10px; font-size:13px }
.btn:disabled{ opacity:.6; cursor:wait }
.link{ background:none; border:0; color:inherit; cursor:pointer; text-decoration:underline; padding:0; font:inherit }
.actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:14px }
.toast{ position:fixed; bottom:20px; right:20px; background:#16181d; color:#fff; padding:12px 16px; border-radius:8px; z-index:50 } .toast.err{ background:var(--err) }
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:40; display:flex; align-items:flex-start; justify-content:center; padding:5vh 12px; overflow-y:auto }
.modal-box{ background:#fff; border-radius:12px; padding:22px; width:min(760px,100%); position:relative }
.x{ position:absolute; top:10px; right:14px; border:0; background:none; font-size:26px; cursor:pointer; color:var(--muted) }
.chart{ display:flex; align-items:flex-end; gap:3px; height:160px; padding-top:10px }
.chart div{ flex:1; background:var(--brand); border-radius:3px 3px 0 0; min-height:2px; position:relative; opacity:.85 } .chart div:hover{ opacity:1 }
.chart div:hover::after{ content:attr(data-t); position:absolute; bottom:100%; left:50%; transform:translateX(-50%); background:#16181d; color:#fff; font-size:11px; padding:3px 6px; border-radius:4px; white-space:nowrap }
.tree .mod{ border:1px solid var(--line); border-radius:8px; margin:10px 0 } .tree .mod > div{ padding:10px 12px; display:flex; justify-content:space-between; gap:8px; align-items:center; background:#fafafa; border-radius:8px 8px 0 0 }
.tree .les{ display:flex; justify-content:space-between; gap:8px; padding:8px 12px 8px 26px; border-top:1px solid var(--line); align-items:center }
.login{ max-width:380px; margin:12vh auto; background:#fff; border:1px solid var(--line); border-radius:14px; padding:28px }
.login input{ width:100%; margin:6px 0 12px }
.hint{ font-size:12px; color:var(--muted) }
.vlist{ max-height:220px; overflow-y:auto; border:1px solid var(--line); border-radius:8px; margin-top:6px }
.vlist button{ display:flex; justify-content:space-between; gap:8px; width:100%; text-align:left; padding:8px 10px; border:0; border-bottom:1px solid var(--line); background:#fff; cursor:pointer; font:inherit; font-size:13px }
.vlist button:hover{ background:#fafafa } .vlist button.on{ background:#fdf2f7; color:var(--brand); font-weight:600 }