:root{
  --bg:#f5f5f7;
  --card:#ffffff;
  --text:#1d1d1f;
  --muted:#6e6e73;
  --line:#d2d2d7;
  --shadow:0 1px 2px rgba(0,0,0,0.06);
  --radius:12px;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:14px/1.4 -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.topbar{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:space-between;
  align-items:center;
  padding:14px 18px;
  border-bottom:1px solid var(--line);
  background:rgba(245,245,247,0.92);
  backdrop-filter:saturate(180%) blur(10px);
}
.brand{font-weight:600; letter-spacing:0.2px;}
.topbar__left{display:flex; flex-wrap:wrap; gap:12px; align-items:center;}
.topbar__right{display:flex; gap:10px; align-items:center;}

@media (max-width: 560px){
  .topbar{padding:12px 14px;}
  .topbar__left{width:100%; flex-direction:column; align-items:flex-start;}
  .topbar__right{width:100%;}
  .topbar__right .btn{width:100%;}
}

.pill{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--card);
  box-shadow:var(--shadow);
  max-width:100%;
}
.sep{color:var(--muted);}
.dot{width:8px;height:8px;border-radius:50%; background:#999; display:inline-block;}

.btn{
  border:1px solid var(--line);
  background:var(--card);
  color:var(--text);
  border-radius:10px;
  padding:8px 12px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.btn:hover{background:#fbfbfd;}
.btn:active{transform:translateY(1px);}

.btn--ghost{background:transparent;}
.btn--ghost:hover{background:rgba(255,255,255,0.55);}

.wrap{max-width:1180px;margin:0 auto;padding:18px;}

.controls{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:8px;
  margin-bottom:10px;
}
.grow{flex:1 1 240px;}

.grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 920px){.grid{grid-template-columns:repeat(2, minmax(0, 1fr));}}
@media (max-width: 520px){.grid{grid-template-columns:1fr;}}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px 14px 12px;
}
.card__k{color:var(--muted); font-size:12px;}
.card__v{font-size:22px; font-weight:600; margin-top:6px;}

.section{margin-top:18px;}
.section__head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:10px;}
.section__head h2{font-size:16px; margin:0; font-weight:600;}
.muted{color:var(--muted); font-size:12px;}

.table{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  box-shadow:var(--shadow);
}
table{border-collapse:collapse; width:100%;}
thead th{
  text-align:left;
  font-weight:600;
  font-size:12px;
  color:var(--muted);
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  background:#fbfbfd;
}
tbody td{
  padding:10px 12px;
  border-bottom:1px solid rgba(210,210,215,0.55);
  vertical-align:top;
}
tbody tr:last-child td{border-bottom:none;}
.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:12px;}
.small{font-size:12px; color:var(--muted);}
.tag{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fbfbfd;
  font-size:12px;
  margin-right:6px;
}

.logwrap{max-width:1180px;margin:0 auto;padding:18px;}
.logpanel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.logtools{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:12px;
  border-bottom:1px solid var(--line);
  background:#fbfbfd;
}
.logtools .grow{flex:1 1 240px;}
.input{
  width:100%;
  border:1px solid var(--line);
  background:var(--card);
  border-radius:10px;
  padding:8px 10px;
  outline:none;
}
.logview{
  height:65vh;
  min-height:320px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.logpre{
  margin:0;
  padding:12px;
  font:12px/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  white-space:pre;
}

/* Debug log highlighting */
.btn--on{
  background:#e8e8ed;
}
.logline{display:block;}
.lv-error{color:#ff3b30; font-weight:600;}
.lv-warn{color:#ff9f0a; font-weight:600;}
.lv-info{color:var(--text);}
.lv-debug{color:#6e6e73;}
.lv-trace{color:#8e8e93;}
.regex-err{color:#ff3b30;}