:root{
  --bg:#f5f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --primary:#2563eb;
  --primary-2:#1d4ed8;
  --shadow: 0 10px 30px rgba(15,23,42,.08);
  --radius:16px;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "PingFang SC","Microsoft YaHei", Arial, sans-serif;
  color:var(--text);
  background: linear-gradient(180deg,#f7f9ff 0%, var(--bg) 40%, #f3f5fb 100%);
}
a{color:inherit;text-decoration:none}
.container{max-width:1240px;margin:0 auto;padding:0 18px}

/* =========================
   Topbar
   ========================= */
.topbar{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,.75);
  border-bottom:1px solid rgba(229,231,235,.7);
}
.topbar .inner{
  height:64px; display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.5px}
.logo{
  width:49px;
  height:40px;
  border-radius:10px;
  object-position: center;
  display:block;
}
.brand .site{
  font-size: 13px;
  font-weight: 600;
  color: #5b6b86;
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid #e7eefc;
  line-height: 1;
}
.nav{display:flex;gap:14px;align-items:center;color:var(--muted);font-size:14px}
.nav a{padding:8px 10px;border-radius:10px}
.nav a:hover{background:#eef2ff;color:#1e293b}

/* =========================
   Hero + Batch input
   ========================= */
.hero{padding:56px 0 24px}
.hero h1{
  margin:0;
  font-size:34px;
  line-height:1.2;
  text-align:center;
}
.muted{color:var(--muted)}
.subtitle{font-size:16px; font-weight:600}
.search-card{
  margin:22px auto 0;
  max-width:980px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:18px;
}

/* ===== Batch layout ===== */
.batch-wrap{display:flex; gap:14px; align-items:flex-start; flex-wrap:nowrap}
.addrcol{flex: 1 1 660px; max-width:760px; min-width:260px}
.actions{
  flex: 0 0 220px;
  min-width:200px;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:2px;
}

.textarea{
  width:100%;
  min-height:260px;
  resize:vertical;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background: rgba(255,255,255,.9);
  outline:none;
  font-family: var(--font-mono);
  font-size:13px;
  line-height:1.45;
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
}
.textarea:focus{border-color: rgba(37,99,235,.55); box-shadow: 0 0 0 4px rgba(37,99,235,.14)}
.hint{
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
  line-height:1.6;
}

.btn{
  height:46px; padding:0 18px;
  border:none; border-radius:12px;
  background: var(--primary);
  color:#fff; font-weight:700;
  cursor:pointer;
  box-shadow:0 10px 20px rgba(37,99,235,.18);
  width:100%;
}
.btn:hover{background:var(--primary-2)}
.btn.secondary{
  background:#fff;
  color: var(--text);
  border:1px solid var(--line);
  box-shadow:none;
}
.btn.secondary:hover{background: rgba(255,255,255,.85)}
.progress{color:var(--muted); font-size:12px; min-height:16px}

/* =========================
   Summary
   ========================= */
.summaryline{
  margin-top:14px;
  padding:12px 14px;
  border:1px solid rgba(229,231,235,.8);
  background: rgba(255,255,255,.75);
  border-radius: 14px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  justify-content:space-between;
}
.summaryline .left{color:var(--muted); font-size:13px}
.summaryline .right{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
  flex:1 1 520px;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(229,231,235,.9);
  background:#fff;
  font-size:13px;
  justify-content:center;
  white-space:nowrap;
  word-break:keep-all;
}
.pill b{font-variant-numeric: tabular-nums}
.pill.ok{border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.06)}
.pill.bad{border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.06)}
.pill.neu{border-color: rgba(100,116,139,.25); background: rgba(100,116,139,.06)}

/* =========================
   Table
   ========================= */
.table-wrap{
  margin-top:14px;
  border:1px solid rgba(229,231,235,.85);
  border-radius: 16px;
  overflow:auto;
  background:rgba(255,255,255,.82);
  box-shadow: var(--shadow);
}
table{width:100%; border-collapse:collapse; table-layout:fixed}
col.col-addr{width:auto}
col.col-usdt{width:150px}
col.col-trx{width:140px}
col.col-status{width:120px}

thead th{
  background: rgba(37,99,235,.08);
  color: #0f172a;
  text-align:left;
  font-size:13px;
  border-bottom:1px solid rgba(229,231,235,.9);
  white-space:nowrap;
  position:relative;
  padding:12px 14px;
}
tbody td{
  border-bottom:1px solid rgba(229,231,235,.7);
  font-size:13px;
  vertical-align:middle;
  padding:12px 14px;
}
tbody tr:hover{background: rgba(37,99,235,.04)}
tbody tr:last-child td{border-bottom:none}

.mono{font-family: var(--font-mono); font-variant-numeric: tabular-nums}
.num{text-align:right}
.center{text-align:center}
.muted{color:var(--muted)}
.sortable{cursor:pointer; user-select:none}
.sort-ico{margin-left:0; display:inline-flex}
.sort-ico svg{width:14px;height:14px}
.sort-on{opacity:1}
.th-inner{display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
th.num .th-inner{justify-content:flex-end; width:100%}
th.center .th-inner{justify-content:center; width:100%}

/* address cell */
.addr{display:flex; align-items:center; gap:0; min-width:0}
.addr .addrtext,
.addr .short{
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
  flex: 1;
  min-width: 0;
}


/* desktop/mobile address visibility (JS class wins over media query) */
.addr .addr-desktop{display:inline-block;}
.addr .addr-mobile{display:none;}
html.is-mobile .addr .addr-desktop{display:none !important;}
html.is-mobile .addr .addr-mobile{display:inline-block !important;}
html.is-mobile .copy-btn{display:none !important;}
.copyable{cursor:pointer;}
.copyable:hover{color:var(--primary); text-decoration:underline;}
.copy{
  border:1px solid rgba(229,231,235,.95);
  background:#fff;
  color:var(--text);
  border-radius:10px;
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;
  flex:0 0 auto;
}
.copy:hover{border-color: rgba(37,99,235,.35); box-shadow: 0 0 0 4px rgba(37,99,235,.10)}

.status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(229,231,235,.9);
  font-size:12px
}
.dot{width:8px; height:8px; border-radius:999px; background: rgba(100,116,139,.6)}
.status.ok{border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.06)}
.status.ok .dot{background: rgba(34,197,94,.85)}
.status.bad, .status.inactive{border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.06)}
.status.bad .dot, .status.inactive .dot{background: rgba(239,68,68,.9)}
.status.neu{border-color: rgba(100,116,139,.22); background: rgba(100,116,139,.06)}

/* =========================
   Cards (mobile results)
   ========================= */
.cards{display:none; margin-top:14px; gap:12px}
.card-item{
  background:rgba(255,255,255,.86);
  border:1px solid rgba(229,231,235,.85);
  border-radius:16px;
  padding:12px;
  box-shadow: var(--shadow)
}
.card-top{display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
.card-addr{min-width:0}
.card-addr .short{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  word-break:keep-all;
}
.kv{display:flex; justify-content:space-between; margin-top:10px; gap:10px}
.kv .k{color:var(--muted); font-size:12px}
.kv .v{font-size:13px; font-variant-numeric: tabular-nums}

/* =========================
   Footer / Contact
   ========================= */
.footer{
  margin-top:28px;
  padding:38px 0 28px;
  background: radial-gradient(1200px 420px at 30% 0%, rgba(59,130,246,.18), transparent 60%),
              radial-gradient(900px 360px at 80% 20%, rgba(99,102,241,.16), transparent 55%),
              linear-gradient(180deg, #0b1220 0%, #070b14 100%);
  color:#e5e7eb;
}
.footer .fgrid{display:grid; grid-template-columns: 1fr; gap:14px}
.footer-card{
  border:none; /* remove outer border */
  background: transparent;
  border-radius:18px;
  padding:16px 16px 14px;
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
}
.footer-card .h{
  font-weight:800;
  font-size:15px;
  margin-bottom:12px;
  color:#f8fafc;
  display:flex;
  align-items:center;
  gap:8px;
}
.footer-card .h .fhico{
  width:18px;
  height:18px;
  color:#cbd5e1;
  flex:0 0 auto;
  background:transparent !important;
  border-radius:0 !important;
}
.footer-card .line{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  margin:10px 0;
  border-radius:12px;
  border:1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.22);
  color:#e2e8f0;
  text-decoration:none;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.footer-card .line:hover{
  background: rgba(2,6,23,.34);
  border-color: rgba(148,163,184,.28);
  transform: translateY(-1px);
}
.footer-card .line:active{transform: translateY(0)}
.footer-card .line .lico{
  width:28px;
  height:28px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(59,130,246,.12);
  color:#93c5fd;
  flex:0 0 auto;
}
.footer-card .line .lico svg{width:16px;height:16px;display:block}
.footer-card .line .ltxt{display:flex;flex-direction:column;gap:2px;min-width:0}
.footer-card .line .lcap{font-size:12px;color:#cbd5e1}
.footer-card .line .lval{font-size:13px;color:#f8fafc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.copyright{
  text-align: center;
  color: #8fa1bd;
  font-size: 12px;
  margin-top: 14px;
}

/* =========================
   Responsive (max-width, large -> small)
   ========================= */

@media (max-width: 980px){
  .batch-wrap{flex-wrap:wrap}
  .addrcol{max-width:none; flex: 1 1 520px}
  .actions{flex: 1 1 240px; min-width:200px}
  .textarea{min-height:220px}

  .summaryline .right{justify-content:center; flex:1 1 100%; width:100%}
  .pill{width:100%}
}

/* Cards/table switch + mobile layout */
@media (max-width: 820px){
  /* Keep table visible on mobile to avoid empty blank area before results */
  .cards{display:none}

  .batch-wrap{flex-direction:column; gap:12px}
  .addrcol{width:100%; min-width:0; flex:none}
  .actions{
    height: auto;
    flex: 0 0 auto; /* override desktop flex-basis to avoid blank space */
    width:100%;
    min-width:0;
    padding-top:6px;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:12px;
    align-items:stretch;
  }
  .actions #progressText{grid-column:1 / -1; margin-top:2px}
  .textarea{min-height:200px}


    /* Mobile table: add horizontal scroll + comfortable column widths */
  .table-wrap{
    overflow-x:auto;
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
  }
  table{min-width: 500px;}
  col.col-addr{width: 100px;}
  col.col-usdt{width: 100px;}
  col.col-trx{width: 100px;}
  col.col-status{width: 100px;}

  /* On mobile, show full masked address: 4 + **** + 5 (13 chars), no ellipsis */
  html.is-mobile .addr .addr-mobile{
    max-width:none;
    overflow:visible;
    text-overflow:clip;
    white-space:nowrap;
    flex: 0 0 auto;
  }

  /* Reduce perceived gap between columns on mobile */
  tbody td:first-child{padding-right:6px;}
  thead th:first-child{padding-right:6px;}
  tbody td.num{padding-left:6px;}
  thead th.num{padding-left:6px;}
  thead th, tbody td{padding:10px 8px; font-size:12px}

}


@media (max-width: 520px){
  table{min-width: 450px;}
  col.col-addr{width:70px}
  col.col-usdt{width:80px}
  col.col-trx{width:80px}
  col.col-status{width:80px}

  .hero{padding:40px 0 14px}
  .hero h1{font-size:22px}
  .subtitle{display:block; font-size:13px; margin-top:6px}
  .search-card{padding:16px}
  .actions{gap:10px}
  .copy{padding:6px 8px}

  /* Slightly tighter on very small screens */
  thead th, tbody td{padding:10px 8px}
}