body { font-family: Arial, sans-serif; margin: 0; background: #10131a; color: #e7edf7; }
a { color: #9dc1ff; text-decoration: none; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 24px; background:#161b24; position:sticky; top:0; }
.topbar nav { display:flex; gap:14px; flex-wrap:wrap; }
.container { padding: 24px; max-width: 1280px; margin: 0 auto; }
.narrow { max-width: 420px; }
.card { background:#171d28; border:1px solid #263041; border-radius:14px; padding:16px; margin-bottom:16px; }
.grid { display:grid; gap:16px; }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cols-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.avatar { width: 128px; height:128px; border-radius:50%; object-fit:cover; }
.avatar-sm { width:64px; height:64px; border-radius:12px; object-fit:cover; }
.avatar-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap:12px; }
.log-list { max-height: 75vh; overflow:auto; font-family: monospace; font-size: 12px; }
.raw-log-list pre { white-space: pre-wrap; word-break: break-word; background:#0c1118; padding:12px; border-radius:10px; }
.log-item { padding:12px 0; border-bottom:1px solid #222a38; }
.feed-list { display:flex; flex-direction:column; gap:10px; max-height: 460px; overflow:auto; }
.feed-item { display:grid; grid-template-columns: 220px 1fr; gap:12px; padding:12px; border:1px solid #263041; border-radius:12px; background:#121824; }
.feed-time { color:#93a6c5; font-size:13px; }
.feed-message { font-size:14px; }
.filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
input, select, textarea, button { width:100%; max-width:100%; padding:10px; border-radius:10px; border:1px solid #334155; background:#0c1118; color:#e7edf7; }
button { cursor:pointer; }
label { display:block; margin:8px 0; }
.error { color: #ff9090; }
.section-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.stat-card { min-height: 94px; }
.stat-label { color:#93a6c5; font-size:13px; margin-bottom:8px; }
.stat-value { font-size:24px; font-weight:700; }
.clean-list { list-style:none; padding-left:0; margin:0; }
.clean-list li { padding:6px 0; border-bottom:1px solid #222a38; }
.muted { color:#93a6c5; font-size:13px; }
.heatmap-grid { display:flex; gap:8px; overflow:auto; }
.heatmap-col { display:grid; grid-template-rows: 22px repeat(24, 12px); gap:3px; min-width:36px; }
.heatmap-day { font-size:11px; color:#93a6c5; text-align:center; }
.heatmap-cell { border-radius:2px; background:#7aa2ff; }
.tz-picker-wrap { display:flex; align-items:center; gap:8px; }
@media (max-width: 800px) {
  .topbar { flex-direction:column; align-items:flex-start; }
  .feed-item { grid-template-columns: 1fr; }
}