:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--tg-theme-text-color, #111827);
  background: var(--tg-theme-bg-color, #f3f4f6);
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--tg-theme-bg-color, #f3f4f6); }
button, select, input { font: inherit; }
button { cursor: pointer; }
.app-shell { max-width: 780px; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) 14px max(28px, env(safe-area-inset-bottom)); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
h1, h2 { margin: 0; font-size: 24px; }
.eyebrow { color: var(--tg-theme-hint-color, #6b7280); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.muted { color: var(--tg-theme-hint-color, #6b7280); font-size: 13px; }
.hidden { display: none !important; }
.tabs { display: grid; grid-template-columns: .85fr 1.1fr 1.35fr .9fr; padding: 4px; border-radius: 14px; background: var(--tg-theme-secondary-bg-color, #e5e7eb); margin-bottom: 14px; position: sticky; top: 4px; z-index: 5; }
.tab { border: 0; background: transparent; color: var(--tg-theme-hint-color, #6b7280); padding: 10px 5px; border-radius: 11px; font-weight: 700; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab.active { background: var(--tg-theme-bg-color, #fff); color: var(--tg-theme-text-color, #111827); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.view { display: none; }
.view.active { display: block; }
.mode-banner { border-radius: 12px; padding: 9px 12px; margin-bottom: 10px; font-size: 13px; font-weight: 700; background: var(--tg-theme-secondary-bg-color, #e5e7eb); }
.status-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #fff)); padding: 16px; border-radius: 18px; margin-bottom: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.06); }
.status-hero > div { display: flex; align-items: center; gap: 12px; }
.status-dot { width: 13px; height: 13px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 5px rgba(245,158,11,.14); flex: 0 0 auto; }
.status-dot.ok { background: #22c55e; box-shadow: 0 0 0 5px rgba(34,197,94,.14); }
.status-dot.bad { background: #ef4444; box-shadow: 0 0 0 5px rgba(239,68,68,.14); }
.hero-title { font-size: 17px; font-weight: 800; }
.metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
.metric { padding: 14px; border-radius: 16px; background: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #fff)); box-shadow: 0 2px 12px rgba(0,0,0,.05); }
.metric span { display: block; color: var(--tg-theme-hint-color, #6b7280); font-size: 12px; margin-bottom: 4px; }
.metric strong { font-size: 24px; }
.card { background: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #fff)); border-radius: 18px; padding: 16px; margin-bottom: 12px; box-shadow: 0 2px 12px rgba(0,0,0,.05); }
.card-title { font-weight: 800; margin-bottom: 12px; }
.rows { display: grid; gap: 1px; }
.row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--tg-theme-section-separator-color, rgba(127,127,127,.16)); }
.row:last-child { border-bottom: 0; }
.row-main { min-width: 0; }
.row-title { font-weight: 700; overflow-wrap: anywhere; }
.row-value { text-align: right; color: var(--tg-theme-hint-color, #6b7280); font-size: 13px; }
.field { display: grid; gap: 6px; margin-bottom: 12px; }
.field span { color: var(--tg-theme-hint-color, #6b7280); font-size: 12px; font-weight: 700; }
select, input { width: 100%; border: 1px solid var(--tg-theme-section-separator-color, #d1d5db); color: var(--tg-theme-text-color, #111827); background: var(--tg-theme-bg-color, #fff); border-radius: 12px; padding: 11px 12px; }
input::placeholder { color: var(--tg-theme-hint-color, #6b7280); opacity: .8; }
.primary-button, .secondary-button, .danger-button, .success-button { border: 0; border-radius: 12px; padding: 10px 13px; font-weight: 800; }
.primary-button { width: 100%; background: var(--tg-theme-button-color, #2481cc); color: var(--tg-theme-button-text-color, #fff); }
.secondary-button { background: var(--tg-theme-secondary-bg-color, #e5e7eb); color: var(--tg-theme-text-color, #111827); }
.danger-button { background: #dc2626; color: white; }
.success-button { background: #16a34a; color: white; }
.icon-button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--tg-theme-secondary-bg-color, #e5e7eb); color: var(--tg-theme-text-color, #111827); font-size: 24px; line-height: 1; }
.telegram-preview { white-space: pre-wrap; line-height: 1.55; overflow-wrap: anywhere; }
.telegram-preview b { font-weight: 800; }
.filters { display: flex; align-items: end; gap: 10px; }
.filters .field { flex: 1; margin: 0; }
.filter-row { display: flex; align-items: end; gap: 10px; }
.filter-row .field { flex: 1; margin-bottom: 0; }
.user-list { display: grid; gap: 9px; }
.user-card { width: 100%; text-align: left; border: 0; padding: 13px 14px; border-radius: 15px; background: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #fff)); color: var(--tg-theme-text-color, #111827); box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.user-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 5px; }
.user-id { font-weight: 800; overflow-wrap: anywhere; }
.user-meta { color: var(--tg-theme-hint-color, #6b7280); font-size: 12px; overflow-wrap: anywhere; }
.status-pill.active { background: rgba(34,197,94,.14); color: #16a34a; }
.status-pill.inactive { background: rgba(127,127,127,.16); color: var(--tg-theme-hint-color, #6b7280); }
.detail-section { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--tg-theme-section-separator-color, rgba(127,127,127,.16)); }
.detail-section-title { font-weight: 800; margin-bottom: 8px; }
.user-delivery-button { width: 100%; border: 0; background: transparent; color: var(--tg-theme-text-color, #111827); padding: 9px 0; text-align: left; border-bottom: 1px solid var(--tg-theme-section-separator-color, rgba(127,127,127,.12)); }
.user-delivery-button:last-child { border-bottom: 0; }
.user-delivery-line { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.delivery-list { display: grid; gap: 9px; }
.delivery-card { width: 100%; text-align: left; border: 0; padding: 13px 14px; border-radius: 15px; background: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #fff)); color: var(--tg-theme-text-color, #111827); box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.delivery-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 5px; }
.delivery-id { font-weight: 800; }
.status-pill { padding: 4px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; background: var(--tg-theme-secondary-bg-color, #e5e7eb); }
.status-pill.uncertain, .status-pill.failed { background: rgba(239,68,68,.14); color: #ef4444; }
.status-pill.retry, .status-pill.pending { background: rgba(245,158,11,.15); color: #b45309; }
.status-pill.sent { background: rgba(34,197,94,.14); color: #16a34a; }
.delivery-meta { color: var(--tg-theme-hint-color, #6b7280); font-size: 12px; }
.dialog { width: min(92vw, 560px); max-height: 86vh; border: 0; border-radius: 20px; color: var(--tg-theme-text-color, #111827); background: var(--tg-theme-bg-color, #fff); padding: 0; box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.dialog::backdrop { background: rgba(0,0,0,.42); }
.dialog-header { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-bottom: 1px solid var(--tg-theme-section-separator-color, rgba(127,127,127,.18)); }
.dialog-body { padding: 16px; display: grid; gap: 9px; overflow: auto; }
.detail-row { display: grid; grid-template-columns: 120px 1fr; gap: 10px; font-size: 13px; }
.detail-row span:first-child { color: var(--tg-theme-hint-color, #6b7280); }
.error-box { padding: 11px; border-radius: 12px; background: rgba(239,68,68,.10); overflow-wrap: anywhere; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 16px; }
.fatal { margin-top: 24px; padding: 16px; border-radius: 16px; background: rgba(239,68,68,.12); color: #dc2626; line-height: 1.45; }
.empty { text-align: center; color: var(--tg-theme-hint-color, #6b7280); padding: 24px 8px; }
@media (min-width: 620px) { .metric-grid { grid-template-columns: repeat(4, 1fr); } }
.topbar-actions { display: flex; gap: 8px; }
textarea { width: 100%; resize: vertical; min-height: 120px; border: 1px solid var(--tg-theme-section-separator-color, #d1d5db); color: var(--tg-theme-text-color, #111827); background: var(--tg-theme-bg-color, #fff); border-radius: 12px; padding: 11px 12px; font: inherit; line-height: 1.45; }
textarea::placeholder { color: var(--tg-theme-hint-color, #6b7280); opacity: .8; }
.full-button { width: 100%; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 12px; }
.section-heading h2 { font-size: 22px; }
.compact-heading { margin-top: 18px; }
.no-margin { margin: 0; }
.more-dialog { width: min(92vw, 460px); }
.more-menu { display: grid; gap: 1px; padding: 8px 12px 14px; }
.more-menu-item { width: 100%; border: 0; background: transparent; color: var(--tg-theme-text-color, #111827); display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; text-align: left; padding: 12px 8px; border-radius: 13px; }
.more-menu-item:not(:disabled):hover { background: var(--tg-theme-secondary-bg-color, #e5e7eb); }
.more-menu-item:disabled { opacity: .45; cursor: default; }
.more-menu-icon { font-size: 23px; }
.more-menu-item strong, .more-menu-item small { display: block; }
.more-menu-item small { margin-top: 2px; color: var(--tg-theme-hint-color, #6b7280); font-size: 12px; }
.message-recipient-summary { display: flex; justify-content: space-between; align-items: end; gap: 10px; padding: 10px 0 12px; }
.message-recipient-summary span { color: var(--tg-theme-hint-color, #6b7280); font-size: 13px; }
.message-recipient-summary strong { font-size: 28px; }
.message-preview { padding: 13px; border-radius: 13px; background: var(--tg-theme-secondary-bg-color, #e5e7eb); margin-bottom: 12px; }
.message-history { display: grid; gap: 9px; }
.message-card { width: 100%; text-align: left; border: 0; padding: 13px 14px; border-radius: 15px; background: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #fff)); color: var(--tg-theme-text-color, #111827); box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.message-card-top { display: flex; justify-content: space-between; align-items: start; gap: 10px; margin-bottom: 7px; }
.message-card-top strong { min-width: 0; overflow-wrap: anywhere; }
.message-snippet { color: var(--tg-theme-hint-color, #6b7280); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 9px; }
.message-progress { height: 5px; border-radius: 999px; overflow: hidden; background: var(--tg-theme-secondary-bg-color, #e5e7eb); }
.message-progress span { display: block; height: 100%; background: var(--tg-theme-button-color, #2481cc); border-radius: inherit; }
.message-stats { margin-top: 7px; color: var(--tg-theme-hint-color, #6b7280); font-size: 12px; overflow-wrap: anywhere; }
button:disabled { cursor: default; opacity: .55; }
@media (max-width: 460px) {
  .topbar-actions { gap: 5px; }
  .message-card-top { display: grid; }
}
.log-filter-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.log-filter-grid .field { margin-bottom: 10px; }
.log-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.auto-refresh-toggle { display: inline-flex; align-items: center; gap: 8px; color: var(--tg-theme-hint-color, #6b7280); font-size: 13px; font-weight: 700; }
.auto-refresh-toggle input { width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--tg-theme-button-color, #2481cc); }
.log-source-status { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
.log-source-chip { display: grid; gap: 2px; padding: 10px 11px; border-radius: 13px; background: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #fff)); box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.log-source-chip strong { font-size: 12px; }
.log-source-chip span { color: var(--tg-theme-hint-color, #6b7280); font-size: 11px; overflow-wrap: anywhere; }
.log-list { display: grid; gap: 8px; }
.log-card { width: 100%; text-align: left; border: 0; border-left: 4px solid rgba(127,127,127,.28); padding: 12px 13px; border-radius: 14px; background: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #fff)); color: var(--tg-theme-text-color, #111827); box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.log-card.warning { border-left-color: #f59e0b; }
.log-card.error { border-left-color: #ef4444; }
.log-card-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 7px; }
.log-card-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.component-pill, .log-level-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 7px; font-size: 10px; font-weight: 800; }
.component-pill { background: var(--tg-theme-secondary-bg-color, #e5e7eb); color: var(--tg-theme-text-color, #111827); }
.log-level-pill.info { background: rgba(59,130,246,.12); color: #2563eb; }
.log-level-pill.warning { background: rgba(245,158,11,.15); color: #b45309; }
.log-level-pill.error { background: rgba(239,68,68,.14); color: #dc2626; }
.log-snippet { font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.log-message { margin: 0; padding: 12px; border-radius: 12px; background: var(--tg-theme-secondary-bg-color, #e5e7eb); color: var(--tg-theme-text-color, #111827); white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; font-size: 12px; line-height: 1.45; max-height: 48vh; overflow: auto; }
@media (max-width: 460px) {
  .log-filter-grid { grid-template-columns: 1fr; gap: 0; }
  .log-toolbar { align-items: stretch; flex-direction: column; }
  .log-toolbar .secondary-button { width: 100%; }
  .log-source-status { grid-template-columns: 1fr; }
  .log-card-top { align-items: start; flex-direction: column; }
}
.management-note { margin: -2px 0 12px; line-height: 1.45; }
.management-metrics { margin-top: 10px; }
.management-metrics .metric { background: var(--tg-theme-secondary-bg-color, #e5e7eb); box-shadow: none; }
.management-metrics .metric strong { font-size: 21px; }

.management-service-list { display: grid; gap: 8px; }
.management-service { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--tg-theme-hint-color, #6b7280) 18%, transparent); }
.management-service:last-child { border-bottom: 0; }
.management-service-main { display: grid; gap: 2px; min-width: 0; }
.management-service-main strong { font-size: 14px; }
.management-service-main span { color: var(--tg-theme-hint-color, #6b7280); font-size: 11px; }
.management-source-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.management-source { padding: 11px; border-radius: 14px; background: var(--tg-theme-secondary-bg-color, #f1f3f5); display: grid; gap: 4px; min-width: 0; }
.management-source-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.management-source strong { font-size: 13px; }
.management-source code { font-size: 10px; color: var(--tg-theme-hint-color, #6b7280); overflow-wrap: anywhere; }
.management-source small { color: var(--tg-theme-hint-color, #6b7280); line-height: 1.35; overflow-wrap: anywhere; }
.source-status { font-size: 11px; font-weight: 700; white-space: nowrap; }
.source-status.ok { color: #16a34a; }
.source-status.stale { color: #d97706; }
.source-status.error { color: #dc2626; }
.source-status.unknown { color: var(--tg-theme-hint-color, #6b7280); }
@media (max-width: 460px) { .management-source-grid { grid-template-columns: 1fr; } }
.ranking-list { display: grid; gap: 10px; }
.ranking-row { display: grid; gap: 7px; }
.ranking-main { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.ranking-index { width: 28px; height: 28px; display: inline-grid; place-items: center; border-radius: 50%; background: var(--tg-theme-secondary-bg-color, #e5e7eb); color: var(--tg-theme-hint-color, #6b7280); font-size: 11px; font-weight: 800; }
.ranking-name { min-width: 0; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.ranking-main strong { font-size: 14px; }
.ranking-bar { height: 5px; margin-left: 36px; border-radius: 999px; overflow: hidden; background: var(--tg-theme-secondary-bg-color, #e5e7eb); }
.ranking-bar span { display: block; height: 100%; border-radius: inherit; background: var(--tg-theme-button-color, #2481cc); }