:root{
  --bg:#0b0f14;
  --panel:#0f1620;
  --panel2:#0c121a;
  --text:#e6edf3;
  --muted:#9fb0c0;
  --line:#203040;

  --ok:#22c55e;
  --rej:#f59e0b;
  --err:#ef4444;
  --cyan:#38bdf8;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:
    radial-gradient(1200px 600px at 30% -10%, rgba(56,189,248,0.12) 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 0%, rgba(34,197,94,0.10) 0%, transparent 55%),
    var(--bg);
  color:var(--text);
}

.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  background: rgba(15,22,32,0.82);
  backdrop-filter: blur(10px);
  position:sticky; top:0; z-index:5;
}
.brand{display:flex; gap:12px; align-items:center;}
.logo{
  width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center; font-weight:900;
  background: linear-gradient(135deg, rgba(56,189,248,0.25), rgba(34,197,94,0.07));
  border:1px solid rgba(56,189,248,0.18);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.brandText .title{font-weight:900; letter-spacing:0.2px;}
.pill{
  display:inline-block;
  margin-left:8px;
  padding:3px 8px;
  border-radius:999px;
  font-size:12px;
  color:rgba(255,255,255,0.92);
  border:1px solid rgba(56,189,248,0.22);
  background: rgba(56,189,248,0.08);
}
.subtitle{color:var(--muted); font-size:12px; margin-top:4px;}

.controls{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
select,.btn{
  background:var(--panel2); color:var(--text);
  border:1px solid rgba(32,48,64,0.9);
  border-radius:12px;
  padding:8px 10px;
  outline:none;
}
select:focus,.btn:focus{border-color: rgba(56,189,248,0.35);}
.btn{
  cursor:pointer;
  padding:9px 12px;
  border-radius:12px;
  background: linear-gradient(180deg, rgba(56,189,248,0.10), rgba(56,189,248,0.04));
}
.btn:hover{border-color: rgba(56,189,248,0.45);}

.chip{
  display:flex; gap:8px; align-items:center;
  padding:6px 10px;
  border-radius:14px;
  border:1px solid rgba(32,48,64,0.85);
  background: rgba(12,18,26,0.65);
}
.chip .k{color:var(--muted); font-size:12px;}

.status{display:flex; gap:8px; align-items:center; color:var(--muted); font-size:12px;}
.dot{width:10px; height:10px; border-radius:999px; background:#64748b; box-shadow:0 0 0 4px rgba(100,116,139,0.10);}
.dot.ok{background:var(--ok); box-shadow:0 0 0 4px rgba(34,197,94,0.14);}
.dot.bad{background:var(--err); box-shadow:0 0 0 4px rgba(239,68,68,0.14);}

.layout{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap:16px;
  padding:16px;
}
.panel{
  background: rgba(15,22,32,0.85);
  border:1px solid rgba(32,48,64,0.92);
  border-radius:18px;
  overflow:hidden;
  box-shadow: 0 14px 34px rgba(0,0,0,0.28);
}
.panelHeader{
  padding:14px 14px 12px 14px;
  border-bottom:1px solid rgba(32,48,64,0.75);
}
.panelHeader .h{font-weight:900;}
.panelHeader .small{color:var(--muted); font-size:12px; margin-top:5px;}

.tableWrap{overflow:auto; max-height: calc(100vh - 210px);}
.tbl{width:100%; border-collapse:collapse; font-size:13px;}
.tbl th,.tbl td{
  border-bottom:1px solid rgba(32,48,64,0.62);
  padding:10px 10px;
  text-align:left;
  vertical-align:top;
}
.tbl th{
  position:sticky; top:0;
  background: rgba(12,18,26,0.98);
  z-index:2;
  font-weight:800;
  color: rgba(230,237,243,0.95);
}
.tbl tr{cursor:pointer;}
.tbl tr:hover{background: rgba(56,189,248,0.06);}

.col-id{width:72px;}
.col-kind{width:140px;}
.col-status{width:110px;}
.col-time{width:190px;}

.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;}
.wrap{white-space: pre-wrap; word-break: break-word;}
.muted{color:var(--muted);}

.badge{
  display:inline-block;
  padding:3px 8px;
  border-radius:999px;
  font-size:12px;
  border:1px solid rgba(32,48,64,0.85);
  background: rgba(12,18,26,0.65);
}
.badge.ok{border-color: rgba(34,197,94,0.25); background: rgba(34,197,94,0.08);}
.badge.rejected{border-color: rgba(245,158,11,0.25); background: rgba(245,158,11,0.08);}
.badge.error{border-color: rgba(239,68,68,0.25); background: rgba(239,68,68,0.08);}

.row-ok{ background: rgba(34,197,94,0.07); }
.row-rejected{ background: rgba(245,158,11,0.06); }
.row-error{ background: rgba(239,68,68,0.06); }

.flash{ animation: flash 1.0s ease-in-out 1; }
@keyframes flash{
  0%{ box-shadow: inset 0 0 0 9999px rgba(34,197,94,0.16); }
  100%{ box-shadow: inset 0 0 0 9999px rgba(34,197,94,0.00); }
}

.detail .card{padding:14px;}
.kv{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.k{color:var(--muted); font-size:12px;}
.v{font-size:13px; margin-top:4px;}
hr{border:none; border-top:1px solid rgba(32,48,64,0.75); margin:14px 0;}

.block{margin:10px 0 14px 0;}
.bh{font-weight:900; margin-bottom:7px;}
.pre{
  margin:0;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(32,48,64,0.9);
  background: rgba(12,18,26,0.92);
  overflow:auto;
  max-height: 220px;
}
.foot{
  display:flex; justify-content:space-between; align-items:center;
  gap:12px;
  padding:10px 14px;
  border-top:1px solid rgba(32,48,64,0.70);
  background: rgba(12,18,26,0.55);
}
.mini{font-size:12px;}
@media (max-width: 1050px){
  .layout{grid-template-columns:1fr;}
  .tableWrap{max-height: 46vh;}
}