:root {
  --bg-main: #0b0f19;
  --bg-sidebar: #111827;
  --bg-card: rgba(31, 41, 55, 0.6);
  --bg-card-hover: rgba(55, 65, 81, 0.7);
  --border-color: rgba(75, 85, 99, 0.4);
  --primary: #10b981;
  --primary-hover: #059669;
  --primary-glow: rgba(16, 185, 129, 0.25);
  --text-main: #f9fafb;
  --text-muted: #9ca3af;
  --text-dim: #6b7280;
  --accent-blue: #3b82f6;
  --accent-purple: #8b5cf6;
  --accent-red: #ef4444;
  --accent-amber: #f59e0b;
}

/* Role leagues and non-operational profiles */
.hall-league-switch { gap: 7px; }
.hall-league-btn { min-width: 108px; }
.hall-league-btn[data-hall-league="multiskill"].active {
  color: #fff;
  background: linear-gradient(135deg, #0aa6d8, #337ee8);
  border-color: transparent;
  box-shadow: 0 7px 16px rgba(36, 130, 220, .22);
}
.hall-league-btn[data-hall-league="past_orders"].active {
  color: #fff;
  background: linear-gradient(135deg, #7957d9, #a34ed8);
  border-color: transparent;
  box-shadow: 0 7px 16px rgba(126, 75, 205, .22);
}
.hall-league-banner {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 14px;
  padding: 11px 13px;
  color: #0b5f9d;
  background: linear-gradient(135deg, #eaf8ff, #edf3ff);
  border: 1px solid #baddf6;
  border-radius: 11px;
}
.hall-league-banner[data-league="past_orders"] {
  color: #6940a8;
  background: linear-gradient(135deg, #f3edff, #f8efff);
  border-color: #d8c7f4;
}
.hall-league-banner > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #0aa6d8, #337ee8);
  border-radius: 9px;
  font-size: 10px;
  font-weight: 800;
}
.hall-league-banner[data-league="past_orders"] > span { background: linear-gradient(135deg, #7957d9, #a34ed8); }
.hall-league-banner strong, .hall-league-banner small { display: block; }
.hall-league-banner strong { font-size: 12px; }
.hall-league-banner small { margin-top: 2px; color: var(--text-muted); font-size: 9px; }
.hall-winner-card.league-multiskill:not(.is-featured) { border-left: 3px solid #2e8ee8; }
.hall-winner-card.league-past_orders:not(.is-featured) { border-left: 3px solid #9360dc; }
.hall-winner-card.league-past_orders .hall-winner-avatar { background: linear-gradient(135deg, #7957d9, #a34ed8); }
.hall-role-label {
  display: inline-flex;
  margin-top: 5px;
  padding: 2px 6px;
  color: #1478b7;
  background: #e6f5ff;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 750;
}
.league-past_orders .hall-role-label { color: #7146ac; background: #f1eaff; }

.team-role-pill {
  width: fit-content;
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: 999px;
  letter-spacing: 0 !important;
}
.team-role-pill.role-multiskill,
.profile-role-badge.role-multiskill { color: #0b78bd !important; background: #e4f5ff !important; border-color: #b8ddf7 !important; }
.team-role-pill.role-past_orders,
.profile-role-badge.role-past_orders { color: #7143ad !important; background: #f1e8ff !important; border-color: #d7c3f4 !important; }
.team-role-pill.role-poland_baby,
.profile-role-badge.role-poland_baby { color: #0284c7 !important; background: #e0f2fe !important; border-color: #bae6fd !important; }
.team-role-pill.role-rs_past_order_baby_ua,
.profile-role-badge.role-rs_past_order_baby_ua { color: #4f46e5 !important; background: #eef2ff !important; border-color: #c7d2fe !important; }
.team-role-pill.role-ms_ua,
.profile-role-badge.role-ms_ua { color: #db2777 !important; background: #fdf2f8 !important; border-color: #fbcfe8 !important; }
.team-role-pill.role-past_order_ua,
.profile-role-badge.role-past_order_ua { color: #d97706 !important; background: #fffbeb !important; border-color: #fde68a !important; }
.team-role-pill.role-vs,
.profile-role-badge.role-vs { color: #0d9488 !important; background: #f0fdfa !important; border-color: #99f6e4 !important; }
.team-role-pill.role-agent { color: #087e65; background: #e6faf3; border-color: #b9eadb; }
.team-role-pill.role-leadership,
.profile-role-badge.role-leadership { color: #8b5c05 !important; background: #fff4ce !important; border-color: #e9cc75 !important; }

.team-agent-card.is-leadership {
  background: linear-gradient(135deg, #fffdf7, #fff8e7);
  border-color: #e8d18d;
}
.team-agent-card.is-leadership:hover { border-color: #d7ae3e; box-shadow: 0 12px 26px rgba(153, 112, 23, .12); }
.team-card-leadership-summary {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  color: #76500a;
  background: rgba(255, 243, 201, .72);
  border: 1px solid #ead28a;
  border-radius: 9px;
}
.team-card-leadership-summary > span { font-size: 18px; }
.team-card-leadership-summary strong, .team-card-leadership-summary small { display: block; }
.team-card-leadership-summary strong { font-size: 11px; }
.team-card-leadership-summary small { margin-top: 2px; color: #997427; font-size: 9px; }

.team-profile-quick-stats[hidden],
.team-profile-level-line[hidden],
.team-profile-cover-showcase[hidden],
.team-profile-section-tab[hidden],
.team-profile-meta > span[hidden],
.team-profile-leadership-note[hidden] { display: none !important; }
.team-member-profile.is-leadership-profile .team-profile-modern-head {
  border-color: #ddbd5d;
  box-shadow: 0 12px 28px rgba(132, 94, 17, .12);
}
.team-profile-cover-art[data-profile-kind="leadership"] {
  background: linear-gradient(125deg, #5d3a08, #b27b1c 52%, #f3c969) !important;
}
.team-member-profile.is-leadership-profile .team-profile-avatar { box-shadow: 0 0 0 2px #e9b83e; }
.team-profile-leadership-note {
  min-height: 78px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 16px;
  color: #704c08;
  background: linear-gradient(135deg, #fffaf0, #fff3cf);
  border: 1px solid #e6c66b;
  border-radius: 12px;
}
.team-profile-leadership-symbol {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #a66e0c, #e0ad36);
  border-radius: 50%;
  box-shadow: 0 7px 16px rgba(135, 91, 12, .2);
}
.team-profile-leadership-note strong { display: block; font-size: 13px; }
.team-profile-leadership-note p { margin: 4px 0 0; color: #8b6b2d; font-size: 10px; line-height: 1.45; }

body.theme-dark .hall-league-banner { background: #10283c; border-color: #285575; }
body.theme-dark .hall-league-banner[data-league="past_orders"] { background: #261c3c; border-color: #58417d; }
body.theme-dark .team-agent-card.is-leadership { background: linear-gradient(135deg, #1d1a12, #241c0d); border-color: #6f5721; }
body.theme-dark .team-card-leadership-summary,
body.theme-dark .team-profile-leadership-note { color: #f2cf75; background: #2a210f; border-color: #6f5721; }
body.theme-dark .team-card-leadership-summary small,
body.theme-dark .team-profile-leadership-note p { color: #c9aa5d; }

@media (max-width: 900px) {
  .team-card-leadership-summary { min-height: 0; }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

body {
  background-color: var(--bg-main);
  color: var(--text-main);
  min-height: 100vh;
  display: flex;
  overflow-x: hidden;
}

/* Local vector icon system */
.ui-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.ui-icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

.heading-icon { color: var(--primary); }

.panel-title-bar h3,
.notif-dropdown-header h4,
.ui-button-with-icon,
.ui-inline-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.auth-logo-icon {
  width: 26px;
  height: 26px;
}

/* -------------------------------------------------------------
   Layout Structure
------------------------------------------------------------- */
#app-container {
  display: flex;
  width: 100vw;
  min-height: 100vh;
}

.sidebar {
  width: 260px;
  background-color: var(--bg-sidebar);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  padding: 24px 16px;
  flex-shrink: 0;
}

.sidebar-user-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.sidebar-user-header:hover {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.4);
  transform: translateY(-1px);
}

.sidebar-user-header.active {
  background: rgba(16, 185, 129, 0.15);
  border-color: #10b981;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.25);
}

.sidebar-user-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #10b981;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  border: 2px solid rgba(16, 185, 129, 0.6);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.sidebar-user-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-user-info h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-info span {
  font-size: 11px;
  color: #10b981;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Notifications Bell & Popover */
.notif-box-container {
  position: relative;
}

.notif-bell-btn {
  position: relative;
  background: rgba(31, 41, 55, 0.7);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #e2e8f0;
  font-size: 17px;
  transition: all 0.2s ease;
}

.notif-bell-btn:hover {
  background: rgba(16, 185, 129, 0.15);
  border-color: var(--primary);
  transform: scale(1.05);
}

.notif-count-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 10px;
  border: 2px solid #0f172a;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.notif-dropdown-popover {
  position: absolute;
  right: 0;
  top: 48px;
  width: 340px;
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);
  z-index: 1000;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.notif-dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.notif-dropdown-header h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.notif-mark-read-btn {
  background: none;
  border: none;
  color: #10b981;
  font-size: 11px;
  cursor: pointer;
  font-weight: 600;
}

.notif-mark-read-btn:hover {
  text-decoration: underline;
}

.notif-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.notif-item:hover {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.3);
}

.notif-item h5 {
  margin: 0 0 4px 0;
  font-size: 13px;
  color: #fff;
  font-weight: 600;
}

.notif-item p {
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.4;
}

.logo-badge {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #10b981, #06b6d4);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 0 16px var(--primary-glow);
}

.logo-text h2 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.5px;
}

.logo-text span {
  font-size: 11px;
  color: var(--primary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nav-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 14px;

font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

.nav-item:hover {
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.05);
}

.nav-item.active {
  color: #fff;
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.3);
  font-weight: 600;
}

.nav-icon {
  width: 18px;
  height: 18px;
  color: currentColor;
}

.user-profile-widget {
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user-info-mini {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.user-details h4 {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.user-details span {
  font-size: 11px;
  color: var(--text-muted);
}

.btn-logout {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: color 0.2s;
}

.btn-logout:hover {
  color: var(--accent-red);
}

/* -------------------------------------------------------------
   Main Content
------------------------------------------------------------- */
.main-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  height: 100vh;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  border-bottom: 1px solid var(--border-color);
  background: rgba(17, 24, 39, 0.5);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.page-title h1 {
  font-size: 22px;
  font-weight: 700;
}

.page-title p {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.online-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  color: #10b981;
  font-weight: 600;
}

.pulse-dot {
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 8px #10b981;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.3); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.8; }
}

.content-body {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 1300px;
  width: 100%;
}

/* -------------------------------------------------------------
   Stats Cards
------------------------------------------------------------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(16, 185, 129, 0.4);
}

.stat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stat-header span {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
}

.stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

.stat-icon .ui-icon {
  width: 18px;
  height: 18px;
}

.stat-value {
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.5px;
}

.stat-footer {
  display: none !important;
}

/* -------------------------------------------------------------
   Tables & Lists
------------------------------------------------------------- */
.panel-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.panel-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel-title-bar h3 {
  font-size: 17px;
  font-weight: 700;
}

.tab-pills {
  display: flex;
  gap: 8px;
  background: rgba(0, 0, 0, 0.2);
  padding: 4px;
  border-radius: 10px;
}

.pill-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 6px 14px;

border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pill-btn.active {
  background: var(--primary);
  color: #fff;
}

.table-wrapper {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

th {
  padding: 12px 16px;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border-color);
  font-weight: 600;
}

td {
  padding: 14px 16px;
  font-size: 14px;
  border-bottom: 1px solid rgba(75, 85, 99, 0.2);
}

tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.agent-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.agent-profile-link {
  max-width: 100%;
  padding: 0;
  color: var(--text-main);
  background: transparent;
  border: 0;
  font: inherit;
  font-weight: 650;
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: color 0.16s ease;
}

.agent-profile-link:hover {
  color: #087fc2;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.agent-profile-link:focus-visible {
  outline: 2px solid rgba(7, 155, 211, 0.32);
  outline-offset: 3px;
  border-radius: 3px;
}

.mini-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
}

.mini-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.rank-badge {
  font-size: 15px;
  font-weight: 800;
  display: inline-block;
  min-width: 24px;
}

.rank-1 { color: #f59e0b; }
.rank-2 { color: #94a3b8; }
.rank-3 { color: #d97706; }

/* -------------------------------------------------------------
   Articles / Knowledge Base
------------------------------------------------------------- */
.articles-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.article-card {
  background: rgba(17, 24, 39, 0.6);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.2s ease;
}

.article-card:hover {
  border-color: rgba(59, 130, 246, 0.4);
  background: rgba(31, 41, 55, 0.6);
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.badge {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.badge-urgent { background: rgba(239, 68, 68, 0.2); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.4); }
.badge-info { background: rgba(59, 130, 246, 0.2); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.4); }
.badge-normal { background: rgba(16, 185, 129, 0.2); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.4); }

.article-title {
  font-size: 17px;
  font-weight: 700;
}

.article-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  white-space: pre-wrap;
}

/* -------------------------------------------------------------
   Auth Modal
------------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.auth-card {
  background: #111827;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 36px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.auth-header {
  text-align: center;
}

.auth-header h2 {
  font-size: 22px;
  font-weight: 700;
  margin-top: 12px;
}

.auth-header p {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}

.form-input {
  background: rgba(31, 41, 55, 0.7);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px 14px;
  color: #fff;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.form-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-glow);
}

.btn-primary {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 14px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 12px var(--primary-glow);
}

.btn-primary:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
}

.auth-error {
  color: var(--accent-red);
  font-size: 13px;
  text-align: center;
  display: none;
}

/* -------------------------------------------------------------
   Profile & Gamification Styles
------------------------------------------------------------- */
.profile-hero-card {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(59, 130, 246, 0.08));
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 28px;
  margin-bottom: 24px;
}

.profile-hero-content {
  display: flex;
  align-items: center;

gap: 24px;
  flex-wrap: wrap;
}

.profile-avatar-large {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #10b981;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  font-weight: 800;
  box-shadow: 0 0 25px rgba(16, 185, 129, 0.4);
  border: 3px solid rgba(255, 255, 255, 0.2);
  background-size: cover;
  background-position: center;
  transition: all 0.3s ease;
}

.profile-hero-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 260px;
}

.level-badge {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #fff;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.profile-bio-text {
  color: var(--text-muted);
  font-size: 14px;
  font-style: italic;
}

.xp-bar-container {
  margin-top: 6px;
  max-width: 480px;
}

.xp-bar-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 600;
  margin-bottom: 4px;
}

.xp-bar-track {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
}

.xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #3b82f6);
  border-radius: 10px;
  transition: width 0.4s ease;
}

.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 900px) {
  .profile-grid {
    grid-template-columns: 1fr;
  }
}

.avatar-upload-dropzone {
  border: 2px dashed rgba(16, 185, 129, 0.4);
  background: rgba(17, 24, 39, 0.6);
  border-radius: 12px;
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: all 0.2s ease;
}

.avatar-upload-dropzone:hover {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.08);
  transform: translateY(-2px);
}

.dropzone-icon {
  color: var(--primary);
}

.dropzone-icon .ui-icon {
  width: 32px;
  height: 32px;
}

.dropzone-text strong {
  color: #10b981;
  font-size: 14px;
}

.badges-grid, .badges-grid-2col {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}

.badge-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(17, 24, 39, 0.6);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px 16px;
  transition: all 0.2s ease;
}

.badge-item.unlocked {
  border-color: rgba(16, 185, 129, 0.4);
  background: rgba(16, 185, 129, 0.05);
}

.badge-item.locked {
  opacity: 0.5;
  filter: grayscale(0.8);
}

.badge-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(31, 41, 55, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.badge-item.unlocked .badge-icon-box {
  background: rgba(16, 185, 129, 0.2);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
}

.badge-details h4 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 2px;
}

.badge-details p {
  font-size: 12px;
  color: var(--text-muted);
}

/* Status Badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.2;
}

.status-badge.status-online {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-badge.status-offline {
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

/* Status Breakdown Mini Pills */
.status-pill-mini {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
  line-height: 1.2;
}

.status-pill-online {
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.25);
}

.status-pill-lunch {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.25);
}

.status-pill-break {
  color: #ec4899;
  background: rgba(236, 72, 153, 0.12);
  border-color: rgba(236, 72, 153, 0.25);
}

.status-pill-meet {
  color: #8b5cf6;
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.25);
}

.status-pill-task {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.12);

border-color: rgba(59, 130, 246, 0.25);
}

.status-pill-busy {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.25);
}

/* Expandable Details Row in Admin */
.agent-row-clickable {
  cursor: pointer;
  transition: background 0.15s ease;
}

.agent-row-clickable:hover {
  background: rgba(255, 255, 255, 0.04);
}

.agent-details-row {
  background: rgba(15, 23, 42, 0.7);
}

.agent-details-container {
  padding: 16px 20px;
  border-left: 3px solid #10b981;
  background: rgba(17, 24, 39, 0.6);
  border-radius: 8px;
  margin: 6px 0 12px 0;
}

.agent-chats-subtable {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 13px;
}

.agent-chats-subtable th {
  background: rgba(31, 41, 55, 0.6);
  color: #9ca3af;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.agent-chats-subtable td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: #e2e8f0;
}

.agent-chats-subtable tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.tnt-pill-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 12px;
}

.tnt-fast {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.tnt-medium {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.tnt-slow {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}


/* Scrollbar & Avatar Fixes */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #090d16;
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

.table-wrapper {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #1e293b #090d16;
}

.agent-avatar-clickable {
  cursor: zoom-in !important;
  transition: transform 0.2s ease !important;
}
.agent-avatar-clickable:hover {
  transform: scale(1.18) !important;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.5) !important;
}

#admin-photo-lightbox-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(2, 6, 23, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  align-items: center;
  justify-content: center;
}

/* -------------------------------------------------------------
   GLbot 2026 shell: light by default, existing content preserved
------------------------------------------------------------- */
:root {
  --bg-main: #f3f8fd;
  --bg-sidebar: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f7fbff;
  --border-color: #dbe7f1;
  --primary: #079bd3;
  --primary-hover: #087fb5;
  --primary-glow: rgba(7, 155, 211, 0.18);
  --text-main: #10284c;
  --text-muted: #71839b;
  --text-dim: #93a2b5;
  --accent-blue: #2877e8;
  --accent-purple: #7c55de;
  --accent-red: #dc4c64;
  --accent-amber: #e69513;
}

body.theme-dark {
  --bg-main: #071321;
  --bg-sidebar: #0d1a2b;
  --bg-card: #111f31;
  --bg-card-hover: #17283c;
  --border-color: #263a52;
  --text-main: #edf5ff;
  --text-muted: #a0b1c6;
  --text-dim: #71849c;
}

body {
  background: var(--bg-main);
  color: var(--text-main);
}

#app-container {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  grid-template-rows: 76px minmax(0, 1fr);
  min-height: 100vh;
}

.main-content {
  display: contents;
}

.topbar {
  grid-column: 1 / -1;
  grid-row: 1;
  min-height: 76px;
  padding: 10px 20px;
  color: #fff;
  background: linear-gradient(110deg, #102c59 0%, #1357a6 52%, #08a6bd 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 24px rgba(30, 89, 139, 0.14);
  backdrop-filter: none;
  position: sticky;
  top: 0;
  z-index: 50;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.topbar-logo {
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
}

.topbar-brand-copy h1 {
  margin: 0;
  color: #fff;
  font-size: 21px;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.topbar-brand-copy p {
  margin: 2px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
}

.topbar-actions {
  gap: 10px;
}

.online-pill {
  color: #d9fff3;
  background: rgba(3, 63, 79, 0.35);
  border-color: rgba(165, 255, 235, 0.26);
}

.theme-toggle-btn,
.topbar .notif-bell-btn,
.topbar .btn-logout {
  width: 42px;
  height: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(5, 33, 70, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.topbar-sms-btn {
  position: relative;
  height: 42px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #fff;
  background: rgba(5, 33, 70, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  font-weight: 750;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.theme-toggle-btn:hover,
.topbar .notif-bell-btn:hover,
.topbar .btn-logout:hover,
.topbar-sms-btn:hover,
.topbar-sms-btn.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-1px);
}

.topbar-sms-btn.active {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.65);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}

.topbar-sms-btn .ui-icon {
  width: 17px;
  height: 17px;
}

.theme-icon-sun { display: none; }
body.theme-dark .theme-icon-moon { display: none; }
body.theme-dark .theme-icon-sun { display: inline-block; }

.sidebar {
  grid-column: 1;
  grid-row: 2;
  width: auto;
  height: calc(100vh - 76px);
  padding: 20px 14px 14px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-color);
  position: sticky;
  top: 76px;
  overflow-y: auto;
}

.sidebar-user-header {
  margin-bottom: 22px;
  padding: 10px;
  background: #f6faff;
  border-color: #dbe8f2;
  box-shadow: 0 6px 16px rgba(34, 79, 119, 0.05);
}

.sidebar-user-header:hover,
.sidebar-user-header.active {
  background: #eaf7ff;
  border-color: #91d9f2;
  box-shadow: none;
}

.sidebar-user-info h3 {
  color: var(--text-main);
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.25;
}

#sidebar-user-role { color: #079a77 !important; }
#sidebar-user-team {
  color: #2075c6 !important;
  background: #ebf4ff !important;
  border-color: #bddafa !important;
}

.nav-menu { gap: 5px; }

.nav-item {
  min-height: 44px;
  color: #667991;
  border-radius: 11px;
}

.nav-item:hover {
  color: #126da1;
  background: #f0f8fe;
}

.nav-item.active {
  color: #0879b5;
  background: #e8f6ff;
  border-color: #b8e3f7;
  box-shadow: inset 3px 0 0 #0aa9df;
}

.sidebar-footer {
  border-color: #e3edf5 !important;
  color: #8191a5 !important;
}

.sidebar-footer > span:first-child { color: #71839a !important; }
.sidebar-footer > span:last-child {
  color: #1778c7 !important;
  background: #edf6ff !important;
  border-color: #c4def5 !important;
}

.content-body {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  max-width: none;
  height: calc(100vh - 76px);
  padding: 30px;
  overflow-y: auto;
}

.stats-grid {
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 16px;
}

.stat-card,
.panel-card {
  background: var(--bg-card);
  border-color: var(--border-color);
  box-shadow: 0 8px 26px rgba(31, 76, 116, 0.06);
  backdrop-filter: none;
}

.stat-card:hover {
  border-color: #aadbef;
  box-shadow: 0 12px 30px rgba(31, 99, 144, 0.09);
}

.stat-value,
.panel-title-bar h3,
.article-title,
.badge-details h4 {
  color: var(--text-main);
}

.tab-pills {
  background: #eff5fa;
  border: 1px solid #dce8f1;
}

.pill-btn {
  color: var(--text-muted);
}

.pill-btn:hover {
  color: #0879b5;
  background: #e5f4fd;
}

.pill-btn.active {
  color: #fff;
  background: var(--primary);
}

th {
  color: var(--text-dim);
  border-color: var(--border-color);
}

td {
  color: var(--text-main);
  border-color: #e8eff5;
}

tr:hover td {
  background: #f7fbfe;
}

.article-card,
.badge-item,
.avatar-upload-dropzone {
  background: #f8fbfe;
  border-color: var(--border-color);
}

.article-card:hover,
.avatar-upload-dropzone:hover {
  background: #f0f8fe;
}

.profile-hero-card {
  background: linear-gradient(135deg, rgba(9, 165, 207, 0.09), rgba(54, 119, 231, 0.06));
  border-color: rgba(9, 165, 207, 0.28);
}

.xp-bar-track {
  background: #e4edf5;
}

.badge-icon-box {
  background: #eaf1f7;
}

.notif-dropdown-popover,
.auth-card {
  color: var(--text-main);
  background: #fff;
  border-color: var(--border-color);
  box-shadow: 0 18px 44px rgba(27, 59, 91, 0.18);
}

.notif-dropdown-header {
  border-color: #e4edf5;
}

.notif-dropdown-header h4,
.notif-item h5,
.auth-header h2,
.dropzone-text strong {
  color: var(--text-main);
}

.notif-item {
  background: #f7fafd;
  border-color: #e2ebf3;
}

.notif-item:hover {
  background: #edf8ff;
  border-color: #bfe4f4;
}

.modal-backdrop {
  background: rgba(12, 32, 56, 0.5);
}

.form-input {
  color: var(--text-main);
  background: #f8fbfe;
  border-color: var(--border-color);
}

.form-group label { color: var(--text-muted); }

::-webkit-scrollbar-track { background: #eaf1f7; }
::-webkit-scrollbar-thumb { background: #bdcbd9; }
::-webkit-scrollbar-thumb:hover { background: #9fb1c4; }

.table-wrapper {
  scrollbar-color: #bdcbd9 #eaf1f7;
}

body.theme-dark .sidebar-user-header,
body.theme-dark .article-card,
body.theme-dark .badge-item,
body.theme-dark .avatar-upload-dropzone,
body.theme-dark .notif-item,
body.theme-dark .form-input {
  background: #132438;
  border-color: #294058;
}

body.theme-dark .nav-item:hover { background: #13283d; color: #c8eaff; }
body.theme-dark .nav-item.active { background: #12314a; border-color: #245678; color: #66d4ff; }
body.theme-dark #sidebar-user-team { background: #142c48 !important; border-color: #28537c !important; color: #76bdf8 !important; }
body.theme-dark .sidebar-footer { border-color: #263a52 !important; }
body.theme-dark .sidebar-footer > span:first-child { color: #9cacc0 !important; }
body.theme-dark .sidebar-footer > span:last-child { background: #152a41 !important; border-color: #2a4d6d !important; color: #73bdf6 !important; }
body.theme-dark .tab-pills { background: #0c1929; border-color: #263a52; }
body.theme-dark td { border-color: #23364c; }
body.theme-dark tr:hover td { background: #15263a; }
body.theme-dark .xp-bar-track { background: #263a50; }
body.theme-dark .badge-icon-box { background: #1a2c40; }
body.theme-dark .notif-dropdown-popover,
body.theme-dark .auth-card { background: #101f31; border-color: #294058; }
body.theme-dark .notif-dropdown-header { border-color: #294058; }
body.theme-dark ::-webkit-scrollbar-track { background: #091522; }
body.theme-dark ::-webkit-scrollbar-thumb { background: #2b4057; }

@media (max-width: 1050px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
}

@media (max-width: 760px) {
  #app-container {
    grid-template-columns: 1fr;
    grid-template-rows: 70px auto minmax(0, 1fr);
  }

  .topbar {
    grid-row: 1;
    min-height: 70px;
    padding: 9px 12px;
  }

  .topbar-logo { width: 44px; height: 44px; }
  .topbar-brand-copy p, .online-pill { display: none; }

  .sidebar {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    height: auto;
    padding: 10px;
    position: static;
    border-right: 0;
    border-bottom: 1px solid var(--border-color);
  }

  .sidebar-user-header,
  .sidebar-footer { display: none !important; }

  .nav-menu {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .nav-item {
    justify-content: center;
    min-height: 40px;
    padding: 8px;
    font-size: 11px;
  }

  .nav-icon { display: none; }

  .content-body {
    grid-column: 1;
    grid-row: 3;
    height: auto;
    min-height: 0;
    padding: 16px 12px;
  }

  .stats-grid { grid-template-columns: 1fr; }
  .panel-card { padding: 16px; }
  .notif-dropdown-popover { width: min(340px, calc(100vw - 24px)); right: -54px; }
}

/* Ideas & fixes hub plus avatar crowns */
.topbar-feedback-btn {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  color: rgba(255,255,255,.94);
  background: rgba(3, 38, 76, .24);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 10px;
  font: inherit;
  font-size: 10px;
  font-weight: 750;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease, border-color .18s ease;
}
.topbar-feedback-btn:hover,
.topbar-feedback-btn.active { background: rgba(255,255,255,.17); border-color: rgba(255,255,255,.58); transform: translateY(-1px); }
.topbar-feedback-btn .ui-icon { width: 15px; height: 15px; }

.person-avatar-wrap { position: relative; width: fit-content; flex: 0 0 auto; }
.avatar-win-crown {
  position: absolute;
  z-index: 5;
  top: -7px;
  right: -10px;
  min-width: 25px;
  height: 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 2px 4px;
  color: #fff;
  background: #a86825;
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow: 0 3px 8px rgba(59, 40, 7, .24);
  line-height: 1;
}
.avatar-win-crown .ui-icon { width: 9px; height: 9px; color: inherit; }
.avatar-win-crown b { color: inherit; font-size: 8px; }
.avatar-win-crown.crown-tier-silver { background: linear-gradient(135deg, #8292a5, #b8c5d1); }
.avatar-win-crown.crown-tier-royal { top: -11px; min-width: 29px; height: 22px; background: linear-gradient(135deg, #d68e0b, #f1c644); }
.avatar-win-crown.crown-tier-diamond { top: -12px; min-width: 30px; height: 23px; background: linear-gradient(135deg, #6e45c7, #16a0c5); box-shadow: 0 3px 10px rgba(70, 105, 189, .38); }
.profile-avatar-win-wrap {
  position: relative;
  width: 108px;
  height: 108px;
  flex: 0 0 108px;
  transform: translateY(55px);
}
.team-profile-modern-head .profile-avatar-win-wrap .team-profile-avatar { width: 100%; height: 100%; transform: none; }
.profile-avatar-crown[hidden] { display: none; }
.profile-avatar-crown .avatar-win-crown { top: -13px; right: -9px; transform: scale(1.18); transform-origin: bottom left; }

.feedback-layout { width: 100%; display: grid; grid-template-columns: minmax(290px, 360px) minmax(0, 1fr); gap: 14px; align-items: start; }
.feedback-composer-card { position: sticky; top: 0; }
.feedback-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.feedback-heading h2 { margin: 3px 0 2px; color: var(--text-main); font-size: 21px; }
.feedback-heading p { margin: 0; color: var(--text-muted); font-size: 10px; line-height: 1.45; }
.feedback-eyebrow { color: #078fc5; font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.feedback-community-pill { flex: 0 0 auto; padding: 5px 8px; color: #087e9e; background: #e9f8ff; border: 1px solid #c2e7f5; border-radius: 999px; font-size: 8px; font-weight: 750; }
.feedback-form { display: grid; gap: 9px; }
.feedback-form textarea { resize: vertical; min-height: 94px; }
.feedback-type-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.feedback-type-btn { padding: 7px 8px; color: var(--text-muted); background: #f5f8fb; border: 1px solid #dce6ef; border-radius: 8px; font: inherit; font-size: 9px; font-weight: 750; cursor: pointer; }
.feedback-type-btn.active { color: #fff; background: linear-gradient(135deg, #078fcc, #367be6); border-color: transparent; }
.feedback-photo-preview { position: relative; width: 100%; max-height: 190px; overflow: hidden; border: 1px solid var(--border-color); border-radius: 10px; }
.feedback-photo-preview[hidden] { display: none; }
.feedback-photo-preview img { width: 100%; max-height: 190px; display: block; object-fit: cover; }
.feedback-photo-preview button { position: absolute; top: 7px; right: 7px; width: 26px; height: 26px; color: #fff; background: rgba(4,16,35,.72); border: 0; border-radius: 50%; cursor: pointer; }
.feedback-form-actions { display: flex; align-items: center; gap: 9px; }
.feedback-form-actions .btn-primary { margin-left: auto; }
.feedback-upload-btn { min-height: 34px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; color: #087fb2; background: #eef9ff; border: 1px solid #c5e6f5; border-radius: 8px; font-size: 9px; font-weight: 750; cursor: pointer; }
.feedback-upload-btn .ui-icon { width: 14px; height: 14px; }
#feedback-form-status { color: #098568; font-size: 9px; }
.feedback-feed { display: grid; gap: 12px; }
.feedback-post {
  position: relative;
  overflow: hidden;
  padding: 15px 16px;
  border: 1px solid #d9e5ef;
  box-shadow: 0 8px 24px rgba(24, 64, 99, .07);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.feedback-post::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, #18a8dd, #3975e5); }
.feedback-post.is-fix::before { background: linear-gradient(180deg, #f0a23a, #dd6d24); }
.feedback-post.is-wish::before { background: linear-gradient(180deg, #b26ae1, #7651c8); }
.feedback-post:hover { border-color: #c4dceb; box-shadow: 0 12px 30px rgba(24, 64, 99, .10); transform: translateY(-1px); }
.feedback-post-head { display: flex; align-items: center; gap: 9px; }
.feedback-post-head .mini-avatar { width: 34px; height: 34px; font-size: 9px; }
.feedback-post-author { min-width: 0; flex: 1; }
.feedback-post-author .agent-profile-link { display: block; }
.feedback-post-author > span { display: block; margin-top: 2px; color: var(--text-dim); font-size: 8px; }
.feedback-type-label { padding: 5px 8px; color: #087bae; background: #e8f7ff; border: 1px solid #cbeaf7; border-radius: 999px; font-size: 8px; font-weight: 800; }
.feedback-type-label.is-fix { color: #a65313; background: #fff1e5; border-color: #f5d8bb; }
.feedback-type-label.is-wish { color: #7442ac; background: #f3eaff; border-color: #dfcdf4; }
.feedback-post > h3 { margin: 11px 0 4px; color: var(--text-main); font-size: 14px; }
.feedback-post > p { margin: 0; color: var(--text-muted); font-size: 11px; line-height: 1.5; white-space: pre-wrap; }
.feedback-post-image { width: 100%; max-height: 280px; margin-top: 10px; padding: 0; overflow: hidden; background: #eef3f7; border: 1px solid var(--border-color); border-radius: 10px; cursor: pointer; }
.feedback-post-image img { width: 100%; max-height: 280px; display: block; object-fit: cover; }
.feedback-post-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding: 9px; background: linear-gradient(135deg, #f7fafc, #f1f6fa); border: 1px solid #e1eaf1; border-radius: 12px; }

/* One action language for shortcuts, likes and comments. */
.team-action-button {
  min-width: 0;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 11px;
  color: #52657f;
  background: rgba(255,255,255,.86);
  border: 1px solid #d7e2ec;
  border-radius: 10px;
  box-shadow: 0 2px 7px rgba(33, 68, 101, .05);
  cursor: pointer;
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.team-action-button .ui-icon { width: 15px; height: 15px; stroke-width: 2.1; }
.team-action-button:hover { transform: translateY(-1px); }
.team-action-button:active { transform: translateY(0) scale(.98); }
.team-action-button:focus-visible { outline: 3px solid rgba(22, 158, 214, .18); outline-offset: 2px; }
.team-action-button:disabled { opacity: .62; cursor: wait; transform: none; }
.team-action-button .team-action-count {
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  color: inherit;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(100,116,139,.12);
  border-radius: 999px;
  font-size: 8px;
}
.team-action-button.is-like { color: #c53662; background: #fff4f7; border-color: #f1bfd0; }
.team-action-button.is-like:hover { color: #ac1f4e; background: #ffe8ef; border-color: #e888a8; box-shadow: 0 5px 13px rgba(197,54,98,.14); }
.team-action-button.is-like.active { color: #fff; background: linear-gradient(135deg, #ef5a85, #cc315f); border-color: #c92f5c; box-shadow: 0 6px 15px rgba(201,47,92,.24); }
.team-action-button.is-like.active .ui-icon { fill: currentColor; }
.team-action-button.is-like.active .team-action-count { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.22); }
.team-action-button.is-comment { color: #087fae; background: #f0faff; border-color: #bfe3f2; }
.team-action-button.is-comment:hover { color: #056d98; background: #e2f6ff; border-color: #83cbe6; box-shadow: 0 5px 13px rgba(8,127,174,.13); }
.team-action-button.is-copy { color: #3268a8; background: #f3f7ff; border-color: #cbdaf0; }
.team-action-button.is-copy:hover { color: #23558f; background: #e9f1ff; border-color: #9ebce2; box-shadow: 0 5px 13px rgba(50,104,168,.13); }
.team-action-button.is-copy.is-copied { color: #087d65; background: #ecfbf6; border-color: #9cdcc9; }
.team-action-button.is-copy.is-copied .ui-icon { display: none; }
.team-action-button.is-danger { color: #a8626d; background: #fff8f9; border-color: #efd7dc; box-shadow: 0 2px 7px rgba(132,58,72,.04); }
.team-action-button.is-danger:hover { color: #c92f4d; background: #fff0f3; border-color: #f0b9c4; box-shadow: 0 5px 13px rgba(201,47,77,.12); }
.team-action-button.is-icon-only { width: 36px; padding: 0; }

.feedback-comments { display: grid; gap: 8px; margin-top: 10px; }
.feedback-comment { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: start; }
.feedback-comment .mini-avatar { width: 28px; height: 28px; font-size: 8px; }
.feedback-comment > div:last-child { padding: 8px 10px; background: #f4f8fb; border: 1px solid #e5edf3; border-radius: 4px 11px 11px; }
.feedback-comment .agent-profile-link { font-size: 9px; }
.feedback-comment p { margin: 2px 0 0; color: var(--text-muted); font-size: 9px; line-height: 1.4; }
.feedback-comment-form { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 7px; margin-top: 10px; padding: 5px; background: #f7fafc; border: 1px solid #dfe9f1; border-radius: 12px; }
.feedback-comment-form .form-input { min-height: 34px; padding: 7px 9px; background: transparent; border: 0; box-shadow: none; font-size: 9px; }
.feedback-comment-form .form-input:focus { outline: none; }
.feedback-comment-form button { display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #15a8dc, #087fc0); border: 0; border-radius: 9px; box-shadow: 0 5px 12px rgba(8,143,202,.22); cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; }
.feedback-comment-form button:hover { transform: translateY(-1px); box-shadow: 0 7px 15px rgba(8,143,202,.28); }
.feedback-comment-form button .ui-icon { width: 14px; height: 14px; }

body.theme-dark .feedback-community-pill,
body.theme-dark .feedback-upload-btn { color: #7ad9f5; background: #102b3a; border-color: #28586d; }
body.theme-dark .feedback-type-btn { background: #172131; border-color: #2d4053; }
body.theme-dark .feedback-post { border-color: #26394c; }
body.theme-dark .feedback-post-actions,
body.theme-dark .feedback-comment-form { background: #111d2b; border-color: #283b4e; }
body.theme-dark .feedback-comment > div:last-child { background: #172131; border-color: #283b4e; }
body.theme-dark .team-action-button { color: #b6c5d5; background: #182638; border-color: #32485d; }
body.theme-dark .team-action-button.is-like { color: #ff91ae; background: #34212a; border-color: #71384b; }
body.theme-dark .team-action-button.is-like.active { color: #fff; background: linear-gradient(135deg, #eb5a82, #b92755); border-color: #ef6f96; }
body.theme-dark .team-action-button.is-comment { color: #77d5f3; background: #112c3b; border-color: #28566b; }
body.theme-dark .team-action-button.is-copy { color: #9bbff1; background: #182a43; border-color: #34547c; }
body.theme-dark .team-action-button.is-copy.is-copied { color: #77dfc2; background: #12362f; border-color: #2b6d5c; }
body.theme-dark .team-action-button.is-danger { color: #d28e99; background: #2b2028; border-color: #52313f; }
body.theme-dark .team-action-button.is-danger:hover { color: #ff9aae; background: #3a202a; border-color: #744052; }

@media (max-width: 980px) {
  .feedback-layout { grid-template-columns: 1fr; }
  .feedback-composer-card { position: static; }
}
@media (max-width: 760px) {
  .topbar-feedback-btn span { display: none; }
  .topbar-feedback-btn { padding: 7px 8px; }
  .feedback-form-actions { flex-wrap: wrap; }
  .profile-avatar-win-wrap { width: 84px; height: 84px; flex-basis: 84px; transform: translateY(40px); }
}

/* Agent profile v2: compact social layout with section tabs */
.team-member-profile {
  width: 100%;
  max-width: none;
  margin: 0;
  gap: 14px;
}

.team-profile-modern-head {
  display: block;
}
.panel-card.team-profile-modern-head { padding: 15px 16px; overflow: visible; }

.team-profile-cover-art {
  position: relative;
  isolation: isolate;
  width: calc(100% + 32px);
  height: 210px;
  margin: -15px -16px 0;
  overflow: visible;
  background: linear-gradient(120deg, #082d6b, #087cb3 58%, #12bda1);
  border-radius: 13px 13px 0 0;
}
.team-profile-cover-art::before,
.team-profile-cover-art::after {
  content: '';
  position: absolute;
  pointer-events: none;
}
.team-profile-cover-art::before {
  inset: 0;
  z-index: -1;
  opacity: .72;
  background:
    radial-gradient(circle at 18% 25%, rgba(255,255,255,.24), transparent 21%),
    radial-gradient(circle at 78% 22%, rgba(255,255,255,.16), transparent 25%),
    linear-gradient(135deg, transparent 48%, rgba(255,255,255,.08) 49%, transparent 70%);
}
.team-profile-cover-art::after {
  inset: auto 0 0;
  height: 70px;
  background: linear-gradient(transparent, rgba(3,20,47,.26));
}
.team-profile-cover-art[data-cover-theme="2"] { background: linear-gradient(125deg, #281759, #6842b7 55%, #d05da4); }
.team-profile-cover-art[data-cover-theme="3"] { background: linear-gradient(125deg, #064c4c, #0b8b70 56%, #8bcf4b); }
.team-profile-cover-art[data-cover-theme="4"] { background: linear-gradient(125deg, #73321e, #e36d3c 52%, #efb54b); }
.team-profile-cover-art[data-cover-theme="5"] { background: linear-gradient(125deg, #07152e, #122b57 48%, #234d79); }
.team-profile-cover-art[data-cover-theme="6"] { background: linear-gradient(125deg, #dceafa, #a9d9ed 52%, #9ee5d3); }

.team-profile-owner-actions {
  position: absolute;
  z-index: 6;
  top: 13px;
  right: 14px;
  display: flex;
  gap: 7px;
}
.team-profile-owner-actions[hidden] { display: none; }
.team-profile-cover-change,
.team-profile-settings-button {
  min-height: 34px;
  padding: 7px 11px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  background: rgba(3,20,47,.48);
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 9px;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.team-profile-cover-picker {
  position: absolute;
  z-index: 5;
  top: 53px;
  right: 14px;
  grid-template-columns: repeat(6, 26px);
  gap: 7px;
  padding: 9px;
  background: rgba(4,18,40,.84);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 11px;
  backdrop-filter: blur(12px);
}
.team-profile-cover-picker:not([hidden]) { display: grid; }
.team-profile-cover-picker button {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
}
.team-profile-cover-picker button.active { border-color: #fff; box-shadow: 0 0 0 2px rgba(6,182,212,.8); }
.team-profile-cover-picker [data-cover-theme="1"] { background: linear-gradient(135deg,#082d6b,#12bda1); }
.team-profile-cover-picker [data-cover-theme="2"] { background: linear-gradient(135deg,#281759,#d05da4); }
.team-profile-cover-picker [data-cover-theme="3"] { background: linear-gradient(135deg,#064c4c,#8bcf4b); }
.team-profile-cover-picker [data-cover-theme="4"] { background: linear-gradient(135deg,#73321e,#efb54b); }
.team-profile-cover-picker [data-cover-theme="5"] { background: linear-gradient(135deg,#07152e,#234d79); }
.team-profile-cover-picker [data-cover-theme="6"] { background: linear-gradient(135deg,#dceafa,#9ee5d3); }

.team-profile-cover-showcase {
  position: absolute;
  z-index: 3;
  right: 14px;
  bottom: 13px;
  display: flex;
  gap: 7px;
}
.team-cover-achievement {
  width: 98px;
  min-height: 42px;
  padding: 5px 8px;
  display: grid;
  grid-template-columns: 28px minmax(0,1fr);
  gap: 6px;
  align-items: center;
  color: #fff;
  background: rgba(3,20,47,.48);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 10px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.team-cover-achievement span { display: grid; place-items: center; width: 28px; height: 28px; background: rgba(255,255,255,.14); border-radius: 50%; font-size: 15px; }
.team-cover-achievement strong { color: #fff; font-size: 8px; line-height: 1.2; }

.team-profile-modern-head .team-profile-cover-identity {
  position: absolute;
  z-index: 4;
  left: 28px;
  right: 360px;
  bottom: 17px;
  align-items: flex-end;
  margin: 0;
  color: #fff;
}
.team-profile-modern-head .team-profile-avatar {
  width: 108px;
  height: 108px;
  flex: 0 0 108px;
  transform: translateY(55px);
  border: 4px solid var(--bg-card);
  box-shadow: 0 0 0 2px #0aa4d6;
  font-size: 30px;
}
.team-profile-cover-identity .team-profile-identity-copy {
  min-width: 0;
  padding-bottom: 2px;
  text-shadow: 0 1px 8px rgba(0,15,38,.55);
}
.team-profile-modern-head .team-profile-presence { margin-bottom: 5px; }
.team-profile-cover-identity .team-profile-status { color: #dcfff6; }
.team-profile-cover-identity .team-profile-status::before { box-shadow: 0 0 0 3px rgba(255,255,255,.15); }
.team-profile-modern-head .team-profile-title-row { flex-wrap: wrap; }
.team-profile-modern-head .team-profile-title-row h2 { color: #fff; font-size: 24px; }
.team-profile-cover-identity .role-badge {
  color: #fff;
  background: rgba(3,20,47,.4);
  border: 1px solid rgba(255,255,255,.28);
}
.team-profile-modern-head .team-profile-tagline { margin: 3px 0 8px; color: rgba(255,255,255,.84); }
.team-profile-modern-head .team-profile-meta > span {
  padding: 3px 7px;
  color: #fff;
  background: rgba(3,20,47,.28);
  border-color: rgba(255,255,255,.25);
}

.team-profile-quick-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  min-height: 82px;
  padding: 19px 0 8px 136px;
  align-items: center;
}
.team-profile-quick-stats > div {
  min-width: 0;
  padding: 4px 12px;
  border-left: 1px solid var(--border-color);
}
.team-profile-quick-stats span,
.team-profile-quick-stats strong { display: block; }
.team-profile-quick-stats span { color: var(--text-muted); font-size: 9px; line-height: 1.25; }
.team-profile-quick-stats strong { margin-top: 5px; color: var(--text-main); font-size: 17px; white-space: nowrap; }

.team-profile-modern-head .team-profile-level-line {
  display: block;
  width: min(360px, 100%);
  margin-top: 9px;
  padding: 0;
  border: 0;
}
.team-profile-modern-head .team-profile-level-orb { display: none; }
.team-profile-modern-head .team-profile-progress-copy { margin: 0 0 4px; color: rgba(255,255,255,.9); font-size: 9px; }
.team-profile-modern-head .team-profile-progress-copy span { color: rgba(255,255,255,.72); }
.team-profile-modern-head .xp-bar-track { height: 4px; background: rgba(255,255,255,.28); }

.team-profile-highlights {
  padding: 2px 2px 13px;
  border-bottom: 1px solid var(--border-color);
}
.team-profile-highlights-head,
.team-profile-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.team-profile-highlights-head h3,
.team-profile-section-heading h3 { margin: 0; color: var(--text-main); font-size: 14px; }
.team-profile-highlights-head p,
.team-profile-section-heading p { margin: 3px 0 0; color: var(--text-muted); font-size: 10px; }

.team-profile-inline-link {
  padding: 5px 2px;
  color: #087fc2;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.team-profile-inline-link:hover { text-decoration: underline; }

.team-achievement-highlights {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}
.team-achievement-highlights .team-achievement-story { width: auto; min-width: 0; }
.team-achievement-highlights .team-achievement-story-ring { width: 54px; height: 54px; }
.team-achievement-highlights .team-achievement-story-icon { font-size: 19px; }

.team-profile-section-tabs {
  display: flex;
  gap: 28px;
  border-bottom: 1px solid var(--border-color);
}
.team-profile-section-tab {
  position: relative;
  min-height: 40px;
  padding: 8px 1px 10px;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.team-profile-section-tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: transparent;
}
.team-profile-section-tab.active { color: var(--text-main); }
.team-profile-section-tab.active::after { background: #0aa4d6; }

.team-profile-section-panels { min-width: 0; }
.team-profile-section-panel { min-width: 0; padding: 4px 0 18px; }
.team-profile-section-panel[hidden] { display: none !important; }
.team-profile-badge-counter,
#team-profile-schedule-summary { color: #087fc2; font-size: 11px; font-weight: 700; }

.team-profile-section-panel .team-achievement-stories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(106px, 1fr));
  gap: 18px 10px;
  padding: 4px 0;
  overflow: visible;
}
.team-profile-section-panel .team-achievement-story { width: auto; min-width: 0; }
.team-profile-section-panel .team-achievement-story-name { min-height: 0; font-size: 10px; }

.team-profile-section-panel .team-profile-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 210px));
  gap: 14px;
  justify-content: start;
}
.team-profile-section-panel .team-profile-card-grid.is-collapsed .team-collectible-card:nth-child(n+8) { display: none; }
.team-profile-section-panel .team-collectible-card { padding: 7px; border-radius: 12px; }
.team-profile-section-panel .team-collectible-card img { aspect-ratio: 4 / 5; }

.team-profile-section-panel .team-profile-schedule-week {
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: 9px;
  overflow: visible;
}
.team-profile-section-panel .team-profile-schedule-day { padding: 12px 8px; }
.team-profile-section-panel .team-profile-schedule-day span { font-size: 10px; }
.team-profile-section-panel .team-profile-schedule-day strong { font-size: 11px; }

body.theme-dark .team-profile-modern-head .team-profile-avatar { border-color: var(--bg-card); }
body.theme-dark .team-profile-inline-link,
body.theme-dark .team-profile-badge-counter,
body.theme-dark #team-profile-schedule-summary { color: #64cdf4; }

@media (max-width: 980px) {
  .team-profile-cover-showcase { display: none; }
  .team-profile-modern-head .team-profile-cover-identity { right: 22px; }
  .team-profile-quick-stats > div:first-child { border-left: 0; }
  .team-achievement-highlights { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .team-profile-section-panel .team-profile-card-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 190px)); }
  .team-profile-section-panel .team-profile-card-grid.is-collapsed .team-collectible-card:nth-child(n+7) { display: none; }
}

@media (max-width: 680px) {
  .panel-card.team-profile-modern-head { padding: 12px; }
  .team-profile-cover-art { width: calc(100% + 24px); height: 210px; margin: -12px -12px 0; }
  .team-profile-modern-head .team-profile-cover-identity { left: 16px; right: 16px; bottom: 14px; align-items: flex-end; }
  .team-profile-modern-head .team-profile-avatar { width: 72px; height: 72px; flex-basis: 72px; transform: translateY(44px); font-size: 21px; }
  .team-profile-modern-head .team-profile-title-row h2 { font-size: 18px; }
  .team-profile-modern-head .team-profile-tagline { margin-bottom: 5px; }
  .team-profile-modern-head .team-profile-meta { display: none; }
  .team-profile-modern-head .team-profile-level-line { width: 250px; max-width: 100%; }
  .team-profile-quick-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 0; }
  .team-profile-quick-stats { padding: 54px 0 8px; }
  .team-profile-quick-stats > div { border-left: 0; border-right: 1px solid var(--border-color); }
  .team-profile-quick-stats > div:nth-child(2n) { border-right: 0; }
  .team-profile-quick-stats > div:last-child { grid-column: 1 / -1; border-right: 0; }
  .team-achievement-highlights { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .team-profile-section-tabs { gap: 18px; overflow-x: auto; }
  .team-profile-section-tab { white-space: nowrap; }
  .team-profile-section-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .team-profile-section-panel .team-profile-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .team-profile-section-panel .team-profile-card-grid.is-collapsed .team-collectible-card:nth-child(n+5) { display: none; }
  .team-profile-section-panel .team-achievement-stories { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .team-profile-owner-actions { top: 10px; right: 10px; }
  .team-profile-owner-actions button { padding: 7px 9px; }
  .team-profile-cover-picker { top: 49px; right: 10px; grid-template-columns: repeat(3, 26px); }
}

/* Team schedules, Hall of Fame and Team Chat */
.my-schedule-overview { display:grid; grid-template-columns:minmax(210px,1.35fr) repeat(2,minmax(140px,.8fr)) minmax(190px,1fr); gap:8px; margin-bottom:2px; }
.my-schedule-overview > div { min-width:0; min-height:72px; display:flex; flex-direction:column; justify-content:center; padding:10px 12px; background:#f8fbfe; border:1px solid #dce7f0; border-radius:10px; }
.my-schedule-overview span,.my-schedule-overview small { color:var(--text-muted); font-size:9px; }
.my-schedule-overview strong { margin:3px 0; color:var(--text-main); font-size:13px; }
.my-schedule-status { border-left:4px solid #94a3b8 !important; }
.my-schedule-status.is-active { background:#eefcf7; border-color:#38c79a !important; }
.my-schedule-status.is-active strong { color:#078d73; }
.my-schedule-status.is-upcoming { background:#eef8ff; border-color:#36a9e1 !important; }
.my-schedule-status.is-upcoming strong { color:#0879b5; }
.my-schedule-status.is-off { background:#faf7ff; border-color:#9d79d8 !important; }
.my-schedule-status.is-off strong { color:#7c55a5; }
.my-schedule-person { flex-direction:row !important; align-items:center; gap:10px; }
.my-schedule-person > div:last-child { min-width:0; }
.my-schedule-person strong { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.my-schedule-avatar { width:38px; height:38px; display:grid; place-items:center; overflow:hidden; color:#fff; background:#2f80ed; border-radius:50%; font-size:10px; font-weight:800; }
.my-schedule-empty,.my-schedule-loading { grid-column:1/-1; min-height:60px !important; }
body.theme-dark .my-schedule-overview > div { background:#102438; border-color:#294158; }
body.theme-dark .my-schedule-status.is-active { background:rgba(16,185,129,.1); }
body.theme-dark .my-schedule-status.is-upcoming { background:rgba(14,165,233,.1); }
body.theme-dark .my-schedule-status.is-off { background:rgba(139,92,246,.1); }

@media (max-width:980px) { .my-schedule-overview { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) {
  .leaderboard-podium { grid-template-columns:1fr; padding-top:0; }
  .leaderboard-podium-card,.leaderboard-podium-card.rank-1 { min-height:78px; }
  .leaderboard-podium-card.rank-1 { order:-1; }
  .my-schedule-overview { grid-template-columns:1fr; }
}

.team-feature-heading > div:first-child {
  min-width: 0;
}

.team-feature-heading p {
  margin: 5px 0 0;
  color: var(--text-muted);
  font-size: 12px;
}

.team-feature-empty {
  padding: 28px !important;
  color: var(--text-dim) !important;
  text-align: center !important;
}

.schedule-table {
  min-width: 980px;
}

.schedule-table th:not(:first-child),
.schedule-table td:not(:first-child) {
  min-width: 104px;
  text-align: center;
}

.schedule-table th:first-child,
.schedule-table td:first-child {
  min-width: 190px;
}

.schedule-shift,
.schedule-day-off,
.schedule-not-set {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.schedule-shift {
  color: #0879b5;
  background: #e8f6ff;
  border: 1px solid #b8e3f7;
}

.schedule-day-off {
  color: #7c55a5;
  background: #f4edff;
  border: 1px solid #dfcff8;
}

.schedule-not-set {
  color: var(--text-dim);
  background: #f3f6f9;
  border: 1px solid #e2e9f0;
}

.schedule-editor-panel {
  margin-top: 20px;
}

.schedule-editor-grid {
  display: grid;
  gap: 9px;
}

.schedule-editor-row {
  display: grid;
  grid-template-columns: 110px 130px minmax(130px, 180px) minmax(130px, 180px);
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f7fafd;
  border: 1px solid #e2ebf3;
}

.schedule-editor-row > strong {
  color: var(--text-main);
  font-size: 13px;
}

.schedule-off-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-muted);
  font-size: 12px;
}

.schedule-time-input {
  min-width: 0;
  padding: 9px 10px;
}

.schedule-editor-row.is-off .schedule-time-input {
  opacity: 0.45;
}

.schedule-editor-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 16px;
}

#schedule-save-status,
.chat-send-status {
  color: #079a77;
  font-size: 12px;
}

.team-chat-panel {
  min-height: 560px;
}

.chat-retention-note {
  color: var(--text-dim);
  font-size: 11px;
}

.chat-header-meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-muted);
  font-size: 11px;
}

.chat-live-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #0ebc91;
  box-shadow: 0 0 0 4px rgba(14, 188, 145, 0.1);
}

.chat-retention-note::before {
  content: '·';
  margin-right: 7px;
}

.team-chat-messages {
  min-height: 360px;
  max-height: 520px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  border-radius: 12px;
  background: #f6f9fc;
  border: 1px solid #e1eaf2;
}

.team-chat-message {
  max-width: min(72%, 680px);
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
  align-self: flex-start;
}

.team-chat-message.mine {
  grid-template-columns: minmax(0, 1fr);
  align-self: flex-end;
}

.team-chat-message .mini-avatar {
  margin-top: 17px;
}

.team-chat-day {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0;
  color: var(--text-dim);
  font-size: 10px;
  font-weight: 650;
  text-align: center;
}

.team-chat-day::before,
.team-chat-day::after {
  content: '';
  height: 1px;
  flex: 1;
  background: var(--border-color);
}

.team-chat-author {
  display: block;
  margin: 0 0 4px 3px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 650;
}

.team-chat-bubble {
  padding: 10px 12px;
  color: var(--text-main);
  background: #fff;
  border: 1px solid #dce7f1;
  border-radius: 4px 13px 13px 13px;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  box-shadow: 0 4px 12px rgba(34, 75, 113, 0.05);
}

.team-chat-message.mine .team-chat-bubble {
  color: #fff;
  background: linear-gradient(135deg, #0b8fc8, #1779cf);
  border-color: transparent;
  border-radius: 13px 4px 13px 13px;
}

.team-chat-time {
  margin-top: 4px;
  color: var(--text-dim);
  font-size: 9px;
  text-align: right;
}

.team-chat-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 12px;
}

.team-chat-input-wrap {
  position: relative;
  min-width: 0;
}

.team-chat-input-wrap .form-input {
  width: 100%;
  padding-right: 68px;
}

#team-chat-counter {
  position: absolute;
  top: 50%;
  right: 12px;
  color: var(--text-dim);
  font-size: 9px;
  transform: translateY(-50%);
  pointer-events: none;
}

.team-chat-compose .btn-primary:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none;
}

.chat-send-status {
  min-height: 18px;
  padding-top: 5px;
  text-align: right;
}

.chat-send-status[data-state="error"] { color: #dc4c64; }
.chat-send-status[data-state="loading"] { color: var(--text-muted); }

.hall-rule-note {
  padding: 6px 10px;
  color: #0879b5;
  background: #e8f6ff;
  border: 1px solid #b8e3f7;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 650;
}

.hall-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.hall-grid h4 {
  margin: 0;
  color: var(--text-main);
  font-size: 14px;
}

.hall-column {
  min-width: 0;
  padding: 14px;
  background: #f9fbfd;
  border: 1px solid #e3ecf4;
  border-radius: 14px;
}

.hall-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.hall-section-heading span {
  color: var(--text-dim);
  font-size: 10px;
}

.hall-list {
  display: grid;
  gap: 9px;
}

.hall-winner-card {
  position: relative;
  display: grid;
  grid-template-columns: 38px 1fr auto;
  gap: 11px;
  align-items: center;
  padding: 12px;
  background: #f7fafd;
  border: 1px solid #e1eaf2;
  border-radius: 12px;
}

.hall-winner-card.is-featured {
  padding: 15px 14px;
  background: linear-gradient(135deg, #fff9e8, #f8fbff 72%);
  border-color: #efd998;
  box-shadow: 0 9px 22px rgba(156, 112, 26, 0.08);
}

.hall-winner-avatar {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #0aa6d8, #3676e7);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 750;
  background-size: cover;
  background-position: center;
}

.hall-winner-card.is-featured .hall-winner-avatar {
  background: linear-gradient(135deg, #e9a520, #f4c956);
}

.hall-crown-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  color: #9a6500;
  background: #fff1b4;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 3px 8px rgba(120, 81, 8, 0.18);
}

.hall-crown-badge .ui-icon {
  width: 10px;
  height: 10px;
}

.hall-winner-copy {
  min-width: 0;
}

.hall-winner-copy small {
  display: block;
  color: var(--text-dim);
  font-size: 10px;
}

.hall-winner-copy strong,
.hall-winner-copy .agent-profile-link {
  display: block;
  margin-top: 3px;
  color: var(--text-main);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.hall-winner-score {
  color: #087fc2;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
}

/* Team cards and read-only profile */
.team-summary-pills {
  display: flex;
  gap: 8px;
  align-items: center;
}

.team-summary-pills > span {
  padding: 6px 10px;
  color: var(--text-muted);
  background: #f3f7fb;
  border: 1px solid #dce7f0;
  border-radius: 999px;
  font-size: 10px;
}

.team-summary-pills strong {
  color: var(--text-main);
  font-size: 12px;
}

.team-summary-pills .is-online {
  color: #078768;
  background: #eafaf5;
  border-color: #bcebdc;
}

.team-summary-pills .is-online strong { color: #078768; }

.team-agent-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.team-agent-card {
  display: grid;
  grid-template-columns: minmax(280px, 1.2fr) minmax(350px, 1fr) 130px;
  gap: 18px;
  align-items: center;
  min-width: 0;
  padding: 16px;
  color: var(--text-main);
  background: #f9fbfd;
  border: 1px solid #e0e9f2;
  border-radius: 14px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.team-agent-card:hover {
  border-color: #9edcf2;
  box-shadow: 0 12px 26px rgba(32, 91, 132, 0.09);
  transform: translateY(-2px);
}

.team-agent-card:focus-visible {
  outline: 3px solid rgba(7, 155, 211, 0.22);
  outline-offset: 2px;
}

.team-agent-card-head {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
}

.team-card-avatar,
.team-profile-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  background: #2877e8;
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  font-weight: 750;
  overflow: hidden;
}

.team-card-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 12px;
  box-shadow: 0 7px 16px rgba(31, 91, 133, 0.13);
}

.team-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card-identity {
  min-width: 0;
}

.team-card-identity strong {
  display: block;
  color: var(--text-main);
  font-size: 13px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.team-card-identity > span {
  display: block;
  margin-top: 3px;
  color: var(--text-dim);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.team-card-live-status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
  white-space: nowrap;
}

.team-card-status,
.team-profile-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 650;
  white-space: nowrap;
}

.team-card-status i,
.team-profile-status::before {
  content: '';
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  background: #91a0b1;
  border-radius: 50%;
}

.status-online { color: #078768; }
.status-online i,
.team-profile-status.status-online::before { background: #0ebc91; box-shadow: 0 0 0 4px rgba(14, 188, 145, 0.1); }
.status-lunch { color: #c27b06; }
.status-lunch i,
.team-profile-status.status-lunch::before { background: #e69a19; }
.status-break { color: #c24677; }
.status-break i,
.team-profile-status.status-break::before { background: #d95085; }
.status-meeting { color: #7552ba; }
.status-meeting i,
.team-profile-status.status-meeting::before { background: #815dca; }
.status-task { color: #2877e8; }
.status-task i,
.team-profile-status.status-task::before { background: #2877e8; }
.status-busy { color: #cf4156; }
.status-busy i,
.team-profile-status.status-busy::before { background: #dc4c64; }

.team-card-telemetry {
  min-width: 0;
}

.team-card-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 0;
}

.team-card-stats > div {
  min-width: 0;
  padding: 9px 10px;
  background: #fff;
  border: 1px solid #e4edf4;
  border-radius: 10px;
}

.team-card-stats span,
.team-card-stats strong {
  display: block;
}

.team-card-stats span {
  color: var(--text-dim);
  font-size: 9px;
}

.team-card-stats strong {
  margin-top: 4px;
  color: var(--text-main);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.team-card-status-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.team-card-live-status .team-card-status-breakdown {
  flex-wrap: nowrap;
  margin-top: 0;
}

.team-card-status-breakdown .status-pill-mini {
  padding: 2px 5px;
  font-size: 9px;
  white-space: nowrap;
}

.team-card-open {
  display: block;
  margin-top: 0;
  color: #087fc2;
  font-size: 10px;
  font-weight: 650;
  text-align: right;
}

.team-member-profile {
  display: grid;
  gap: 18px;
}

.team-profile-back {
  width: max-content;
  padding: 8px 13px;
}

.team-profile-cover {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 210px;
  padding: 30px 34px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 78% 18%, rgba(63, 232, 210, 0.28), transparent 31%),
    linear-gradient(125deg, #082e68 0%, #0757a0 52%, #079db6 100%);
  border-radius: 24px;
  box-shadow: 0 22px 46px rgba(13, 74, 127, 0.2);
}

.team-profile-cover-glow {
  position: absolute;
  z-index: -1;
  right: -70px;
  bottom: -120px;
  width: 340px;
  height: 340px;
  background: rgba(83, 249, 184, 0.16);
  border-radius: 50%;
}

.team-profile-identity {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}

.team-profile-cover .team-profile-avatar {
  width: 96px;
  height: 96px;
  flex: 0 0 96px;
  color: #fff;
  border: 5px solid rgba(255, 255, 255, 0.82);
  box-shadow: 0 16px 35px rgba(1, 29, 69, 0.3);
  font-size: 27px;
}

.team-profile-identity-copy {
  min-width: 0;
}

.team-profile-presence {
  margin-bottom: 8px;
}

.team-profile-cover .team-profile-status {
  color: rgba(255, 255, 255, 0.86);
}

.team-profile-cover .team-profile-status::before {
  border: 2px solid rgba(255, 255, 255, 0.72);
  box-shadow: none;
}

.team-profile-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.team-profile-title-row h2 {
  margin: 0;
  color: inherit;
  font-size: 28px;
  overflow-wrap: anywhere;
}

.team-profile-cover .role-badge {
  color: #e2f8ff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.24);
}

.team-profile-tagline {
  margin: 7px 0 14px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
}

.team-profile-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.team-profile-meta > span {
  gap: 6px;
  padding: 6px 10px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(1, 34, 75, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  font-size: 10px;
}

.team-profile-rank-card {
  display: grid;
  justify-items: center;
  min-width: 142px;
  padding: 17px 20px;
  background: rgba(5, 37, 78, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  backdrop-filter: blur(8px);
}

.team-profile-rank-card span,
.team-profile-rank-card small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 10px;
}

.team-profile-rank-card strong {
  margin: 4px 0 2px;
  color: #fff;
  font-size: 34px;
  line-height: 1;
}

.team-member-profile-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.team-member-profile-stats .stat-card {
  min-height: 118px;
}

.team-member-profile-stats .stat-icon {
  color: #168cc5;
  background: #e8f6ff;
}

.team-profile-content-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(500px, 1.6fr);
  gap: 18px;
  align-items: start;
}

.team-profile-content-grid .panel-card {
  margin: 0;
}

.team-profile-progress-card .panel-title-bar,
.team-profile-achievements-card .panel-title-bar {
  align-items: flex-start;
}

.team-profile-progress-card .panel-title-bar p,
.team-profile-achievements-card .panel-title-bar p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 10px;
}

.team-profile-level-orb {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  flex: 0 0 auto;
  color: #fff;
  background: linear-gradient(135deg, #087fc2, #10b995);
  border-radius: 50%;
  box-shadow: 0 9px 20px rgba(8, 127, 194, 0.2);
  font-size: 16px;
  font-weight: 750;
}

.team-profile-progress-copy,
.team-profile-progress-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.team-profile-progress-copy {
  align-items: end;
  margin: 28px 0 10px;
}

.team-profile-progress-copy strong {
  color: var(--text-main);
  font-size: 18px;
}

.team-profile-progress-copy span,
.team-profile-progress-footer {
  color: var(--text-muted);
  font-size: 10px;
}

.team-profile-progress-card .xp-bar-track {
  height: 10px;
}

.team-profile-progress-footer {
  margin-top: 11px;
  flex-wrap: wrap;
}

.team-profile-achievements-card .badges-grid-2col {
  margin-top: 18px;
}

.team-profile-badge-counter {
  color: #079a77;
  font-size: 12px;
  font-weight: 700;
}

.team-member-profile .badge-details {
  flex: 1;
  min-width: 0;
}

.team-member-profile .team-badge-state {
  color: var(--text-dim);
  font-size: 10px;
}

.team-member-profile .badge-item.unlocked .team-badge-state {
  color: #079a77;
}

.team-profile-collection {
  position: relative;
}

.team-profile-collection-head p {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 10px;
}

.team-profile-collection-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.team-profile-collection-meta > span {
  color: #087fc2;
  font-size: 11px;
  font-weight: 700;
}

.team-profile-card-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 9px;
}

.team-profile-card-grid.is-collapsed .team-collectible-card:nth-child(n+9) {
  display: none;
}

.team-collectible-card {
  position: relative;
  min-width: 0;
  padding: 5px;
  overflow: hidden;
  color: var(--text-main);
  background: #f7fafc;
  border: 1px solid #dce7f0;
  border-top-width: 3px;
  border-radius: 10px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.team-collectible-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(27, 76, 116, 0.14);
}

.team-collectible-card:focus-visible {
  outline: 3px solid rgba(8, 127, 194, 0.25);
  outline-offset: 2px;
}

.team-collectible-card.rarity-rare { border-top-color: #338be7; }
.team-collectible-card.rarity-epic { border-top-color: #8a57d5; }
.team-collectible-card.rarity-legendary { border-top-color: #e39a28; }
.team-collectible-card.rarity-mythic { border-top-color: #09a5b7; }

.team-collectible-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 6px;
}

.team-collectible-card.is-locked img {
  filter: blur(18px) grayscale(1) brightness(0.32);
  opacity: 0.14;
  transform: scale(1.22);
}

.team-collectible-card.is-locked::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 5px 5px 36px;
  background: rgba(10, 25, 44, 0.68);
  border-radius: 6px;
  pointer-events: none;
}

.team-card-name {
  display: block;
  min-height: 28px;
  padding: 6px 3px 2px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.team-card-lock,
.team-card-owned {
  position: absolute;
  top: 9px;
  right: 9px;
  display: grid;
  place-items: center;
  min-height: 22px;
  color: #fff;
  background: rgba(9, 26, 49, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  backdrop-filter: blur(5px);
}

.team-card-lock {
  z-index: 2;
  top: 42%;
  right: auto;
  left: 50%;
  width: 38px;
  min-height: 38px;
  border-color: rgba(255, 255, 255, 0.34);
  font-size: 16px;
  transform: translate(-50%, -50%);
}

.team-card-owned {
  padding: 0 7px;
  color: #dfffee;
  background: rgba(2, 104, 75, 0.82);
  font-size: 8px;
  font-weight: 750;
}

.team-card-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  place-items: center;
  padding: 20px;
  background: rgba(4, 15, 32, 0.72);
  backdrop-filter: blur(8px);
}

.team-card-preview {
  position: relative;
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  width: min(500px, 100%);
  padding: 18px;
  color: var(--text-main);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 17px;
  box-shadow: 0 28px 80px rgba(1, 18, 42, 0.34);
}

.team-card-preview > img {
  display: block;
  width: 100%;
  border-radius: 11px;
  box-shadow: 0 12px 28px rgba(9, 38, 67, 0.22);
}

.team-card-preview.is-locked > img {
  filter: blur(22px) grayscale(1) brightness(0.3);
  opacity: 0.14;
}

.team-card-preview-copy span {
  display: inline-block;
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.team-card-preview-copy .rarity-rare { color: #338be7; }
.team-card-preview-copy .rarity-epic { color: #8a57d5; }
.team-card-preview-copy .rarity-legendary { color: #d5850d; }
.team-card-preview-copy .rarity-mythic { color: #079aaa; }

.team-card-preview-copy h3 {
  margin: 7px 0 6px;
  color: var(--text-main);
  font-size: 20px;
}

.team-card-preview-copy p {
  margin: 0 0 16px;
  color: var(--text-muted);
  font-size: 12px;
}

.team-card-preview-copy strong {
  font-size: 11px;
}

.team-card-preview-copy strong.is-unlocked { color: #079a77; }
.team-card-preview-copy strong.is-locked { color: var(--text-dim); }

.team-card-preview-close {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  font-size: 19px;
  cursor: pointer;
}

/* Compact social-style agent profile */
.team-social-profile-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  grid-template-areas:
    "identity rank"
    "stats stats"
    "level level";
  gap: 13px 18px;
}

.team-social-profile-head .team-profile-identity { grid-area: identity; }
.team-social-profile-head .team-profile-rank-card { grid-area: rank; }

.team-social-profile-head .team-profile-avatar {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  color: #fff;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #0aa4d6, 0 7px 18px rgba(25, 87, 132, 0.15);
  font-size: 21px;
}

.team-social-profile-head .team-profile-presence { margin-bottom: 4px; }
.team-social-profile-head .team-profile-title-row h2 { color: var(--text-main); font-size: 21px; }
.team-social-profile-head .team-profile-tagline { margin: 3px 0 8px; color: var(--text-muted); }
.team-social-profile-head .team-profile-meta > span {
  padding: 4px 8px;
  color: var(--text-muted);
  background: #f2f7fb;
  border-color: #dce8f1;
}

.team-social-profile-head .team-profile-rank-card {
  min-width: 0;
  padding: 10px 12px;
  color: var(--text-main);
  background: #f4f9fc;
  border-color: #dce9f2;
  backdrop-filter: none;
}

.team-social-profile-head .team-profile-rank-card span,
.team-social-profile-head .team-profile-rank-card small { color: var(--text-muted); }
.team-social-profile-head .team-profile-rank-card strong { color: #087fc2; font-size: 25px; }

.team-profile-inline-stats {
  grid-area: stats;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.team-profile-inline-stats > div {
  min-width: 0;
  padding: 10px 14px;
  border-right: 1px solid var(--border-color);
}

.team-profile-inline-stats > div:first-child { padding-left: 0; }
.team-profile-inline-stats > div:last-child { border-right: 0; }
.team-profile-inline-stats span,
.team-profile-inline-stats strong { display: block; }
.team-profile-inline-stats span { color: var(--text-muted); font-size: 9px; }
.team-profile-inline-stats strong { margin-top: 3px; color: var(--text-main); font-size: 17px; }

.team-profile-level-line {
  grid-area: level;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.team-profile-level-line .team-profile-level-orb {
  width: 34px;
  height: 34px;
  font-size: 13px;
  box-shadow: none;
}

.team-profile-level-line .team-profile-progress-copy { margin: 0 0 6px; align-items: center; }
.team-profile-level-line .team-profile-progress-copy strong { font-size: 11px; }
.team-profile-level-line .team-profile-progress-copy span { font-size: 9px; }
.team-profile-level-line .xp-bar-track { height: 6px; }

.team-profile-schedule-card .panel-title-bar p,
.team-profile-achievements-social .panel-title-bar p {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 10px;
}

#team-profile-schedule-summary {
  color: var(--text-muted);
  font-size: 10px;
}

.team-profile-schedule-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
}

.team-profile-schedule-day {
  min-width: 0;
  padding: 8px 6px;
  color: var(--text-muted);
  background: #f5f8fb;
  border: 1px solid #e0e9f1;
  border-radius: 9px;
  text-align: center;
}

.team-profile-schedule-day span,
.team-profile-schedule-day strong { display: block; }
.team-profile-schedule-day span { font-size: 9px; }
.team-profile-schedule-day strong { margin-top: 4px; color: var(--text-main); font-size: 10px; }
.team-profile-schedule-day.is-off strong { color: var(--text-dim); }
.team-profile-schedule-day.is-today {
  color: #087fc2;
  background: #e9f7ff;
  border-color: #9fdcf3;
  box-shadow: inset 0 -2px 0 #0aa4d6;
}

.team-achievement-stories {
  display: flex;
  gap: 12px;
  padding: 3px 1px 7px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.team-achievement-story {
  width: 72px;
  min-width: 72px;
  padding: 0;
  color: var(--text-main);
  background: transparent;
  border: 0;
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.team-achievement-story-ring {
  width: 58px;
  height: 58px;
  margin: 0 auto 6px;
  padding: 3px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #0aa9df, #375fdc 55%, #17bd8d);
  border-radius: 50%;
}

.team-achievement-story-icon {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #fff;
  background: #123c6b;
  border: 3px solid var(--bg-card);
  border-radius: 50%;
  font-size: 21px;
}

.team-achievement-story.is-locked .team-achievement-story-ring {
  background: #d5dee7;
}

.team-achievement-story.is-locked .team-achievement-story-icon {
  color: #8b99aa;
  background: #e9eef3;
  filter: grayscale(1);
}

.team-achievement-story-name {
  display: block;
  min-height: 26px;
  color: var(--text-main);
  font-size: 9px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.team-achievement-story.is-locked .team-achievement-story-name { color: var(--text-dim); }

.team-achievement-preview-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  place-items: center;
  padding: 20px;
  background: rgba(4, 15, 32, 0.72);
  backdrop-filter: blur(8px);
}

.team-achievement-preview {
  position: relative;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  width: min(430px, 100%);
  padding: 20px;
  color: var(--text-main);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 28px 80px rgba(1, 18, 42, 0.34);
}

.team-achievement-preview-icon {
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #0aa9df, #375fdc, #17bd8d);
  border-radius: 50%;
  font-size: 29px;
}

.team-achievement-preview span { color: #087fc2; font-size: 9px; font-weight: 750; text-transform: uppercase; }
.team-achievement-preview h3 { margin: 5px 0; color: var(--text-main); font-size: 18px; }
.team-achievement-preview p { margin: 0 0 12px; color: var(--text-muted); font-size: 11px; }
.team-achievement-preview strong { color: var(--text-dim); font-size: 10px; }
.team-achievement-preview strong.is-unlocked { color: #079a77; }

body.theme-dark .team-social-profile-head .team-profile-meta > span,
body.theme-dark .team-social-profile-head .team-profile-rank-card,
body.theme-dark .team-profile-schedule-day {
  background: #132438;
  border-color: #294058;
}

body.theme-dark .team-social-profile-head .team-profile-avatar { border-color: #102238; }
body.theme-dark .team-profile-schedule-day.is-today { background: #12324a; border-color: #285b78; }
body.theme-dark .team-achievement-story.is-locked .team-achievement-story-ring { background: #314258; }
body.theme-dark .team-achievement-story.is-locked .team-achievement-story-icon { color: #71849b; background: #1b2b3f; }

body.theme-dark .team-collectible-card {
  background: #132438;
  border-color: #294058;
}

body.theme-dark .schedule-editor-row,
body.theme-dark .team-chat-messages,
body.theme-dark .hall-winner-card,
body.theme-dark .hall-column,
body.theme-dark .team-agent-card,
body.theme-dark .team-card-stats > div {
  background: #132438;
  border-color: #294058;
}

body.theme-dark .team-agent-card:hover { border-color: #3f6f91; }
body.theme-dark .team-summary-pills > span { background: #132438; border-color: #294058; }
body.theme-dark .team-summary-pills .is-online { background: #103229; border-color: #245a49; }
body.theme-dark .team-member-profile-stats .stat-icon { background: #12324a; color: #6bd7ff; }
body.theme-dark .team-profile-cover {
  background:
    radial-gradient(circle at 78% 18%, rgba(36, 215, 196, 0.18), transparent 31%),
    linear-gradient(125deg, #071c3f 0%, #073d70 52%, #07687a 100%);
}

body.theme-dark .hall-winner-card.is-featured {
  background: linear-gradient(135deg, #2e2a1d, #15283c 72%);
  border-color: #675a33;
}

body.theme-dark .hall-rule-note {
  color: #6bd7ff;
  background: #12324a;
  border-color: #285b78;
}

body.theme-dark .hall-crown-badge {
  border-color: #2e2a1d;
}

body.theme-dark .schedule-shift {
  color: #6bd7ff;
  background: #12324a;
  border-color: #285b78;
}

body.theme-dark .schedule-day-off {
  color: #c4a9ed;
  background: #2a2340;
  border-color: #554576;
}

body.theme-dark .schedule-not-set {
  background: #182738;
  border-color: #2c4055;
}

body.theme-dark .team-chat-bubble {
  background: #182a3e;
  border-color: #2c4259;
}

/* Compact social-style density */
#app-container {
  grid-template-columns: 216px minmax(0, 1fr);
  grid-template-rows: 64px minmax(0, 1fr);
}

.topbar {
  min-height: 64px;
  padding: 7px 16px;
}

.topbar-logo {
  width: 42px;
  height: 42px;
  border-radius: 11px;
}

.topbar-brand-copy h1 { font-size: 18px; }
.topbar-brand-copy p { font-size: 10px; }

.theme-toggle-btn,
.topbar .notif-bell-btn,
.topbar .btn-logout,
.topbar-sms-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  padding: 0;
  justify-content: center;
}
.topbar-sms-btn .topbar-sms-label {
  display: none;
}

.online-pill {
  padding: 5px 10px;
  font-size: 11px;
}

.content-body {
  height: calc(100vh - 64px);
  padding: 18px 20px;
  gap: 14px;
}

.stats-grid {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
}

.stat-card {
  min-height: 92px;
  padding: 13px 14px;
  gap: 7px;
  border-radius: 12px;
}

.stat-header span { font-size: 11px; }
.stat-icon { width: 30px; height: 30px; border-radius: 8px; }
.stat-icon .ui-icon { width: 15px; height: 15px; }
.stat-value { font-size: 24px; }

.panel-card {
  padding: 15px 16px;
  gap: 13px;
  border-radius: 13px;
}

.panel-title-bar h3 { font-size: 15px; }
.team-feature-heading p { margin-top: 3px; font-size: 10px; }

.leaderboard-title-bar {
  align-items: flex-start;
  gap: 18px;
}
.leaderboard-title-bar > div:first-child p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 10px;
}
.leaderboard-controls {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.leaderboard-control-group > span {
  display: block;
  margin: 0 0 4px 4px;
  color: var(--text-dim);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.leaderboard-league-switch .pill-btn.active[data-league="multiskill"] {
  background: linear-gradient(135deg, #087fc2, #12b8a6);
}
.leaderboard-league-switch .pill-btn.active[data-league="past_orders"] {
  background: linear-gradient(135deg, #7c3aed, #d946a5);
}
.leaderboard-league-summary {
  display: grid;
  grid-template-columns: 44px minmax(180px, 1fr) minmax(95px, .35fr) minmax(180px, .65fr);
  align-items: center;
  gap: 14px;
  padding: 11px 13px;
  background: linear-gradient(100deg, rgba(8,127,194,.08), rgba(18,184,166,.08));
  border: 1px solid rgba(8,127,194,.17);
  border-radius: 11px;
}
.leaderboard-league-summary > div:not(.leaderboard-league-mark) {
  min-width: 0;
  padding-left: 14px;
  border-left: 1px solid var(--border-color);
}
.leaderboard-league-summary span,
.leaderboard-league-summary strong { display: block; }
.leaderboard-league-summary span { color: var(--text-muted); font-size: 9px; }
.leaderboard-league-summary strong { margin-top: 3px; color: var(--text-main); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leaderboard-league-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #087fc2, #12b8a6);
  border-radius: 12px;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(8,127,194,.2);
}
.leaderboard-league-mark[data-league="past_orders"] { background: linear-gradient(135deg, #7c3aed, #d946a5); }
.leaderboard-role-badge.league-multiskill { color: #0879b5; background: #e8f7fb; border: 1px solid #bce7ee; }
.leaderboard-role-badge.league-past_orders { color: #8b3db8; background: #f6edff; border: 1px solid #dfc5f3; }
.leaderboard-empty { padding: 32px !important; color: var(--text-muted) !important; text-align: center !important; }
body.theme-dark .leaderboard-role-badge.league-multiskill { color: #67d7e7; background: rgba(8,127,194,.16); border-color: rgba(103,215,231,.25); }
body.theme-dark .leaderboard-role-badge.league-past_orders { color: #d9a8ff; background: rgba(124,58,237,.16); border-color: rgba(217,168,255,.25); }

.leaderboard-podium { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; gap:9px; max-width:880px; width:100%; margin:3px auto 0; padding-top:5px; }
.leaderboard-podium[hidden] { display:none; }
.leaderboard-podium-card { min-width:0; min-height:88px; display:grid; grid-template-columns:auto 42px minmax(0,1fr); grid-template-rows:auto auto; align-items:center; column-gap:9px; padding:10px 11px; background:#f8fbfe; border:1px solid #dce7f0; border-top:3px solid #94a3b8; border-radius:11px; }
.leaderboard-podium-card.rank-1 { min-height:96px; border-top-color:#f4b400; background:linear-gradient(145deg,#fffdf5,#fff8dc); box-shadow:0 8px 22px rgba(180,120,0,.11); }
.leaderboard-podium-card.rank-2 { border-top-color:#91a3b7; }
.leaderboard-podium-card.rank-3 { border-top-color:#c57a3a; }
.leaderboard-podium-rank { grid-row:1/3; display:grid; justify-items:center; gap:2px; font-size:18px; }
.leaderboard-podium-rank b { color:var(--text-muted); font-size:9px; }
.leaderboard-podium-avatar,.leaderboard-my-avatar { width:38px; height:38px; display:grid; place-items:center; overflow:hidden; color:#fff; border-radius:50%; font-size:10px; font-weight:800; }
.leaderboard-podium-name { min-width:0; display:flex; align-items:center; gap:6px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:12px; font-weight:800; }
.leaderboard-podium-name small { padding:2px 5px; color:#078d73; background:rgba(16,185,129,.11); border-radius:999px; font-size:8px; }
.leaderboard-podium-card > strong { grid-column:2; align-self:end; color:var(--text-main); font-size:15px; }
.leaderboard-podium-card > span:last-child { grid-column:3; align-self:end; color:var(--text-muted); font-size:9px; }
.leaderboard-table-value { color:#0b9b7b; font-size:15px; }
.leaderboard-my-place { display:flex; align-items:center; gap:12px; margin-top:2px; padding:9px 12px; background:linear-gradient(100deg,rgba(59,130,246,.08),rgba(16,185,129,.08)); border:1px solid rgba(38,147,203,.24); border-radius:10px; }
.leaderboard-my-place[hidden] { display:none; }
.leaderboard-my-place-copy { min-width:0; flex:1; }
.leaderboard-my-place-copy span,.leaderboard-my-place-copy small { display:block; color:var(--text-muted); font-size:9px; }
.leaderboard-my-place-copy strong { display:block; margin:2px 0; color:var(--text-main); font-size:13px; }
.leaderboard-my-result { min-width:68px; text-align:right; }
.leaderboard-my-result strong,.leaderboard-my-result span { display:block; }
.leaderboard-my-result strong { color:#0b9b7b; font-size:15px; }
.leaderboard-my-result span { color:var(--text-muted); font-size:9px; }
body.theme-dark .leaderboard-podium-card { background:#102438; border-color:#294158; }
body.theme-dark .leaderboard-podium-card.rank-1 { background:linear-gradient(145deg,rgba(112,78,11,.28),rgba(66,50,19,.22)); }
body.theme-dark .leaderboard-my-place { background:linear-gradient(100deg,rgba(59,130,246,.12),rgba(16,185,129,.1)); }

@media (max-width: 820px) {
  .leaderboard-title-bar { flex-direction: column; }
  .leaderboard-controls { width: 100%; justify-content: flex-start; }
  .leaderboard-league-summary { grid-template-columns: 42px 1fr 1fr; }
  .leaderboard-league-summary > div:last-child { grid-column: 2 / -1; }
}

th { padding: 9px 12px; font-size: 10px; }
td { padding: 10px 12px; font-size: 12px; }

.articles-grid { gap: 10px; }
.article-card { padding: 13px 14px; gap: 8px; border-radius: 10px; }
.article-title { font-size: 15px; }
.article-body { font-size: 12px; line-height: 1.45; }

.profile-hero-card { padding: 18px; margin-bottom: 14px; }
.profile-hero-content { gap: 16px; }
.profile-avatar-large { width: 70px; height: 70px; font-size: 29px; }
.profile-grid { gap: 14px; }

.badges-grid,
.badges-grid-2col {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
}

.badge-item { gap: 10px; padding: 9px 11px; }
.badge-icon-box { width: 36px; height: 36px; font-size: 19px; }
.badge-details h4 { font-size: 12px; }
.badge-details p { font-size: 10px; }

.schedule-editor-panel { margin-top: 12px; }
.schedule-editor-row { padding: 8px 10px; }

.team-chat-panel { min-height: 470px; }
.team-chat-messages { min-height: 290px; max-height: 420px; }

.hall-grid { gap: 12px; }
.hall-column { padding: 10px; border-radius: 11px; }
.hall-winner-card { padding: 9px 10px; border-radius: 10px; }
.hall-winner-card.is-featured { padding: 11px 10px; }

.team-agent-grid { gap: 9px; }
.team-agent-card { gap: 12px; padding: 11px 12px; border-radius: 11px; }
.team-card-stats > div { padding: 6px 8px; border-radius: 8px; }

.team-member-profile { gap: 12px; }
.team-profile-cover { min-height: 166px; padding: 20px 24px; border-radius: 17px; }
.team-profile-cover .team-profile-avatar { width: 78px; height: 78px; flex-basis: 78px; font-size: 22px; }
.team-profile-title-row h2 { font-size: 23px; }
.team-profile-tagline { margin: 5px 0 10px; }
.team-profile-rank-card { padding: 12px 16px; border-radius: 13px; }
.team-profile-rank-card strong { font-size: 28px; }
.team-member-profile-stats { gap: 10px; }
.team-member-profile-stats .stat-card { min-height: 92px; }
.team-profile-content-grid { gap: 12px; }
.team-profile-progress-copy { margin-top: 19px; }
.team-profile-achievements-card .badges-grid-2col { margin-top: 10px; }

@media (max-width: 1100px) {
  .team-agent-card {
    grid-template-columns: minmax(260px, 1fr) minmax(330px, 1fr);
  }
  .team-card-open { grid-column: 1 / -1; text-align: right; }
  .team-member-profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-profile-content-grid { grid-template-columns: 1fr; }
  .team-profile-card-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .team-profile-card-grid.is-collapsed .team-collectible-card:nth-child(n+6) { display: none; }
}

@media (max-width: 900px) {
  .hall-grid { grid-template-columns: 1fr; }
  .team-agent-card { grid-template-columns: 1fr; }
  .team-card-open { grid-column: auto; }
}

@media (max-width: 760px) {
  .team-feature-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .schedule-editor-row {
    grid-template-columns: 1fr 1fr;
  }

  .schedule-editor-row > strong { grid-column: 1 / -1; }
  .team-chat-panel { min-height: 0; }
  .team-chat-messages { min-height: 320px; }
  .team-chat-message { max-width: 88%; }
  .team-chat-compose { grid-template-columns: 1fr; }
  .team-chat-compose .btn-primary { width: 100%; }
  .chat-header-meta { flex-wrap: wrap; }
  .chat-retention-note::before { display: none; }
  .hall-winner-card { grid-template-columns: 38px minmax(0, 1fr); }
  .hall-winner-score { grid-column: 2; }
  .team-summary-pills { flex-wrap: wrap; }
  .team-agent-card-head { grid-template-columns: 46px minmax(0, 1fr); }
  .team-card-live-status { grid-column: 2; }
  .team-card-stats { grid-template-columns: repeat(3, minmax(86px, 1fr)); overflow-x: auto; }
  .team-member-profile-stats { grid-template-columns: 1fr; }
  .team-profile-cover {
    align-items: flex-start;
    flex-direction: column;
    padding: 25px 22px;
  }
  .team-profile-identity { align-items: flex-start; }
  .team-profile-cover .team-profile-avatar { width: 74px; height: 74px; flex-basis: 74px; }
  .team-profile-rank-card { justify-items: start; width: 100%; min-width: 0; }
  .team-profile-title-row h2 { width: 100%; font-size: 21px; }
  .team-social-profile-head {
    grid-template-columns: 1fr;
    grid-template-areas: "identity" "rank" "stats" "level";
  }
  .team-social-profile-head .team-profile-identity { align-items: center; }
  .team-profile-inline-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-profile-inline-stats > div { padding: 9px 10px; }
  .team-profile-inline-stats > div:first-child { padding-left: 10px; }
  .team-profile-inline-stats > div:nth-child(2n) { border-right: 0; }
  .team-profile-inline-stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--border-color); }
  .team-profile-schedule-week {
    grid-template-columns: repeat(7, minmax(86px, 1fr));
    overflow-x: auto;
  }
  .team-profile-achievements-card .badges-grid-2col { grid-template-columns: 1fr; }
  .team-profile-collection-head { align-items: flex-start; flex-direction: column; gap: 9px; }
  .team-profile-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team-profile-card-grid.is-collapsed .team-collectible-card:nth-child(n+5) { display: none; }
  .team-card-preview { grid-template-columns: 1fr; width: min(300px, 100%); max-height: calc(100vh - 30px); overflow-y: auto; }
  .team-card-preview > img { width: min(170px, 100%); margin: 0 auto; }
  .team-achievement-preview { width: min(300px, 100%); }
}

/* Keep the service-role cover gold even when a personal cover theme is saved. */
.team-member-profile.is-leadership-profile .team-profile-cover-art[data-profile-kind="leadership"] {
  background: linear-gradient(125deg, #5d3a08, #b27b1c 52%, #f3c969) !important;
}

/* Crowns, prestige hierarchy and leadership presence */
.team-profile-modern-head .team-profile-progress-copy strong,
.team-profile-modern-head .team-profile-progress-copy span {
  color: #fff !important;
  text-shadow: 0 1px 7px rgba(0, 18, 46, .58);
}
.team-profile-modern-head .team-profile-progress-copy strong { font-size: 11px; }

.team-profile-crown-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 7px;
}
.team-profile-crown-row[hidden] { display: none !important; }
.season-crown {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 27px;
  padding: 4px 8px;
  color: #fff;
  background: rgba(3, 20, 47, .48);
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 999px;
  line-height: 1;
  box-shadow: 0 5px 13px rgba(0, 16, 38, .16);
  backdrop-filter: blur(8px);
}
.season-crown .ui-icon { width: 13px; height: 13px; }
.season-crown strong { color: inherit; font-size: 11px; }
.season-crown small { color: rgba(255,255,255,.78); font-size: 8px; font-weight: 650; }
.season-crown.crown-month { border-color: rgba(255, 220, 117, .75); }
.season-crown.crown-week { border-color: rgba(150, 216, 255, .62); }
.season-crown.crown-tier-bronze .ui-icon { color: #d9954d; }
.season-crown.crown-tier-silver .ui-icon { color: #dce7f4; filter: drop-shadow(0 0 4px rgba(220,231,244,.45)); }
.season-crown.crown-tier-royal .ui-icon { width: 16px; height: 16px; color: #ffd34f; filter: drop-shadow(0 0 5px rgba(255,196,31,.72)); }
.season-crown.crown-tier-diamond {
  background: linear-gradient(135deg, rgba(82,50,151,.82), rgba(10,142,181,.78));
  border-color: #a9e8ff;
}
.season-crown.crown-tier-diamond .ui-icon { width: 17px; height: 17px; color: #dff9ff; filter: drop-shadow(0 0 6px #73dcff); }

.hall-winner-card.kind-month {
  grid-template-columns: 46px minmax(0, 1fr) auto;
  min-height: 72px;
  background: linear-gradient(135deg, #fffaf0, #fffefb 64%, #f4f9ff);
  border: 1px solid #dfc36c;
  box-shadow: 0 8px 20px rgba(137, 96, 14, .08);
}
.hall-winner-card.kind-month.is-featured {
  background: linear-gradient(135deg, #fff2bd, #fffaf0 52%, #f8fbff);
  border: 2px solid #d9ad32;
  box-shadow: 0 12px 26px rgba(149, 102, 10, .15);
}
.hall-winner-card.kind-month .hall-winner-avatar { width: 44px; height: 44px; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #e3bd4f; }
.hall-winner-card.kind-month .hall-winner-copy .agent-profile-link { font-size: 13px; font-weight: 800; }
.hall-winner-avatar > .season-crown.is-compact {
  position: absolute;
  z-index: 3;
  top: -11px;
  right: -14px;
  min-width: 30px;
  min-height: 21px;
  justify-content: center;
  gap: 3px;
  padding: 3px 5px;
  color: #fff;
  background: #a86825;
  border: 2px solid #fff;
  box-shadow: 0 4px 10px rgba(82, 53, 9, .25);
}
.hall-winner-avatar > .season-crown.is-compact small { display: none; }
.hall-winner-avatar > .season-crown.is-compact .ui-icon { width: 11px; height: 11px; color: #fff; }
.hall-winner-avatar > .season-crown.is-compact.crown-tier-silver { background: linear-gradient(135deg, #8494a6, #b7c4d0); }
.hall-winner-avatar > .season-crown.is-compact.crown-tier-royal { min-width: 34px; min-height: 24px; top: -13px; background: linear-gradient(135deg, #d9910f, #f3c646); }
.hall-winner-avatar > .season-crown.is-compact.crown-tier-diamond { min-width: 36px; min-height: 25px; top: -14px; background: linear-gradient(135deg, #6c43c3, #159bc2); }
.hall-winner-card.kind-month .hall-winner-avatar > .season-crown.is-compact { transform: scale(1.08); transform-origin: bottom left; }
.hall-winner-score { display: grid; justify-items: end; gap: 1px; }
.hall-winner-score strong { color: inherit; font-size: 13px; }
.hall-winner-score span { color: var(--text-dim); font-size: 8px; font-weight: 650; }
.hall-winner-card.kind-month .hall-winner-score {
  padding: 5px 8px;
  color: #865900;
  background: #fff2c6;
  border: 1px solid #ead08a;
  border-radius: 8px;
}

.schedule-table tr.is-leadership-row td { background: linear-gradient(90deg, #fffaf0, #fffdf8); border-color: #ead69b; }
.schedule-table tr.is-leadership-row td:first-child { border-left: 3px solid #d0a02e; }
.schedule-role-badge {
  width: fit-content;
  display: block;
  margin-top: 3px;
  color: var(--text-dim);
  font-size: 8px;
  font-weight: 750;
}
.schedule-role-badge.role-leadership,
.agent-profile-link.role-leadership { color: #94680d; }
.mini-avatar.is-leadership-avatar { box-shadow: 0 0 0 2px #f3d77d, 0 5px 12px rgba(130, 86, 8, .16); }
.team-chat-message.is-leadership-author .team-chat-bubble {
  background: linear-gradient(135deg, #fffaf0, #fff4d3);
  border-color: #e5ca78;
  box-shadow: 0 5px 14px rgba(125, 86, 11, .09);
}
.team-chat-message.is-leadership-author .team-chat-author { color: #97690c; }

body.theme-dark .hall-winner-card.kind-month { background: linear-gradient(135deg, #2a220f, #171c26); border-color: #7b6327; }
body.theme-dark .hall-winner-card.kind-month.is-featured { background: linear-gradient(135deg, #3a2d0d, #1a202d); border-color: #b18426; }
body.theme-dark .hall-winner-card.kind-month .hall-winner-score { color: #f1cb68; background: #33270e; border-color: #72591e; }
body.theme-dark .schedule-table tr.is-leadership-row td { background: #251f12; border-color: #5f4c22; }
body.theme-dark .team-chat-message.is-leadership-author .team-chat-bubble { color: #f8e7b1; background: #2c230f; border-color: #6c5520; }

@media (max-width: 760px) {
  .hall-winner-card.kind-month { grid-template-columns: 46px minmax(0, 1fr); }
  .hall-winner-card.kind-month .hall-winner-score { grid-column: 2; justify-self: start; }
}

/* Unified workspace density — one scale across every main section */
.tab-view {
  width: 100%;
  max-width: none;
}

.tab-view > .panel-card,
.tab-view > .feedback-layout,
.tab-view > .team-member-profile {
  width: 100%;
  max-width: none;
}

#view-overview > .panel-card {
  margin-top: 12px !important;
}

.panel-card {
  padding: 13px 14px;
  gap: 11px;
  border-radius: 11px;
}

.panel-title-bar {
  min-height: 36px;
  gap: 12px;
}

.panel-title-bar h3 { font-size: 14px; }
.team-feature-heading p,
.leaderboard-title-bar > div:first-child p { font-size: 9px; }

.stats-grid { gap: 10px; }
.stat-card {
  min-height: 82px;
  padding: 11px 12px;
  gap: 5px;
  border-radius: 10px;
}
.stat-header span { font-size: 10px; }
.stat-icon { width: 28px; height: 28px; }
.stat-value { font-size: 22px; }

th { padding: 8px 10px; }
td { height: 48px; padding: 8px 10px; }
.mini-avatar { width: 32px; height: 32px; }

.leaderboard-league-summary {
  min-height: 58px;
  grid-template-columns: 38px minmax(160px, 1fr) minmax(80px, .3fr) minmax(150px, .6fr);
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
}
.leaderboard-league-summary > div:not(.leaderboard-league-mark) { padding-left: 10px; }
.leaderboard-league-mark { width: 36px; height: 36px; border-radius: 9px; font-size: 11px; }
.leaderboard-league-summary strong { font-size: 12px; }

.team-agent-grid { gap: 7px; }
.team-agent-card {
  min-height: 58px;
  grid-template-columns: minmax(250px, 1fr) minmax(330px, .95fr) 112px;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 9px;
}
.team-agent-card-head { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 9px; }
.team-agent-card .team-card-avatar { width: 38px; height: 38px; font-size: 11px; }
.team-card-stats { gap: 6px; }
.team-card-stats > div { padding: 5px 7px; border-radius: 7px; }
.team-card-stats strong { margin-top: 2px; font-size: 12px; }
.team-card-open { font-size: 9px; }

.schedule-table th:not(:first-child),
.schedule-table td:not(:first-child) { min-width: 92px; }
.schedule-table th:first-child,
.schedule-table td:first-child { min-width: 170px; }
.schedule-shift,
.schedule-day-off,
.schedule-not-set { min-height: 26px; padding: 4px 7px; border-radius: 7px; }

.hall-league-banner {
  min-height: 54px;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 9px;
}
.hall-league-banner > span { width: 32px; height: 32px; border-radius: 8px; }
.hall-grid { gap: 10px; }
.hall-column { padding: 8px; border-radius: 9px; }
.hall-list { gap: 6px; }
.hall-winner-card,
.hall-winner-card.kind-month {
  min-height: 58px;
  padding: 7px 8px;
  border-radius: 8px;
}
.hall-winner-card.is-featured,
.hall-winner-card.kind-month.is-featured { padding: 8px; }

.team-chat-panel { min-height: 440px; }
.team-chat-messages { min-height: 270px; max-height: 390px; }

.feedback-layout {
  grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
  gap: 10px;
}
.feedback-heading { margin-bottom: 10px; }
.feedback-heading h2 { font-size: 18px; }
.feedback-post { padding: 10px 11px; }
.feedback-post > h3 { margin-top: 8px; font-size: 13px; }
.feedback-post > p { font-size: 10px; }

/* The long feedback action uses exactly the same glass surface as header icons. */
.topbar-feedback-btn {
  height: 36px;
  min-height: 36px;
  padding: 0 10px;
  gap: 6px;
  color: #fff;
  background: rgba(5, 33, 70, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 10px;
  font-size: 9px;
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.topbar-feedback-btn:hover,
.topbar-feedback-btn.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.42);
  transform: translateY(-1px);
}

@media (max-width: 1100px) {
  .team-agent-card { grid-template-columns: minmax(240px, 1fr) minmax(300px, 1fr); }
}

@media (max-width: 900px) {
  .team-agent-card { grid-template-columns: 1fr; }
  .feedback-layout { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .panel-card { padding: 11px; }
  .stat-card { min-height: 74px; }
  .leaderboard-league-summary { grid-template-columns: 36px 1fr 1fr; }
  .team-agent-card { min-height: 0; }
}

/* Avatar crowns: centered above the portrait and slightly overlapping its rim. */
.person-avatar-wrap .avatar-win-crown,
.profile-avatar-win-wrap .avatar-win-crown {
  top: -9px;
  left: 50%;
  right: auto;
  width: 28px;
  min-width: 28px;
  height: 18px;
  padding: 0;
  color: #ad7128;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: translateX(-50%);
  pointer-events: none;
}

.person-avatar-wrap .avatar-win-crown .ui-icon,
.profile-avatar-win-wrap .avatar-win-crown .ui-icon {
  width: 100%;
  height: 100%;
  color: currentColor;
  fill: currentColor;
  stroke: #fff;
  stroke-width: 1.25;
  filter: drop-shadow(0 2px 2px rgba(36, 47, 63, .28));
}

.person-avatar-wrap .avatar-win-crown b,
.profile-avatar-win-wrap .avatar-win-crown b {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 12px;
  height: 12px;
  display: grid;
  place-items: center;
  padding: 0 2px;
  color: #fff;
  background: #27415f;
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow: 0 2px 5px rgba(28, 43, 61, .24);
  font-size: 6px;
  line-height: 1;
}

.person-avatar-wrap .avatar-win-crown.crown-tier-silver,
.profile-avatar-win-wrap .avatar-win-crown.crown-tier-silver { color: #9aa9b8; background: transparent; }
.person-avatar-wrap .avatar-win-crown.crown-tier-royal,
.profile-avatar-win-wrap .avatar-win-crown.crown-tier-royal { top: -8px; width: 30px; min-width: 30px; height: 19px; color: #efb326; background: transparent; }
.person-avatar-wrap .avatar-win-crown.crown-tier-diamond,
.profile-avatar-win-wrap .avatar-win-crown.crown-tier-diamond { top: -9px; width: 31px; min-width: 31px; height: 20px; color: #7288d9; background: transparent; box-shadow: none; }

.profile-avatar-win-wrap .profile-avatar-crown .avatar-win-crown {
  top: -11px;
  left: 50%;
  right: auto;
  width: 46px;
  min-width: 46px;
  height: 30px;
  transform: translateX(-50%);
  transform-origin: center bottom;
}

.profile-avatar-win-wrap .profile-avatar-crown .avatar-win-crown.crown-tier-royal {
  top: -12px;
  width: 50px;
  min-width: 50px;
  height: 32px;
}

.profile-avatar-win-wrap .profile-avatar-crown .avatar-win-crown.crown-tier-diamond {
  top: -13px;
  width: 52px;
  min-width: 52px;
  height: 33px;
}

.profile-avatar-win-wrap .profile-avatar-crown .avatar-win-crown b {
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  font-size: 7px;
}

body.theme-dark .person-avatar-wrap .avatar-win-crown b,
body.theme-dark .profile-avatar-win-wrap .avatar-win-crown b {
  color: #eaf6ff;
  background: #102438;
  border-color: #dcecf8;
}

/* Profile content behaves as one centered three-tab navigation. */
.team-profile-section-tabs {
  width: 100%;
  justify-content: center;
  gap: 42px;
}

.team-profile-section-tab {
  min-width: 118px;
  text-align: center;
}

@media (max-width: 760px) {
  .team-profile-section-tabs { gap: 8px; }
  .team-profile-section-tab { min-width: 0; flex: 1; font-size: 10px; }
}

/* Team directory controls carried over from the original GLbot concept. */
.team-directory-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0 10px;
  border-bottom: 1px solid var(--border-color);
}

.team-filter-switch,
.team-directory-actions,
.team-view-switch {
  display: flex;
  align-items: center;
  gap: 7px;
}

.team-filter-switch { flex-wrap: wrap; }
.team-filter-btn {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 9px;
  font: inherit;
  font-size: 9px;
  font-weight: 750;
  cursor: pointer;
}
.team-filter-btn b { color: var(--text-dim); font-size: 8px; }
.team-filter-btn:hover { border-color: #9edcf2; }
.team-filter-btn.active { color: #087fc2; background: #e8f7ff; border-color: #9edcf2; }
.team-filter-btn.active b { color: #087fc2; }

.team-search-field {
  width: min(230px, 24vw);
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 9px;
}
.team-search-field:focus-within { border-color: #50bce4; box-shadow: 0 0 0 3px rgba(36, 166, 215, .1); }
.team-search-field .ui-icon { width: 14px; height: 14px; color: var(--text-dim); }
.team-search-field input { width: 100%; min-width: 0; color: var(--text-main); background: transparent; border: 0; outline: 0; font: inherit; font-size: 10px; }
.team-search-field input::placeholder { color: var(--text-dim); }

.team-sort-select {
  min-height: 34px;
  padding: 0 30px 0 10px;
  color: var(--text-main);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 9px;
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}

.team-view-switch {
  gap: 2px;
  padding: 3px;
  background: #edf3f8;
  border: 1px solid var(--border-color);
  border-radius: 10px;
}
.team-view-switch button { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; color: var(--text-dim); background: transparent; border: 0; border-radius: 7px; cursor: pointer; }
.team-view-switch button.active { color: #fff; background: #159fdb; box-shadow: 0 3px 8px rgba(21, 159, 219, .24); }
.team-view-switch .ui-icon { width: 14px; height: 14px; }

.team-agent-grid.is-grid-view { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.team-agent-grid.is-grid-view .team-agent-card { grid-template-columns: 1fr; align-items: stretch; }
.team-agent-grid.is-grid-view .team-card-open { text-align: right; }

body.theme-dark .team-filter-btn.active { color: #69d7f4; background: #12324a; border-color: #2e6682; }
body.theme-dark .team-filter-btn.active b { color: #69d7f4; }
body.theme-dark .team-view-switch { background: #132438; }
body.theme-dark .team-sort-select { color-scheme: dark; }

@media (max-width: 1180px) {
  .team-directory-toolbar { align-items: flex-start; flex-direction: column; }
  .team-directory-actions { width: 100%; }
  .team-search-field { width: min(360px, 100%); flex: 1; }
}

@media (max-width: 760px) {
  .team-directory-actions { align-items: stretch; flex-wrap: wrap; }
  .team-search-field { width: 100%; flex-basis: 100%; }
  .team-sort-select { flex: 1; }
  .team-agent-grid.is-grid-view { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .team-agent-card-head { grid-template-columns: 40px minmax(0, 1fr); }
  .team-card-live-status { grid-column: 2; justify-content: flex-start; overflow-x: auto; }
}

/* Shared shortcuts library */
.shortcut-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}
.shortcut-page-head h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
  color: var(--text-main);
  font-size: 22px;
}
.shortcut-page-head p { margin: 0; color: var(--text-muted); font-size: 11px; }
.shortcut-eyebrow { color: #078fc5; font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.shortcut-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
  padding: 12px;
}
.shortcut-search { position: relative; display: block; }
.shortcut-search .ui-icon { position: absolute; top: 50%; left: 12px; width: 15px; height: 15px; color: #7d8daa; transform: translateY(-50%); pointer-events: none; }
.shortcut-search input,
.shortcut-sort,
.shortcut-composer input,
.shortcut-composer select,
.shortcut-composer textarea {
  width: 100%;
  color: var(--text-main);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 9px;
  outline: none;
  font: inherit;
}
.shortcut-search input { height: 40px; padding: 0 13px 0 36px; font-size: 11px; }
.shortcut-search input:focus,
.shortcut-composer input:focus,
.shortcut-composer select:focus,
.shortcut-composer textarea:focus { border-color: #159dda; box-shadow: 0 0 0 3px rgba(21,157,218,.10); }
.shortcut-group-filters { display: flex; gap: 5px; padding: 3px; background: #edf3f8; border-radius: 10px; }
.shortcut-group-filters button {
  min-width: 42px;
  height: 34px;
  padding: 0 10px;
  color: #64748b;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  font-size: 10px;
  font-weight: 750;
}
.shortcut-group-filters button.active { color: #087dac; background: #fff; box-shadow: 0 2px 8px rgba(15,23,42,.08); }
.shortcut-sort { width: auto; min-width: 145px; height: 40px; padding: 0 10px; font-size: 10px; }
.shortcut-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 12px; align-items: stretch; }
.shortcut-grid > .team-feature-empty { grid-column: 1 / -1; }
.shortcut-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; padding: 15px; border: 1px solid #d7e4ee; border-top: 3px solid #1b9ed2; box-shadow: 0 8px 24px rgba(24,64,99,.07); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.shortcut-card:hover { border-color: #bad8e8; border-top-color: #1299d0; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(15,23,42,.11); }
.shortcut-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.shortcut-card-cr { min-width: 0; display: flex; align-items: center; gap: 7px; }
.shortcut-cr-group { flex: 0 0 auto; padding: 4px 7px; color: #075f89; background: #e4f5fc; border-radius: 6px; font-size: 9px; font-weight: 850; }
.shortcut-cr-group.is-rs { color: #5746b0; background: #eeeaff; }
.shortcut-cr-group.is-pr { color: #9a5a09; background: #fff1d8; }
.shortcut-cr-name { min-width: 0; overflow: hidden; color: #6a7a96; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.shortcut-card h3 { margin: 11px 0 7px; color: var(--text-main); font-size: 14px; line-height: 1.35; }
.shortcut-card-body { min-height: 62px; margin: 0 0 13px; overflow: hidden; color: var(--text-muted); font-size: 11px; line-height: 1.5; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; }
.shortcut-card-author { min-width: 0; flex: 0 1 auto; display: flex; align-items: center; gap: 6px; margin-left: auto; }
.shortcut-card-author .mini-avatar { flex: 0 0 auto; width: 27px; height: 27px; font-size: 8px; }
.shortcut-card-author > div:last-child { min-width: 0; }
.shortcut-card-author .agent-profile-link { display: block; max-width: 135px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.shortcut-card-author > div:last-child > span { display: block; margin-top: 1px; color: var(--text-dim); font-size: 9px; white-space: nowrap; }
.shortcut-card-actions { display: flex; align-items: center; gap: 8px; margin: 11px -15px -15px; padding: 10px 15px; background: linear-gradient(135deg, #f8fbfd, #f1f6fa); border-top: 1px solid #e0e9f0; }
.shortcut-like-btn { min-width: 104px; }
.shortcut-delete-btn { margin-left: auto; }
.profile-shortcut-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.profile-shortcut-grid .shortcut-card { --profile-shortcut-accent: #139ed0; min-height: 238px; padding: 17px 17px 0; border: 1px solid #d7e4ee; border-top: 3px solid var(--profile-shortcut-accent); border-radius: 13px; box-shadow: 0 6px 18px rgba(24,64,99,.055); transform: none; }
.profile-shortcut-grid .shortcut-card.is-rs { --profile-shortcut-accent: #8065d7; }
.profile-shortcut-grid .shortcut-card.is-pr { --profile-shortcut-accent: #d88a28; }
.profile-shortcut-grid .shortcut-card:hover { border-color: color-mix(in srgb, var(--profile-shortcut-accent) 34%, #d7e4ee); border-top-color: var(--profile-shortcut-accent); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(24,64,99,.10); }
.profile-shortcut-grid .shortcut-card-head { align-items: center; }
.profile-shortcut-grid .shortcut-card-cr { gap: 8px; }
.profile-shortcut-grid .shortcut-cr-group { padding: 4px 7px; font-size: 10px; }
.profile-shortcut-grid .shortcut-cr-name { color: var(--text-muted); font-size: 11px; font-weight: 600; }
.profile-shortcut-grid .shortcut-card-date { flex: 0 0 auto; color: var(--text-dim); font-size: 10px; white-space: nowrap; }
.profile-shortcut-grid .shortcut-card h3 { margin: 16px 0 10px; font-size: 15px; font-weight: 700; line-height: 1.4; }
.profile-shortcut-grid .shortcut-card-body { min-height: 0; margin: 0 0 16px; color: var(--text-muted); font-size: 13px; line-height: 1.58; -webkit-line-clamp: 5; }
.profile-shortcut-grid .shortcut-card-actions { margin: auto -17px 0; padding: 10px 17px; background: color-mix(in srgb, var(--profile-shortcut-accent) 3%, var(--bg-card)); border-color: var(--border-color); }
.profile-shortcut-grid .shortcut-like-btn { min-width: 48px; }
.profile-shortcut-grid .shortcut-copy-btn { min-width: 116px; }
.team-profile-shortcut-counter { padding: 5px 9px; color: #078fc5; background: #eaf7fd; border: 1px solid #ccebf7; border-radius: 999px; font-size: 11px; font-weight: 700; }
body.theme-dark .profile-shortcut-grid .shortcut-card { border-color: #26394c; }
body.theme-dark .profile-shortcut-grid .shortcut-card-actions { background: color-mix(in srgb, var(--profile-shortcut-accent) 5%, var(--bg-card)); border-color: #283b4e; }
body.theme-dark .team-profile-shortcut-counter { color: #72d8f7; background: #123247; border-color: #28576f; }

@media (max-width: 1400px) {
  .profile-shortcut-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1050px) {
  .profile-shortcut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .profile-shortcut-grid { grid-template-columns: 1fr; }
  .profile-shortcut-grid .shortcut-card { min-height: 0; }
}

.shortcut-composer-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(9,20,38,.55);
  backdrop-filter: blur(5px);
}
.shortcut-composer-overlay[hidden] { display: none !important; }
.shortcut-composer { width: min(680px, 96vw); max-height: 92vh; overflow-y: auto; padding: 22px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; box-shadow: 0 28px 80px rgba(4,15,30,.32); }
.shortcut-composer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.shortcut-composer-head h3 { margin: 4px 0 0; color: var(--text-main); font-size: 19px; }
.shortcut-composer-head > button { width: 34px; height: 34px; color: #64748b; background: #f4f7fa; border: 1px solid var(--border-color); border-radius: 9px; cursor: pointer; font-size: 20px; }
.shortcut-composer > p { margin: 8px 0 17px; color: var(--text-muted); font-size: 10px; }
.shortcut-form-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 10px; }
.shortcut-composer label { display: grid; gap: 6px; margin-bottom: 12px; color: #50617d; font-size: 10px; font-weight: 750; }
.shortcut-composer input,
.shortcut-composer select { height: 40px; padding: 0 11px; font-size: 11px; }
.shortcut-composer textarea { min-height: 170px; padding: 11px; resize: vertical; font-size: 11px; line-height: 1.5; }
.shortcut-composer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
#shortcut-form-status { margin-right: auto; color: #c14e54; font-size: 10px; }

body.theme-dark .shortcut-group-filters { background: #111f30; }
body.theme-dark .shortcut-group-filters button.active,
body.theme-dark .shortcut-composer-head > button { color: #9ecce2; background: #172638; border-color: #2b4258; }
body.theme-dark .shortcut-card { border-color: #26394c; }
body.theme-dark .shortcut-card-actions { background: linear-gradient(135deg, #111d2b, #132131); border-color: #283b4e; }

@media (max-width: 820px) {
  .shortcut-page-head { align-items: stretch; flex-direction: column; }
  .shortcut-page-head .btn-primary { align-self: flex-start; }
  .shortcut-toolbar { grid-template-columns: 1fr; }
  .shortcut-group-filters { justify-content: stretch; }
  .shortcut-group-filters button { flex: 1; }
  .shortcut-sort { width: 100%; }
}
@media (max-width: 560px) {
  .shortcut-grid { grid-template-columns: 1fr; }
  .shortcut-form-row { grid-template-columns: 1fr; gap: 0; }
  .shortcut-composer { padding: 16px; }
  .shortcut-card-actions { flex-wrap: wrap; }
  .shortcut-card-actions .team-action-button:not(.is-icon-only) { flex: 1; }
}

/* -------------------------------------------------------------
   SMS & Messages Tab Styling (High Contrast Light & Dark Themes)
------------------------------------------------------------- */
.messages-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}
.messages-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 8px;
}
.messages-page-subtitle {
  margin: 6px 0 0 0;
  color: var(--text-muted);
  font-size: 13px;
}
.sms-filters-row {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

/* Filter pills */
.sms-filter-btn {
  padding: 7px 16px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  background: #eef4fa;
  border: 1px solid #cbd5e1;
  color: #334155;
  transition: all 0.2s ease;
  font-family: inherit;
}
.sms-filter-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
  border-color: #94a3b8;
}
.sms-filter-btn.active {
  background: #0284c7;
  border-color: #0284c7;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.3);
}

/* SMS Cards Container */
#messages-cards-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Individual SMS Card */
.sms-card {
  padding: 18px 20px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-left: 4px solid #10b981;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  transition: all 0.25s ease;
}
.sms-card.is-unread {
  background: #fffafa;
  border: 1px solid #fca5a5;
  border-left: 4px solid #ef4444;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.12);
}
.sms-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}

.sms-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.sms-card-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sms-card-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #0f172a;
}
.sms-badge-unread {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  background: #fee2e2;
  color: #dc2626;
  border: 1px solid #f87171;
}
.sms-priority-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
}
.sms-priority-badge.priority-personal {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fca5a5;
}
.sms-priority-badge.priority-urgent {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fca5a5;
}
.sms-priority-badge.priority-important {
  background: #fffbeb;
  color: #b45309;
  border: 1px solid #fcd34d;
}
.sms-priority-badge.priority-normal {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #86efac;
}

.sms-status-read {
  font-size: 12px;
  color: #059669;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.btn-mark-single-read {
  background: #10b981;
  color: #ffffff;
  border: none;
  padding: 7px 16px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.35);
  transition: all 0.2s;
  font-family: inherit;
}
.btn-mark-single-read:hover {
  background: #059669;
  transform: translateY(-1px);
}

.sms-card-body {
  margin: 0 0 14px 0;
  font-size: 14px;
  color: #1e293b;
  line-height: 1.65;
  white-space: pre-wrap;
  font-weight: 500;
}
.sms-card.is-read .sms-card-body {
  color: #334155;
  font-weight: 400;
}

.sms-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #64748b;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}
.sms-author-name {
  color: #0f172a;
  font-weight: 700;
}
.sms-timestamp {
  color: #64748b;
}

/* Dark Theme Overrides for SMS */
body.theme-dark .sms-filter-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #94a3b8;
}
body.theme-dark .sms-filter-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #edf5ff;
  border-color: rgba(255, 255, 255, 0.25);
}
body.theme-dark .sms-filter-btn.active {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

body.theme-dark .sms-card {
  background: #111f31;
  border: 1px solid #263a52;
  border-left: 4px solid #10b981;
  box-shadow: none;
}
body.theme-dark .sms-card.is-unread {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-left: 4px solid #ef4444;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.18);
}
body.theme-dark .sms-card-title {
  color: #edf5ff;
}
body.theme-dark .sms-badge-unread {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.4);
}
body.theme-dark .sms-priority-badge.priority-personal,
body.theme-dark .sms-priority-badge.priority-urgent {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}
body.theme-dark .sms-priority-badge.priority-important {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.3);
}
body.theme-dark .sms-priority-badge.priority-normal {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
  border-color: rgba(16, 185, 129, 0.3);
}
body.theme-dark .sms-card-body {
  color: #cbd5e1;
}
body.theme-dark .sms-card.is-unread .sms-card-body {
  color: #f1f5f9;
}
body.theme-dark .sms-card-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}
body.theme-dark .sms-author-name {
  color: #edf5ff;
}
body.theme-dark .sms-timestamp {
  color: #94a3b8;
}

/* -------------------------------------------------------------
   Community board
------------------------------------------------------------- */
.community-page-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:9px; }
.community-eyebrow { color:#078fc5; font-size:11px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.community-page-head h2 { display:flex; align-items:center; gap:8px; margin:0; color:var(--text-main); font-size:22px; }
.community-page-head h2 .ui-icon { width:18px; height:18px; color:#0799d1; }
.community-page-head p { margin:0; color:var(--text-muted); font-size:13px; }
.community-head-actions { display:flex; align-items:center; gap:9px; }
.community-head-actions .pill-btn,
.community-head-actions .btn-primary { min-height:34px; padding:7px 11px; }
.community-tabs { display:flex; gap:3px; width:max-content; margin-bottom:10px; padding:3px; background:#eaf1f7; border:1px solid #dae5ee; border-radius:10px; }
.community-tabs button { min-width:126px; height:35px; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:0 12px; color:#60718a; background:transparent; border:0; border-radius:7px; cursor:pointer; font:inherit; font-size:13px; font-weight:800; }
.community-tabs button .ui-icon { width:14px; height:14px; }
.community-tabs button.active { color:#087da9; background:#fff; box-shadow:0 4px 12px rgba(32,70,105,.10); }
.community-panel[hidden],
.community-modal[hidden],
.community-shift-fields[hidden],
.community-event-visibility button[hidden] { display:none !important; }

.community-board-toolbar { display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.community-filter-select { display:flex; align-items:center; gap:7px; color:var(--text-dim); font-size:12px; font-weight:750; }
.community-filter-select select { min-width:175px; height:36px; padding:0 30px 0 11px; color:var(--text-main); background:var(--bg-card); border:1px solid var(--border-color); border-radius:8px; outline:none; font:inherit; font-size:13px; font-weight:700; }
.community-board-filters { display:flex; flex-wrap:wrap; gap:5px; }
.community-board-filters button { height:34px; padding:0 12px; color:#65768e; background:transparent; border:1px solid transparent; border-radius:8px; cursor:pointer; font:inherit; font-size:12px; font-weight:800; }
.community-board-filters button:hover { color:#087da9; background:#eff8fc; }
.community-board-filters button.active { color:#087da9; background:#e5f6fd; border-color:#b9e1f1; }
.community-board-count { flex:0 0 auto; color:var(--text-dim); font-size:12px; font-weight:750; }
.community-board-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,410px)); gap:10px; align-items:start; justify-content:start; }
.community-board-grid > .team-feature-empty { grid-column:1/-1; }
.community-post-card { --community-accent:#1a9ed3; position:relative; overflow:visible; gap:8px; padding:11px 12px; border:1px solid #d8e4ed; box-shadow:0 5px 16px rgba(24,64,99,.05); }
.community-post-card::before { display:none; }
.community-post-card.is-offer { --community-accent:#e9892b; }
.community-post-card.is-request { --community-accent:#17a978; }
.community-post-card.is-swap { --community-accent:#8258ce; }
.community-post-card.is-notice { --community-accent:#168fd0; }
.community-post-card.is-resolved { opacity:.82; }
.community-post-head { position:relative; display:flex; align-items:center; gap:8px; min-width:0; }
.community-post-meta { flex:0 0 auto; display:inline-flex; align-items:center; gap:4px; color:#65758b; font-size:11px; font-weight:800; white-space:nowrap; }
.community-post-meta i { width:6px; height:6px; background:var(--community-accent); border-radius:50%; }
.community-post-meta b { color:#b0bcc8; font-weight:700; }
.community-type-badge,
.community-post-status { display:inline-flex; align-items:center; min-height:25px; padding:0 8px; border-radius:999px; font-size:11px; font-weight:850; }
.community-type-badge { color:#99500a; background:#fff0df; border:1px solid #f5d2aa; }
.community-type-badge.is-request { color:#087557; background:#e8faf4; border-color:#bfe9db; }
.community-type-badge.is-swap { color:#6541a9; background:#f1ebff; border-color:#d8c9f5; }
.community-type-badge.is-notice { color:#087aa8; background:#e8f7fd; border-color:#c1e5f3; }
.community-vertical-badge { padding:4px 7px; color:#566b83; background:#f3f6fa; border:1px solid #dfe7ee; border-radius:999px; font-size:10px; font-weight:800; }
.community-post-status { color:#65758b; background:#f3f6f8; border:1px solid #e0e7ed; }
.community-post-status.is-open { color:#087b60; background:#ebfaf5; border-color:#bde9da; }
.community-post-status.is-claimed { color:#1769a5; background:#e9f5ff; border-color:#bddbf2; }
.community-card-menu { position:relative; margin-left:auto; }
.community-card-menu summary { width:27px; height:27px; display:grid; place-items:center; color:#718197; background:transparent; border:0; border-radius:7px; cursor:pointer; list-style:none; font-size:12px; font-weight:900; letter-spacing:1px; }
.community-card-menu summary::-webkit-details-marker { display:none; }
.community-card-menu summary:hover { background:#f1f6fa; }
.community-card-menu > div { position:absolute; z-index:15; top:30px; right:0; min-width:112px; display:grid; padding:4px; background:var(--bg-card); border:1px solid var(--border-color); border-radius:9px; box-shadow:0 12px 30px rgba(20,44,68,.16); }
.community-card-menu button { padding:7px 9px; color:var(--text-main); background:transparent; border:0; border-radius:6px; cursor:pointer; text-align:left; font:inherit; font-size:11px; }
.community-card-menu button:hover { background:#f1f6fa; }
.community-card-menu button.is-danger { color:#c33d52; }
.community-post-message { min-height:52px; display:flex; flex-direction:column; justify-content:center; gap:5px; padding:7px 2px 8px; }
.community-post-message h3 { margin:0; color:var(--text-main); font-size:17px; line-height:1.45; }
.community-post-body { margin:0; color:var(--text-muted); font-size:13px; line-height:1.55; white-space:pre-wrap; }
.community-shift-chip { display:flex; align-items:center; gap:7px; width:max-content; max-width:100%; padding:6px 8px; color:#445975; background:#f5f9fc; border:1px solid #dce8f0; border-radius:8px; font-size:11px; }
.community-shift-chip .ui-icon { width:14px; height:14px; color:var(--community-accent); }
.community-shift-chip span { padding-left:8px; border-left:1px solid #dce6ed; font-weight:750; }
.community-claimed-banner { display:flex; align-items:center; gap:8px; padding:9px 10px; color:#176998; background:#eaf6ff; border:1px solid #c4e1f4; border-radius:10px; font-size:11px; line-height:1.45; }
.community-claimed-banner .ui-icon { width:15px; height:15px; }
.community-post-author { min-width:0; flex:1; display:flex; align-items:center; gap:6px; }
.community-post-author .mini-avatar { flex:0 0 auto; width:27px; height:27px; font-size:8px; }
.community-post-author > div:last-child { min-width:0; }
.community-post-author .agent-profile-link { display:block; max-width:155px; overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.community-post-author span { display:block; margin-top:1px; color:var(--text-dim); font-size:10px; }
.community-claims,
.community-replies { display:grid; gap:7px; }
.community-claim-row,
.community-reply-row { display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:8px; align-items:center; padding:8px; background:#f6f9fc; border:1px solid #e2eaf1; border-radius:10px; }
.community-claim-row.is-accepted { background:#ecfaf5; border-color:#bfe6d8; }
.community-claim-row .mini-avatar,
.community-reply-row .mini-avatar { width:28px; height:28px; font-size:8px; }
.community-claim-row > div span { display:block; margin-top:2px; color:var(--text-dim); font-size:10px; }
.community-reply-row { grid-template-columns:28px minmax(0,1fr); align-items:start; }
.community-reply-row p { margin:2px 0 0; color:var(--text-muted); font-size:12px; line-height:1.45; }
.community-accept-btn { height:30px; display:inline-flex; align-items:center; gap:5px; padding:0 9px; color:#087a60; background:#fff; border:1px solid #a9dbc9; border-radius:8px; cursor:pointer; font:inherit; font-size:10px; font-weight:800; }
.community-accept-btn .ui-icon { width:12px; height:12px; }
.community-post-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:7px; padding-top:7px; border-top:1px solid var(--border-color); }
.community-post-actions { display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin-left:auto; }
.community-post-card .community-post-actions .team-action-button { min-height:31px; padding:4px 9px; gap:5px; border-radius:7px; font-size:11px; }
.community-post-card .community-post-actions .team-action-button .ui-icon { width:13px; height:13px; }
.community-post-card .community-post-actions .team-action-count { min-width:18px; height:18px; padding:0 4px; font-size:9px; }
.community-reply-form[hidden] { display:none !important; }
.community-reply-form { display:grid; grid-template-columns:minmax(0,1fr) 36px; gap:7px; padding:5px; background:#f7fafc; border:1px solid #dfe9f1; border-radius:11px; }
.community-reply-form .form-input { min-height:38px; padding:6px 8px; background:transparent; border:0; box-shadow:none; font-size:12px; }
.community-reply-form button { display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#15a8dc,#087fc0); border:0; border-radius:8px; cursor:pointer; }
.community-reply-form button .ui-icon { width:14px; height:14px; }

.community-modal { position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(9,20,38,.58); backdrop-filter:blur(6px); }
.community-compose-screen[hidden] { display:none !important; }
.community-compose-screen { min-height:calc(100vh - 110px); padding:8px 0 28px; }
#view-community.is-composing-post > .community-page-head,
#view-community.is-composing-post > .community-tabs,
#view-community.is-composing-post > .community-panel { display:none !important; }
.community-compose-screen .community-composer { width:min(700px,100%); margin:0 auto; box-shadow:none; }
.community-compose-screen .community-composer-head { justify-content:flex-start; align-items:center; }
.community-compose-screen .community-composer-head .community-compose-back { flex:0 0 auto; width:34px; font-size:18px; }
.community-composer { width:min(650px,96vw); max-height:92vh; overflow-y:auto; padding:21px; background:var(--bg-card); box-shadow:0 28px 80px rgba(4,15,30,.32); }
.community-composer-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.community-composer-head span { color:#078fc5; font-size:10px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.community-composer-head h3 { margin:3px 0 0; color:var(--text-main); font-size:19px; }
.community-composer-head > button { width:34px; height:34px; color:#65758a; background:#f3f7fa; border:1px solid var(--border-color); border-radius:9px; cursor:pointer; font-size:20px; }
.community-type-picker,
.community-event-visibility,
.community-vertical-picker { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.community-event-visibility { grid-template-columns:repeat(2,1fr); }
.community-vertical-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 10px; background:#f7fafc; border:1px solid #dfe8ef; border-radius:10px; }
.community-vertical-row > span { color:#586a83; font-size:11px; font-weight:800; }
.community-vertical-picker { width:min(280px,70%); grid-template-columns:repeat(2,1fr); }
.community-type-picker button,
.community-event-visibility button,
.community-vertical-picker button { min-height:39px; padding:6px 8px; color:#60718a; background:#f5f8fb; border:1px solid #dce6ef; border-radius:9px; cursor:pointer; font:inherit; font-size:11px; font-weight:800; }
.community-type-picker button.active,
.community-event-visibility button.active,
.community-vertical-picker button.active { color:#fff; background:linear-gradient(135deg,#159dd2,#397ee2); border-color:transparent; box-shadow:0 5px 14px rgba(22,132,202,.20); }
.community-shift-fields { display:grid; grid-template-columns:minmax(160px,1.4fr) 1fr 1fr; gap:9px; }
.community-shift-fields label { display:grid; gap:5px; color:#586a83; font-size:10px; font-weight:750; }
.community-composer textarea { resize:vertical; }
.community-composer-actions { display:flex; align-items:center; justify-content:flex-end; gap:9px; }
.community-composer-actions > span { margin-right:auto; color:#c24b56; font-size:11px; }

.community-calendar-layout { display:grid; grid-template-columns:minmax(540px,1.7fr) minmax(280px,.8fr); gap:14px; align-items:start; }
.community-calendar-card { padding:18px 20px; }
.community-calendar-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.community-calendar-head > div { text-align:center; }
.community-calendar-head h3 { margin:0; color:var(--text-main); font-size:20px; font-weight:850; text-transform:capitalize; }
.community-calendar-head > div button { margin-top:3px; padding:0; color:#078fc5; background:none; border:0; cursor:pointer; font:inherit; font-size:13px; font-weight:800; }
.community-calendar-nav { width:38px; height:38px; color:#4f6682; background:#f4f8fb; border:1px solid #dce6ee; border-radius:10px; cursor:pointer; font-size:24px; display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.community-calendar-weekdays,
.community-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.community-calendar-weekdays span { padding:6px 0; color:var(--text-dim); font-size:13px; font-weight:850; text-align:center; text-transform:uppercase; letter-spacing:0.04em; }
.community-calendar-day { min-height:74px; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; padding:9px 10px; color:var(--text-main); background:#fbfdff; border:1px solid #e2eaf1; border-radius:10px; cursor:pointer; font:inherit; font-size:15px; font-weight:850; }
.community-calendar-day:hover { border-color:#9ed6eb; background:#f2fbff; }
.community-calendar-day.is-other-month { opacity:.42; }
.community-calendar-day.is-today > span { width:28px; height:28px; display:grid; place-items:center; color:#fff; background:#0c9dd3; border-radius:50%; font-size:15px; font-weight:850; }
.community-calendar-day.is-selected { border-color:#159ed6; box-shadow:0 0 0 2px rgba(21,158,214,.15); }
.community-day-dots { display:flex; align-items:center; gap:5px; min-height:10px; }
.community-day-dots i,
.community-calendar-legend i,
.overview-community-event > i { width:9px; height:9px; display:inline-block; background:#178ed0; border-radius:50%; }
.community-day-dots i.is-private,
.community-calendar-legend i.is-private,
.overview-community-event.is-private > i { background:#8a5bd2; }
.community-day-dots i.is-assignment,
.community-calendar-legend i.is-assignment,
.overview-community-event.is-assignment > i { background:#ec8b2d; }
.community-day-dots b { color:var(--text-dim); font-size:11.5px; font-weight:750; }
.community-calendar-legend { display:flex; flex-wrap:wrap; gap:16px; padding-top:14px; border-top:1px solid var(--border-color); color:var(--text-muted); font-size:13px; font-weight:650; }
.community-calendar-legend span { display:inline-flex; align-items:center; gap:6px; }
.community-agenda-card { position:sticky; top:0; padding:18px 20px; }
.community-agenda-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.community-agenda-head span { color:var(--text-dim); font-size:12px; font-weight:850; text-transform:uppercase; letter-spacing:.08em; }
.community-agenda-head h3 { margin:4px 0 0; color:var(--text-main); font-size:22px; font-weight:850; }
.community-mini-add { width:36px; height:36px; color:#fff; background:linear-gradient(135deg,#16a8dd,#087fc0); border:0; border-radius:10px; cursor:pointer; font-size:22px; display:inline-flex; align-items:center; justify-content:center; }
.community-agenda-list { display:grid; gap:10px; margin-top:12px; }
.community-agenda-item { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:14px; padding:14px 16px; background:#f7fafc; border:1px solid #e0e9f0; border-left:5px solid #178ed0; border-radius:12px; }
.community-agenda-item.is-private { border-left-color:#8a5bd2; }
.community-agenda-item.is-assignment { border-left-color:#ec8b2d; }
.community-agenda-time { color:#334155; font-size:15px; font-weight:850; white-space:nowrap; }
.community-agenda-copy span { color:var(--text-dim); font-size:12px; font-weight:850; text-transform:uppercase; letter-spacing:0.04em; display:block; }
.community-agenda-copy h4 { margin:4px 0 3px; color:var(--text-main); font-size:16.5px; font-weight:800; line-height:1.35; }
.community-agenda-copy p { margin:0; color:var(--text-muted); font-size:14.5px; line-height:1.5; }
.community-agenda-copy small { display:block; margin-top:7px; color:var(--text-dim); font-size:13px; }
.community-agenda-item > button { width:30px; height:30px; display:grid; place-items:center; color:#a76570; background:#fff; border:1px solid #ebd6da; border-radius:8px; cursor:pointer; }
.community-agenda-item > button .ui-icon { width:14px; height:14px; }
.community-agenda-empty { min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--text-muted); text-align:center; }
.community-agenda-empty .ui-icon { width:28px; height:28px; color:#9ecfe1; }
.community-agenda-empty strong { color:var(--text-main); font-size:15px; }
.community-agenda-empty span { font-size:13px; }

.overview-community-card { margin-top:14px; }
.overview-community-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.overview-community-head h3 { display:flex; align-items:center; gap:7px; margin:3px 0 0; color:var(--text-main); font-size:15px; }
.overview-community-head h3 .ui-icon { width:16px; height:16px; color:#078fc5; }
.overview-community-days { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.overview-community-days button { position:relative; min-height:52px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:#60718a; background:#f7fafc; border:1px solid #e0e9f0; border-radius:9px; cursor:pointer; font:inherit; }
.overview-community-days button:hover { border-color:#a8d8e9; background:#f0faff; }
.overview-community-days button span { font-size:7px; text-transform:uppercase; }
.overview-community-days button strong { color:var(--text-main); font-size:13px; }
.overview-community-days button.is-today { border-color:#8fd0e8; background:#eaf8fd; }
.overview-community-days button i { position:absolute; top:5px; right:6px; min-width:15px; height:15px; display:grid; place-items:center; color:#fff; background:#8a5bd2; border-radius:999px; font-size:7px; font-style:normal; }
.overview-community-events { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.overview-community-event { display:flex; align-items:center; gap:8px; min-width:0; padding:9px 10px; background:#f7fafc; border:1px solid #e0e9f0; border-radius:9px; }
.overview-community-event > i { flex:0 0 auto; }
.overview-community-event > div { min-width:0; }
.overview-community-event strong { display:block; overflow:hidden; color:var(--text-main); font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.overview-community-event span { display:block; margin-top:2px; color:var(--text-dim); font-size:7px; }
.community-agenda-empty.is-compact { min-height:62px; grid-column:1/-1; }

/* Match the Overview panels to the sidebar's softer text palette and weights. */
#view-overview { --text-main:#4b6078; --text-muted:#667991; --text-dim:#667991; }
body.theme-dark #view-overview { --text-main:#d3e0ee; --text-muted:#a0b1c6; --text-dim:#a0b1c6; }
#view-overview .community-calendar-head h3,
#view-overview .community-agenda-head h3,
#view-overview .community-agenda-copy h4 { font-weight:600; }
#view-overview .community-calendar-head > div button,
#view-overview .community-calendar-weekdays span,
#view-overview .community-calendar-day,
#view-overview .community-calendar-day.is-today > span,
#view-overview .community-day-dots b,
#view-overview .community-agenda-head span,
#view-overview .community-agenda-time,
#view-overview .community-agenda-copy span,
#view-overview .community-agenda-empty strong { font-weight:500; }
#view-overview .community-agenda-time { color:var(--text-main); }
#view-overview .community-calendar-legend { font-weight:400; }

/* Compact Overview widget grid: leaves room for future dashboard tiles. */
#view-overview .stats-grid { gap:10px; }
#view-overview .stat-card { min-height:76px; padding:10px 12px; gap:4px; border-radius:11px; }
#view-overview .stat-header span { font-size:10px; }
#view-overview .stat-icon { width:27px; height:27px; border-radius:8px; }
#view-overview .stat-icon .ui-icon { width:14px; height:14px; }
#view-overview .stat-value { font-size:21px; line-height:1; font-weight:600; }
.overview-dashboard-grid { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:16px; margin-top:14px; align-items:stretch; }
.overview-calendar-card { min-width:0; margin:0; display:flex; flex-direction:column; justify-content:space-between; }
.overview-side-column { display:flex; flex-direction:column; gap:16px; min-width:0; height:100%; }
.overview-agenda-card { position:static; min-width:0; margin:0; flex:0 0 auto; max-height:280px; overflow-y:auto; }
.overview-ranking-card { min-width:0; margin:0; padding:16px 18px; border-radius:12px; flex:1 1 auto; display:flex; flex-direction:column; justify-content:space-between; min-height:0; }
.overview-widget .panel-title-bar { min-height:32px; margin:0 0 8px 0; }
.overview-widget .panel-title-bar h3 { font-size:16px; font-weight:600; }
.overview-ranking-card .table-wrapper { flex:1; display:flex; flex-direction:column; overflow:visible; min-height:0; }
.overview-ranking-card table { flex:1; width:100%; height:100%; table-layout:fixed; border-collapse:collapse; }
.overview-ranking-card th { padding:8px 10px; font-size:11.5px; font-weight:500; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.3px; }
.overview-ranking-card td { padding:8px 10px; font-size:13.5px; vertical-align:middle; }
.overview-ranking-card td strong { font-weight:inherit; }
.overview-ranking-card tbody tr { height:46px; transition:background .15s ease; }
.overview-ranking-card tbody tr:hover { background:rgba(22,168,221,.04); }
.overview-ranking-card th:nth-child(3),
.overview-ranking-card td:nth-child(3) { width:64px; text-align:center; font-weight:500; }
.overview-ranking-card th:nth-child(4),
.overview-ranking-card td:nth-child(4) { width:88px; text-align:right; font-weight:500; }
.overview-ranking-card .mini-avatar { width:32px; height:32px; font-size:11px; font-weight:500; }
.overview-ranking-card .agent-cell { gap:9px; }
.overview-ranking-card .agent-profile-link { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; font-weight:500; }
.overview-ranking-card .rank-badge { min-width:26px; font-size:15px; font-weight:500; }

@media (max-width:1180px) {
  .overview-dashboard-grid { grid-template-columns:1fr; }
  .overview-side-column { height:auto; }
  .overview-ranking-card { flex:none; }
}
@media (max-width:760px) {
  #view-overview .stats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .overview-dashboard-grid { margin-top:10px; }
  .overview-community-days { gap:4px; }
  .overview-community-days button { min-height:48px; }
  .overview-community-days button span { font-size:9px; }
  .overview-community-days button strong { font-size:14px; }
  .overview-community-events { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  #view-overview .stats-grid { grid-template-columns:1fr 1fr; }
  .overview-ranking-card th:nth-child(4),
  .overview-ranking-card td:nth-child(4) { display:none; }
  .overview-ranking-card th:nth-child(3),
  .overview-ranking-card td:nth-child(3) { width:22%; }
}

body.theme-dark .community-tabs,
body.theme-dark .community-board-toolbar,
body.theme-dark .community-shift-chip,
body.theme-dark .community-claim-row,
body.theme-dark .community-reply-row,
body.theme-dark .community-reply-form,
body.theme-dark .community-calendar-day,
body.theme-dark .community-agenda-item,
body.theme-dark .overview-community-days button,
body.theme-dark .overview-community-event { background:#152334; border-color:#2a3e52; }
body.theme-dark .community-tabs button.active { color:#78d7f4; background:#1d3145; }
body.theme-dark .community-post-card { border-color:#2a3e52; }
body.theme-dark .community-composer-head > button,
body.theme-dark .community-type-picker button,
body.theme-dark .community-event-visibility button,
body.theme-dark .community-vertical-picker button,
body.theme-dark .community-calendar-nav { color:#aec3d7; background:#172638; border-color:#2f455a; }
body.theme-dark .community-vertical-row,
body.theme-dark .community-vertical-badge { color:#aec3d7; background:#152334; border-color:#2a3e52; }
body.theme-dark .community-claimed-banner { color:#84d3f4; background:#123044; border-color:#28566d; }
body.theme-dark .community-accept-btn { color:#78dcbf; background:#173129; border-color:#326753; }
body.theme-dark .community-post-menu,
body.theme-dark .community-agenda-item > button { color:#e197a5; background:#30222a; border-color:#5b3442; }
body.theme-dark .community-filter-select select,
body.theme-dark .community-card-menu > div { background:#152334; border-color:#2a3e52; }
body.theme-dark .community-card-menu summary:hover,
body.theme-dark .community-card-menu button:hover { background:#1d3145; }
body.theme-dark .community-agenda-time { color:#94a3b8; }
body.theme-dark .overview-ranking-card tbody tr:hover { background:rgba(255,255,255,.04); }

@media (max-width:980px) {
  .community-calendar-layout { grid-template-columns:1fr; }
  .community-agenda-card { position:static; }
}
@media (max-width:760px) {
  .community-page-head { align-items:stretch; flex-direction:column; }
  .community-head-actions { flex-wrap:wrap; }
  .community-head-actions > button { flex:1; }
  .community-tabs { width:100%; }
  .community-tabs button { min-width:0; flex:1; }
  .community-board-toolbar { align-items:center; }
  .community-board-grid { grid-template-columns:1fr; }
  .community-calendar-day { min-height:54px; padding:6px; }
  .community-calendar-legend { gap:8px; }
  .community-shift-fields { grid-template-columns:1fr 1fr; }
  .community-shift-fields label:first-child { grid-column:1/-1; }
  .community-type-picker { grid-template-columns:1fr 1fr; }
  .community-vertical-row { align-items:stretch; flex-direction:column; }
  .community-vertical-picker { width:100%; }
  .overview-community-events { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .community-calendar-weekdays,
  .community-calendar-grid { gap:3px; }
  .community-calendar-day { min-height:46px; padding:5px; border-radius:7px; }
  .community-day-dots i { width:5px; height:5px; }
  .community-post-actions .team-action-button { flex:1; }
  .overview-community-days { gap:3px; }
  .overview-community-days button { min-height:46px; }
}

/* Unified Team & Community Hub Header & Subnav */
.team-hub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.team-hub-title-block h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  color: var(--text-main);
}
.team-hub-title-block h2 .ui-icon {
  width: 20px;
  height: 20px;
  color: #0799d1;
}
.team-hub-eyebrow {
  color: #078fc5;
  font-size: 10.5px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.team-hub-subnav {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: #eaf1f7;
  border: 1px solid #dae5ee;
  border-radius: 10px;
}
.team-subnav-btn {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  color: #60718a;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  user-select: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 800;
  transition: all 0.15s ease;
}
.team-subnav-btn * {
  pointer-events: none;
}
.team-subnav-btn .ui-icon {
  width: 15px;
  height: 15px;
}
.team-subnav-btn:hover {
  color: #087da9;
}
.team-subnav-btn.active {
  color: #087da9;
  background: #fff;
  box-shadow: 0 3px 10px rgba(32, 70, 105, 0.12);
}

.team-hub-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Profiles are a detail view, not another Team Hub subtab. Keep the selected subtab for Back. */
#view-team.is-viewing-profile > .team-hub-header,
#view-team.is-viewing-profile > .team-subpanel:not(#team-subpanel-roster) {
  display: none !important;
}
#view-team.is-viewing-profile:not(.is-composing-post) > #team-subpanel-roster {
  display: block !important;
}

#view-team.is-composing-post > .team-hub-header,
#view-team.is-composing-post > .team-subpanel {
  display: none !important;
}

body.theme-dark .team-hub-header {
  background: #111e2e;
  border-color: #22354a;
}
body.theme-dark .team-hub-subnav {
  background: #152334;
  border-color: #2a3e52;
}
body.theme-dark .team-subnav-btn {
  color: #8da4be;
}
body.theme-dark .team-subnav-btn:hover {
  color: #78d7f4;
}
body.theme-dark .team-subnav-btn.active {
  color: #78d7f4;
  background: #1d3145;
}

@media (max-width: 900px) {
  .team-hub-header {
    flex-direction: column;
    align-items: stretch;
  }
  .team-hub-subnav {
    width: 100%;
  }
  .team-subnav-btn {
    flex: 1;
    min-width: 0;
    padding: 0 6px;
    font-size: 11px;
  }
  .team-hub-actions {
    justify-content: flex-end;
  }
}

/* -------------------------------------------------------------
 * STATS & KPI TAB STYLES
 * ------------------------------------------------------------- */
.stats-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 22px;
}

.stats-page-title-block h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  margin: 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

body.theme-dark .stats-page-title-block h2 {
  color: #f8fafc;
}

.stats-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #0284c7;
}

body.theme-dark .stats-eyebrow {
  color: #38bdf8;
}

.stats-page-title-block p {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}

body.theme-dark .stats-page-title-block p {
  color: #94a3b8;
}

.stats-page-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.stats-line-switch {
  display: inline-flex;
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(15, 23, 42, 0.1);
  padding: 3px;
  border-radius: 10px;
  gap: 4px;
}

body.theme-dark .stats-line-switch {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

.stats-line-btn {
  border: none;
  background: transparent;
  color: #64748b;
  font-weight: 700;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
}

body.theme-dark .stats-line-btn {
  color: #94a3b8;
}

.stats-line-btn.active {
  background: #0284c7;
  color: #fff;
  box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
}

body.theme-dark .stats-line-btn.active {
  background: #38bdf8;
  color: #0f172a;
}

.stats-personal-line-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #0369a1;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  padding: 5px 12px;
}
body.theme-dark .stats-personal-line-tag {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.25);
  color: #38bdf8;
}
.stats-personal-line-tag strong {
  font-weight: 800;
  color: #0284c7;
}
body.theme-dark .stats-personal-line-tag strong {
  color: #7dd3fc;
}

.stats-week-select {
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  color: #1e293b;
}

body.theme-dark .stats-week-select {
  background: #1e293b;
  color: #f1f5f9;
  border-color: rgba(255, 255, 255, 0.12);
}

/* 4 KPI Summary Cards Grid */
.stats-kpi-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.kpi-card {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 16px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

body.theme-dark .kpi-card:hover {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

.kpi-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.kpi-card-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
}

body.theme-dark .kpi-card-title {
  color: #94a3b8;
}

.kpi-card-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
}

.kpi-icon-pill {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kpi-icon-pill svg {
  width: 15px;
  height: 15px;
}

.kpi-card-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.kpi-card-value {
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
}

body.theme-dark .kpi-card-value {
  color: #f8fafc;
}

.kpi-card-trend {
  font-size: 12px;
  font-weight: 700;
}

.kpi-card-footer {
  font-size: 11.5px;
  color: #64748b;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  padding-top: 8px;
  margin-top: 4px;
}

body.theme-dark .kpi-card-footer {
  color: #94a3b8;
  border-top-color: rgba(255, 255, 255, 0.06);
}

/* Daily Breakdown Table */
.stats-table-card {
  padding: 22px;
  border-radius: 16px;
}

.stats-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.stats-table-header h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: #0f172a;
}

body.theme-dark .stats-table-header h3 {
  color: #f8fafc;
}

.stats-table-header p {
  font-size: 12px;
  color: #64748b;
  margin: 0;
}

body.theme-dark .stats-table-header p {
  color: #94a3b8;
}

.stats-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11.5px;
  color: #64748b;
  flex-wrap: wrap;
}

body.theme-dark .stats-legend {
  color: #94a3b8;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.legend-dot.green-dark, .legend-dot.purple { background: #10b981; }
.legend-dot.green-light, .legend-dot.green { background: #84cc16; }
.legend-dot.yellow { background: #f59e0b; }
.legend-dot.orange { background: #f97316; }
.legend-dot.red { background: #ef4444; }

.kpi-table-responsive {
  width: 100%;
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
}

body.theme-dark .kpi-table-responsive {
  border-color: rgba(255, 255, 255, 0.08);
}

.kpi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: left;
}

.kpi-table th {
  background: rgba(15, 23, 42, 0.03);
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  white-space: nowrap;
}

body.theme-dark .kpi-table th {
  background: rgba(255, 255, 255, 0.03);
  color: #94a3b8;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.kpi-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  color: #0f172a;
  white-space: nowrap;
}

body.theme-dark .kpi-table td {
  border-bottom-color: rgba(255, 255, 255, 0.06);
  color: #f1f5f9;
}

.kpi-td-date {
  font-weight: 700;
  color: #0f172a;
}
body.theme-dark .kpi-td-date {
  color: #f8fafc;
}

.kpi-td-day {
  font-weight: 600;
  color: #475569;
}
body.theme-dark .kpi-td-day {
  color: #94a3b8;
}

.kpi-td-num {
  font-weight: 700;
  color: #0f172a;
  text-align: center;
}
body.theme-dark .kpi-td-num {
  color: #f8fafc;
}

.kpi-td-rate {
  font-weight: 700;
  color: #0284c7;
  text-align: center;
}
body.theme-dark .kpi-td-rate {
  color: #38bdf8;
}

.kpi-td-status {
  font-weight: 600;
  font-size: 12px;
  text-align: right;
  color: #1e293b;
}
body.theme-dark .kpi-td-status {
  color: #e2e8f0;
}

/* Line Tags */
.kpi-line-tag {
  display: inline-flex;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.kpi-line-tag.cs {
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
}
body.theme-dark .kpi-line-tag.cs {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.35);
}

.kpi-line-tag.rs {
  background: #fce7f3;
  color: #be185d;
  border: 1px solid #fbcfe8;
}
body.theme-dark .kpi-line-tag.rs {
  background: rgba(236, 72, 153, 0.15);
  color: #f472b6;
  border: 1px solid rgba(236, 72, 153, 0.35);
}

.kpi-line-tag.past {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}
body.theme-dark .kpi-line-tag.past {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.35);
}

.kpi-line-tag.vs {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}
body.theme-dark .kpi-line-tag.vs {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.38);
}

/* =============================================================
   UNIFIED MINIMALIST SCORECARD & KPI STYLES
   ============================================================= */
.stats-quality-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 8px;
}

.stats-quality-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stats-quality-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}

[data-theme="light"] .stats-quality-title,
body.light-theme .stats-quality-title {
  color: #0f172a;
}

.stats-quality-role-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(56, 189, 248, 0.12);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.25);
}

.stats-quality-period-toggle {
  display: inline-flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}

.stats-quality-period-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}

.stats-quality-period-btn:hover {
  color: #f1f5f9;
  background: rgba(255, 255, 255, 0.05);
}

.stats-quality-period-btn.active {
  background: #0284c7;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .stats-quality-period-toggle,
body.light-theme .stats-quality-period-toggle {
  background: rgba(241, 245, 249, 0.9);
  border-color: rgba(203, 213, 225, 0.8);
}

[data-theme="light"] .stats-quality-period-btn,
body.light-theme .stats-quality-period-btn {
  color: #64748b;
}

[data-theme="light"] .stats-quality-period-btn:hover,
body.light-theme .stats-quality-period-btn:hover {
  color: #0f172a;
}

[data-theme="light"] .stats-quality-period-btn.active,
body.light-theme .stats-quality-period-btn.active {
  background: #0284c7;
  color: #ffffff;
}

.stats-kpi-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.kpi-metric-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(30, 41, 59, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 0.15s ease, background 0.15s ease;
  min-height: 94px;
}

[data-theme="light"] .kpi-metric-card,
body.light-theme .kpi-metric-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.kpi-metric-card:hover {
  background: rgba(30, 41, 59, 0.75);
  border-color: rgba(255, 255, 255, 0.16);
}

[data-theme="light"] .kpi-metric-card:hover,
body.light-theme .kpi-metric-card:hover {
  background: #f8fafc;
  border-color: rgba(0, 0, 0, 0.15);
}

.kpi-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}

.kpi-card-metric-label {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

[data-theme="light"] .kpi-card-metric-label,
body.light-theme .kpi-card-metric-label {
  color: #64748b;
}

.kpi-score-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  white-space: nowrap;
}

.kpi-score-badge.star {
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}
[data-theme="light"] .kpi-score-badge.star,
body.light-theme .kpi-score-badge.star {
  background: #d1fae5;
  color: #047857;
  border-color: #6ee7b7;
}

.kpi-score-badge.good {
  background: rgba(132, 204, 22, 0.18);
  color: #a3e635;
  border: 1px solid rgba(132, 204, 22, 0.35);
}
[data-theme="light"] .kpi-score-badge.good,
body.light-theme .kpi-score-badge.good {
  background: #ecfccb;
  color: #4d7c0f;
  border-color: #bef264;
}

.kpi-score-badge.warn {
  background: rgba(245, 158, 11, 0.16);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.kpi-score-badge.orange {
  background: rgba(249, 115, 22, 0.16);
  color: #fb923c;
  border: 1px solid rgba(249, 115, 22, 0.3);
}

.kpi-score-badge.bad {
  background: rgba(239, 68, 68, 0.16);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.kpi-score-badge.neutral {
  background: rgba(148, 163, 184, 0.12);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.2);
}

.kpi-score-badge.blue {
  background: rgba(56, 189, 248, 0.15);
  color: #38bdf8;
  border: 1px solid rgba(56, 189, 248, 0.3);
}

/* Card score theme variants */
.kpi-metric-card.star {
  border-top: 3px solid #10b981;
  border-color: rgba(16, 185, 129, 0.28);
}
.kpi-metric-card.star .kpi-card-num {
  color: #34d399;
}
[data-theme="light"] .kpi-metric-card.star .kpi-card-num,
body.light-theme .kpi-metric-card.star .kpi-card-num {
  color: #047857;
}

.kpi-metric-card.good {
  border-top: 3px solid #84cc16;
  border-color: rgba(132, 204, 22, 0.28);
}
.kpi-metric-card.good .kpi-card-num {
  color: #a3e635;
}
[data-theme="light"] .kpi-metric-card.good .kpi-card-num,
body.light-theme .kpi-metric-card.good .kpi-card-num {
  color: #4d7c0f;
}

.kpi-metric-card.warn {
  border-top: 3px solid #f59e0b;
  border-color: rgba(245, 158, 11, 0.28);
}
.kpi-metric-card.warn .kpi-card-num {
  color: #fbbf24;
}
[data-theme="light"] .kpi-metric-card.warn .kpi-card-num,
body.light-theme .kpi-metric-card.warn .kpi-card-num {
  color: #b45309;
}

.kpi-metric-card.orange {
  border-top: 3px solid #f97316;
  border-color: rgba(249, 115, 22, 0.28);
}
.kpi-metric-card.orange .kpi-card-num {
  color: #fb923c;
}
[data-theme="light"] .kpi-metric-card.orange .kpi-card-num,
body.light-theme .kpi-metric-card.orange .kpi-card-num {
  color: #c2410c;
}

.kpi-metric-card.bad {
  border-top: 3px solid #ef4444;
  border-color: rgba(239, 68, 68, 0.28);
}
.kpi-metric-card.bad .kpi-card-num {
  color: #f87171;
}
[data-theme="light"] .kpi-metric-card.bad .kpi-card-num,
body.light-theme .kpi-metric-card.bad .kpi-card-num {
  color: #b91c1c;
}

.kpi-metric-card.blue {
  border-top: 3px solid #38bdf8;
  border-color: rgba(56, 189, 248, 0.28);
}
.kpi-metric-card.blue .kpi-card-num {
  color: #38bdf8;
}
[data-theme="light"] .kpi-metric-card.blue .kpi-card-num,
body.light-theme .kpi-metric-card.blue .kpi-card-num {
  color: #0284c7;
}

.kpi-metric-card.neutral {
  border-top: 3px solid #64748b;
  border-color: rgba(148, 163, 184, 0.2);
}
.kpi-metric-card.neutral .kpi-card-num {
  color: #cbd5e1;
}

.kpi-card-num {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.15;
  margin-bottom: 5px;
}

[data-theme="light"] .kpi-card-num,
body.light-theme .kpi-card-num {
  color: #0f172a;
}

.kpi-card-subtext {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="light"] .kpi-card-subtext,
body.light-theme .kpi-card-subtext {
  color: #64748b;
}

.stats-legend-minimal {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: #94a3b8;
  font-weight: 600;
}

.stats-legend-minimal .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Small Sample Badge in daily table */
.kpi-sample-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  font-size: 11px;
  cursor: help;
  opacity: 0.85;
}

/* Footer summary rows */
.kpi-table tfoot tr.kpi-tfoot-summary {
  background: #f1f5f9;
  border-top: 2px solid #cbd5e1;
}
body.theme-dark .kpi-table tfoot tr.kpi-tfoot-summary {
  background: rgba(30, 41, 59, 0.85);
  border-top: 2px solid rgba(255, 255, 255, 0.12);
}

.kpi-table tfoot tr.kpi-tfoot-summary td {
  padding: 12px 14px;
  font-weight: 800;
  color: #0f172a;
}
body.theme-dark .kpi-table tfoot tr.kpi-tfoot-summary td {
  color: #f8fafc;
}

.kpi-table tfoot tr.kpi-tfoot-bench {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}
body.theme-dark .kpi-table tfoot tr.kpi-tfoot-bench {
  background: rgba(15, 23, 42, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.kpi-table tfoot tr.kpi-tfoot-bench td {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}
body.theme-dark .kpi-table tfoot tr.kpi-tfoot-bench td {
  color: #94a3b8;
}

.kpi-table tbody tr:hover {
  background: rgba(15, 23, 42, 0.02);
}

body.theme-dark .kpi-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* KPI Badges & Color Tags - High Contrast */
.kpi-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  border-radius: 7px;
  font-weight: 800;
  font-size: 12px;
  white-space: nowrap;
}

.kpi-pill-emerald, .kpi-pill-green5, .kpi-pill-purple {
  background: #d1fae5;
  color: #065f46;
  border: 1px solid #6ee7b7;
}
body.theme-dark .kpi-pill-emerald,
body.theme-dark .kpi-pill-green5,
body.theme-dark .kpi-pill-purple {
  background: rgba(16, 185, 129, 0.22);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.45);
}

.kpi-pill-lime, .kpi-pill-green4, .kpi-pill-green {
  background: #ecfccb;
  color: #3f6212;
  border: 1px solid #bef264;
}
body.theme-dark .kpi-pill-lime,
body.theme-dark .kpi-pill-green4,
body.theme-dark .kpi-pill-green {
  background: rgba(132, 204, 22, 0.2);
  color: #a3e635;
  border-color: rgba(132, 204, 22, 0.4);
}

.kpi-pill-yellow {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}
body.theme-dark .kpi-pill-yellow {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.4);
}

.kpi-pill-red {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
}
body.theme-dark .kpi-pill-red {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.4);
}

.kpi-pill-orange {
  background: #ffedd5;
  color: #c2410c;
  border: 1px solid #fed7aa;
}
body.theme-dark .kpi-pill-orange {
  background: rgba(249, 115, 22, 0.2);
  color: #fb923c;
  border-color: rgba(249, 115, 22, 0.4);
}

.kpi-pill-gray {
  background: #f1f5f9;
  color: #64748b;
  border: 1px solid #cbd5e1;
}
body.theme-dark .kpi-pill-gray {
  background: rgba(148, 163, 184, 0.15);
  color: #94a3b8;
  border-color: rgba(148, 163, 184, 0.3);
}

.stats-sync-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(56, 189, 248, 0.08);
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: 12px;
  font-size: 12px;
  color: #0284c7;
  margin-top: 18px;
}

body.theme-dark .stats-sync-info {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.06);
  border-color: rgba(56, 189, 248, 0.18);
}

/* =============================================================
   FULL SPREADSHEET (GOOGLE SHEETS REPLICA) STYLES
   ============================================================= */
.stats-view-switch {
  display: inline-flex;
  background: rgba(15, 23, 42, 0.06);
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 3px;
  gap: 4px;
}
body.theme-dark .stats-view-switch {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(255, 255, 255, 0.1);
}
.stats-view-btn {
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}
body.theme-dark .stats-view-btn {
  color: #94a3b8;
}
.stats-view-btn.active {
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  font-weight: 700;
}
body.theme-dark .stats-view-btn.active {
  background: #3b82f6;
  color: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.stats-sheets-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.stats-section-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.stats-only-me-notice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(2, 132, 199, 0.08);
  border: 1px solid rgba(2, 132, 199, 0.2);
  border-radius: 8px;
}
body.theme-dark .stats-only-me-notice {
  background: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.25);
}
.stats-sec-pill {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
body.theme-dark .stats-sec-pill {
  background: #1e293b;
  border-color: #334155;
  color: #cbd5e1;
}
.stats-sec-pill.active {
  background: #0f172a;
  border-color: #0f172a;
  color: #ffffff;
  font-weight: 700;
}
body.theme-dark .stats-sec-pill.active {
  background: #38bdf8;
  border-color: #38bdf8;
  color: #0f172a;
  font-weight: 700;
}

.stats-filter-box {
  display: flex;
  align-items: center;
  gap: 8px;
}
.stats-search-input {
  max-width: 240px;
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 8px;
}

/* Outer card for sheets */
.sheet-card {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  margin-bottom: 20px;
}
body.theme-dark .sheet-card {
  background: #0f172a;
  border-color: #334155;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.sheet-scroll-container {
  width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 transparent;
}
.sheet-scroll-container::-webkit-scrollbar {
  height: 9px;
}
.sheet-scroll-container::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 4px;
}
body.theme-dark .sheet-scroll-container::-webkit-scrollbar-thumb {
  background: #475569;
}

/* Master Sheet Table */
.sheet-table {
  border-collapse: collapse;
  width: max-content;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 11px;
  line-height: 1.15;
  background: #ffffff;
  color: #000000;
  letter-spacing: -0.01em;
  table-layout: auto;
}
body.theme-dark .sheet-table {
  background: #0f172a;
  color: #f8fafc;
}

.sheet-table td,
.sheet-table th {
  border: 1px solid #cbd5e1;
  padding: 2px 4px !important;
  box-sizing: border-box;
  text-transform: none !important; /* CRITICAL: Prevent uppercase from widening headers */
  height: 22px;
}
body.theme-dark .sheet-table td,
body.theme-dark .sheet-table th {
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

/* Yellow Banner Row */
.sheet-banner-row th {
  background: #ffd966 !important;
  color: #000000 !important;
  font-weight: 800;
  font-size: 11.5px !important;
  text-align: center;
  padding: 4px 6px !important;
  letter-spacing: 0.2px;
  border: 1px solid #d4a72c !important;
  height: 24px;
}
body.theme-dark .sheet-banner-row th {
  background: #f59e0b !important;
  color: #000000 !important;
  font-weight: 800 !important;
  border-color: #d97706 !important;
}

/* Black Date Header Row */
.sheet-row-date th {
  background: #000000 !important;
  color: #ffffff !important;
  font-weight: 800;
  font-size: 11.5px !important;
  text-align: center;
  padding: 4px 4px !important;
  letter-spacing: 0.2px;
  border: 1px solid #334155 !important;
  height: 24px;
}
body.theme-dark .sheet-row-date th {
  background: #090e17 !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
}

/* Metric Subheader Row */
.sheet-row-metric th {
  background: #f8fafc !important;
  color: #0f172a !important;
  font-weight: 700;
  font-size: 10.5px !important;
  line-height: 1.2 !important;
  text-align: center;
  padding: 4px 2px !important;
  white-space: nowrap !important;
  text-transform: none !important;
  height: 26px;
  border: 1px solid #cbd5e1 !important;
}
body.theme-dark .sheet-row-metric th {
  background: #1e293b !important;
  color: #f1f5f9 !important;
  font-weight: 800 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  font-size: 10.5px !important;
}

/* Sticky Agent Column */
.sheet-col-agent {
  position: sticky;
  left: 0;
  z-index: 10;
  width: 220px;
  min-width: 220px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: left;
  padding: 3px 10px !important;
  font-size: 11.5px !important;
  font-weight: 700;
  border-right: 2px solid #94a3b8 !important;
}
.sheet-col-agent-col {
  width: 220px !important;
  min-width: 220px !important;
}
body.theme-dark .sheet-col-agent {
  border-right: 2px solid #64748b !important;
}

th.sheet-col-agent {
  background: #000000 !important;
  color: #ffffff !important;
  z-index: 20;
  text-align: center;
  font-weight: 800;
  font-size: 11.5px !important;
}

td.sheet-col-agent {
  background: #ffffff;
  color: #0f172a;
}
body.theme-dark td.sheet-col-agent {
  background: #0f172a;
  color: #f8fafc;
}

/* High-Contrast Crisp Cell Colors (Google Sheets style) */
.sheet-cell {
  text-align: center;
  font-size: 11px !important;
  font-weight: 600;
  white-space: nowrap;
  padding: 2px 2px !important;
  color: #000000;
  border: 1px solid #cbd5e1;
}
body.theme-dark .sheet-cell {
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

/* Green (100%, high CSAT/RSAT, low THT, good RR) - Google Sheets Green */
.sheet-c-green {
  background: #57bb8a !important;
  color: #000000 !important;
  font-weight: 700 !important;
}
body.theme-dark .sheet-c-green {
  background: #57bb8a !important;
  color: #000000 !important;
  font-weight: 800 !important;
}

/* Orange/Peach (70-79% CSAT/RSAT, elevated THT) */
.sheet-c-orange {
  background: #f9cb9c !important;
  color: #000000 !important;
  font-weight: 700 !important;
}
body.theme-dark .sheet-c-orange {
  background: #f9cb9c !important;
  color: #000000 !important;
  font-weight: 800 !important;
}

/* Yellow (benchmarks / CSAT Ongoing / THT) */
.sheet-c-yellow {
  background: #ffe599 !important;
  color: #000000 !important;
  font-weight: 700 !important;
}
body.theme-dark .sheet-c-yellow {
  background: #ffe599 !important;
  color: #000000 !important;
  font-weight: 800 !important;
}

/* Red (<70% CSAT/RSAT, high THT, low RR) */
.sheet-c-red {
  background: #ea9999 !important;
  color: #000000 !important;
  font-weight: 700 !important;
}
body.theme-dark .sheet-c-red {
  background: #ea9999 !important;
  color: #000000 !important;
  font-weight: 800 !important;
}

/* White / Default cell (Uncolored numbers: Contacts, Ratings) */
.sheet-c-white {
  background: #ffffff !important;
  color: #0f172a !important;
  font-weight: 600;
}
body.theme-dark .sheet-c-white {
  background: #0f172a !important;
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Summary Rows */
.sheet-row-summary td {
  font-weight: 800 !important;
  text-align: center;
  font-size: 11px !important;
  color: #000000 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
body.theme-dark .sheet-row-summary td {
  color: #ffffff !important;
  font-weight: 800 !important;
}

/* Specific Override: Ensure colored cells in summary row always have deep black text for high contrast */
.sheet-row-summary td.sheet-c-green,
.sheet-row-summary td.sheet-c-orange,
.sheet-row-summary td.sheet-c-yellow,
.sheet-row-summary td.sheet-c-red,
body.theme-dark .sheet-row-summary td.sheet-c-green,
body.theme-dark .sheet-row-summary td.sheet-c-orange,
body.theme-dark .sheet-row-summary td.sheet-c-yellow,
body.theme-dark .sheet-row-summary td.sheet-c-red {
  color: #000000 !important;
  font-weight: 800 !important;
}

.sheet-row-summary td.sheet-col-agent {
  background: #f1f5f9;
  color: #0f172a !important;
  font-weight: 800;
}
body.theme-dark .sheet-row-summary td.sheet-col-agent {
  background: #1e293b;
  color: #f8fafc !important;
  font-weight: 800;
}

/* Spacer row between sections */
.sheet-row-spacer td {
  height: 12px !important;
  background: #f8fafc !important;
  border-left: none !important;
  border-right: none !important;
}
body.theme-dark .sheet-row-spacer td {
  background: #0b1120 !important;
  border-left: none !important;
  border-right: none !important;
}

/* Highlight row for logged-in operator: single continuous stripe */
.sheet-row-active-agent td {
  box-shadow: inset 0 2px 0 0 #2563eb, inset 0 -2px 0 0 #2563eb;
}
.sheet-row-active-agent td:first-child {
  box-shadow: inset 2px 2px 0 0 #2563eb, inset 0 -2px 0 0 #2563eb;
}
.sheet-row-active-agent td:last-child {
  box-shadow: inset -2px 2px 0 0 #2563eb, inset 0 -2px 0 0 #2563eb;
}
.sheet-row-active-agent td.sheet-c-white {
  background: #f0f7ff !important;
  color: #1e40af !important;
  font-weight: 700 !important;
}
.sheet-row-active-agent td.sheet-col-agent {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
  font-weight: 800 !important;
}
body.theme-dark .sheet-row-active-agent td {
  box-shadow: inset 0 2px 0 0 #38bdf8, inset 0 -2px 0 0 #38bdf8;
}
body.theme-dark .sheet-row-active-agent td:first-child {
  box-shadow: inset 2px 2px 0 0 #38bdf8, inset 0 -2px 0 0 #38bdf8;
}
body.theme-dark .sheet-row-active-agent td:last-child {
  box-shadow: inset -2px 2px 0 0 #38bdf8, inset 0 -2px 0 0 #38bdf8;
}
body.theme-dark .sheet-row-active-agent td.sheet-c-white {
  background: #172a4d !important;
  color: #ffffff !important;
  font-weight: 800 !important;
}
body.theme-dark .sheet-row-active-agent td.sheet-col-agent {
  background: #172a4d !important;
  color: #38bdf8 !important;
  font-weight: 800 !important;
}
.sheet-agent-badge-you {
  display: inline-block;
  background: #3b82f6;
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 800;
  padding: 1px 4px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: middle;
}

/* Table Scope Switch (Team vs Only Me) */
.stats-scope-switch {
  display: inline-flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 2px;
  gap: 3px;
}
body.theme-dark .stats-scope-switch {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(255, 255, 255, 0.1);
}
.stats-scope-switch .stats-sec-pill {
  padding: 3px 9px;
  font-size: 11px;
  border: none;
  background: transparent;
  color: #475569;
}
body.theme-dark .stats-scope-switch .stats-sec-pill {
  color: #94a3b8;
}
.stats-scope-switch .stats-sec-pill.active {
  background: #ffffff;
  color: #0f172a;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
body.theme-dark .stats-scope-switch .stats-sec-pill.active {
  background: #3b82f6;
  color: #ffffff;
}

/* Scale & Density Controls */
.stats-scale-controls {
  display: inline-flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.05);
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 2px 4px;
  gap: 3px;
}
body.theme-dark .stats-scale-controls {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(255, 255, 255, 0.1);
}
.stats-scale-label {
  font-size: 11px;
  color: #64748b;
  margin-right: 4px;
  font-weight: 600;
}
body.theme-dark .stats-scale-label {
  color: #94a3b8;
}
.stats-scale-btn {
  background: transparent;
  border: none;
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
}
body.theme-dark .stats-scale-btn {
  color: #94a3b8;
}
.stats-scale-btn.active {
  background: #ffffff;
  color: #0f172a;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
body.theme-dark .stats-scale-btn.active {
  background: #3b82f6;
  color: #ffffff;
}

/* Compact Density (Default) */
.sheet-mode-compact .sheet-table {
  font-size: 10px;
}
.sheet-mode-compact .sheet-table td,
.sheet-mode-compact .sheet-table th {
  padding: 1px 3px !important;
  height: 20px;
}
.sheet-mode-compact .sheet-col-agent {
  width: 200px;
  min-width: 195px;
  font-size: 10.5px !important;
}
.sheet-mode-compact .sheet-row-metric th {
  font-size: 9.5px !important;
  height: 25px;
}

/* Fit to screen mode */
.sheet-mode-fit {
  overflow-x: auto !important;
}
.sheet-mode-fit .sheet-table {
  width: 100% !important;
  min-width: 1320px;
  table-layout: auto;
  font-size: 11px;
}
.sheet-mode-fit .sheet-table td,
.sheet-mode-fit .sheet-table th {
  padding: 2px 3px !important;
  height: 25px;
}
.sheet-mode-fit .sheet-col-agent {
  width: 220px !important;
  min-width: 220px !important;
  font-size: 11.5px !important;
  padding: 2px 10px !important;
  font-weight: 700;
}
.sheet-mode-fit .sheet-row-metric th {
  font-size: 10.5px !important;
  height: 26px;
}

/* -------------------------------------------------------------
 * STATS SCORECARD WIDGET (Compact Left-Corner Widget)
 * ------------------------------------------------------------- */
.stats-scorecard-widget {
  margin: 0 0 16px 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid rgba(2, 132, 199, 0.25);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
  width: fit-content;
  max-width: 650px;
  box-sizing: border-box;
}

body.theme-dark .stats-scorecard-widget {
  background: #0f1c2e;
  border-color: rgba(56, 189, 248, 0.25);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.scorecard-widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.scorecard-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.scorecard-title-prefix {
  font-size: 11.5px;
  font-weight: 600;
  color: #64748b;
}

body.theme-dark .scorecard-title-prefix {
  color: #94a3b8;
}

.scorecard-current-role-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #0284c7;
  letter-spacing: -0.01em;
}

body.theme-dark .scorecard-current-role-title {
  color: #38bdf8;
}

.scorecard-skills-dropdown-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid rgba(2, 132, 199, 0.25);
  background: rgba(2, 132, 199, 0.06);
  color: #0284c7;
  cursor: pointer;
  transition: all 0.15s ease;
}

body.theme-dark .scorecard-skills-dropdown-btn {
  background: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.25);
  color: #38bdf8;
}

.scorecard-skills-dropdown-btn:hover {
  background: rgba(2, 132, 199, 0.12);
}

body.theme-dark .scorecard-skills-dropdown-btn:hover {
  background: rgba(56, 189, 248, 0.2);
}

.scorecard-min-btn {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #f1f5f9;
  color: #64748b;
  cursor: pointer;
  font-size: 10px;
  transition: all 0.15s ease;
}

body.theme-dark .scorecard-min-btn {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}

.scorecard-min-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

body.theme-dark .scorecard-min-btn:hover {
  background: #334155;
  color: #f8fafc;
}

.scorecard-other-skills-tray {
  margin-bottom: 8px;
  padding: 5px 8px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px dashed rgba(2, 132, 199, 0.25);
}

body.theme-dark .scorecard-other-skills-tray {
  background: #091321;
  border-color: rgba(56, 189, 248, 0.25);
}

.scorecard-tray-pills {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
}

.scorecard-pill {
  padding: 2.5px 8px;
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

body.theme-dark .scorecard-pill {
  background: #1e293b;
  border-color: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}

.scorecard-pill:hover {
  background: #e2e8f0;
  color: #0f172a;
}

body.theme-dark .scorecard-pill:hover {
  background: #334155;
  color: #f8fafc;
}

.scorecard-pill.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
  box-shadow: 0 1px 4px rgba(2, 132, 199, 0.35);
}

body.theme-dark .scorecard-pill.active {
  background: #0284c7;
  color: #ffffff;
  border-color: #38bdf8;
}

.stats-scorecard-widget.is-collapsed .scorecard-table-wrap {
  display: none !important;
}

.stats-scorecard-widget.is-collapsed {
  padding-bottom: 6px;
}

.scorecard-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 6px;
  border: 1px solid #94a3b8;
  background: #ffffff;
}

.scorecard-replica-table {
  width: 100%;
  border-collapse: collapse;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 11px;
  line-height: 1.25;
}

.scorecard-replica-table th,
.scorecard-replica-table td {
  padding: 3.5px 6px;
  border: 1px solid #94a3b8;
  color: #000000 !important;
  font-size: 10.5px;
}

.scorecard-th-col {
  background: #9fc5e8 !important;
  color: #000000 !important;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
  font-size: 10.5px;
}

.scorecard-th-col.th-metric {
  text-align: left;
  min-width: 120px;
}

.scorecard-th-col.th-weight {
  width: 55px;
  min-width: 48px;
}

.scorecard-th-col.th-unit {
  width: 48px;
  min-width: 40px;
}

.scorecard-th-rating {
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
  min-width: 65px;
  font-size: 9.5px;
  line-height: 1.15;
}

.scorecard-th-rating.r1 {
  background: #ea4335 !important;
  color: #000000 !important;
}

.scorecard-th-rating.r2 {
  background: #ff9900 !important;
  color: #000000 !important;
}

.scorecard-th-rating.r3 {
  background: #ffff00 !important;
  color: #000000 !important;
}

.scorecard-th-rating.r4 {
  background: #b7e1cd !important;
  color: #000000 !important;
}

.scorecard-th-rating.r5 {
  background: #57bb8a !important;
  color: #000000 !important;
}

.scorecard-replica-table tbody tr {
  background: #ffffff;
}

.scorecard-replica-table tbody tr:hover {
  background: #f8fafc;
}

.scorecard-cell-metric {
  font-weight: 700;
  text-align: left !important;
  color: #000000 !important;
  font-size: 10.5px;
}

.scorecard-cell-weight,
.scorecard-cell-unit,
.scorecard-cell-val {
  text-align: center !important;
  font-weight: 500;
  color: #000000 !important;
  font-size: 10.5px;
}

.scorecard-cell-highlight-yellow {
  background: #ffff00 !important;
  font-weight: 700 !important;
}

.scorecard-row-selected td:nth-child(n+4) {
  border-top: 2px solid #22c55e !important;
  border-bottom: 2px solid #22c55e !important;
}

.scorecard-row-selected td:nth-child(4) {
  border-left: 2px solid #22c55e !important;
}

.scorecard-row-selected td:nth-child(8) {
  border-right: 2px solid #22c55e !important;
}

.role-poland_baby, .role-poland-baby {
  background: rgba(14, 165, 233, 0.15) !important;
  color: #38bdf8 !important;
  border: 1px solid rgba(14, 165, 233, 0.35) !important;
}
.role-rs_past_order_baby_ua, .role-rs-past-order-baby-ua {
  background: rgba(99, 102, 241, 0.15) !important;
  color: #818cf8 !important;
  border: 1px solid rgba(99, 102, 241, 0.35) !important;
}
.role-ms_ua, .role-ms-ua {
  background: rgba(236, 72, 153, 0.15) !important;
  color: #f472b6 !important;
  border: 1px solid rgba(236, 72, 153, 0.35) !important;
}
.role-past_order_ua, .role-past-order-ua {
  background: rgba(245, 158, 11, 0.15) !important;
  color: #fbbf24 !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
}
.role-vs {
  background: rgba(20, 184, 166, 0.15) !important;
  color: #2dd4bf !important;
  border: 1px solid rgba(20, 184, 166, 0.35) !important;
}

/* =============================================================
   PERSONAL SHIFT STATS & BREAKDOWN (Admin-style drilldown in Моя стата)
   ============================================================= */
.stats-personal-subnav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  padding: 10px 14px;
  background: var(--surface, rgba(15, 23, 42, 0.6));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
}

body.theme-dark .stats-personal-subnav-bar {
  background: rgba(15, 23, 42, 0.6);
  border-color: rgba(255, 255, 255, 0.08);
}

.stats-sub-nav {
  display: inline-flex;
  gap: 4px;
  background: rgba(0, 0, 0, 0.25);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.stats-sub-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #94a3b8);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.stats-sub-btn:hover {
  color: var(--text-main, #fff);
  background: rgba(255, 255, 255, 0.06);
}

.stats-sub-btn.active {
  background: #3b82f6;
  color: #fff;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35);
}

/* SCORE pill right next to scorecard quality button */
.stats-header-score-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(59, 130, 246, 0.4);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  cursor: help;
  transition: all 0.2s ease;
  user-select: none;
}

.stats-header-score-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.stats-header-score-pill .score-label {
  font-size: 11px;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.stats-header-score-pill .score-number {
  font-size: 14.5px;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: -0.2px;
}

.stats-header-score-pill.score-5 {
  border-color: rgba(16, 185, 129, 0.6);
  background: rgba(6, 78, 59, 0.3);
}
.stats-header-score-pill.score-5 .score-number {
  color: #34d399;
}

.stats-header-score-pill.score-4 {
  border-color: rgba(59, 130, 246, 0.6);
  background: rgba(30, 58, 138, 0.3);
}
.stats-header-score-pill.score-4 .score-number {
  color: #60a5fa;
}

.stats-header-score-pill.score-3 {
  border-color: rgba(234, 179, 8, 0.6);
  background: rgba(113, 63, 18, 0.3);
}
.stats-header-score-pill.score-3 .score-number {
  color: #fbbf24;
}

.stats-header-score-pill.score-2 {
  border-color: rgba(249, 115, 22, 0.6);
  background: rgba(124, 45, 18, 0.3);
}
.stats-header-score-pill.score-2 .score-number {
  color: #fb923c;
}

.stats-header-score-pill.score-1 {
  border-color: rgba(239, 68, 68, 0.6);
  background: rgba(127, 29, 29, 0.3);
}
.stats-header-score-pill.score-1 .score-number {
  color: #f87171;
}

.personal-period-pills {
  display: inline-flex;
  gap: 4px;
  background: rgba(0, 0, 0, 0.25);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.personal-period-btn {
  padding: 5px 11px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #94a3b8;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.personal-period-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.personal-period-btn.active {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.4);
}

.personal-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.personal-export-btn:hover {
  background: rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.4);
  color: #60a5fa;
}

/* 5 KPI Cards Grid (Admin match) */
.stats-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.stats-kpi-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.stats-kpi-card:hover {
  transform: translateY(-2px);
  border-color: rgba(59, 130, 246, 0.3);
}

.stats-kpi-card .kpi-label {
  font-size: 11.5px;
  color: #94a3b8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.stats-kpi-card .kpi-value {
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  margin-top: 2px;
}

.stats-kpi-card .kpi-sub {
  font-size: 11px;
  color: #64748b;
}

/* Light Theme Overrides */
[data-theme="light"] .stats-kpi-card,
body.light-theme .stats-kpi-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .stats-kpi-card .kpi-value,
body.light-theme .stats-kpi-card .kpi-value {
  color: #0f172a;
}

/* Status Breakdown Bar & Pills */
.status-bar-container {
  display: flex;
  height: 8px;
  width: 100%;
  min-width: 130px;
  max-width: 220px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
  margin-top: 5px;
}

.status-bar-seg {
  height: 100%;
}

.status-pill-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

.status-pill-online { background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); }
.status-pill-lunch { background: rgba(245, 158, 11, 0.15); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); }
.status-pill-break { background: rgba(236, 72, 153, 0.15); color: #ec4899; border: 1px solid rgba(236, 72, 153, 0.3); }
.status-pill-meet { background: rgba(139, 92, 246, 0.15); color: #8b5cf6; border: 1px solid rgba(139, 92, 246, 0.3); }
.status-pill-task { background: rgba(59, 130, 246, 0.15); color: #3b82f6; border: 1px solid rgba(59, 130, 246, 0.3); }
.status-pill-busy { background: rgba(239, 68, 68, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); }

.tnt-pill-badge {
  display: inline-flex;
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 11.5px;
}

.personal-shifts-table td {
  padding: 10px 12px;
  vertical-align: middle;
}

/* -------------------------------------------------------------
 * UNIFIED ALL-MODE DASHBOARD STYLING
 * ------------------------------------------------------------- */