@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Sora:wght@600;700&display=swap');

/* =========================================================
   Design tokens
   ========================================================= */
:root{
  --bg:#f2f5f4;
  --surface:#ffffff;
  --surface-2:#f8fbfa;
  --ink:#0d1726;
  --ink-2:#334155;
  --muted:#64748b;
  --subtle:#94a3b8;
  --line:#e4eae8;
  --line-2:#eef3f2;

  --nav-1:#0f1d31;
  --nav-2:#0b1524;

  --accent:#0e9f78;
  --accent-2:#0b8a66;
  --ok:#0b7f5e;     --ok-bg:#e5f5ef;
  --bad:#c2332f;    --bad-bg:#fcecea;
  --warn:#9a5300;   --warn-bg:#fdf1de;
  --info:#2a5bd7;   --info-bg:#e9efff;
  --violet:#6d4fd8; --violet-bg:#efeafd;

  --font:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --display:"Sora","DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --r-xl:20px;--r-lg:16px;--r-md:12px;--r-sm:9px;

  --sh-1:0 1px 2px rgba(13,23,38,.04);
  --sh-2:0 1px 2px rgba(13,23,38,.04),0 10px 26px -14px rgba(13,23,38,.16);
  --sh-3:0 28px 52px -20px rgba(13,23,38,.38);
  --ring:0 0 0 3px rgba(14,159,120,.22);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* =========================================================
   Base
   ========================================================= */
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:var(--font);font-size:13px;line-height:1.5;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
body{background:linear-gradient(180deg,#e8eeec 0,var(--bg) 300px) no-repeat,var(--bg)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
.ico{width:1em;height:1em;flex:none;display:block}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.hidden{display:none!important}

/* =========================================================
   Topbar
   ========================================================= */
.topbar{
  position:sticky;top:0;z-index:30;height:64px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 max(22px,calc((100vw - 1440px)/2));
  color:#fff;background:linear-gradient(180deg,var(--nav-1),var(--nav-2));
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.06),0 10px 26px -18px rgba(5,10,20,.8);
}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.01em}
.brand-dot{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#2ad6a0,#0b8a66);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 12px -4px rgba(42,214,160,.6);
}
.brand-dot .ico{font-size:16px}
.top-sub{font-family:var(--font);font-size:11px;font-weight:500;color:#8ea0ba;margin-top:2px}
.top-actions{display:flex;align-items:center;gap:8px}
.user-chip{
  font-size:12px;font-weight:500;color:#cfd9e6;padding:6px 12px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
}
.icon-btn{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;text-decoration:none;
  color:#b9c6d8;border:1px solid rgba(255,255,255,.12);font-size:16px;
  transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease);
}
.icon-btn:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.2)}

/* =========================================================
   Layout
   ========================================================= */
.page{max-width:1440px;margin:0 auto;padding:22px 22px 72px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(400px,.7fr);gap:14px}

.total-card,.metric,.action-panel,.progress-card,.gateway-card,.sheet-section{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-2);
}

/* =========================================================
   Hero: the one memorable element
   ========================================================= */
.total-card{
  position:relative;overflow:hidden;min-height:168px;padding:26px 28px;border:0;color:#fff;
  background:
    radial-gradient(520px 260px at 100% 0,rgba(42,214,160,.20),transparent 70%),
    linear-gradient(140deg,#0f1d31 0%,#143352 100%);
  box-shadow:var(--sh-3);
}
.total-card>*:not(.total-art){position:relative;z-index:1}
.total-art{position:absolute;right:0;bottom:0;width:58%;max-width:500px;height:auto;z-index:0;pointer-events:none}
.card-kicker{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:#9fb2ca}
.card-kicker .ico{font-size:15px;color:#4ee2b1}
.total-value{
  font-family:var(--display);font-size:clamp(32px,4vw,50px);font-weight:700;letter-spacing:-.04em;
  line-height:1.05;margin:12px 0 16px;font-variant-numeric:tabular-nums;
}
.total-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:12px;color:#a9bbd0}
.live-dot{
  display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;
  padding:4px 10px;border-radius:999px;color:#6ff0bf;
  background:rgba(42,214,160,.10);border:1px solid rgba(42,214,160,.26);
}
.live-dot:before{content:"";width:6px;height:6px;border-radius:50%;background:#34d399;animation:pulse 2.2s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}75%,100%{box-shadow:0 0 0 7px rgba(52,211,153,0)}}

.health-pill{
  display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;
  padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.08);color:#cfe0f5;
}
.health-pill:empty{display:none}
.health-pill .ico{font-size:13px}
.health-pill.ok{background:rgba(42,214,160,.12);color:#6ff0bf}
.health-pill.warn{background:rgba(245,166,35,.15);color:#ffc96b}

/* =========================================================
   Metrics
   ========================================================= */
.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.metric{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:100px;padding:16px 18px}
.metric span{font-size:12px;font-weight:500;color:var(--muted);padding-right:40px}
.metric strong{font-family:var(--display);font-size:24px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:10px}
.metric-ico{
  position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:9px;
  display:grid;place-items:center;font-size:15px;
  background:var(--t-bg,var(--info-bg));color:var(--t,var(--info));
}
.metric-ico.ok{--t:var(--ok);--t-bg:var(--ok-bg)}
.metric-ico.bad{--t:var(--bad);--t-bg:var(--bad-bg)}
.metric-ico.info{--t:var(--info);--t-bg:var(--info-bg)}
.metric-ico.warn{--t:var(--violet);--t-bg:var(--violet-bg)}

/* =========================================================
   Action panel
   ========================================================= */
.action-panel{margin-top:14px;padding:18px 22px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.action-copy h2,.section-head h2{font-family:var(--display);font-size:16px;font-weight:700;margin:0 0 3px;letter-spacing:-.02em}
.action-copy p,.hint{font-size:12px;color:var(--muted);margin:0}
.action-buttons{display:flex;gap:8px;flex-wrap:wrap}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:var(--r-md);
  padding:10px 15px;font-weight:600;font-size:12.5px;white-space:nowrap;
  transition:background .15s var(--ease),box-shadow .15s var(--ease),transform .15s var(--ease),opacity .15s;
}
.btn .ico{font-size:15px}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.primary{color:#fff;background:linear-gradient(180deg,#14b389,var(--accent));box-shadow:0 8px 18px -10px rgba(14,159,120,.8),inset 0 1px 0 rgba(255,255,255,.22)}
.btn.primary:hover:not(:disabled){background:linear-gradient(180deg,#10a97f,var(--accent-2))}
.btn.secondary{background:var(--ok-bg);color:var(--ok)}
.btn.secondary:hover:not(:disabled){background:#d6f0e5}
.btn.ghost{background:#f1f5f4;color:var(--ink-2)}
.btn.ghost:hover:not(:disabled){background:#e6ecea}
.btn.small{padding:7px 11px;font-size:11.5px;gap:5px;border-radius:var(--r-sm)}
.btn.small .ico{font-size:13px}

body.is-busy .ico-spin{animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* =========================================================
   Progress
   ========================================================= */
.progress-card{margin-top:10px;padding:14px 18px}
.progress-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:500;color:var(--ink-2);margin-bottom:10px}
.progress-head span:last-child{font-family:var(--display);font-weight:600;font-variant-numeric:tabular-nums}
.progress-track{height:6px;background:#e8eeed;border-radius:99px;overflow:hidden}
.progress-fill{position:relative;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,#0e9f78,#3ddba2);transition:width .35s var(--ease);overflow:hidden}
.progress-fill:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
  background-size:200% 100%;animation:sheen 1.4s linear infinite;
}
@keyframes sheen{from{background-position:200% 0}to{background-position:-200% 0}}

/* =========================================================
   Section heads
   ========================================================= */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin:28px 2px 12px}
.eyebrow{font-size:11.5px;font-weight:600;color:var(--muted);margin:0 0 3px}

/* =========================================================
   Gateway cards
   ========================================================= */
.gateway-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.gateway-card{--tone:var(--info);--tone-bg:var(--info-bg);padding:16px;transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.gateway-card:hover{border-color:color-mix(in srgb,var(--tone) 32%,var(--line));box-shadow:var(--sh-2),0 18px 30px -22px color-mix(in srgb,var(--tone) 70%,transparent)}
.gw-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.gw-id{display:flex;align-items:center;gap:10px;min-width:0}
.gw-avatar{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;
  font-family:var(--display);font-size:13px;font-weight:700;background:var(--tone-bg);color:var(--tone);
}
.gw-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gw-count{font-size:10.5px;font-weight:500;color:var(--muted);background:#f1f5f4;border-radius:999px;padding:3px 8px;white-space:nowrap}
.gw-balance{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.03em;margin:16px 0 10px;font-variant-numeric:tabular-nums}
.gw-share{height:4px;border-radius:99px;background:#edf1f0;overflow:hidden;margin-bottom:14px}
.gw-share i{display:block;height:100%;border-radius:99px;background:var(--tone);transition:width .6s var(--ease)}
.gw-bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}
.status-chip{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;padding:4px 9px;border-radius:999px}
.status-chip .ico{font-size:12px}
.status-chip.ok{color:var(--ok);background:var(--ok-bg)}
.status-chip.warn{color:var(--warn);background:var(--warn-bg)}

/* =========================================================
   Skeletons
   ========================================================= */
.sk{position:relative;overflow:hidden;background:#edf2f1;border-radius:8px}
.sk:after{
  content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  animation:shimmer 1.3s var(--ease) infinite;
}
@keyframes shimmer{to{transform:translateX(100%)}}
.sk-line{height:10px;width:100%;margin-bottom:10px}
.w60{width:60%!important}
.w40{width:40%!important}
.sk-big{height:20px;width:52%;margin:16px 0 10px}
.sk-bar{height:4px;border-radius:99px;margin-bottom:14px}
.is-skeleton{pointer-events:none}
.sk-row td{padding:14px 20px}
.sk-row .sk{height:12px;width:100%}

/* =========================================================
   Sheet / table
   ========================================================= */
.sheet-section{margin-top:24px;padding:0;overflow:hidden}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px}
.sheet-title{display:flex;align-items:baseline;gap:10px;min-width:0}
.sheet-title h2{font-family:var(--display);font-size:15px;font-weight:700;margin:0;letter-spacing:-.02em}
.result-count{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.filters{display:flex;gap:8px}
.search,select{
  height:38px;border:1px solid var(--line);border-radius:var(--r-md);background-color:#fff;
  color:var(--ink-2);font-size:12.5px;padding:0 12px;outline:none;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}
.search{
  width:240px;padding-left:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:11px center;background-size:16px;
}
select{
  appearance:none;-webkit-appearance:none;padding-right:32px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:15px;
}
.search::placeholder{color:var(--subtle)}
.search:focus,select:focus{border-color:#6ecfae;box-shadow:var(--ring)}

.table-wrap{overflow:auto;border-top:1px solid var(--line)}
table{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px}
thead th{
  position:sticky;top:0;height:40px;padding:0 20px;text-align:left;white-space:nowrap;
  font-size:11.5px;font-weight:600;color:var(--muted);background:var(--surface-2);
  border-bottom:1px solid var(--line);user-select:none;
}
th.num{text-align:right}
th.sortable{cursor:pointer;transition:color .15s}
th.sortable:hover{color:var(--ink)}
th.sortable:focus-visible{outline-offset:-2px}
th .sort-ind{width:12px;height:12px;margin-left:5px;vertical-align:-2px;opacity:.3;transition:transform .2s var(--ease),opacity .2s,color .2s}
th.is-sorted{color:var(--ink)}
th.is-sorted .sort-ind{opacity:1;color:var(--accent)}
th[aria-sort="descending"] .sort-ind{transform:rotate(180deg)}

tbody td{padding:13px 20px;border-bottom:1px solid var(--line-2);vertical-align:middle}
tbody tr{transition:background .12s}
tbody tr:hover{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
tbody tr.is-error td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
.name-cell{color:var(--ink-2)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.money{font-family:var(--display);font-weight:600;letter-spacing:-.01em}

.gateway-pill{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink-2)}
.gw-dot{width:7px;height:7px;border-radius:2px;background:var(--tone,var(--subtle));flex:none}

.row-status{
  display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:11.5px;
  padding:3px 10px 3px 8px;border-radius:999px;background:#f1f5f4;color:var(--muted);
}
.row-status:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--subtle)}
.row-status.success{color:var(--ok);background:var(--ok-bg)}
.row-status.success:before{background:#16a36f}
.row-status.error{color:#b42318;background:var(--bad-bg)}
.row-status.error:before{background:#e5484d}

.empty{
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  color:var(--subtle);padding:44px 20px;font-size:12.5px;
}
td.empty{display:table-cell}
.empty .ico{font-size:32px;margin-bottom:6px;color:#b8c4d2}
.mobile-list{display:none}

/* =========================================================
   Toast
   ========================================================= */
.toast{
  position:fixed;right:20px;bottom:20px;z-index:80;max-width:360px;
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  background:var(--nav-2);color:#fff;border-radius:var(--r-lg);
  box-shadow:var(--sh-3);font-size:12.5px;font-weight:500;
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease);
}
.toast .ico{font-size:17px;color:#34d399}
.toast.bad{background:#8f1d22}
.toast.bad .ico{color:#ffb4b7}
.toast.show{opacity:1;transform:none}

/* =========================================================
   Login
   ========================================================= */
.login-body{
  min-height:100vh;display:grid;place-items:center;padding:22px;
  background:radial-gradient(circle at 20% 10%,#1a3552 0,#0b1524 46%,#060d18 100%);
}
.login-shell{width:min(400px,100%)}
.login-card{background:rgba(255,255,255,.98);border-radius:24px;padding:32px;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.login-mark{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;margin-bottom:22px;color:#fff;
  background:linear-gradient(135deg,#2ad6a0,#0b8a66);box-shadow:0 10px 22px -8px rgba(14,159,120,.7);
}
.login-mark .ico{font-size:20px}
.login-card h1{font-family:var(--display);font-size:24px;margin:2px 0 6px;letter-spacing:-.03em}
.login-copy{color:var(--muted);font-size:13px;line-height:1.6;margin:0 0 22px}
.login-form{display:grid;gap:14px}
.login-form label{font-size:12px;font-weight:600;color:var(--ink-2)}
.login-form input{
  width:100%;height:44px;border:1px solid #d9e0e8;border-radius:var(--r-md);margin-top:6px;
  padding:0 13px;outline:none;transition:border-color .15s,box-shadow .15s;
}
.login-form input:focus{border-color:#6ecfae;box-shadow:var(--ring)}
.wide{width:100%;height:44px;margin-top:4px}
.alert.error{padding:10px 12px;background:var(--bad-bg);color:#b42318;border:1px solid #ffd7d7;border-radius:var(--r-md);font-size:12px;margin-bottom:14px}
.login-foot{text-align:center;color:#a0a9b6;font-size:10.5px;margin-top:18px}

/* =========================================================
   Responsive
   ========================================================= */
@media(max-width:1100px){.gateway-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .topbar{height:60px;padding:0 16px}
  .top-sub{display:none}
  .page{padding:14px 12px 40px}
  .hero-grid{gap:10px}
  .total-card{padding:22px 20px;min-height:150px;border-radius:18px}
  .total-art{width:82%}
  .total-value{font-size:34px;margin:10px 0 14px}
  .metric-grid{gap:8px}
  .metric{padding:14px;min-height:88px;border-radius:var(--r-lg)}
  .metric strong{font-size:21px}
  .metric-ico{width:26px;height:26px;top:12px;right:12px;font-size:13px;border-radius:8px}
  .action-panel{align-items:stretch;flex-direction:column;padding:16px}
  .action-buttons{display:grid;grid-template-columns:1fr 1fr}
  .action-buttons .btn:first-child{grid-column:1/-1}
  .btn{min-height:42px}
  .section-head{margin-top:22px;align-items:start}
  .hint{display:none}
  .gateway-grid{grid-template-columns:1fr 1fr;gap:8px}
  .gateway-card{padding:14px;border-radius:var(--r-lg)}
  .gw-avatar{width:28px;height:28px;font-size:12px;border-radius:8px}
  .gw-count{display:none}
  .gw-balance{font-size:17px;margin:12px 0 9px}
  .gw-share{margin-bottom:12px}
  .sheet-section{border:0;background:transparent;box-shadow:none;overflow:visible}
  .sheet-head{padding:0;margin-bottom:10px;display:block}
  .sheet-title{margin-bottom:0}
  .filters{margin-top:12px;display:grid;grid-template-columns:1fr 124px}
  .search{width:100%}
  .table-wrap{display:none}
  .mobile-list{display:grid;gap:8px}
  .mobile-row{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;box-shadow:var(--sh-2)}
  .mobile-row.is-error{box-shadow:inset 3px 0 0 var(--bad),var(--sh-2)}
  .mobile-row-top,.mobile-row-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .mobile-row-name{font-size:12.5px;font-weight:600;margin-top:8px;color:var(--ink-2);overflow-wrap:anywhere}
  .mobile-row .money{font-size:16px}
  .mobile-row-bottom{margin-top:12px}
  .top-actions .user-chip{display:none}
  .toast{left:12px;right:12px;max-width:none;bottom:14px}
}
@media(max-width:390px){
  .gateway-grid{grid-template-columns:1fr}
  .action-buttons{grid-template-columns:1fr}
  .action-buttons .btn:first-child{grid-column:auto}
  .filters{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation:none!important;transition:none!important}
}