:root {
  --bg:#191919;
  --panel:#1f1f1f;
  --border:#444444;
  --text:#e8eaed;
  --muted:#c5c8cc;
  --label:#d2d6db;
  --icon:#cccccc;
  --tile-bg:#181818;
  --chip-bg:#121212;
  --btn-bg:#121212;
  --btn-primary-bg:#161b22;
  --btn-primary-border:#5a84c9;
  --btn-primary-hover-bg:#1e2535;
  --btn-primary-hover-border:#6aa9ff;
  --btn-primary-hover-text:#cfe3ff;
  --tg-bg:#1d2838;
  --tg-border:#6aa9ff;
  --tg-text:#6aa9ff;
  --tg-hover-bg:#23334a;
  --tg-hover-border:#8cbcff;
  --tg-hover-text:#cfe3ff;
}

:root[data-theme="light"] {
  --bg:#f5f6fa;
  --panel:#ffffff;
  --border:#bfc3ca;
  --text:#111827;
  --muted:#4b5563;
  --label:#374151;
  --icon:#4b5563;
  --tile-bg:#ffffff;
  --chip-bg:#f3f4f6;
  --btn-bg:#f9fafb;
  --btn-primary-bg:#e8f0ff;
  --btn-primary-border:#93b7ff;
  --btn-primary-hover-bg:#dbe8ff;
  --btn-primary-hover-border:#6aa9ff;
  --btn-primary-hover-text:#0f172a;
  --tg-bg:#e9f2ff;
  --tg-border:#6aa9ff;
  --tg-text:#1f4ca6;
  --tg-hover-bg:#dceaff;
  --tg-hover-border:#6aa9ff;
  --tg-hover-text:#0f2a66;
}

* { box-sizing:border-box }
html,body { height:100% }
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
}

.app-container { min-height:100%; display:grid; place-items:center; padding:32px }
.app-card { width:100%; max-width:860px; background:var(--panel); border:1px solid var(--border); border-radius:16px; box-shadow:0 1px 3px rgba(0,0,0,.1) }

.app-header { padding:24px 28px 24px }
.app-header-title { display:flex; align-items:center; justify-content:space-between; gap:12px }
.app-title { margin:0; font-size:32px; letter-spacing:.3px; line-height:1.1 }
.app-desc { margin:10px 0 0; color:var(--muted); line-height:1.55 }

.app-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:0 28px }
.app-stat { border:1px solid var(--border); border-radius:12px; padding:16px; background:var(--tile-bg) }
.app-stat-top { display:flex; align-items:center; gap:8px; margin-bottom:6px }
.app-stat-label { font-size:15px; color:var(--label); font-weight:600 }
.app-stat-value { margin-top:2px; font-size:28px; font-weight:700 }
.app-stat-value[data-loading="true"] { opacity:.55; filter:saturate(.6) }

.app-icon { display:inline-grid; place-items:center; width:34px; height:34px; border:1px solid var(--border); border-radius:10px; background:var(--chip-bg); color:var(--icon) }
.app-icon-user,
.app-icon-srv,
.app-icon-msg { color:var(--icon) }

.app-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:24px 28px; flex-wrap:nowrap }
.app-actions-left { display:flex; align-items:center; gap:12px }
.app-actions-right { display:flex; align-items:center; gap:12px; min-width:0; justify-content:flex-end }

.app-button {
  appearance:none;
  border:1px solid var(--border);
  background:var(--btn-bg);
  color:var(--text);
  padding:12px 16px;
  border-radius:12px;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:4px;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
  flex-shrink:0;
  box-sizing:border-box;
}
.app-button span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.app-button:hover { border-color:#5a5a5a }
.app-button:focus-visible,
.app-theme-toggle:focus-visible {
  outline:2px solid var(--btn-primary-hover-border);
  outline-offset:2px;
}

.app-button-primary { background:var(--btn-primary-bg); border-color:var(--btn-primary-border) }
.app-button-primary:hover { border-color:var(--btn-primary-hover-border); background:var(--btn-primary-hover-bg); color:var(--btn-primary-hover-text) }

.app-button-telegram { background:var(--tg-bg); border-color:var(--tg-border); color:var(--tg-text); gap:8px }
.app-button-telegram:hover { background:var(--tg-hover-bg); border-color:var(--tg-hover-border); color:var(--tg-hover-text) }
.app-button-telegram svg { display:block }

.app-button-icon { padding:10px 12px; border-radius:10px }
.app-icon-sun { display:none }
:root[data-theme="light"] .app-icon-moon { display:none }
:root[data-theme="light"] .app-icon-sun { display:block }

.app-theme-toggle--header { display:none }
.app-theme-toggle--actions { display:inline-flex }

@media (max-width:800px) {
  .app-stats { grid-template-columns:1fr }
}

@media (max-width:560px) {
  .app-container { padding:16px }
  .app-theme-toggle--header { display:inline-flex }
  .app-theme-toggle--actions { display:none }
  .app-actions { flex-direction:column; align-items:stretch; gap:10px; padding:20px 28px 24px; flex-wrap:wrap }
  .app-actions-right { order:1; width:100%; display:flex; flex-direction:column; align-items:stretch; gap:10px; min-width:0 }
  .app-actions-right .app-button { width:100%; max-width:100%; min-width:0; justify-content:center }
  .app-actions-right .app-button span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0 }
  .app-actions-right .app-button svg { flex:0 0 auto }
}