:root { color-scheme: dark; }
body {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at 20% 0%, rgba(6, 182, 212, 0.16), transparent 30%), radial-gradient(circle at 100% 20%, rgba(34, 197, 94, 0.09), transparent 26%), #08090d;
}
.panel { border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(14,16,22,.86); box-shadow: 0 24px 90px rgba(0,0,0,.32); }
.panel-head { border-bottom: 1px solid rgba(255,255,255,.1); padding: 16px 20px; }
.field { width: 100%; border-radius: 6px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.055); padding: 11px 12px; color: white; outline: none; }
.field:focus { border-color: rgba(103,232,249,.75); box-shadow: 0 0 0 3px rgba(6,182,212,.14); }
.btn-primary, .btn-ghost, .icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 6px; min-height: 42px; padding: 0 14px; font-weight: 700; }
.btn-primary { background: #67e8f9; color: #061017; }
.btn-primary:hover { background: #a5f3fc; }
.btn-ghost, .icon-btn { border: 1px solid rgba(255,255,255,.12); color: #d4d4d8; }
.icon-btn { width: 42px; padding: 0; }
.section-title { font-size: 15px; font-weight: 800; color: white; }
.metric { border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(255,255,255,.045); padding: 18px; }
.metric span { display: block; font-size: 30px; font-weight: 800; }
.metric small, .row p, .empty { color: #a1a1aa; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; }
.row strong { display: block; color: white; }
.status { border-radius: 999px; padding: 4px 9px; font-size: 12px; font-weight: 800; text-transform: uppercase; }
.status.ok { background: rgba(34,197,94,.14); color: #86efac; }
.status.bad { background: rgba(239,68,68,.14); color: #fca5a5; }
.empty { padding: 18px 20px; }
.channel-button { display: grid; width: 100%; grid-template-columns: 46px 1fr; gap: 12px; align-items: center; border-radius: 8px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); padding: 10px; text-align: left; }
.channel-button:hover, .channel-button.active { border-color: rgba(103,232,249,.65); background: rgba(103,232,249,.1); }
.channel-logo { display: grid; height: 46px; width: 46px; place-items: center; overflow: hidden; border-radius: 6px; background: rgba(255,255,255,.08); color: #67e8f9; font-weight: 800; }
.channel-logo img { height: 100%; width: 100%; object-fit: contain; }
.channel-meta { min-width: 0; }
.channel-meta strong, .channel-meta span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-meta span { color: #a1a1aa; font-size: 12px; }
svg { width: 18px; height: 18px; }

.tabs { display: flex; gap: 8px; overflow-x: auto; border-bottom: 1px solid rgba(255,255,255,.1); }
.tab { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; white-space: nowrap; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; padding: 0 14px; color: #a1a1aa; font-weight: 800; }
.tab.active { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.07); color: #67e8f9; }
.admin-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }
.admin-sidebar { position: sticky; top: 0; height: 100vh; border-right: 1px solid rgba(255,255,255,.1); background: rgba(2,6,12,.72); padding: 22px 16px; }
.brand-block { margin-bottom: 22px; }
.brand-block p { color: #67e8f9; font-size: 12px; font-weight: 800; letter-spacing: .28em; text-transform: uppercase; }
.brand-block h1 { margin-top: 6px; color: #fff; font-size: 20px; font-weight: 800; }
.side-nav { display: grid; gap: 8px; }
.side-link { display: flex; align-items: center; gap: 10px; min-height: 44px; border: 1px solid transparent; border-radius: 8px; padding: 0 12px; color: #a1a1aa; font-weight: 800; text-align: left; }
.side-link:hover, .side-link.active { border-color: rgba(103,232,249,.42); background: rgba(103,232,249,.1); color: #67e8f9; }
.sidebar-logout { width: 100%; margin-top: 18px; }
.admin-main { min-width: 0; padding: 24px; }
.channel-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; max-height: 420px; overflow: auto; padding-right: 4px; }
.check-row { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: center; border: 1px solid rgba(255,255,255,.09); border-radius: 8px; background: rgba(255,255,255,.04); padding: 10px; }
.check-row:hover { border-color: rgba(103,232,249,.45); }
.check-row input { width: 18px; height: 18px; accent-color: #67e8f9; }
.check-row strong, .check-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check-row small { color: #a1a1aa; }
code { border-radius: 5px; background: rgba(255,255,255,.08); padding: 2px 5px; color: #a5f3fc; }
.compact-edit { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto; gap: 10px; align-items: center; padding: 12px; }
.toggle-line { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; border: 1px solid rgba(255,255,255,.12); border-radius: 6px; padding: 0 12px; color: #d4d4d8; font-weight: 800; }
.toggle-line input { width: 17px; height: 17px; accent-color: #67e8f9; }

@media (max-width: 860px) {
  .admin-shell { display: block; }
  .admin-sidebar { position: sticky; z-index: 20; height: auto; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); padding: 14px; }
  .brand-block { margin-bottom: 12px; }
  .side-nav { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
  .side-link { flex: 0 0 auto; min-height: 40px; white-space: nowrap; }
  .sidebar-logout { width: auto; margin-top: 12px; }
  .admin-main { padding: 16px; }
  .row { align-items: flex-start; flex-direction: column; }
  .compact-edit { grid-template-columns: 1fr; }
}