/* Кабинет — отдельная админ-панель Элька. Темная тема, чистый layout. */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: #0a0a0e;
  color: #e8e8ec;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', system-ui, sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
a { color: #7CB4FF; text-decoration: none; }
.muted { color: rgba(255,255,255,.45); font-size: 13px; }

/* ── Login gate ─────────────────────────── */
.cab-login {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.cab-login-card {
  background: #14141a; border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  padding: 36px; max-width: 420px; width: 100%;
  text-align: center;
}
.cab-login-card h1 { font-size: 22px; margin: 18px 0 8px; }
.cab-error { color: #fca5a5; min-height: 20px; margin-top: 14px; font-size: 13px; }

/* ── App layout ─────────────────────────── */
.cab-app { display: flex; min-height: 100vh; }

.cab-sidebar {
  width: 240px;
  background: #0e0e13;
  border-right: 1px solid rgba(255,255,255,.06);
  display: flex; flex-direction: column;
  flex-shrink: 0;
}
.cab-brand {
  padding: 20px 18px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.cab-brand-icon { flex-shrink: 0; }
.cab-brand-name { font-weight: 700; font-size: 16px; letter-spacing: -0.3px; }
.cab-brand-sub  { font-size: 11px; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 1px; }

.cab-nav { flex: 1; padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; }
.cab-nav-item {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: none;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13.5px; color: rgba(255,255,255,.6);
  text-align: left;
  transition: all 0.12s;
}
.cab-nav-item:hover { background: rgba(255,255,255,.04); color: rgba(255,255,255,.9); }
.cab-nav-item.active {
  background: rgba(0,74,173,.15); color: #c4b5fd;
}
.cab-nav-item span { font-size: 16px; }

.cab-sidebar-bottom {
  padding: 12px 8px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.cab-back-btn {
  display: block; padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px; color: rgba(255,255,255,.5);
  transition: all 0.12s;
}
.cab-back-btn:hover { background: rgba(255,255,255,.04); color: #fff; }

/* ── Main ─────────────────────────── */
.cab-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cab-header {
  padding: 18px 28px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: space-between;
}
.cab-title { font-size: 20px; font-weight: 700; margin: 0; letter-spacing: -0.4px; }
.cab-user {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: rgba(255,255,255,.6);
}
.cab-logout {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px; padding: 5px 10px; font-size: 14px; color: #fca5a5;
}
.cab-logout:hover { background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.3); }

.cab-content { flex: 1; padding: 24px 28px; overflow-y: auto; }
.cab-section { animation: fadeIn 0.18s; }
@keyframes fadeIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }

.cab-loading { padding: 30px; text-align: center; color: rgba(255,255,255,.4); }

/* ── Stats grid ─────────────────────────── */
.cab-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.cab-stat {
  background: linear-gradient(135deg, rgba(0,74,173,.06), rgba(124,180,255,.02));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 18px 20px;
  transition: all 0.2s;
}
.cab-stat:hover { border-color: rgba(0,74,173,.3); transform: translateY(-1px); }
.cab-stat-value { font-size: 28px; font-weight: 700; letter-spacing: -1px; color: #fff; }
.cab-stat-label { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.4px; }
.cab-stat-sub   { font-size: 12px; color: rgba(255,255,255,.4); margin-top: 6px; }

/* ── Toolbar + table ─────────────────────────── */
.cab-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-bottom: 16px;
}
.cab-input {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 9px 14px;
  width: 320px; max-width: 100%;
  outline: none;
  transition: border 0.12s;
}
.cab-input:focus { border-color: #004aad; }
.cab-count { font-size: 12px; color: rgba(255,255,255,.4); }

.cab-table-wrap {
  background: #14141a;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  overflow: hidden;
}
.cab-table { width: 100%; border-collapse: collapse; }
.cab-table thead th {
  background: rgba(255,255,255,.03);
  padding: 12px 16px;
  text-align: left;
  font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,.5);
  text-transform: uppercase; letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.cab-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 13.5px;
  vertical-align: middle;
}
.cab-table tbody tr:last-child td { border-bottom: none; }
.cab-table tbody tr:hover { background: rgba(255,255,255,.02); }
.cab-table td.code { font-family: 'SF Mono', Menlo, monospace; font-size: 11px; color: rgba(255,255,255,.6); }
.cab-table td.actions { text-align: right; white-space: nowrap; }

.cab-user-cell { display: flex; align-items: center; gap: 10px; }
.cab-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #004aad, #EC4899);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 600;
  flex-shrink: 0;
  position: relative;
}
.cab-avatar.online::after {
  content: ''; position: absolute; right: -2px; bottom: -2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #22C55E; border: 2px solid #14141a;
}
.cab-user-name { font-weight: 500; color: #fff; }
.cab-user-handle { font-size: 11.5px; color: rgba(255,255,255,.4); margin-top: 1px; }

/* ── Badges ─────────────────────────── */
.cab-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.3px;
  margin-left: 5px;
}
.cab-badge.admin { background: rgba(0,74,173,.2); color: #c4b5fd; }
.cab-badge.bot   { background: rgba(6,182,212,.18); color: #67e8f9; }
.cab-badge.ban   { background: rgba(239,68,68,.18); color: #fca5a5; }
.cab-badge.me    { background: rgba(34,197,94,.18); color: #86efac; }
.cab-badge.active { background: rgba(34,197,94,.18); color: #86efac; }
.cab-badge.dead  { background: rgba(255,255,255,.08); color: rgba(255,255,255,.4); }

/* ── Downloads + Devices on Dashboard ─────────────────────────── */
.cab-dl-section { margin-top: 30px; }
.cab-section-title {
  font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,.65);
  margin: 0 0 14px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.cab-dl-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.cab-dl-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 16px 18px;
}
.cab-dl-card h4 {
  margin: 0 0 12px;
  font-size: 13px; color: rgba(255,255,255,.55);
  font-weight: 500;
}
.dl-rows { display: flex; flex-direction: column; gap: 8px; }
.dl-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13.5px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.dl-row:last-child { border-bottom: none; }
.dl-row.muted { color: rgba(255,255,255,.4); }
.dl-row b { color: #c4b5fd; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Mini-spark bars */
.dl-bars {
  display: flex; align-items: flex-end; gap: 4px;
  height: 80px;
  padding: 6px 0;
}
.dl-bar {
  flex: 1; background: rgba(255,255,255,.04); border-radius: 3px;
  position: relative; overflow: hidden;
  min-width: 12px;
}
.dl-bar > div {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(180deg, #7CB4FF, #004aad);
  border-radius: 3px;
  min-height: 2px;
  transition: height 0.3s;
}

/* Mini table for recent downloads */
.cab-mini-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cab-mini-table thead th {
  text-align: left; padding: 8px 10px;
  font-size: 10.5px; color: rgba(255,255,255,.45);
  text-transform: uppercase; letter-spacing: 0.4px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.cab-mini-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.cab-mini-table tbody tr:last-child td { border-bottom: none; }
.cab-mini-table td.code { font-family: 'SF Mono', Menlo, monospace; font-size: 11px; }
.cab-mini-table td.muted { color: rgba(255,255,255,.4); }

/* ── User info modal ─────────────────────────── */
.cab-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 8px;
}
.cab-info-row {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.03);
  border-radius: 8px;
  padding: 9px 12px;
}
.cab-info-row .lbl { font-size: 10.5px; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: 0.4px; }
.cab-info-row span:last-child { font-size: 13.5px; margin-top: 3px; color: #fff; }
.cab-info-section { margin: 18px 0 8px; font-size: 13px; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.cab-info-list { list-style: none; padding: 0; margin: 0; }
.cab-info-list li {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 13px;
}
.cab-info-list li:last-child { border-bottom: none; }
.cab-info-list a { color: #c4b5fd; }
.cab-info-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
  margin-bottom: 4px;
}
.cab-info-stats > div {
  background: rgba(0,74,173,.08);
  border: 1px solid rgba(0,74,173,.15);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}
.cab-info-stats b { display: block; font-size: 20px; color: #fff; font-weight: 700; }
.cab-info-stats span { font-size: 11px; color: rgba(255,255,255,.5); margin-top: 2px; display: block; }

/* ── Buttons ─────────────────────────── */
.cab-btn {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px; font-weight: 500;
  color: #fff;
  transition: all 0.12s;
}
.cab-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); }
.cab-btn.primary {
  background: linear-gradient(135deg, #7CB4FF, #004aad);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
}
.cab-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,74,173,.4); }
.cab-btn.danger { color: #fca5a5; border-color: rgba(239,68,68,.3); }
.cab-btn.danger:hover { background: rgba(239,68,68,.15); }
.cab-btn.icon { padding: 6px 9px; font-size: 13px; }
.cab-btn.sm { padding: 4px 10px; font-size: 11.5px; }

/* ── Cards grid for bots ─────────────────────────── */
.cab-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.cab-card {
  background: #14141a;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 16px;
}
.cab-card h4 { margin: 0 0 4px; font-size: 15px; }
.cab-card .muted { margin-bottom: 12px; font-size: 12.5px; }

/* ── Messages list ─────────────────────────── */
.cab-messages-list {
  background: #14141a;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 6px;
  max-height: 70vh;
  overflow-y: auto;
}
.cab-msg-row {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  display: flex; gap: 14px; align-items: flex-start;
}
.cab-msg-row:last-child { border-bottom: none; }
.cab-msg-meta { font-size: 11px; color: rgba(255,255,255,.4); white-space: nowrap; flex-shrink: 0; min-width: 70px; }
.cab-msg-body { flex: 1; min-width: 0; }
.cab-msg-from { font-size: 12.5px; font-weight: 600; color: #c4b5fd; }
.cab-msg-text { font-size: 13.5px; color: rgba(255,255,255,.85); word-break: break-word; margin-top: 2px; }

/* ── Settings ─────────────────────────── */
.cab-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
}
.cab-info-card {
  background: #14141a;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 18px;
}
.cab-info-card h3 { margin: 0 0 8px; font-size: 16px; }
.cab-info-card p { margin: 0 0 12px; }
.cab-info-card button { margin-right: 8px; }
.cab-code-box {
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11.5px;
  word-break: break-all;
  margin: 10px 0;
  user-select: all;
}

/* ── Modal ─────────────────────────── */
.cab-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.cab-modal-card {
  background: #14141a;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 22px;
  max-width: 460px; width: 100%;
  max-height: 90vh; overflow-y: auto;
}
.cab-modal-card h3 { margin: 0 0 14px; font-size: 17px; }
.cab-modal-card label {
  display: block; margin: 10px 0;
  font-size: 12px; color: rgba(255,255,255,.6);
}
.cab-modal-card input, .cab-modal-card select, .cab-modal-card textarea {
  display: block; width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 9px 12px;
  margin-top: 4px;
  outline: none; resize: vertical;
}
.cab-modal-card input:focus, .cab-modal-card select:focus, .cab-modal-card textarea:focus { border-color: #004aad; }
.cab-modal-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 18px;
}

/* ── Toast ─────────────────────────── */
.cab-toast {
  position: fixed; bottom: 20px; right: 20px;
  background: #14141a;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 11px 18px;
  font-size: 13px;
  box-shadow: 0 12px 28px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(8px);
  transition: all 0.2s;
  pointer-events: none;
  z-index: 200;
}
.cab-toast.show { opacity: 1; transform: translateY(0); }

/* ── Responsive ─────────────────────────── */
@media (max-width: 720px) {
  .cab-sidebar { width: 64px; }
  .cab-brand > div, .cab-nav-item:not(.active) span + *, .cab-back-btn { display: none; }
  .cab-nav-item { justify-content: center; }
  .cab-content { padding: 14px; }
  .cab-input { width: 100%; }
}

/* ── Master / Detail (Messages + Support) ──────── */
.cab-md-layout {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 14px;
  height: calc(100vh - 200px);
  min-height: 480px;
}
.cab-md-list {
  background: #14141a;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  overflow-y: auto;
  padding: 6px;
}
.cab-md-view {
  background: #14141a;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.cab-md-placeholder {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px;
}

/* ── Chat list items ──────────────── */
.cab-chat-item {
  width: 100%;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px; align-items: start;
  padding: 12px 12px;
  background: transparent;
  border: none;
  border-radius: 10px;
  text-align: left;
  color: inherit;
  transition: background .12s;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.cab-chat-item:hover { background: rgba(255,255,255,.04); }
.cab-chat-item.active { background: rgba(124,180,255,.16); }
.cab-chat-icon {
  font-size: 22px; line-height: 1;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(124,180,255,.12);
  border-radius: 10px;
}
.cab-chat-info { min-width: 0; }
.cab-chat-title {
  font-weight: 600; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cab-chat-count {
  display: inline-block; margin-left: 6px;
  background: rgba(255,255,255,.08);
  border-radius: 8px; padding: 1px 7px;
  font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,.6);
  vertical-align: middle;
}
.cab-chat-subtitle {
  font-size: 12px;
  color: rgba(255,255,255,.45);
  margin: 2px 0;
}
.cab-chat-preview {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cab-chat-preview b { color: rgba(255,255,255,.75); font-weight: 600; }
.cab-chat-time {
  font-size: 11px;
  color: rgba(255,255,255,.4);
  white-space: nowrap;
}

/* ── Chat header + messages ─────── */
.cab-chat-header {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.cab-chat-header-title { font-weight: 700; font-size: 16px; }
.cab-chat-header-sub { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 2px; }
.cab-chat-messages {
  flex: 1; overflow-y: auto;
  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.cab-bubble {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  padding: 9px 12px;
  max-width: 75%;
}
.cab-bubble-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px; gap: 10px;
}
.cab-bubble-name {
  font-size: 12px; font-weight: 600;
}
.cab-bubble-time {
  font-size: 11px; color: rgba(255,255,255,.4);
}
.cab-bubble-body {
  font-size: 13px; line-height: 1.45;
  word-wrap: break-word; overflow-wrap: anywhere;
}
.cab-msg-link { color: #7CB4FF; }

/* ── Support: filter bar ────────── */
.cab-support-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.cab-filter-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.75);
  border-radius: 9px;
  font-size: 13px;
  transition: all .12s;
}
.cab-filter-btn:hover { background: rgba(255,255,255,.08); }
.cab-filter-btn.active {
  background: #1659C8; border-color: #1659C8;
  color: #fff;
  box-shadow: 0 4px 14px rgba(108,99,255,.3);
}
.cab-filter-count {
  background: rgba(255,255,255,.18);
  border-radius: 6px; padding: 1px 7px;
  font-size: 11px;
}

/* ── Support: list items ────────── */
.cab-ticket-item {
  width: 100%;
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: transparent; border: none; color: inherit;
  border-radius: 10px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .12s;
}
.cab-ticket-item:hover { background: rgba(255,255,255,.04); }
.cab-ticket-item.active { background: rgba(124,180,255,.16); }
.cab-ticket-item.unread::before {
  content: '';
  position: absolute; margin-left: -8px; margin-top: 5px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #1659C8;
  box-shadow: 0 0 6px rgba(108,99,255,.7);
}
.cab-ticket-item { position: relative; }
.cab-ticket-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cab-ticket-title {
  font-weight: 600; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1;
}
.cab-ticket-status {
  font-size: 10px; font-weight: 600;
  padding: 3px 8px; border-radius: 6px;
  white-space: nowrap;
}
.cab-ticket-status.st-open        { background: rgba(96,165,250,.18);  color: #93c5fd; }
.cab-ticket-status.st-in_progress { background: rgba(251,191,36,.18);  color: #fcd34d; }
.cab-ticket-status.st-resolved    { background: rgba(34,197,94,.18);   color: #86efac; }
.cab-ticket-status.st-closed      { background: rgba(255,255,255,.08); color: rgba(255,255,255,.55); }
.cab-ticket-meta {
  display: flex; gap: 10px; align-items: center;
  font-size: 12px; color: rgba(255,255,255,.5);
}
.cab-ticket-user { font-weight: 500; color: rgba(255,255,255,.7); }
.cab-ticket-preview {
  font-size: 12px;
  color: rgba(255,255,255,.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Support: ticket view ───────── */
.cab-tk-header {
  padding: 14px 20px;
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.cab-tk-title { font-weight: 700; font-size: 16px; }
.cab-tk-sub { font-size: 12px; color: rgba(255,255,255,.55); margin-top: 3px; }
.cab-tk-actions { display: flex; gap: 8px; align-items: center; }
.cab-status-select {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: #e8e8ec;
  padding: 8px 12px;
  border-radius: 9px;
  font-size: 13px;
  cursor: pointer;
}
.cab-tk-messages {
  flex: 1; overflow-y: auto;
  padding: 16px 20px;
  display: flex; flex-direction: column; gap: 10px;
}
.cab-tk-bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.06);
  position: relative;
}
.cab-tk-bubble.user {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.cab-tk-bubble.staff {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(108,99,255,.25), rgba(124,180,255,.22));
  border-color: rgba(124,180,255,.3);
  border-bottom-right-radius: 4px;
}
.cab-tk-bubble-head {
  font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,.65);
  margin-bottom: 4px;
}
.cab-tk-bubble-body {
  font-size: 13px; line-height: 1.5;
  word-wrap: break-word; overflow-wrap: anywhere;
}
.cab-tk-bubble-time {
  font-size: 10px; color: rgba(255,255,255,.4);
  margin-top: 4px; text-align: right;
}
.cab-tk-reply {
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex; gap: 10px; align-items: flex-end;
}
.cab-tk-reply textarea {
  flex: 1;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 10px 14px;
  color: #e8e8ec;
  font-size: 13px;
  resize: vertical;
  min-height: 42px; max-height: 200px;
}
.cab-tk-reply textarea:focus {
  outline: none; border-color: #1659C8;
}
.cab-tk-reply .cab-btn { white-space: nowrap; height: 42px; }

/* ── Sidebar badge ──────────────── */
.cab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 6px; margin-left: auto;
  background: #ef4444;
  color: #fff;
  border-radius: 9px;
  font-size: 11px; font-weight: 700;
}

/* ── Responsive overrides ───────── */
@media (max-width: 900px) {
  .cab-md-layout { grid-template-columns: 1fr; height: auto; }
  .cab-md-list { max-height: 320px; }
  .cab-md-view { min-height: 420px; }
}

/* ─── WIDGETS: пошаговая инструкция ──────────── */
.widget-step {
  display: flex; gap: 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.07);
}
.widget-step:first-of-type { border-top: none; padding-top: 4px; }
.widget-step-num {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1659C8, #8B7CFF);
  color: #fff;
  font-weight: 700; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.widget-step-body { flex: 1; min-width: 0; }
.widget-step-title {
  font-weight: 600; font-size: 15px;
  margin-bottom: 5px;
  color: #fff;
}
.widget-step-desc {
  color: rgba(255,255,255,.7);
  font-size: 13.5px; line-height: 1.55;
}
.widget-step-desc code,
.widget-faq-a code {
  background: rgba(108,99,255,.18);
  color: #C7BFFD;
  padding: 1px 6px; border-radius: 4px;
  font-size: 12.5px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
}
.widget-code-sample {
  background: #1E1A35;
  color: #BCBADC;
  padding: 12px 14px;
  border-radius: 10px;
  overflow-x: auto;
  font-size: 12.5px;
  line-height: 1.6;
  margin-top: 10px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
}
.widget-faq-q {
  cursor: pointer;
  padding: 10px 14px;
  background: rgba(255,255,255,.03);
  border-radius: 8px;
  font-weight: 500;
  font-size: 13.5px;
  color: rgba(255,255,255,.85);
  list-style: none;
  position: relative;
}
.widget-faq-q::before {
  content: '▸';
  margin-right: 8px;
  font-size: 12px;
  display: inline-block;
  transition: transform .15s;
  color: var(--accent, #1659C8);
}
details[open] .widget-faq-q::before { transform: rotate(90deg); }
.widget-faq-q::marker { display: none; }
.widget-faq-q::-webkit-details-marker { display: none; }
.widget-faq-a {
  padding: 10px 14px 14px 30px;
  font-size: 13px; line-height: 1.6;
  color: rgba(255,255,255,.7);
}

/* ─── SERVER section: метрики сервера ──────────────── */
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.3 } }

.srv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.srv-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 0.15s;
}
.srv-card:hover { background: rgba(255,255,255,0.07); }
.srv-card-label {
  font-size: 11.5px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.srv-card-value {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.srv-card-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  margin-top: 2px;
}
/* Прогресс-бар внутри карточки (RAM/CPU/диск) */
.srv-card-bar {
  height: 6px;
  background: rgba(255,255,255,0.10);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 8px;
}
.srv-card-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #22C55E, #10B981);
  transition: width 0.4s ease;
  border-radius: 4px;
}
.srv-card.warn .srv-card-bar-fill   { background: linear-gradient(90deg, #FBBF24, #F59E0B); }
.srv-card.danger .srv-card-bar-fill { background: linear-gradient(90deg, #FB7185, #EF4444); }
.srv-card.warn   .srv-card-value { color: #FBBF24; }
.srv-card.danger .srv-card-value { color: #FB7185; }

.srv-card.realtime {
  background: linear-gradient(135deg, rgba(108,99,255,0.15), rgba(168,85,247,0.10));
  border-color: rgba(108,99,255,0.25);
}

.srv-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}
.srv-table .srv-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
}
.srv-table .srv-row:hover { background: rgba(255,255,255,0.06); }
.srv-table .srv-row b { font-variant-numeric: tabular-nums; }

/* ════════════════════════════════════════════════════════════
   DASHBOARD v2: красивый дашборд с графиками
═══════════════════════════════════════════════════════════════ */

/* Big numbers — 4 крупные карточки сверху */
.dash-bignums {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.dash-big {
  position: relative;
  padding: 22px 24px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.07);
  overflow: hidden;
  transition: transform .15s, border-color .15s;
}
.dash-big:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.16);
}
.dash-big::before {
  content: '';
  position: absolute; top: -40px; right: -40px;
  width: 140px; height: 140px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.35;
  z-index: 0;
}
.dash-big.color-violet::before { background: #1659C8; }
.dash-big.color-pink::before   { background: #EC4899; }
.dash-big.color-green::before  { background: #10B981; }
.dash-big.color-amber::before  { background: #F59E0B; }
.dash-big > *  { position: relative; z-index: 1; }
.dash-big-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,0.10);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  margin-bottom: 12px;
}
.dash-big-label {
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
}
.dash-big-value {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -1px;
  color: #fff;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.dash-big-trend {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 8px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}
.dash-big-trend.up   { background: rgba(34,197,94,0.18);  color: #4ADE80; }
.dash-big-trend.down { background: rgba(239,68,68,0.18);   color: #F87171; }
.dash-big-trend.flat { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.6); }

/* Карточки */
.dash-row {
  display: flex;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.dash-row > .dash-card { flex: 1; min-width: 280px; }
.dash-card {
  padding: 20px 22px;
  border-radius: 18px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.07);
  transition: border-color .15s;
}
.dash-card:hover { border-color: rgba(255,255,255,0.12); }
.dash-card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.dash-card-title { font-size: 15px; font-weight: 600; color: #fff; letter-spacing: -0.2px; }
.dash-card-sub   { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 3px; }

.dash-period-tabs {
  display: flex; gap: 4px;
  background: rgba(255,255,255,0.04);
  padding: 3px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.06);
}
.dash-period-btn {
  padding: 4px 10px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all .12s;
  font-family: inherit;
}
.dash-period-btn:hover  { color: #fff; }
.dash-period-btn.active { background: rgba(108,99,255,0.25); color: #fff; }

/* Линейный график */
.dash-chart-card { min-height: 280px; }
.dash-chart-wrap { width: 100%; height: 200px; position: relative; }
.dash-chart-wrap svg { width: 100%; height: 100%; overflow: visible; display: block; }
.dash-chart-grid line { stroke: rgba(255,255,255,0.06); stroke-dasharray: 3 3; }
.dash-chart-label { fill: rgba(255,255,255,0.4); font-size: 10px; font-family: inherit; }
.dash-chart-tooltip {
  position: absolute;
  background: rgba(20,20,30,0.95);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 6px 10px;
  border-radius: 8px;
  pointer-events: none;
  font-size: 12px;
  color: #fff;
  white-space: nowrap;
  transform: translate(-50%, -100%);
  margin-top: -6px;
  opacity: 0;
  transition: opacity .12s;
  z-index: 10;
}
.dash-chart-tooltip.show { opacity: 1; }
.dash-chart-dot {
  fill: #fff;
  stroke: #1659C8;
  stroke-width: 2;
  opacity: 0;
  transition: opacity .12s;
}
.dash-chart-dot.show { opacity: 1; }

/* Donut */
.dash-donut-wrap {
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  gap: 14px;
  padding: 6px 0;
}
.dash-donut-wrap svg circle { transition: stroke-width .15s, opacity .15s; cursor: pointer; }
.dash-donut-wrap svg circle:hover { stroke-width: 22; }
.dash-donut-center {
  position: absolute;
  text-align: center;
  pointer-events: none;
}
.dash-donut-center .v { font-size: 26px; font-weight: 800; color: #fff; line-height: 1; }
.dash-donut-center .l { font-size: 11px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.8px; margin-top: 4px; }

.dash-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin-top: 4px;
}
.dash-legend-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background .12s;
}
.dash-legend-row:hover { background: rgba(255,255,255,0.05); }
.dash-legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.dash-legend-row .label { flex: 1; color: rgba(255,255,255,0.85); }
.dash-legend-row .value { color: rgba(255,255,255,0.6); font-variant-numeric: tabular-nums; }

/* Bar chart — часы / дни недели */
.dash-bars { display: flex; align-items: flex-end; gap: 4px; height: 140px; padding: 6px 0; }
.dash-bars .bar {
  flex: 1;
  background: linear-gradient(180deg, #1659C8, #1659C8);
  border-radius: 6px 6px 2px 2px;
  min-height: 4px;
  position: relative;
  transition: opacity .15s;
}
.dash-bars .bar:hover { opacity: 0.85; }
.dash-bars .bar:hover::after {
  content: attr(data-value);
  position: absolute;
  bottom: 100%; left: 50%;
  transform: translateX(-50%);
  margin-bottom: 6px;
  background: rgba(20,20,30,0.95);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  color: #fff;
  white-space: nowrap;
  z-index: 5;
}
.dash-bars-labels {
  display: flex; gap: 4px;
  margin-top: 8px;
  font-size: 10px;
  color: rgba(255,255,255,0.4);
}
.dash-bars-labels span { flex: 1; text-align: center; }

/* Top users список */
.dash-toplist { display: flex; flex-direction: column; gap: 8px; }
.dash-toplist .row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  transition: background .12s;
}
.dash-toplist .row:hover { background: rgba(255,255,255,0.06); }
.dash-toplist .rank {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.7);
  flex-shrink: 0;
}
.dash-toplist .row:nth-child(1) .rank { background: linear-gradient(135deg, #FCD34D, #F59E0B); color: #fff; }
.dash-toplist .row:nth-child(2) .rank { background: rgba(192,192,192,0.5); color: #fff; }
.dash-toplist .row:nth-child(3) .rank { background: rgba(205,127,50,0.6); color: #fff; }
.dash-toplist img {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.dash-toplist .info { flex: 1; min-width: 0; }
.dash-toplist .name { font-size: 13.5px; color: #fff; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-toplist .un   { font-size: 11.5px; color: rgba(255,255,255,0.5); }
.dash-toplist .cnt  { font-size: 13px; color: rgba(255,255,255,0.7); font-variant-numeric: tabular-nums; font-weight: 600; }

/* Появление графиков с анимацией */
@keyframes dashFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.dash-row, .dash-bignums {
  animation: dashFadeUp .35s ease-out;
}

@media (max-width: 720px) {
  .dash-row { flex-direction: column; }
  .dash-card { padding: 16px; }
  .dash-big-value { font-size: 26px; }
}

/* ════════════════════════════════════════════════════════════
   RESTYLE: общие новые стили для всех разделов админки
═══════════════════════════════════════════════════════════════ */

/* Поиск с иконкой — современный стиль */
.cab-input {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  transition: all .15s;
  outline: none;
}
.cab-input:focus  { background: rgba(255,255,255,0.07); border-color: rgba(108,99,255,0.5); }
.cab-input::placeholder { color: rgba(255,255,255,0.4); }

/* Toolbar */
.cab-toolbar {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
  gap: 12px;
}
.cab-count { color: rgba(255,255,255,0.55); font-size: 13px; }

/* Кнопки в новом стиле */
.cab-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  color: #fff;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.cab-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.2); }
.cab-btn:active { transform: scale(.97); }
.cab-btn.primary {
  background: linear-gradient(135deg, #1659C8, #1659C8);
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(108,99,255,0.35);
}
.cab-btn.primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.cab-btn.danger {
  background: rgba(239,68,68,0.18);
  color: #FCA5A5;
  border-color: rgba(239,68,68,0.3);
}
.cab-btn.danger:hover { background: rgba(239,68,68,0.28); color: #fff; }
.cab-btn.sm { padding: 5px 10px; font-size: 12px; border-radius: 8px; }

/* Таблица — современная (dark, hover, padding) */
.cab-table-wrap {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  overflow: hidden;
}
.cab-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.cab-table thead th {
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.55);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cab-table tbody tr {
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background .12s;
}
.cab-table tbody tr:last-child { border-bottom: none; }
.cab-table tbody tr:hover { background: rgba(255,255,255,0.04); }
.cab-table td {
  padding: 14px 18px;
  vertical-align: middle;
  color: rgba(255,255,255,0.88);
}
.cab-table td.muted { color: rgba(255,255,255,0.5); }
.cab-table td.code  { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; color: rgba(255,255,255,0.6); }
.cab-table .actions { text-align: right; white-space: nowrap; }
.cab-table .actions .cab-btn { margin-left: 6px; }

/* User cell (avatar + name + username) */
.cab-user-cell { display: flex; align-items: center; gap: 12px; }
.cab-user-cell .cab-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1659C8, #1659C8);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.cab-user-cell .cab-avatar.online::after {
  content: '';
  position: absolute;
  width: 10px; height: 10px;
  background: #22C55E;
  border: 2px solid var(--cab-bg, #0F0E17);
  border-radius: 50%;
  bottom: -2px; right: -2px;
  box-shadow: 0 0 8px rgba(34,197,94,0.6);
}
.cab-user-cell .cab-user-name { font-weight: 500; color: #fff; font-size: 14px; }
.cab-user-cell .cab-user-handle { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 2px; }

/* Цветные бейджи (admin/bot/banned/me/etc) */
.cab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-left: 6px;
  vertical-align: middle;
}
.cab-badge.admin { background: linear-gradient(135deg, #F59E0B, #EF4444); color: #fff; }
.cab-badge.bot   { background: linear-gradient(135deg, #06B6D4, #3B82F6); color: #fff; }
.cab-badge.ban   { background: rgba(239,68,68,0.25); color: #FCA5A5; }
.cab-badge.me    { background: rgba(34,197,94,0.25); color: #4ADE80; }

/* Status pill (для приглашений / тикетов / и др.) */
.cab-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11.5px;
  font-weight: 600;
}
.cab-pill.active   { background: rgba(34,197,94,0.18);  color: #4ADE80; }
.cab-pill.expired  { background: rgba(148,163,184,0.15); color: #94A3B8; }
.cab-pill.revoked  { background: rgba(239,68,68,0.18);  color: #FCA5A5; }
.cab-pill.used     { background: rgba(168,85,247,0.18); color: #C7BFFD; }
.cab-pill.open     { background: rgba(245,158,11,0.18); color: #FCD34D; }
.cab-pill.progress { background: rgba(59,130,246,0.18); color: #93C5FD; }
.cab-pill.resolved { background: rgba(34,197,94,0.18);  color: #4ADE80; }
.cab-pill.closed   { background: rgba(148,163,184,0.15); color: #94A3B8; }

/* Empty state */
.cab-empty {
  text-align: center;
  padding: 60px 24px;
  color: rgba(255,255,255,0.5);
}
.cab-empty-icon  { font-size: 56px; margin-bottom: 12px; opacity: 0.5; }
.cab-empty-title { font-size: 16px; color: #fff; font-weight: 500; margin-bottom: 6px; }
.cab-empty-sub   { font-size: 13px; color: rgba(255,255,255,0.5); }

/* Cab cards-grid (для ботов и виджетов) — выровнять с dash-card */
.cab-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.cab-card {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px;
  padding: 18px 20px;
  transition: all .15s;
}
.cab-card:hover { border-color: rgba(255,255,255,0.16); transform: translateY(-2px); }

/* Filter buttons (Поддержка) */
.cab-support-filters {
  display: flex; gap: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 4px;
  border-radius: 12px;
}
.cab-filter-btn {
  background: transparent;
  color: rgba(255,255,255,0.6);
  border: none;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: all .12s;
  display: inline-flex; align-items: center; gap: 6px;
}
.cab-filter-btn:hover { color: #fff; }
.cab-filter-btn.active {
  background: rgba(108,99,255,0.25); color: #fff;
}
.cab-filter-count {
  background: rgba(255,255,255,0.10);
  padding: 1px 8px;
  border-radius: 8px;
  font-size: 11px;
}
.cab-filter-btn.active .cab-filter-count { background: rgba(255,255,255,0.20); }

/* Master-detail layout (Сообщения / Поддержка) */
.cab-md-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 12px;
  min-height: 520px;
}
.cab-md-list {
  overflow-y: auto;
  max-height: 70vh;
  padding-right: 4px;
}
.cab-md-list::-webkit-scrollbar { width: 6px; }
.cab-md-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
.cab-md-view {
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  padding: 18px;
  overflow-y: auto;
  max-height: 70vh;
}
.cab-md-placeholder {
  height: 100%; min-height: 360px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
}

/* Master-list row */
.cab-md-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .12s;
  margin-bottom: 4px;
}
.cab-md-row:hover { background: rgba(255,255,255,0.05); }
.cab-md-row.active { background: rgba(108,99,255,0.20); }

/* Modal — современный стиль */
.cab-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center; justify-content: center;
  z-index: 1000;
}
.cab-modal-card {
  background: linear-gradient(180deg, rgba(40,35,60,0.95), rgba(25,22,40,0.95));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 26px 28px;
  width: min(95vw, 460px);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: dashFadeUp .25s ease-out;
}
.cab-modal-card h3 {
  font-size: 18px; font-weight: 700; color: #fff;
  margin: 0 0 18px;
  letter-spacing: -0.3px;
}
.cab-modal-card label {
  display: block; margin-bottom: 12px;
  font-size: 13px; color: rgba(255,255,255,0.7);
  font-weight: 500;
}
.cab-modal-card label input, .cab-modal-card label select, .cab-modal-card label textarea {
  width: 100%;
  margin-top: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 12px;
  color: #fff;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: all .15s;
}
.cab-modal-card label input:focus,
.cab-modal-card label select:focus,
.cab-modal-card label textarea:focus { background: rgba(255,255,255,0.07); border-color: rgba(108,99,255,0.5); }
.cab-modal-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 14px;
}

/* Code-box (приглашения, magic-key) */
.cab-code-box {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: #C7BFFD;
  word-break: break-all;
  margin: 10px 0;
}

/* Info-card (Настройки) — обновлённый стиль */
.cab-info-card,
.cab-settings-grid > * {
  background: rgba(255,255,255,0.035) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 16px;
  padding: 22px 24px;
}
.cab-info-card h3 {
  font-size: 16px; font-weight: 600; color: #fff; margin: 0 0 6px;
  display: flex; align-items: center; gap: 8px;
}
.cab-info-card > p.muted:first-of-type { color: rgba(255,255,255,0.55); font-size: 13.5px; line-height: 1.5; margin: 0 0 18px; }
.cab-info-card .muted { color: rgba(255,255,255,0.55); font-size: 13px; line-height: 1.5; }
.cab-info-card .muted.small { font-size: 12px; }
.cab-settings-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}

/* Тёмные инпуты внутри карточек настроек (для любых input/textarea/select без класса) */
.cab-info-card input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
.cab-info-card textarea,
.cab-info-card select {
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: #fff;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color .15s, background .15s;
  outline: none;
}
.cab-info-card input:focus,
.cab-info-card textarea:focus,
.cab-info-card select:focus {
  background: rgba(255,255,255,0.06);
  border-color: rgba(108,99,255,0.5);
}
.cab-info-card input::placeholder,
.cab-info-card textarea::placeholder {
  color: rgba(255,255,255,0.30);
}

/* Settings row — лейбл сверху, инпут + кнопка справа в одной строке */
.cab-setting-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}
.cab-setting-row:last-child { margin-bottom: 0; }
.cab-setting-row .cab-setting-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.cab-setting-row .cab-setting-label {
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.85);
  letter-spacing: .02em;
}
.cab-setting-row .cab-setting-input-row {
  display: flex; gap: 8px; align-items: stretch;
}
.cab-setting-row .cab-setting-input-row > input,
.cab-setting-row .cab-setting-input-row > textarea {
  flex: 1; min-width: 0;
}
.cab-setting-row .cab-setting-hint {
  font-size: 12px; color: rgba(255,255,255,0.45); line-height: 1.5;
}
.cab-setting-row .cab-setting-hint a {
  color: rgba(108,99,255,0.85); text-decoration: none;
}
.cab-setting-row .cab-setting-hint a:hover { color: #A39EFF; }

/* Status pills */
.cab-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; line-height: 1.4;
  white-space: nowrap;
}
.cab-pill.ok      { background: rgba(34,197,94,.12);  color: #4ADE80; border: 1px solid rgba(34,197,94,.25); }
.cab-pill.warn    { background: rgba(245,158,11,.12); color: #FBBF24; border: 1px solid rgba(245,158,11,.25); }
.cab-pill.muted   { background: rgba(255,255,255,.05); color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.08); }

/* Группа полей (для IMAP — 2-3 в ряд) */
.cab-field-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cab-field-grid-3 { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
@media (max-width: 640px) {
  .cab-field-grid-2, .cab-field-grid-3 { grid-template-columns: 1fr; }
}

/* Save-кнопка справа от инпута — фиксированная ширина */
.cab-btn-save {
  flex: 0 0 auto;
  padding: 11px 18px;
  border-radius: 10px;
  background: rgba(108,99,255,0.18);
  border: 1px solid rgba(108,99,255,0.35);
  color: #C7BFFD;
  font-weight: 600; font-size: 13px;
  cursor: pointer; transition: all .15s;
  white-space: nowrap;
}
.cab-btn-save:hover {
  background: rgba(108,99,255,0.28);
  border-color: rgba(108,99,255,0.55);
  color: #fff;
}
.cab-btn-save.success { background: rgba(34,197,94,.15); border-color: rgba(34,197,94,.35); color: #4ADE80; }

/* Тонкая разделительная линия между группами в одной карточке */
.cab-setting-divider {
  height: 1px; background: rgba(255,255,255,0.06);
  margin: 18px -24px; /* выходит за padding карточки */
}