:root {
  --bg: var(--tg-theme-bg-color, #fff);
  --text: var(--tg-theme-text-color, #111);
  --hint: var(--tg-theme-hint-color, #999);
  --link: var(--tg-theme-link-color, #2481cc);
  --btn: var(--tg-theme-button-color, #2481cc);
  --btn-text: var(--tg-theme-button-text-color, #fff);
  --secondary: var(--tg-theme-secondary-bg-color, #f1f1f1);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.45 -apple-system, "Segoe UI", Roboto, sans-serif; }
header { padding: 12px 14px 6px; position: sticky; top: 0; background: var(--bg); z-index: 5; }
h1 { font-size: 17px; margin: 0 0 8px; }
.stats { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.stat { background: var(--secondary); border-radius: 10px; padding: 6px 10px; font-size: 12px; }
.stat b { display: block; font-size: 15px; }
.controls { display: flex; gap: 8px; margin-bottom: 4px; }
input[type=search], input[type=text] { flex: 1; padding: 9px 10px; border-radius: 10px;
  border: 1px solid var(--hint); background: var(--bg); color: var(--text); }
.filters { display: flex; gap: 6px; padding: 8px 14px; flex-wrap: wrap; }
.filters button, .actions button { border: 1px solid var(--hint); background: var(--bg);
  color: var(--text); border-radius: 999px; padding: 6px 12px; font-size: 13px; }
.filters button.on { background: var(--btn); color: var(--btn-text); border-color: var(--btn); }
#list { padding: 0 14px 80px; }
.user { padding: 10px 4px; border-bottom: 1px solid var(--secondary); cursor: pointer; }
.user .t { font-weight: 600; }
.user .s { color: var(--hint); font-size: 12px; }
.badge { float: right; background: var(--btn); color: var(--btn-text);
  border-radius: 999px; padding: 1px 8px; font-size: 12px; }
.blocked-tag { color: #d00; font-size: 12px; }
/* card */
#card { position: fixed; inset: 0; background: var(--bg); display: none;
  flex-direction: column; z-index: 10; }
#card.open { display: flex; }
#card .top { padding: 10px 14px; border-bottom: 1px solid var(--secondary); }
#card .top button { background: none; border: none; color: var(--link); font-size: 15px; }
#history { flex: 1; overflow-y: auto; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.msg { max-width: 85%; padding: 7px 10px; border-radius: 12px; background: var(--secondary); }
.msg.admin { align-self: flex-end; background: var(--btn); color: var(--btn-text); }
.msg .time { display: block; font-size: 11px; opacity: .7; margin-top: 2px; }
.msg.event .time { opacity: .9; }
.send { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--secondary); }
.send button { background: var(--btn); color: var(--btn-text); border: none;
  border-radius: 10px; padding: 9px 14px; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 14px; border-top: 1px solid var(--secondary); }
.actions button.danger { border-color: #d00; color: #d00; }
.orders { padding: 0 14px 6px; font-size: 13px; color: var(--text); }
.orders .o { background: var(--secondary); border-radius: 8px; padding: 6px 8px; margin: 4px 0; }
#err { color: #d00; padding: 10px 14px; display: none; }