/* MAFIA CRM — Light v8.0 (Onest + IBM Plex Mono, neutral minimal) */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* Brand */
  --primary: #6B3FD4;
  --primary-hover: #5A31B8;
  --primary-light: #F0EBFC;
  --primary-border: #DCD0F5;
  --ink: #14161B;
  --gold: #E3A812;
  --gold-text: #946500;
  /* Feedback */
  --success: #2E9E68;
  --success-text: #1C7A4C;
  --success-light: #E7F4EC;
  --success-border: #BFE0CC;
  --warning: #E3A812;
  --warning-light: #FFF6DD;
  --warning-border: #F5DB8E;
  --purple: #6B3FD4;
  --purple-light: #F0EBFC;
  --purple-border: #DCD0F5;
  --danger: #B3261E;
  --danger-light: #FBE9E7;
  --danger-border: #F0C4BF;
  /* Surfaces */
  --sidebar-bg: #FFFFFF;
  --sidebar-border: #E7E9ED;
  --sidebar-text: #4A5060;
  --sidebar-text-hover: #14161B;
  --page-bg: #F6F7F9;
  --card-bg: #FFFFFF;
  --card-border: #E7E9ED;
  --card-shadow: 0 1px 2px rgba(20,22,27,0.04);
  --text-primary: #14161B;
  --text-secondary: #4A5060;
  --text-muted: #6A7080;
  --border: #E7E9ED;
  --border-strong: #D5D9E0;
  --input-bg: #FFFFFF;
  /* Type */
  --font-sans: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  --font-display: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --accent-violet: #6B3FD4;
  --light-violet: #C8B6F2;
  --accent-yellow: #F2B626;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  background: var(--page-bg);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* SCROLLBARS */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #C9CDD6; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #8A90A0; }

/* LAYOUT */
.app-layout { display: flex; flex-direction: row; min-height: 100vh; }
.main-content { flex: 1; min-width: 0; overflow-y: auto; background: var(--page-bg); display: flex; flex-direction: column; }
.page-container { max-width: 1360px; width: 100%; margin: 0 auto; padding: 24px 28px 48px; flex: 1; }

/* TOP NAVBAR — UNIFIED GLOBAL HEADER */
.top-navbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 10px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 54px;
}
.top-navbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.top-navbar-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.top-navbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}
@media (max-width: 768px) {
  .top-navbar { display: none; }
}

/* SIDEBAR — PURE WHITE EXECUTIVE */
.sidebar {
  width: 240px;
  min-width: 240px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  height: 100vh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
  z-index: 40;
}
.sidebar-logo {
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--sidebar-border);
}
.sidebar-logo-inner { display: flex; align-items: center; gap: 10px; }
.sidebar-logo-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, #6B3FD4, #6B3FD4);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(107,63,212,0.25);
}
.sidebar-logo-text { font-size: 15px; font-weight: 800; color: #14161B; letter-spacing: -0.02em; }
.sidebar-logo-sub { font-size: 11px; color: #8A90A0; margin-top: 1px; font-weight: 500; }

.sidebar-section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8A90A0;
  padding: 14px 14px 4px;
}

.sidebar-nav { flex: 1; padding: 10px 10px; display: flex; flex-direction: column; gap: 3px; }
.sidebar-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 12px;
  font-size: 13px; font-weight: 500; color: var(--sidebar-text);
  cursor: pointer; transition: all 0.15s ease;
  border: none;
  background: transparent; width: 100%; text-align: left;
  outline: none;
  text-decoration: none;
}
.sidebar-item:hover { background: #F6F7F9; color: var(--sidebar-text-hover); }
.sidebar-item.active {
  background: #6B3FD4 !important;
  color: #ffffff !important;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(107,63,212,0.28);
}
.sidebar-item svg { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; opacity: 0.8; }
.sidebar-item.active svg { stroke: #ffffff !important; opacity: 1; }

.sidebar-footer { padding: 14px; border-top: 1px solid var(--sidebar-border); background: #ffffff; }
.sidebar-club-select {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: #FAFAFB;
  border: 1px solid #E7E9ED;
  border-radius: 10px; font-size: 12px; color: #14161B;
}
.sidebar-club-select svg { width: 14px; height: 14px; flex-shrink: 0; color: #6B3FD4; }
.sidebar-club-select select {
  background: none; border: none; color: #14161B;
  font-size: 12px; font-weight: 600; cursor: pointer; outline: none; flex: 1;
  font-family: inherit;
}
.sidebar-quick-actions { display: flex; gap: 6px; margin-top: 10px; }
.sidebar-quick-btn {
  flex: 1; padding: 7px 8px; border-radius: 8px; border: none;
  font-size: 11px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.15s ease;
}
.sidebar-quick-btn-primary { background: var(--ink); color: #FFFFFF; border: 1px solid var(--ink); }
.sidebar-quick-btn-primary:hover { background: #2A2E38; }
.sidebar-quick-btn-secondary { background: #FAFAFB; color: #6A7080; border: 1px solid #E7E9ED; }
.sidebar-quick-btn-secondary:hover { background: #F6F7F9; color: #14161B; }

/* MOBILE TOPBAR */
.mobile-topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #ffffff;
  border-bottom: 1px solid #E7E9ED;
  position: sticky; top: 0; z-index: 40;
}
.mobile-topbar-title { font-size: 14px; font-weight: 700; color: #14161B; }
.mobile-hamburger {
  width: 34px; height: 34px; border-radius: 8px;
  background: #F6F7F9; border: 1px solid #E7E9ED; color: #6A7080;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
#mobile-club-select, #mobile-period-select {
  font-size: 12px !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 2px 6px !important;
  border-radius: 8px !important;
  background-color: #F6F7F9 !important;
  border: 1px solid #C9CDD6 !important;
  color: #2A2E38 !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

/* PAGE HEADER & CONTROLS */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.page-title, .heading-1 { font-size: 24px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.03em; line-height: 1.2; }
.page-subtitle, .desc-sub { font-size: 13px; color: var(--text-secondary); margin-top: 3px; font-weight: 400; line-height: 1.5; }
.page-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* TYPOGRAPHY */
.heading-2, .section-title { font-size: 16px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; }
.heading-3, .card-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.heading-4, .sub-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.heading-overline { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.desc-hint { font-size: 11px; color: var(--text-muted); }
.desc-badge-sub { font-size: 10px; font-weight: 600; color: var(--text-muted); }

/* CARDS — PURE WHITE WITH SOFT ELEVATION */
.ios-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  box-shadow: var(--card-shadow);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.ios-card-interactive { cursor: pointer; }
.ios-card-interactive:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  transform: translateY(-1px);
}

/* BUTTONS — MODERN EXECUTIVE */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 10px; font-weight: 600; transition: all 0.15s ease;
  cursor: pointer; border: 1px solid transparent; white-space: nowrap; user-select: none;
  font-family: inherit;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45 !important; cursor: not-allowed !important; transform: none !important; }

.btn-primary, .ios-btn-primary {
  background: var(--primary); color: #fff !important; border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(107,63,212,0.25);
}
.btn-primary:hover, .ios-btn-primary:hover {
  background: var(--primary-hover); border-color: var(--primary-hover);
  box-shadow: 0 4px 14px rgba(107,63,212,0.35);
}

.btn-secondary, .ios-btn-secondary {
  background: #F6F7F9; color: var(--text-primary) !important; border-color: #E7E9ED;
}
.btn-secondary:hover, .ios-btn-secondary:hover { background: #E7E9ED; }

.btn-outline {
  background: #fff; color: var(--primary) !important; border: 1px solid var(--primary-border);
}
.btn-outline:hover { background: var(--primary-light); border-color: var(--primary); }

.btn-ghost { background: transparent; color: var(--text-secondary) !important; border-color: transparent; }
.btn-ghost:hover { background: #F6F7F9; color: var(--text-primary) !important; }

.btn-success { background: var(--success); color: #fff !important; border-color: var(--success); box-shadow: 0 2px 6px rgba(16,185,129,0.2); }
.btn-success:hover { background: #059669; }

.btn-danger { background: var(--danger); color: #fff !important; border-color: var(--danger); }
.btn-danger:hover { background: #dc2626; }

.btn-danger-subtle { background: var(--danger-light); color: var(--danger) !important; border-color: var(--danger-border); }
.btn-danger-subtle:hover { background: #fee2e2; }

.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 8px; min-height: 32px; }
.btn-md { padding: 8px 16px; font-size: 13px; border-radius: 10px; min-height: 38px; }
.btn-lg { padding: 10px 20px; font-size: 14px; border-radius: 12px; min-height: 44px; }
.btn-icon { width: 32px; height: 32px; padding: 0; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }

/* SEGMENTED PERIOD & CLUB SELECTOR (Pill Switcher) */
.ios-segmented, .ios-segmented-nav {
  background: #F6F7F9; padding: 3px; border-radius: 12px;
  display: inline-flex; border: 1px solid #E7E9ED;
  align-items: center; flex-shrink: 0;
}
.ios-segmented button, .ios-segmented-nav button, .dash-period-btn, .cohort-period-btn, .dash-club-btn, .pnl-period-btn, .pnl-club-btn, .leads-club-btn, .leads-period-btn, .players-club-btn, .players-period-btn, .events-club-btn, .events-period-btn, .fc-club-btn, .fc-period-btn, .club-segmented-btn, .period-segmented-btn {
  border-radius: 8px; transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  color: #6A7080; background: transparent; border: none; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600;
  padding: 6px 13px; white-space: nowrap; line-height: 1.25;
  display: inline-flex; align-items: center; justify-content: center;
}
.ios-segmented button:hover, .ios-segmented-nav button:hover, .dash-period-btn:hover, .cohort-period-btn:hover, .dash-club-btn:hover, .pnl-period-btn:hover, .pnl-club-btn:hover, .leads-club-btn:hover, .leads-period-btn:hover, .players-club-btn:hover, .players-period-btn:hover, .events-club-btn:hover, .events-period-btn:hover, .fc-club-btn:hover, .fc-period-btn:hover, .club-segmented-btn:hover, .period-segmented-btn:hover {
  color: #14161B;
}
.ios-segmented button.active, .ios-segmented-nav button.active, .dash-period-btn.active, .cohort-period-btn.active, .dash-club-btn.active, .pnl-period-btn.active, .pnl-club-btn.active, .leads-club-btn.active, .leads-period-btn.active, .players-club-btn.active, .players-period-btn.active, .events-club-btn.active, .events-period-btn.active, .fc-club-btn.active, .fc-period-btn.active, .club-segmented-btn.active, .period-segmented-btn.active {
  background: #ffffff; color: #14161B !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  font-weight: 600;
}

/* NAV TAB COMPATIBILITY */
.nav-tab { border: none; background: none; cursor: pointer; font-family: inherit; }
.nav-tab.active { font-weight: 700; color: var(--primary); }

/* STATUS FILTER PILLS & CHIPS */
.outreach-status-pill, .filter-chip {
  border-radius: 10px; font-size: 12px; font-weight: 600; padding: 6px 14px;
  display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s ease;
  background: #ffffff; color: var(--text-secondary); border: 1px solid #E7E9ED; cursor: pointer;
}
.outreach-status-pill:hover, .filter-chip:hover { background: #FAFAFB; color: var(--text-primary); }
.outreach-status-pill.active, .filter-chip.active {
  background: var(--primary) !important; color: #fff !important; border-color: var(--primary) !important;
  box-shadow: 0 2px 8px rgba(107,63,212,0.25);
}

/* FORMS & INPUTS WITH HOTKEY BADGES */
.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-label { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.form-label-sub { font-size: 11px; font-weight: 500; color: var(--text-secondary); }
.form-input, .form-textarea, .ios-input {
  background: var(--input-bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 9px 13px; font-size: 13px; color: var(--text-primary);
  transition: all 0.15s ease; width: 100%; font-family: inherit;
}
.form-input:focus, .form-textarea:focus, .ios-input:focus {
  background: #fff; border-color: var(--primary); outline: none;
  box-shadow: 0 0 0 3px rgba(107,63,212,0.15);
}
.form-select, .ios-select {
  background-color: var(--input-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236E6A75' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px;
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 32px 8px 12px;
  font-size: 13px; font-weight: 500; color: var(--text-primary); cursor: pointer;
  appearance: none; -webkit-appearance: none; width: 100%; font-family: inherit; transition: all 0.15s ease;
}
.form-select:focus, .ios-select:focus { background-color: #fff; border-color: var(--primary); outline: none; box-shadow: 0 0 0 3px rgba(107,63,212,0.15); }
.form-card-group { background: #FAFAFB; border: 1px solid var(--border); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 16px; border-top: 1px solid var(--border); }

/* SEARCH INPUT WRAPPER WITH ⌘K BADGE */
.search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.search-wrapper input {
  padding-left: 36px;
  padding-right: 48px;
}
.search-wrapper .search-icon {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: #8A90A0;
  pointer-events: none;
}
.search-wrapper .kbd-badge {
  position: absolute;
  right: 10px;
  background: #F6F7F9;
  border: 1px solid #E7E9ED;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #6A7080;
  padding: 2px 6px;
  pointer-events: none;
  font-family: inherit;
}

/* CHECKBOX */
.form-checkbox, .ios-checkbox {
  appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border-radius: 5px;
  background: #ffffff; border: 1.5px solid #C9CDD6; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle; transition: all 0.15s ease; position: relative; flex-shrink: 0;
}
.form-checkbox:hover, .ios-checkbox:hover { border-color: var(--primary); }
.form-checkbox:focus, .ios-checkbox:focus { outline: none; box-shadow: 0 0 0 3px rgba(107,63,212,0.2); border-color: var(--primary); }
.form-checkbox:checked, .ios-checkbox:checked {
  background-color: var(--primary); border-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 11px;
}

/* TOGGLE SWITCH */
.form-switch { position: relative; display: inline-block; width: 44px; height: 26px; flex-shrink: 0; vertical-align: middle; }
.form-switch input { opacity: 0; width: 0; height: 0; }
.form-switch-slider { position: absolute; cursor: pointer; inset: 0; background-color: #E7E9ED; border: 1px solid #C9CDD6; border-radius: 9999px; transition: all 0.25s ease; }
.form-switch-slider::before { position: absolute; content: ""; height: 20px; width: 20px; left: 2px; bottom: 2px; background-color: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.15); transition: all 0.25s ease; }
.form-switch input:checked + .form-switch-slider { background-color: var(--success); border-color: var(--success); }
.form-switch input:checked + .form-switch-slider::before { transform: translateX(18px); }

/* TABLES — FIGMA LIGHT EXECUTIVE */
.table-container { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; box-shadow: var(--card-shadow); overflow: hidden; }
.ios-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
.ios-table thead tr, .table-thead tr { background: #FAFAFB; border-bottom: 1px solid #E7E9ED; }
.ios-table th, .table-th { padding: 12px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); white-space: nowrap; }
.ios-table tbody tr, .table-tr { border-bottom: 1px solid #F6F7F9; transition: background-color 0.15s ease; cursor: pointer; }
.ios-table tbody tr:last-child, .table-tr:last-child { border-bottom: none; }
.ios-table tbody tr:hover, .table-tr:hover { background-color: #FAFAFB; }
.ios-table td, .table-td { padding: 12px 16px; vertical-align: middle; color: var(--text-primary); }
.table-td-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: #14161B; }
.table-td-center { text-align: center; }
.table-td-actions { text-align: right; white-space: nowrap; }
.table-pagination { padding: 12px 16px; border-top: 1px solid #E7E9ED; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text-muted); background: var(--card-bg); }

/* AVATAR CIRCLES */
.player-avatar {
  width: 32px; height: 32px; border-radius: 9999px;
  background: linear-gradient(135deg, #F0EBFC, #E4DBF8);
  color: #5A31B8; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1px solid #DCD0F5;
}

/* BADGES — LIGHT LUXURY PALETTE */
.badge-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 9999px; font-size: 11px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.badge-cat-regular { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.badge-cat-corporate { background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; }
.badge-cat-promo { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.badge-cat-vip { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.badge-cat-host { background: #fff1f2; color: #be123c; border: 1px solid #fecdd3; }
.badge-cat-other_club { background: #FAFAFB; color: var(--text-muted); border: 1px solid #E7E9ED; }
.badge-cat-lost { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

.badge-stage-lead { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.badge-stage-booked { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.badge-stage-first_game { background: #fffbeb; color: #b45309; border: 1px solid #fde68a; }
.badge-stage-repeat { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.badge-stage-regular_active { background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; }
.badge-stage-vip_core { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.badge-stage-dormant { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.badge-stage-archived { background: #FAFAFB; color: var(--text-muted); border: 1px solid #E7E9ED; }

/* TELEGRAM COMMUNITY STATUS BADGES */
.badge-tg-in_group { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.badge-tg-left { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.badge-tg-never_joined { background: #FAFAFB; color: #6A7080; border: 1px solid #E7E9ED; }
.badge-tg-kicked { background: #fff1f2; color: #9f1239; border: 1px solid #fecdd3; }

/* VARIABLE TAG CHIPS */
.tag-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 8px; font-size: 11px; font-weight: 600;
  background: #F0EBFC; color: #6B3FD4; border: 1px solid #DCD0F5;
  cursor: pointer; user-select: none; transition: all 0.15s ease;
  font-family: inherit;
}
.tag-chip:hover { background: #E4DBF8; transform: translateY(-1px); border-color: #C8B6F2; }
.tag-chip:active { transform: scale(0.97); }

/* LIVE MESSENGER PREVIEW */
.tg-chat-bg {
  background-color: #eef2f7;
  background-image: radial-gradient(#d1dbe6 1px, transparent 1px);
  background-size: 14px 14px;
}
.tg-bubble {
  position: relative; max-width: 92%;
  background: #ffffff; border-radius: 14px 14px 14px 4px;
  padding: 11px 14px; box-shadow: 0 1px 3px rgba(20,22,27,0.08);
  font-size: 12px; line-height: 1.55; color: #14161B;
}
.tg-bubble::before {
  content: ""; position: absolute; bottom: 0; left: -6px;
  width: 8px; height: 10px;
  background: radial-gradient(circle at 0 0, transparent 8px, #ffffff 8px);
}

/* MODALS */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(20,22,27,0.45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal-content {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 20px; max-width: 820px; width: 100%;
  max-height: calc(100vh - 32px); display: flex; flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(20,22,27,0.25);
  animation: modalIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
@keyframes modalIn { from { opacity: 0; transform: scale(0.97) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.modal-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; background: #FAFAFB; flex-shrink: 0; }
.modal-body { padding: 20px; overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.modal-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: flex-end; gap: 8px; background: var(--card-bg); flex-shrink: 0; }
.btn-close-modal { width: 32px; height: 32px; border-radius: 9999px; background: #F6F7F9; color: var(--text-muted); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; border: none; cursor: pointer; transition: all 0.15s ease; }
.btn-close-modal:hover { background: #E7E9ED; color: var(--text-primary); }

/* SLIDE-OVER DRAWER (PLAYER 360°) */
.slide-over-backdrop {
  position: fixed; inset: 0; background: rgba(20,22,27,0.3);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 60; opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.slide-over-backdrop.open { opacity: 1; pointer-events: auto; }
.slide-over-panel {
  position: fixed; right: 0; top: 0; bottom: 0; width: 380px; max-width: 90vw;
  background: #ffffff; border-left: 1px solid #E7E9ED;
  box-shadow: -8px 0 32px rgba(20,22,27,0.08);
  transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 61; display: flex; flex-direction: column;
}
.slide-over-backdrop.open .slide-over-panel { transform: translateX(0); }
.slide-over-header { padding: 20px 24px; border-bottom: 1px solid #E7E9ED; display: flex; align-items: center; justify-content: space-between; background: #FAFAFB; }
.slide-over-body { padding: 24px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 20px; }

/* EMPTY STATE */
.empty-state { padding: 48px 24px; text-align: center; }
.empty-icon { font-size: 40px; margin-bottom: 16px; opacity: 0.6; }
.empty-title { font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.empty-desc { font-size: 13px; color: var(--text-secondary); }

/* DROPZONE */
.dropzone {
  border: 2px dashed var(--border); border-radius: 16px; padding: 40px;
  text-align: center; cursor: pointer; transition: all 0.2s ease;
  background: #FAFAFB;
}
.dropzone:hover, .dropzone.dragover { border-color: var(--primary); background: #F0EBFC; }

/* PROGRESS BAR */
.progress-bar-container { width: 100%; height: 6px; background: #E7E9ED; border-radius: 9999px; overflow: hidden; }
.progress-bar { height: 100%; border-radius: 9999px; transition: width 0.5s ease; }

/* TOASTS */
.toast-container { position: fixed; bottom: 20px; right: 20px; z-index: 70; display: flex; flex-direction: column; gap: 8px; }
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 12px;
  background: #14161B; color: #FAFAFB;
  box-shadow: 0 8px 24px rgba(20,22,27,0.2);
  font-size: 13px; font-weight: 500; min-width: 260px;
  animation: toastIn 0.3s ease;
}
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.toast-success .toast-icon { color: var(--success); }
.toast-error .toast-icon { color: var(--danger); }
.toast-info .toast-icon { color: var(--primary); }

/* KANBAN */
.kanban-col { background: #F6F7F9; border-radius: 14px; padding: 12px; min-height: 200px; }
.kanban-header { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
.kanban-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 10px; padding: 12px; margin-bottom: 8px; cursor: grab; transition: all 0.15s ease; font-size: 13px; }
.kanban-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.kanban-card.dragging { opacity: 0.5; cursor: grabbing; }

/* SIMULATOR CARD */
.sim-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; overflow: hidden; }
.sim-header { padding: 16px 20px; background: #FAFAFB; border-bottom: 1px solid var(--border); }

/* SIDEBAR OVERLAY */
.sidebar-overlay {
  position: fixed; inset: 0; background: rgba(20,22,27,0.45);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 49; opacity: 0; pointer-events: none; transition: opacity 0.25s ease;
}
.sidebar-overlay.active { opacity: 1; pointer-events: auto; }

.mobile-sidebar-close {
  display: none; width: 32px; height: 32px; border-radius: 10px;
  background: #F6F7F9; border: 1px solid #E7E9ED; color: #14161B;
  align-items: center; justify-content: center; font-size: 18px; font-weight: 700; cursor: pointer;
  transition: all 0.15s ease;
}
.mobile-sidebar-close:hover { background: #E7E9ED; color: #000000; }

/* MOBILE QUICK NAVIGATION STRIP */
.mobile-quick-nav {
  display: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid #E7E9ED;
  padding: 6px 10px;
  gap: 6px;
  position: sticky;
  top: 48px;
  z-index: 34;
  white-space: nowrap;
}
.mobile-quick-nav::-webkit-scrollbar { display: none; }
.mobile-quick-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 9999px;
  background: #F6F7F9;
  border: 1px solid #E7E9ED;
  color: #6A7080;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  outline: none;
}
.mobile-quick-tab:hover { background: #E7E9ED; color: #14161B; }
.mobile-quick-tab.active {
  background: #6B3FD4 !important;
  color: #ffffff !important;
  border-color: #6B3FD4 !important;
  box-shadow: 0 2px 8px rgba(107,63,212,0.25);
}
.mobile-quick-tab svg { width: 13px; height: 13px; flex-shrink: 0; stroke: currentColor; }
.mobile-quick-tab.active svg { stroke: #ffffff !important; }

/* MOBILE BOTTOM TABBAR */
.mobile-tabbar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  height: calc(56px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid #E7E9ED;
  z-index: 45;
  grid-template-columns: repeat(6, 1fr);
  align-items: center;
  box-shadow: 0 -4px 20px rgba(20,22,27,0.08);
}
.mobile-tab-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; height: 100%; border: none; background: none; color: #8A90A0;
  font-size: 10px; font-weight: 600; cursor: pointer; transition: all 0.15s ease;
  padding: 4px 0; -webkit-tap-highlight-color: transparent; outline: none;
}
.mobile-tab-item svg { width: 18px; height: 18px; transition: transform 0.15s ease, stroke 0.15s ease; stroke: #8A90A0; }
.mobile-tab-item:active svg { transform: scale(0.9); }
.mobile-tab-item.active { color: #6B3FD4; font-weight: 700; }
.mobile-tab-item.active svg { stroke: #6B3FD4; }

/* MOBILE RESPONSIVENESS (< 768px: SmartPhones & Samsung S25 Ultra) */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
    -webkit-text-size-adjust: 100%;
    position: relative;
  }

  .app-layout {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100vw !important;
    min-height: 100vh;
    overflow-x: hidden !important;
  }

  .mobile-topbar {
    display: flex !important;
    width: 100% !important;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 35;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid #E7E9ED;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
  }

  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 50;
    width: 280px; max-width: 85vw; height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex !important;
    box-shadow: 12px 0 40px rgba(20,22,27,0.25);
  }
  .sidebar.mobile-open {
    transform: translateX(0);
  }
  .mobile-sidebar-close { display: flex; }

  .mobile-tabbar { display: grid; }

  .main-content {
    width: 100% !important;
    max-width: 100vw !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .page-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 12px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box;
    overflow-x: hidden !important;
  }

  .page-title, .heading-1 { font-size: 19px; line-height: 1.25; }
  .page-subtitle, .desc-sub { font-size: 12px; }

  /* Input zoom fix on mobile & tap target sizing */
  .form-input, .form-select, .form-textarea, .ios-input, select, input[type="text"], input[type="tel"], input[type="number"], input[type="date"] {
    font-size: 16px !important;
    min-height: 40px;
    border-radius: 10px;
  }

  .min-w-\[230px\], .min-w-\[280px\] {
    min-width: 0 !important;
    width: 100% !important;
  }

  /* KPI cards layout on mobile */
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .ios-card {
    padding: 12px !important;
    border-radius: 14px !important;
    min-width: 0 !important;
    overflow: hidden;
  }
  .ios-card .text-2xl, .ios-card .text-3xl {
    font-size: 18px !important;
    line-height: 1.2 !important;
    word-break: break-word;
  }
  .ios-card .text-xs {
    font-size: 11px !important;
  }

  /* Tables horizontal touch scrolling */
  .table-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px !important;
    margin-left: 0; margin-right: 0;
    display: block !important;
    box-sizing: border-box;
  }
  .ios-table {
    min-width: 520px !important;
    width: 100% !important;
  }
  .table-tr {
    min-height: 48px;
  }
  .table-pagination {
    flex-direction: column !important;
    gap: 10px !important;
    align-items: center !important;
    text-align: center;
    padding: 12px !important;
  }

  /* Modals as bottom sheets on smartphones */
  .modal-backdrop {
    padding: 0 !important;
    align-items: flex-end !important;
    z-index: 60 !important;
  }
  .modal-content {
    border-radius: 20px 20px 0 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    max-height: 88vh !important;
    margin-bottom: 0 !important;
    box-shadow: 0 -10px 40px rgba(20,22,27,0.25) !important;
    border-bottom: none !important;
  }
  .modal-header {
    padding: 14px 16px !important;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    position: sticky; top: 0; z-index: 10;
  }
  .modal-body {
    padding: 14px 16px !important;
    gap: 12px !important;
    overflow-y: auto;
  }
  .modal-footer {
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    position: sticky; bottom: 0; z-index: 10;
    flex-direction: column-reverse !important;
    gap: 8px !important;
  }
  .modal-footer .btn {
    width: 100% !important;
  }

  /* Slide-over drawer full width on phone */
  .slide-over-panel {
    width: 100% !important;
    max-width: 100vw !important;
  }

  /* Segmented pill navigation scrolling */
  .ios-segmented, .ios-segmented-nav, #player-quick-segments {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
    flex-wrap: nowrap !important;
    padding: 3px !important;
  }
  .ios-segmented::-webkit-scrollbar, .ios-segmented-nav::-webkit-scrollbar, #player-quick-segments::-webkit-scrollbar {
    display: none !important;
  }

  /* Charts */
  canvas {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Toast notification */
  .toast-container {
    left: 12px; right: 12px; bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    align-items: stretch;
  }
  .toast {
    min-width: 0;
    width: 100%;
  }

  .mobile-quick-nav {
    display: flex !important;
  }
}

@media (min-width: 769px) {
  .mobile-topbar { display: none !important; }
  .mobile-quick-nav { display: none !important; }
  .mobile-tabbar { display: none !important; }
  .sidebar-overlay { display: none !important; }
}

/* KANBAN BOARD & PACING WIDGET STYLES */
.kanban-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  align-items: flex-start;
}
@media (min-width: 1200px) {
  .kanban-grid {
    grid-template-columns: repeat(5, minmax(230px, 1fr));
  }
}
.kanban-column {
  background: #FAFAFB;
  border: 1px solid #E7E9ED;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 260px);
  min-height: 480px;
}
.kanban-column-header {
  padding: 12px 14px;
  border-bottom: 1px solid #E7E9ED;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}
.kanban-cards-list {
  padding: 10px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kanban-card {
  background: #ffffff;
  border: 1px solid #E7E9ED;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kanban-card:hover {
  border-color: #DCD0F5;
  box-shadow: 0 4px 12px rgba(107,63,212,0.08);
  transform: translateY(-1px);
}
.pacing-bar-container {
  height: 8px;
  background: #F6F7F9;
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
}
.pacing-bar-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================
   PRINT & PDF EXPORT STYLES (HOST PAYROLL SHEET)
   ========================================== */
@media print {
  @page {
    size: A4 portrait;
    margin: 10mm 12mm;
  }
  body, html {
    background: #ffffff !important;
    color: #14161B !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body * {
    visibility: hidden;
  }
  #modal-payroll-ticket,
  #modal-payroll-ticket .modal-content,
  #payroll-printable-sheet,
  #payroll-printable-sheet * {
    visibility: visible;
  }
  #modal-payroll-ticket {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    opacity: 1 !important;
    z-index: 9999 !important;
  }
  #modal-payroll-ticket .modal-content {
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }
  #modal-payroll-ticket .modal-header,
  #modal-payroll-ticket .modal-footer,
  #modal-payroll-ticket .btn-close-modal,
  .no-print {
    display: none !important;
  }
  #payroll-printable-sheet {
    border: 1px solid #E7E9ED !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    padding: 24px !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    page-break-inside: avoid !important;
    background: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}




/* =====================================================================
   NOIR LIGHT v6.0 — компонентные переопределения (по макету редизайна)
   ===================================================================== */
.page-title, .heading-1 { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }

/* Sidebar */
.sidebar { width: 248px; min-width: 248px; }
.sidebar-logo { border-bottom: none; padding: 20px 18px 8px; }
.sidebar-logo-icon { background: var(--primary); box-shadow: none; border-radius: 9px; width: 34px; height: 34px; }
.sidebar-logo-text { font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink); }
.sidebar-logo-sub { color: var(--text-muted); }
.sidebar-section-title { font-size: 10px; font-weight: 600; letter-spacing: 0.12em; color: #717786; padding: 16px 12px 6px; }
.sidebar-nav { gap: 2px; padding: 8px 14px; }
.sidebar-item { font-size: 14px; padding: 9px 12px; border-radius: 10px; }
.sidebar-item:hover { background: var(--page-bg); }
.sidebar-item.active { background: var(--ink) !important; color: #FFFFFF !important; box-shadow: none; }
.sidebar-item svg { width: 18px; height: 18px; }
.sidebar-badge { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--primary); color: #FFFFFF; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.sidebar-item.active .sidebar-badge { background: #FFFFFF; color: var(--primary); }
.sidebar-quick-btn-primary { background: var(--ink); color: #FFFFFF; border: 1px solid var(--ink); }
.sidebar-quick-btn-primary:hover { background: #2A2E38; }
.sidebar-quick-btn-secondary { background: #FFFFFF; color: var(--ink); border: 1px solid var(--border-strong); }

/* Top bar */
.top-navbar { background: rgba(244,241,249,0.92); }

/* Buttons */
.btn-primary, .ios-btn-primary { box-shadow: none; }
.btn-primary:hover, .ios-btn-primary:hover { box-shadow: none; }
.btn-secondary, .ios-btn-secondary { background: #FFFFFF; border-color: var(--border-strong); }
.btn-secondary:hover, .ios-btn-secondary:hover { background: var(--page-bg); }
.btn-outline { color: var(--ink) !important; border-color: var(--border-strong); }
.btn-outline:hover { background: var(--page-bg); border-color: var(--ink); }
.btn-success { box-shadow: none; }
.btn-md { border-radius: 12px; min-height: 40px; }
.btn-lg { border-radius: 14px; min-height: 48px; }

/* Segmented controls & chips: активный — чернильный */
.ios-segmented, .ios-segmented-nav { background: #FFFFFF; border-color: var(--border); }
.ios-segmented button.active, .ios-segmented-nav button.active, .dash-period-btn.active, .cohort-period-btn.active, .dash-club-btn.active, .pnl-period-btn.active, .pnl-club-btn.active, .leads-club-btn.active, .leads-period-btn.active, .players-club-btn.active, .players-period-btn.active, .events-club-btn.active, .events-period-btn.active, .fc-club-btn.active, .fc-period-btn.active, .club-segmented-btn.active, .period-segmented-btn.active {
  background: var(--ink); color: #FFFFFF !important; box-shadow: none;
}
.outreach-status-pill, .filter-chip { border-radius: 18px; border-color: var(--border-strong); }
.outreach-status-pill.active, .filter-chip.active { background: var(--ink) !important; border-color: var(--ink) !important; box-shadow: none; }
.mobile-quick-tab.active { background: var(--ink) !important; border-color: var(--ink) !important; box-shadow: none; }
.mobile-tab-item.active { color: var(--primary); }
.mobile-tab-item.active svg { stroke: var(--primary); }
.nav-tab.active { color: var(--ink); }

/* Forms */
.form-input, .form-textarea, .ios-input, .form-select, .ios-select { border-color: var(--border-strong); }
.form-checkbox:checked, .ios-checkbox:checked { background-color: var(--primary); border-color: var(--primary); }

/* Cards & tables */
.ios-card { border-radius: 18px; }
.ios-card-interactive:hover { box-shadow: 0 6px 18px rgba(20,22,27,0.06); }
.ios-table thead tr, .table-thead tr { background: #FAFAFB; }
.ios-table th, .table-th { font-weight: 600; letter-spacing: 0.08em; }
.ios-table tbody tr, .table-tr { border-bottom-color: #EDEFF2; }
.ios-table tbody tr:hover, .table-tr:hover { background-color: #FAFAFB; }
.table-td-num { color: var(--ink); }

/* Avatars & chips */
.player-avatar { background: #F6F7F9; color: var(--ink); border: 1px solid var(--border); }
.tag-chip { background: #FAFAFB; color: var(--text-secondary); border: 1px dashed var(--border-strong); }
.tag-chip:hover { background: #FFFFFF; border-color: var(--ink); color: var(--ink); }

/* Badges — палитра Noir Light (VIP = золото, промо = зелёный) */
.badge-pill { height: 22px; border: none !important; }
.badge-cat-regular { background: rgba(59, 123, 224, 0.12); color: #2457B0; }
.badge-cat-corporate { background: rgba(107,63,212,0.12); color: #6B3FD4; }
.badge-cat-promo { background: rgba(46, 158, 104, 0.12); color: #1C7A4C; }
.badge-cat-vip { background: rgba(227,168,18,0.16); color: #946500; }
.badge-cat-host { background: rgba(184, 50, 128, 0.10); color: #A8306E; }
.badge-cat-other_club { background: rgba(20,22,27,0.06); color: #4A5060; }
.badge-cat-lost { background: var(--danger-light); color: var(--danger); }
.badge-stage-lead, .badge-stage-first_game { background: rgba(227,168,18,0.16); color: #946500; }
.badge-stage-booked { background: rgba(107,63,212,0.12); color: #6B3FD4; }
.badge-stage-repeat { background: rgba(59, 123, 224, 0.12); color: #2457B0; }
.badge-stage-regular_active, .badge-stage-vip_core { background: rgba(46, 158, 104, 0.12); color: #1C7A4C; }
.badge-stage-dormant { background: var(--danger-light); color: var(--danger); }
.badge-stage-archived { background: rgba(20,22,27,0.06); color: #6A7080; }

/* Kanban & misc */
.kanban-col { background: #FAFAFB; border: 1px solid #EDEFF2; }
.toast { background: var(--ink); }
.dropzone { background: #FAFAFB; border-color: var(--border-strong); }
.dropzone:hover, .dropzone.dragover { background: var(--primary-light); }

/* ---------- v6.1 · Дашборд ---------- */
.kpi-value { font-family: var(--font-display); font-weight: 500; font-size: 26px; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi-value-xl { font-size: 40px; font-weight: 700; }
.kpi-card { padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.kpi-card-label { font-size: 13px; color: var(--text-secondary); }
.kpi-card-sub { font-size: 12px; color: var(--text-muted); }
.kpi-mini { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px; background: #FAFAFB; border: 1px solid #EDEFF2; }
.kpi-mini-link { cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.kpi-mini-link:hover { border-color: var(--ink); background: #FFFFFF; }
.kpi-mini-label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.kpi-mini-value { font-size: 17px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi-mini-sub { font-size: 11px; color: var(--text-muted); }
.kpi-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.kpi-trend { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 7px; font-size: 12px; font-weight: 600; }
.kpi-trend-up { background: rgba(46, 158, 104, 0.12); color: #1C7A4C; }
.kpi-trend-down { background: rgba(107,63,212,0.12); color: #B8322E; }
.kpi-trend-neutral { background: rgba(20,22,27,0.06); color: #4A5060; }
.pacing-row { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid #EDEFF2; }
.pacing-bar-container { background: #EDEFF2; }
.pacing-bar-fill { background: var(--ink); }

/* ---------- v6.1 · Чекин вечера ---------- */
.qc-modal { max-width: 1040px; }
.qc-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink); }
.qc-hud-tile { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 14px; background: #FFFFFF; border: 1px solid var(--border); }
.qc-hud-label { font-size: 12px; color: var(--text-secondary); }
.qc-hud-value { font-family: var(--font-display); font-size: 22px; font-weight: 500; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.qc-hud-sub { font-size: 11px; color: var(--text-muted); }
.qc-hud-tile-profit { background: #E7F4EC; border-color: #BFE0CC; }
.qc-hud-tile-profit .qc-hud-label, .qc-hud-tile-profit .qc-hud-sub { color: #1C6B45; }
.qc-hud-tile-profit .qc-hud-value { color: #0F3D27; }
.qc-panel { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 16px; background: #FFFFFF; border: 1px solid var(--border); }
.qc-input { min-height: 44px; font-size: 14px; }
.qc-chip { min-height: 44px; padding: 0 8px; border-radius: 10px; border: 1px solid var(--border-strong); background: #FFFFFF; color: var(--text-secondary); font: 600 13px var(--font-sans); cursor: pointer; transition: all .15s ease; }
.qc-chip:hover { border-color: var(--ink); color: var(--ink); }
.qc-chip.is-active { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.qc-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--border-strong); background: #FFFFFF; font-size: 13px; font-weight: 500; color: var(--text-secondary); cursor: pointer; user-select: none; transition: all .15s ease; }
.qc-toggle:has(input:checked) { border-color: var(--primary); background: var(--primary-light); color: #4D2896; }
.qc-toggle-hint { font-size: 11px; opacity: .7; }
.qc-tag { display: inline-flex; padding: 2px 7px; border-radius: 6px; font-size: 10px; font-weight: 600; background: #F6F7F9; color: #4A5060; margin-right: 2px; }
.qc-legend { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.qc-seat-map { position: relative; width: 100%; aspect-ratio: 16 / 11; min-height: 280px; }
.qc-felt { position: absolute; left: 20%; right: 20%; top: 25%; bottom: 25%; border-radius: 50%; background: radial-gradient(ellipse at center, #2A5A41 0%, #1E4431 72%); border: 6px solid #5A3E22; box-shadow: inset 0 0 30px rgba(0,0,0,.35); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.qc-felt-title { font-family: var(--font-display); font-size: 12px; letter-spacing: .14em; color: #CFEBDC; }
.qc-felt-sub { font-size: 11px; color: #A9D3BC; }
.qc-seat { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 3px; width: 84px; background: none; border: 0; padding: 0; cursor: default; font-family: inherit; }
button.qc-seat { cursor: pointer; }
.qc-seat-chip { position: relative; width: 46px; height: 46px; border-radius: 50%; border: 2px solid #C9CDD6; background: #FFFFFF; color: var(--ink); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.qc-seat-free { border-style: dashed; border-color: var(--primary); color: var(--primary); font-size: 18px; }
.qc-seat-empty { border-style: dashed; background: transparent; }
.qc-seat-num { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #FFFFFF; border: 1px solid var(--border); color: var(--text-muted); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.qc-seat-name { font-size: 11px; color: var(--text-secondary); white-space: nowrap; max-width: 84px; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .qc-seat-map { min-height: 240px; } .qc-seat { width: 64px; } .qc-seat-chip { width: 38px; height: 38px; font-size: 11px; } }

/* ---------- v6.4 · общие компоненты экранов ---------- */
:root { --bg-surface: #FFFFFF; --bg-surface-elevated: #FAFAFB; --border-subtle: #E7E9ED; }
.card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 18px; box-shadow: var(--card-shadow); }
.badge { display: inline-flex; align-items: center; height: 22px; border-radius: 9999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.section-title { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; }
.kpi-card-alert { background: #FCEDEC; border-color: #DCD0F5; }
.kpi-card-alert .kpi-card-label, .kpi-card-alert .kpi-card-sub { color: #9E2A26; }
.kpi-card-alert .kpi-value { color: #5E1714 !important; }
.pnl-net-card { background: #E7F4EC !important; border-color: #BFE0CC !important; }
.pnl-net-card .kpi-value { color: #0F3D27; }

/* Активные вкладки — чернильные */
.fc-mode-btn.active, .settings-tab-btn.active { background: var(--ink) !important; color: #FFFFFF !important; box-shadow: none !important; }
.fc-mode-btn.active svg, .settings-tab-btn.active svg { color: #FFFFFF !important; }
#salary-tab-mgr.btn-primary, #salary-tab-hosts.btn-primary { background: var(--ink); border-color: var(--ink); }

/* Лиды */
.lead-stage-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px; gap: 4px; }
.lead-stage { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; }
.lead-stage + .lead-stage { border-left: 1px solid #EDEFF2; border-radius: 0; }
.lead-stage-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.lead-stage-label { flex: 1; font-size: 13px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead-stage-num { font-size: 16px; font-weight: 700; color: var(--ink); }
@media (max-width: 900px) { .lead-stage-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lead-stage + .lead-stage { border-left: 0; } }
.kanban-column { background: #FAFAFB; border-color: #EDEFF2; border-radius: 16px; }
.kanban-column-header { background: transparent; border-bottom: 0; padding: 14px 14px 6px; }
.kanban-count { font-size: 12px; color: var(--text-secondary); padding: 2px 8px; border-radius: 8px; background: #FFFFFF; border: 1px solid #EDEFF2; }
.lead-card { gap: 10px; border-radius: 12px; }
.lead-card.is-late { border-color: #E9B4B1; }
.lead-wait { font-size: 11px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.lead-wait.is-late { color: #B8322E; }
.lead-chip { display: inline-flex; padding: 3px 8px; border-radius: 7px; background: #F6F7F9; color: #4A5060; font-size: 11px; }
.lead-note { font-size: 12px; color: #4A5060; line-height: 1.4; padding: 8px 10px; border-radius: 10px; background: #FAFAFB; }
.lead-icon-btn { min-width: 30px; height: 30px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--border); background: #FFFFFF; color: #4A5060; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; transition: all .15s ease; }
.lead-icon-btn:hover { border-color: var(--ink); color: var(--ink); }
.lead-icon-danger:hover { border-color: #DCD0F5; color: #6B3FD4; background: #FCEDEC; }

/* Вечера */
.ev-card { padding: 20px; display: flex; flex-direction: column; gap: 14px; cursor: pointer; }
.ev-date { width: 52px; height: 58px; border-radius: 12px; background: #FAFAFB; border: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1.05; }
.ev-date-dow, .ev-date-mon { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.ev-date-day { font-family: var(--font-display); font-size: 19px; font-weight: 500; color: var(--ink); }
.ev-tag { display: inline-flex; padding: 3px 8px; border-radius: 7px; font-size: 11px; font-weight: 600; background: #F6F7F9; color: #4A5060; white-space: nowrap; }
.ev-tag-plan { background: rgba(46, 158, 104, 0.12); color: #1C7A4C; }
.ev-tag-corp { background: rgba(107,63,212,0.12); color: #6B3FD4; }

/* ---------- v6.5 · экраны по макету ---------- */
/* Вкладки с подчёркиванием (Telegram, Прогноз) */
.tg-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tg-tab { height: 44px; padding: 0 16px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: var(--text-muted); font: 600 14px var(--font-sans); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; transition: color .15s ease; }
.tg-tab:hover { color: var(--ink); }
.tg-tab.active { color: var(--ink); border-bottom-color: var(--primary); }
.tg-tab.fc-mode-btn, .tg-tab.fc-mode-btn.active { background: transparent !important; box-shadow: none !important; border-radius: 0; padding: 0 16px; }
.tg-tab.fc-mode-btn.active { color: var(--ink) !important; border-bottom-color: var(--primary) !important; }
.tg-tab-count { font-size: 11px; padding: 2px 7px; border-radius: 8px; background: #EDEFF2; color: #4A5060; font-weight: 600; }

/* Telegram */
.tg-editor { border: 1px solid var(--border-strong); border-radius: 12px; overflow: hidden; background: #FFFFFF; }
.tg-editor:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(20,22,27,0.08); }
.tg-editor-bar { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid #EDEFF2; background: #FAFAFB; }
.tg-fmt-btn { min-width: 32px; height: 32px; padding: 0 6px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font-size: 14px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tg-fmt-btn:hover { background: #EDEFF2; }
.tg-editor-text { width: 100%; border: 0; outline: none; padding: 14px; resize: vertical; min-height: 170px; font: 400 14px/1.5 var(--font-sans); color: var(--ink); background: #FFFFFF; display: block; }
.tg-preview-panel { background: #DCE6EE; border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.tg-preview-label { font-size: 12px; font-weight: 600; color: #4E5F6E; }
.tg-chat-bg { background-color: #DCE6EE; background-image: none; }
.tpl-chip, .var-chip { height: 34px; padding: 0 12px; border-radius: 17px; border: 1px solid var(--border-strong); background: #FFFFFF; color: var(--ink); font: 500 13px var(--font-sans); cursor: pointer; transition: all .15s ease; }
.tpl-chip:hover, .var-chip:hover { border-color: var(--ink); }
.var-chip { height: 30px; border-radius: 8px; border-style: dashed; background: #FAFAFB; color: #4A5060; font: 500 12px ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Настройки */
.settings-nav { display: flex; flex-direction: column; gap: 2px; }
.settings-nav .settings-tab-btn { height: 44px; padding: 0 14px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--text-secondary); font: 500 14px var(--font-sans); text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; }
.settings-nav .settings-tab-btn:hover { color: var(--ink); background: rgba(255, 255, 255, 0.6); }
.settings-nav .settings-tab-btn.active { background: #FFFFFF !important; color: var(--ink) !important; border-color: var(--border) !important; box-shadow: none !important; font-weight: 600; }
.settings-nav-count { font-size: 12px; color: var(--text-muted); font-weight: 500; }
@media (max-width: 1023px) { .settings-nav { flex-direction: row; overflow-x: auto; } .settings-nav .settings-tab-btn { white-space: nowrap; } }
.seg-chip { height: 36px; padding: 0 14px; border-radius: 18px; border: 1px solid var(--border-strong); background: #FFFFFF; color: #4A5060; font: 500 13px var(--font-sans); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: all .15s ease; }
.seg-chip:hover { border-color: var(--ink); color: var(--ink); }
.seg-chip.is-active { background: var(--ink); border-color: var(--ink); color: #FFFFFF; }
.seg-chip-sub { font-size: 11px; opacity: .7; }

/* Импорт */
.imp-dropzone { border: 2px dashed var(--border-strong); border-radius: 16px; background: #FAFAFB; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; transition: all .15s ease; }
.imp-dropzone:hover, .imp-dropzone:focus-visible, .imp-dropzone.dragover { border-color: var(--primary); background: var(--primary-light); outline: none; }
.imp-drop-icon { width: 56px; height: 56px; border-radius: 16px; background: #FFFFFF; border: 1px solid var(--border); color: var(--primary); display: flex; align-items: center; justify-content: center; }
.imp-action { padding: 20px; display: flex; align-items: flex-start; gap: 16px; }
.imp-action-icon { width: 44px; height: 44px; border-radius: 12px; background: #F6F7F9; color: var(--ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* P&L */
.pnl-step { width: 22px; height: 22px; border-radius: 6px; background: #F6F7F9; font-size: 12px; font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.pnl-line { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.pnl-line-label { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.pnl-line-value { font-size: 20px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.pnl-line-hint { font-size: 12px; color: var(--text-muted); }
.pnl-tag { font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 3px 6px; border-radius: 6px; background: #F6F7F9; color: #4A5060; }

/* Зарплата */
.pay-hero { background: var(--ink); color: #FFFFFF; border-radius: 18px; padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.pay-hero-tile { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 12px; background: #24242A; }
.pay-hero-label { font-size: 12px; color: #BCC1CC; }
.pay-hero-value { font-size: 18px; font-weight: 700; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.pay-hero-sub { font-size: 11px; color: #9AA0AE; }
.pay-tier { display: grid; grid-template-columns: 64px minmax(0, 1fr) 96px; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid #EDEFF2; }
.pay-tier-pct { font-family: var(--font-display); font-size: 20px; font-weight: 500; }
.ios-segmented-nav #salary-tab-mgr.btn-secondary, .ios-segmented-nav #salary-tab-hosts.btn-secondary { background: transparent; border-color: transparent; color: var(--text-secondary) !important; }

/* Промо */
.promo-rules { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding: 16px 20px; font-size: 13px; color: var(--text-secondary); }
.promo-hero { background: #E7F4EC !important; border-color: #BFE0CC !important; }
.promo-hero.promo-hero-loss { background: #FCEDEC !important; border-color: #DCD0F5 !important; }
.promo-range, input[type="range"] { accent-color: var(--primary); }

/* Прогноз */
.target-seg-btn { border-radius: 18px !important; }
.target-seg-btn.active { background: var(--ink) !important; color: #FFFFFF !important; box-shadow: none !important; }

/* Старые модальные окна (.modal / .modal-dialog) */
.modal { position: fixed; inset: 0; z-index: 55; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal.hidden { display: none; }
.modal > .modal-backdrop { z-index: 0; }
.modal-dialog { position: relative; z-index: 1; width: 100%; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px; box-shadow: 0 25px 50px -12px rgba(20,22,27,0.25); overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - 32px); }
.modal-title { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--ink); }
.modal-close { width: 32px; height: 32px; border-radius: 9999px; background: #F6F7F9; color: var(--text-muted); border: 0; font-size: 18px; cursor: pointer; }
.modal-close:hover { background: #E7E9ED; color: var(--ink); }
.modal-header h3, .modal-header .heading-2 { font-family: var(--font-display); }

/* ==========================================================================
   v8.0 · Neutral minimal — холодные серо-белые поверхности, чернильные кнопки, один фиолетовый акцент.
   ========================================================================== */
body {
  font-family: var(--font-sans);
  background-color: var(--page-bg);
  background-image: none;
  background-attachment: fixed;
}
.main-content { background: transparent; }
::selection { background: rgba(107, 63, 212, 0.25); }

/* Заголовки — Oswald uppercase */
.page-title, .heading-1 {
  font-family: var(--font-sans); font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.15; font-size: 24px; color: var(--ink);
}
@media (max-width: 768px) { .page-title, .heading-1 { font-size: 24px; } }
.section-title, .ios-card h2, .card h2, .qc-title, .modal-header h3, .modal-title {
  font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.005em;
}
.ios-card h2 { font-size: 17px; }
.kpi-value, .qc-hud-value, .kpi-mini-value { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi-value:not(.kpi-value-xl) { font-size: clamp(18px, 1.8vw, 26px); }
.kpi-value-xl { font-size: 40px; font-weight: 500; color: var(--ink); }
.kpi-card-label, .kpi-mini-label, .qc-hud-label, .ios-table th, .table-th, .form-label, .sidebar-section-title { letter-spacing: 0.06em; text-transform: uppercase; }
.kpi-card-label, .kpi-mini-label, .qc-hud-label { font-size: 11px; }

/* Карточки — белые, тонкий фиолетовый контур, мягкое свечение при наведении */
.ios-card, .card, .kpi-card, .qc-panel, .qc-hud-tile { border-color: #E7E9ED; box-shadow: none; }
.ios-card-interactive:hover, .kpi-mini-link:hover { border-color: rgba(107, 63, 212, 0.5); box-shadow: 0 4px 16px rgba(20, 22, 27, 0.08); }
.qc-hud-tile-profit { border-color: rgba(242, 182, 38, 0.7); box-shadow: none; }

/* Кнопки — как «Записаться» на сайте */
.btn { font-family: var(--font-sans); font-weight: 500; letter-spacing: 0; }
.btn-primary, .ios-btn-primary {
  background: var(--ink) !important; border-color: var(--ink) !important; color: #FFFFFF !important;
  box-shadow: none
;
}
.btn-primary:hover, .ios-btn-primary:hover { background: #2A2E38 !important; box-shadow: none
; }
.btn-secondary, .ios-btn-secondary { background: #FFFFFF !important; color: var(--ink) !important; border: 1px solid var(--border-strong) !important; box-shadow: none !important; }
.btn-secondary:hover, .ios-btn-secondary:hover { background: var(--page-bg) !important; border-color: var(--border-strong) !important; }

/* Навигация */
.sidebar-logo-icon { background: var(--ink); box-shadow: none; }
.sidebar-logo-text { font-family: var(--font-sans); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.sidebar-logo-sub { font-size: 10.5px; letter-spacing: 0.04em; }
.sidebar-item:hover { background: var(--page-bg); color: var(--ink); }
.sidebar-item.active { background: var(--page-bg) !important; color: var(--ink) !important; box-shadow: inset 2px 0 0 var(--accent-violet) !important; }
.sidebar-item.active svg { stroke: var(--accent-violet) !important; }
.sidebar-item.active .sidebar-badge { background: var(--accent-violet); color: #FFFFFF; }
.nav-tab.active, .tg-tab.active, .tg-tab.fc-mode-btn.active { color: var(--ink) !important; border-bottom-color: var(--accent-violet) !important; }

/* Активные чипы и сегменты — фиолетовые */
.qc-chip.is-active, .seg-chip.is-active, .filter-chip.active, .outreach-status-pill.active,
.mobile-quick-tab.active, .fc-mode-btn.active, .settings-tab-btn.active, .target-seg-btn.active,
#salary-tab-mgr.btn-primary, #salary-tab-hosts.btn-primary {
  background: var(--ink) !important; border-color: var(--ink) !important; color: #FFFFFF !important;
  box-shadow: none
;
}
.settings-nav .settings-tab-btn.active { background: #F0EBFC !important; color: #4D2896 !important; border-color: #DCD0F5 !important; box-shadow: none !important; }

/* Поля ввода — фиолетовый фокус */
.form-input:focus, .form-select:focus, .form-textarea:focus, .ios-input:focus, select:focus, textarea:focus, input:focus {
  border-color: var(--accent-violet) !important; box-shadow: 0 0 0 3px rgba(107, 63, 212, 0.18) !important; outline: none;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent-violet); }

/* Модалки — заголовок с золотой чертой */
.modal-content, .modal-dialog { border: 1px solid #E7E9ED; box-shadow: 0 4px 16px rgba(20, 22, 27, 0.08) !important; }

/* Прогресс-бары — фиолетовое свечение */
.pacing-bar-fill { background: linear-gradient(90deg, #5A31B8, var(--accent-violet)) !important; box-shadow: none
; }

/* Стол быстрого чекина — фиолетовое сукно с золотым бортом */
.qc-felt { background: radial-gradient(ellipse at center, #3A1D5C 0%, #24113D 72%) !important; border-color: var(--accent-yellow) !important; box-shadow: inset 0 0 30px rgba(0,0,0,.4), 0 0 24px rgba(107, 63, 212, 0.35) !important; }
.qc-felt-title { color: var(--accent-yellow) !important; font-family: var(--font-display); }

/* Сегментные переключатели клуб/период */
.ios-segmented button.active, .ios-segmented-nav button.active, .dash-period-btn.active, .cohort-period-btn.active, .dash-club-btn.active, .pnl-period-btn.active, .pnl-club-btn.active, .leads-club-btn.active, .leads-period-btn.active, .players-club-btn.active, .players-period-btn.active, .events-club-btn.active, .events-period-btn.active, .fc-club-btn.active, .fc-period-btn.active, .club-segmented-btn.active, .period-segmented-btn.active {
  background: var(--ink) !important; color: #FFFFFF !important; box-shadow: none
;
}


/* v8.0 — neutral minimal refinements */
.card { border-radius: 12px; }
.pnl-line-value { white-space: nowrap; font-size: clamp(14px, 1.2vw, 18px); font-variant-numeric: tabular-nums; }

/* Kanban drag & drop */
.kanban-card[draggable="true"] { cursor: grab; }
.kanban-card.is-dragging { opacity: 0.45; }
.kanban-column.is-drop-target { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink) inset; }

/* P&L waterfall */
.pnl-waterfall { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.pnl-wf-col { display: flex; flex-direction: column; gap: 6px; align-items: stretch; background: transparent; border: 1px solid transparent; border-radius: 12px; padding: 8px 4px; cursor: pointer; text-align: center; }
.pnl-wf-col:hover { background: var(--bg-soft, #FAFAFB); }
.pnl-wf-col.is-selected { border-color: var(--ink); }
.pnl-wf-value { font-size: 12px; font-weight: 600; color: var(--ink); }
.pnl-wf-track { position: relative; height: 160px; }
.pnl-wf-bar { position: absolute; left: 18%; right: 18%; border-radius: 6px; }
.pnl-wf-in { background: var(--ink); }
.pnl-wf-out { background: var(--danger, #B8322E); }
.pnl-wf-net { background: #2E9E68; }
.pnl-wf-loss { background: var(--danger, #B8322E); }
.pnl-wf-label { font-size: 11px; color: #6A7080; min-height: 28px; }
.pnl-waterfall-note { font-size: 13px; color: var(--ink); background: #FAFAFB; border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; }
@media (max-width: 640px) { .pnl-waterfall { overflow-x: auto; grid-template-columns: repeat(7, 88px); } }

/* Events calendar */
.ev-cal-scroll { overflow-x: auto; }
.ev-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); gap: 6px; min-width: 780px; }
.ev-cal-dow { font-size: 11px; font-weight: 600; color: #6A7080; text-transform: uppercase; letter-spacing: 0.04em; padding: 4px 6px; }
.ev-cal-cell { min-height: 96px; display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: #FFFFFF; }
.ev-cal-cell.is-empty { background: transparent; border-color: transparent; }
.ev-cal-cell.is-today { border-color: var(--ink); }
.ev-cal-day { font-size: 12px; font-weight: 600; color: #6A7080; }
.ev-cal-cell.is-today .ev-cal-day { color: var(--ink); }
.ev-cal-chip { text-align: left; font-size: 11px; font-weight: 600; padding: 3px 6px; border-radius: 6px; border: 0; cursor: pointer; background: #EDEFF2; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-cal-chip-plan { background: #F0EBFC; color: #6B3FD4; }
.ev-cal-chip-corp { background: #FFF6DD; color: #946500; }
.ev-cal-more { font-size: 11px; color: #6A7080; }

/* Club manager role: hide controls for actions the role cannot perform */
.role-club_manager .cm-hidden { display: none !important; }
.role-club_manager #modal-player-points-badge { display: none !important; }
.role-club_manager .sidebar-section-title,
.role-club_manager #global-club-segmented,
.role-club_manager #global-period-segmented,
.role-club_manager #mobile-club-select,
.role-club_manager #mobile-period-select { display: none !important; }

/* Promotion: blogger / promo contact card */
#modal-promotion-contact, #modal-promotion-template { z-index: 57; }
.bc-dialog { max-width: 1040px; border-radius: 24px; }
.bc-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 36px; height: 36px; border-radius: 10px; background: #FFFFFF; border: 1px solid #E7E9ED; font-size: 22px; line-height: 1; color: #4A5060; }
.bc-scroll { overflow-y: auto; min-height: 0; }
.bc-head { padding: 28px 64px 22px 32px; display: flex; gap: 20px; align-items: flex-start; border-bottom: 1px solid #E7E9ED; }
.bc-avatar { width: 72px; height: 72px; border-radius: 50%; background: #F0EBFC; color: #6B3FD4; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; flex-shrink: 0; }
.bc-name { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.01em; color: #14161B; }
.bc-pill { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: #F0EBFC; color: #5A31B8; }
.bc-pill.is-green { background: #E3F4EA; color: #1C6B43; }
.bc-pill.is-gray { background: #EEF0F3; color: #4A5060; }
.bc-pill.is-red { background: #FDECEC; color: #A3262A; }
.bc-sub { display: flex; align-items: center; gap: 14px; font-size: 14px; color: #4A5060; flex-wrap: wrap; }
.bc-sub a { color: #5A31B8; font-weight: 600; text-decoration: none; word-break: break-all; }
.bc-actions { display: flex; gap: 8px; flex-shrink: 0; position: relative; }
.bc-btn { height: 44px; padding: 0 16px; border-radius: 12px; border: 1px solid #D5D9E0; background: #FFFFFF; font-weight: 600; font-size: 14px; color: #14161B; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; text-decoration: none; cursor: pointer; }
.bc-btn:hover { background: #F6F7F9; }
.bc-btn.is-dark { background: #14161B; border-color: #14161B; color: #FFFFFF; }
.bc-btn.is-dark:hover { background: #2A2D35; }
.bc-btn.is-sm { height: 36px; padding: 0 12px; border-radius: 10px; font-size: 13px; }
.bc-btn.is-icon { width: 44px; padding: 0; }
.bc-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.bc-menu { position: absolute; top: 50px; right: 0; z-index: 5; min-width: 240px; background: #FFFFFF; border: 1px solid #E7E9ED; border-radius: 14px; box-shadow: 0 12px 32px rgba(20,22,27,.14); padding: 6px; }
.bc-menu button { display: block; width: 100%; text-align: left; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: #14161B; }
.bc-menu button:hover { background: #F6F7F9; }
.bc-steps { padding: 18px 32px; border-bottom: 1px solid #E7E9ED; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 8px; align-items: end; }
.bc-step { display: flex; flex-direction: column; gap: 8px; text-align: left; font-size: 13px; font-weight: 600; color: #14161B; padding: 4px 0; }
.bc-step span:first-child { height: 6px; border-radius: 3px; background: #E7E9ED; }
.bc-step.is-done span:first-child { background: #6B3FD4; }
.bc-step.is-current { color: #6B3FD4; font-weight: 700; }
.bc-step.is-todo { color: #6A7080; }
.bc-decline { font-size: 13px; font-weight: 600; color: #6A7080; padding: 6px 10px; border-radius: 8px; }
.bc-decline:hover, .bc-decline.is-on { color: #A3262A; background: #FDECEC; }
.bc-grid { padding: 24px 32px 32px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; }
.bc-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.bc-sec { border: 1px solid #E7E9ED; border-radius: 18px; padding: 20px; display: flex; flex-direction: column; gap: 12px; background: #FFFFFF; }
.bc-sec h3 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6A7080; }
.bc-sec-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bc-muted { font-size: 14px; line-height: 1.5; color: #4A5060; margin: 0; }
.bc-hint { font-size: 12px; color: #6A7080; }
.bc-big { font-size: 20px; font-weight: 800; color: #14161B; }
.bc-accent { font-size: 16px; font-weight: 600; color: #6B3FD4; }
.bc-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.bc-chip { font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 8px; background: #F6F7F9; color: #4A5060; }
.bc-chip.is-on { background: #6B3FD4; color: #FFFFFF; font-weight: 700; }
.bc-next { background: #FFF6E5; border-color: #F2DDB0; }
.bc-next h3 { color: #7A5200; }
.bc-next.is-late { background: #FDECEC; border-color: #F3C2C2; }
.bc-next.is-late h3 { color: #A3262A; }
.bc-next-date { font-size: 22px; font-weight: 800; color: #14161B; }
.bc-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bc-next .bc-btn.is-sm { border-color: #E8C98A; height: 40px; }
.bc-input { height: 44px; border-radius: 12px; border: 1px solid #D5D9E0; padding: 0 14px; font-size: 14px; font-weight: 500; color: #14161B; background: #FFFFFF; width: 100%; min-width: 0; }
.bc-next .bc-input { border-color: #E8C98A; background: rgba(255,255,255,.7); }
.bc-table { display: flex; flex-direction: column; }
.bc-trow { display: grid; grid-template-columns: 92px minmax(0, 1fr) 80px 70px; gap: 12px; font-size: 14px; align-items: center; padding: 8px 0; text-align: left; width: 100%; color: #14161B; }
.bc-trow + .bc-trow { border-top: 1px solid #F1F2F4; }
.bc-trow.is-head { font-size: 12px; font-weight: 600; color: #6A7080; padding-top: 0; }
.bc-trow.is-plan { color: #6A7080; }
button.bc-trow:hover { background: #FAFAFB; }
.bc-trow .r { text-align: right; font-variant-numeric: tabular-nums; }
.bc-trow a { color: #5A31B8; font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; border-radius: 14px; background: #FAFAFB; border: 1px solid #EDEFF2; }
.bc-form .bc-input { height: 40px; border-radius: 10px; font-size: 13px; }
.bc-form .full { grid-column: 1 / -1; }
.bc-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: #6A7080; }
.bc-form-actions { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; }
.bc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bc-tile { background: #FAFAFB; border: 1px solid #EDEFF2; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.bc-tile span { font-size: 12px; color: #6A7080; font-weight: 600; }
.bc-tile strong { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; color: #14161B; }
.bc-guest { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.bc-guest button { font-weight: 600; color: #14161B; text-align: left; }
.bc-guest button:hover { color: #5A31B8; }
.bc-ok { color: #1C6B43; font-weight: 600; }
.bc-player { display: flex; align-items: center; gap: 12px; }
.bc-player-av { width: 40px; height: 40px; border-radius: 50%; background: #E1F2E8; color: #1C7A4C; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex-shrink: 0; }
.bc-link { font-size: 13px; font-weight: 600; color: #5A31B8; padding: 8px 4px; }
.bc-ev { display: flex; gap: 12px; }
.bc-ev-dot { width: 8px; height: 8px; border-radius: 50%; background: #C9CDD6; margin-top: 6px; flex-shrink: 0; }
.bc-ev:first-of-type .bc-ev-dot { background: #6B3FD4; }
.bc-ev-text { font-size: 14px; font-weight: 600; color: #14161B; white-space: pre-line; word-break: break-word; }
.bc-ev-del { margin-left: auto; color: #A0A5B1; font-size: 18px; line-height: 1; padding: 0 4px; align-self: flex-start; }
.bc-ev-del:hover { color: #A3262A; }
.bc-note { display: flex; gap: 8px; }
@media (max-width: 860px) {
  .bc-grid { grid-template-columns: minmax(0, 1fr); }
  .bc-col { display: contents; }
}
@media (max-width: 640px) {
  #modal-promotion-card { padding: 0; align-items: stretch; }
  .bc-dialog { max-height: 100vh; height: 100%; border-radius: 0; border: 0; }
  .bc-head { padding: 18px 60px 16px 16px; flex-wrap: wrap; gap: 14px; }
  .bc-avatar { width: 56px; height: 56px; font-size: 20px; }
  .bc-name { font-size: 22px; }
  .bc-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr 44px; }
  .bc-menu { left: 0; right: auto; }
  .bc-steps { padding: 14px 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bc-steps .bc-step { font-size: 11px; }
  .bc-decline { grid-column: 1 / -1; justify-self: start; }
  .bc-grid { padding: 12px; gap: 12px; }
  .bc-col { gap: 12px; }
  .bc-sec { padding: 16px; border-radius: 18px; }
  .bc-trow { grid-template-columns: 78px minmax(0, 1fr) 56px; }
  .bc-trow .hide-sm { display: none; }
  .bc-input { font-size: 16px; }
}
.bc-dialog .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
/* the phone bottom-sheet rule lifts every .modal-backdrop to z 60, which hid old-style dialogs behind their blur */
.modal > .modal-backdrop { z-index: 0 !important; }

/* Leads: work queue instead of kanban */
#modal-create-lead { z-index: 58 !important; }
.ld-today { background: #FFF6E5; border: 1px solid #F2DDB0; border-radius: 18px; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; }
.ld-today.is-late { background: #FDECEC; border-color: #F3C2C2; }
.ld-today-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.ld-today-head strong { font-size: 14px; font-weight: 700; color: #7A5200; }
.ld-today.is-late .ld-today-head strong { color: #A3262A; }
.ld-today-head span { font-size: 13px; color: #4A5060; }
.ld-today-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ld-today-chips button { height: 36px; padding: 0 12px; border-radius: 10px; background: #FFFFFF; border: 1px solid #E8C98A; font-size: 13px; font-weight: 600; color: #14161B; white-space: nowrap; }
.ld-today-chips button span { color: #6A7080; font-weight: 500; }
.ld-today-chips button.is-late span { color: #A3262A; }
.ld-filter-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ld-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.ld-filter button { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid #E7E9ED; background: #FFFFFF; font-size: 13px; font-weight: 600; color: #4A5060; display: inline-flex; align-items: center; gap: 6px; }
.ld-filter button span { color: #6A7080; font-variant-numeric: tabular-nums; }
.ld-filter button.is-on { background: #14161B; border-color: #14161B; color: #FFFFFF; }
.ld-filter button.is-on span { color: rgba(255,255,255,.75); }
.ld-filter-hint { font-size: 12px; color: #6A7080; }
.ld-list { background: #FFFFFF; border: 1px solid #E7E9ED; border-radius: 20px; overflow: hidden; }
.ld-row { display: grid; grid-template-columns: minmax(170px, 1.6fr) minmax(100px, 1fr) 96px 56px 132px 120px 70px minmax(140px, 1.2fr) 112px; gap: 12px; align-items: center; padding: 12px 18px; font-size: 13px; color: #14161B; cursor: pointer; }
.ld-row + .ld-row { border-top: 1px solid #F1F2F4; }
.ld-row:hover { background: #FAFAFB; }
.ld-row.is-head { cursor: default; font-size: 12px; font-weight: 600; color: #6A7080; background: #FAFAFB; padding-top: 10px; padding-bottom: 10px; }
.ld-row.is-urgent { box-shadow: inset 3px 0 0 #D9A23A; }
.ld-row.is-late { box-shadow: inset 3px 0 0 #C9473F; }
.ld-name { font-weight: 700; font-size: 14px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-sub { font-size: 12px; color: #6A7080; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-stage { height: 32px; border-radius: 9px; border: 1px solid #E7E9ED; background: #FFFFFF; font-size: 12px; font-weight: 700; padding: 0 8px; width: 100%; color: #14161B; }
.ld-stage.s-new { background: #F0EBFC; border-color: #DCD0F5; color: #5A31B8; }
.ld-stage.s-confirmed { background: #EAF1FC; border-color: #CFDDF5; color: #2A5DB0; }
.ld-stage.s-booked { background: #FFF6E5; border-color: #F2DDB0; color: #7A5200; }
.ld-stage.s-attended { background: #E3F4EA; border-color: #C3E5D0; color: #1C6B43; }
.ld-stage.s-cancelled { background: #EEF0F3; color: #6A7080; }
.ld-late { color: #A3262A; font-weight: 600; }
.ld-warn { color: #7A5200; font-weight: 600; }
.ld-suggest { font-size: 12px; color: #6A7080; }
.ld-suggest button, .ld-linked { color: #5A31B8; font-weight: 600; }
.ld-action { height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid #D5D9E0; background: #FFFFFF; font-size: 13px; font-weight: 600; color: #14161B; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; white-space: nowrap; width: 100%; }
.ld-action.is-dark { background: #14161B; border-color: #14161B; color: #FFFFFF; }
.ld-empty { padding: 40px 16px; text-align: center; font-size: 13px; color: #6A7080; }
.ld-kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 12px; font-size: 14px; }
.ld-kv dt { color: #6A7080; }
.ld-kv dd { margin: 0; font-weight: 600; color: #14161B; word-break: break-word; }
.ld-select { height: 40px; border-radius: 10px; border: 1px solid #D5D9E0; padding: 0 10px; font-size: 14px; background: #FFFFFF; width: 100%; color: #14161B; }
.ld-results { display: flex; flex-direction: column; gap: 4px; }
.ld-results button { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; font-size: 14px; font-weight: 600; text-align: left; color: #14161B; }
.ld-results button:hover { background: #F6F7F9; }
.ld-results button span { color: #6A7080; font-weight: 500; }
@media (max-width: 1180px) {
  .ld-list { background: transparent; border: 0; border-radius: 0; display: flex; flex-direction: column; gap: 10px; overflow: visible; }
  .ld-row.is-head { display: none; }
  .ld-row { background: #FFFFFF; border: 1px solid #E7E9ED; border-radius: 16px; grid-template-columns: minmax(0, 1fr) 132px; grid-template-areas: "name stage" "meta meta" "next next" "player player" "act act"; gap: 8px 12px; padding: 14px; }
  .ld-row + .ld-row { border-top: 1px solid #E7E9ED; }
  .ld-row > .c-name { grid-area: name; }
  .ld-row > .c-stage { grid-area: stage; }
  .ld-row > .c-meta { grid-area: meta; }
  .ld-row > .c-next { grid-area: next; }
  .ld-row > .c-player { grid-area: player; }
  .ld-row > .c-act { grid-area: act; }
  .ld-row > .c-src, .ld-row > .c-date, .ld-row > .c-guests, .ld-row > .c-wait { display: none; }
  .ld-row .c-meta, .ld-row .c-next, .ld-row .c-player { white-space: normal; color: #4A5060; }
  .ld-row .c-next:empty, .ld-row .c-player:empty { display: none; }
  .ld-row.is-urgent, .ld-row.is-late { box-shadow: none; }
  .ld-row.is-urgent { border-color: #E8C98A; }
  .ld-row.is-late { border-color: #F3C2C2; }
}
@media (min-width: 1181px) { .ld-row > .c-meta { display: none; } }
@media (max-width: 640px) {
  .bc-actions.ld-actions { grid-template-columns: 1fr 1fr; }
  .ld-actions > :nth-child(1) { order: 3; } .ld-actions > :nth-child(2) { order: 1; } .ld-actions > :nth-child(3) { order: 2; } .ld-actions > :nth-child(4) { order: 4; width: auto; }
}
@media (max-width: 640px) { .ld-filter-hint { display: none; } .ld-filter { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px; } .ld-filter button { flex-shrink: 0; } .ld-kv { grid-template-columns: 100px minmax(0, 1fr); } }

/* Locations */
#modal-location-form { z-index: 57; }
.lc-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lc-tile { background: #FFFFFF; border: 1px solid #E7E9ED; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.lc-tile span { font-size: 12px; font-weight: 600; color: #6A7080; }
.lc-tile strong { font-size: 26px; font-weight: 800; color: #14161B; font-variant-numeric: tabular-nums; }
.lc-tile small { font-size: 12px; color: #6A7080; }
.lc-tile.is-due { background: #FFF6E5; border-color: #F2DDB0; }
.lc-tile.is-due span { color: #7A5200; font-weight: 700; }
.lc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.lc-card { background: #FFFFFF; border: 1px solid #E7E9ED; border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 14px; cursor: pointer; text-align: left; }
.lc-card:hover { border-color: #C9CDD6; }
.lc-card.is-muted { background: #FAFAFB; border-style: dashed; border-color: #D5D9E0; }
.lc-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.lc-title { font-size: 18px; font-weight: 800; color: #14161B; display: block; }
.lc-card.is-muted .lc-title { color: #4A5060; }
.lc-addr { font-size: 13px; color: #4A5060; display: block; margin-top: 4px; }
.lc-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.lc-chip { font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: 8px; background: #F6F7F9; color: #4A5060; }
.lc-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.lc-steps div { display: flex; flex-direction: column; gap: 6px; font-size: 11px; font-weight: 600; color: #6A7080; }
.lc-steps div::before { content: ""; height: 5px; border-radius: 3px; background: #E7E9ED; }
.lc-steps div.is-done { color: #14161B; }
.lc-steps div.is-done::before { background: #6B3FD4; }
.lc-steps div.is-current { color: #6B3FD4; font-weight: 700; }
.lc-person { border-top: 1px solid #EDEFF2; padding-top: 12px; display: flex; align-items: center; gap: 12px; }
.lc-av { width: 40px; height: 40px; border-radius: 50%; background: #F0EBFC; color: #6B3FD4; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex-shrink: 0; }
.lc-card.is-muted .lc-av { background: #EEF0F3; color: #4A5060; }
.lc-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: #6A7080; }
.lc-add { border: 1px dashed #C9CDD6; border-radius: 20px; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 600; color: #4A5060; min-height: 200px; }
.lc-add small { font-size: 12px; font-weight: 500; color: #6A7080; }
.lc-loc-icon { width: 72px; height: 72px; border-radius: 18px; background: #F0EBFC; color: #6B3FD4; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lc-contact { display: flex; align-items: center; gap: 12px; }
.lc-contact + .lc-contact { border-top: 1px solid #EDEFF2; padding-top: 14px; }
.lc-contact-btns { display: flex; gap: 6px; flex-shrink: 0; }
.lc-primary { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #F0EBFC; color: #5A31B8; }
.lc-ev { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.lc-ev span:last-child { color: #6A7080; white-space: nowrap; }
@media (max-width: 900px) { .lc-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .lc-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .lc-card { padding: 16px; }
  .lc-loc-icon { width: 56px; height: 56px; }
  .lc-contact { flex-wrap: wrap; }
  .lc-contact-btns { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .lc-contact-btns .bc-btn { height: 44px; }
  .bc-actions.lc-actions { grid-template-columns: 1fr 1fr 44px; }
}

.bc-pill.is-amber{background:#FFF6E5;color:#7A5200}

/* Форма внутри старого модального окна: тело прокручивается, кнопки остаются видны */
.modal-dialog > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

/* Загрузка до того, как известна роль: меню не мелькает лишними пунктами */
.app-boot { display: none; }
body.auth-pending .app-boot { position: fixed; inset: 0; left: 240px; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; font: 600 15px Onest, system-ui, sans-serif; color: #14161B; }
body.auth-pending .app-boot svg { animation: app-boot-spin 0.9s linear infinite; }
@keyframes app-boot-spin { to { transform: rotate(360deg); } }
body.auth-pending #main-content { visibility: hidden; }
body.auth-pending .sidebar-nav > *,
body.auth-pending .mobile-quick-tab,
body.auth-pending .mobile-tab-item,
body.auth-pending .sidebar-quick-actions { visibility: hidden; }
body.auth-pending .sidebar-nav { position: relative; }
body.auth-pending .sidebar-nav::before { content: ""; position: absolute; left: 12px; right: 12px; top: 8px; height: 196px; border-radius: 10px;
  background: repeating-linear-gradient(to bottom, #EEF0F3 0 32px, transparent 32px 41px); }
@media (max-width: 768px) { body.auth-pending .app-boot { left: 0; } }

/* Экран входа */
.auth-screen { position: fixed; inset: 0; z-index: 300; display: flex; background: #F3F4F7; font-family: Onest, system-ui, sans-serif; color: #14161B; overflow-y: auto; }
.auth-screen.hidden { display: none !important; }
.auth-brand { width: 520px; flex: none; box-sizing: border-box; padding: 56px; background: #14161B; color: #FFFFFF; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.auth-brand-logo { display: flex; flex-direction: column; gap: 10px; }
.auth-brand-logo img { width: 240px; height: auto; display: block; }
.auth-brand-logo span { font-size: 13px; color: #B9BDC8; }
.auth-brand-lead h1 { margin: 0 0 16px; font-size: 40px; line-height: 1.1; font-weight: 800; color: #FFFFFF; }
.auth-brand-lead p { margin: 0; max-width: 360px; font-size: 16px; line-height: 1.5; color: #C9CCD5; }
.auth-brand-foot { font-size: 13px; color: #8D92A0; }
.auth-main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 48px 24px; }
.auth-form { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 20px; }
.auth-head h2 { margin: 0 0 6px; font-size: 28px; font-weight: 800; color: #14161B; }
.auth-head p { margin: 0; font-size: 15px; color: #4A5060; }
.auth-label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 600; color: #4A5060; }
.auth-input { height: 48px; width: 100%; box-sizing: border-box; padding: 0 14px; border-radius: 12px; border: 1px solid #D5D8DF; background: #FFFFFF; font: 500 16px Onest, system-ui, sans-serif; color: #14161B; }
.auth-input:focus { outline: 3px solid #E9E2FA; border-color: #5A31B8; }
.auth-input.is-invalid { border-color: #C2373C; }
.auth-pass { position: relative; display: flex; }
.auth-pass .auth-input { padding-right: 108px; }
.auth-pass-toggle { position: absolute; right: 6px; top: 6px; height: 36px; padding: 0 12px; border-radius: 9px; border: 0; background: #F3F4F7; color: #14161B; font: 600 13px Onest, system-ui, sans-serif; cursor: pointer; }
.auth-submit { height: 52px; border-radius: 12px; border: 0; background: #14161B; color: #FFFFFF; font: 700 16px Onest, system-ui, sans-serif; cursor: pointer; }
.auth-submit:disabled { opacity: 0.7; cursor: progress; }
.auth-note { margin: 0; font-size: 13px; color: #4A5060; text-align: center; }
.auth-error { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: #FDECEC; color: #8E1F23; font-size: 14px; line-height: 1.4; }
.auth-error.hidden { display: none; }
.auth-error svg { flex: none; margin-top: 1px; }
.auth-foot-mobile { display: none; text-align: center; color: #4A5060; }
@media (max-width: 860px) {
  .auth-screen { flex-direction: column; }
  .auth-brand { width: auto; padding: 40px 24px 28px; gap: 20px; }
  .auth-brand-logo img { width: 200px; }
  .auth-brand-lead h1 { font-size: 28px; margin: 0; }
  .auth-brand-lead p, .auth-brand > .auth-brand-foot { display: none; }
  .auth-main { align-items: flex-start; padding: 28px 24px; }
  .auth-input { height: 52px; }
  .auth-foot-mobile { display: block; }
}

/* Тёмное боковое меню (в стиле экрана входа) */
.sidebar { width: 248px; min-width: 248px; background: #14161B; border-right: 0; color: #FFFFFF; }
.sidebar-logo { padding: 26px 24px 8px; border-bottom: 0; }
.sidebar-logo-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sidebar-brand { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sidebar-brand img { display: block; width: 176px; height: 43px; object-fit: contain; object-position: left center; }
.sidebar-brand-sub { font-size: 12px; color: #8D92A0; }
.sidebar .sidebar-section-title { color: #7D8291; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; padding: 14px 12px 6px; }
.sidebar .sidebar-nav { padding: 16px 16px 12px; gap: 2px; }
.sidebar .sidebar-item { color: #C9CCD5; font-size: 14px; font-weight: 500; padding: 0 12px; min-height: 40px; border-radius: 10px; gap: 12px; }
.sidebar .sidebar-item svg { width: 18px; height: 18px; stroke: #8D92A0; opacity: 1; }
.sidebar .sidebar-item:hover { background: #1E2129; color: #FFFFFF; }
.sidebar .sidebar-item:hover svg { stroke: #C9CCD5; }
.sidebar .sidebar-item:focus-visible { outline: 2px solid #A88BFA; outline-offset: 1px; }
.sidebar .sidebar-item.active { background: #6B3FD4 !important; color: #FFFFFF !important; font-weight: 600; box-shadow: none !important; }
.sidebar .sidebar-item.active svg { stroke: #FFFFFF !important; }
.sidebar .sidebar-badge { background: #6B3FD4; color: #FFFFFF; }
.sidebar .sidebar-item.active .sidebar-badge { background: #FFFFFF; color: #5A31B8; }
.role-club_manager .sidebar .sidebar-item { min-height: 44px; font-size: 15px; }
.role-club_manager .sidebar .sidebar-nav { gap: 4px; }
.sidebar .sidebar-footer { padding: 12px 16px 20px; border-top: 0; background: transparent; display: flex; flex-direction: column; gap: 10px; }
.sidebar .sidebar-footer > * { margin: 0 !important; }
.sidebar-club-label { font-size: 12px; font-weight: 600; color: #8D92A0; padding: 0 4px; margin-bottom: -4px !important; }
.sidebar .sidebar-club-select { height: 44px; box-sizing: border-box; padding: 0 12px; gap: 10px; background: #1B1E25; border: 1px solid #2E323C; border-radius: 10px; color: #FFFFFF; }
.sidebar .sidebar-club-select svg { width: 18px; height: 18px; color: #8D92A0; }
.sidebar .sidebar-club-select select { color: #FFFFFF; font-size: 14px; font-weight: 600; height: 100%; }
.sidebar .sidebar-club-select select:disabled { opacity: 1; cursor: default; -webkit-appearance: none; appearance: none; }
.sidebar .sidebar-club-select option { color: #14161B; background: #FFFFFF; }
.sidebar .sidebar-quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sidebar .sidebar-quick-actions.hidden { display: none !important; }
.sidebar .sidebar-quick-btn { height: 40px; padding: 0 8px; border-radius: 10px; font-size: 14px; font-weight: 700; }
.sidebar .sidebar-quick-btn-primary { background: #FFFFFF; color: #14161B; border: 1px solid #FFFFFF; }
.sidebar .sidebar-quick-btn-primary:hover { background: #E7E9ED; }
.sidebar .sidebar-quick-btn-secondary { background: transparent; color: #FFFFFF; border: 1px solid #3A3F4B; }
.sidebar .sidebar-quick-btn-secondary:hover { background: #1E2129; color: #FFFFFF; }
.sb-user { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 10px; border-radius: 12px; background: #1B1E25; border: 0; color: #FFFFFF; text-align: left; font-family: inherit; }
.sb-user-guest { cursor: pointer; }
.sb-user-guest:hover { background: #23262E; }
.sb-user-avatar { width: 36px; height: 36px; flex: none; border-radius: 10px; background: #6B3FD4; color: #FFFFFF; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.sb-user-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sb-user-name { font-size: 14px; font-weight: 600; color: #FFFFFF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-role { font-size: 12px; color: #8D92A0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-logout { width: 36px; height: 36px; flex: none; border: 0; border-radius: 9px; background: transparent; color: #C9CCD5; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.sb-user-logout:hover { background: #2A2D36; color: #FFFFFF; }
.sidebar .mobile-sidebar-close { width: 44px; height: 44px; flex: none; background: #1B1E25; border: 0; color: #FFFFFF; font-size: 22px; font-weight: 400; }
.sidebar .mobile-sidebar-close:hover { background: #2A2D36; color: #FFFFFF; }
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: #2E323C; border-radius: 3px; }
body.auth-pending .sidebar-nav::before { left: 16px; right: 16px; top: 16px; background: repeating-linear-gradient(to bottom, #1E2129 0 40px, transparent 40px 44px); height: 216px; }
body.auth-pending .app-boot { left: 248px; }
@media (max-width: 768px) {
  .sidebar { width: 300px; min-width: 0; }
  .sidebar-logo { padding: 20px 16px 8px 24px; }
  .sidebar .sidebar-item { min-height: 48px; font-size: 16px; }
  body.auth-pending .app-boot { left: 0; }
}
.sidebar { overflow: hidden; }
.sidebar .sidebar-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.sidebar .sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar .sidebar-nav::-webkit-scrollbar-thumb { background: #2E323C; border-radius: 3px; }
.sidebar .sidebar-footer { flex: none; }
.sidebar-club-label { order: 1; }
.sidebar .sidebar-club-select { order: 2; }
.sidebar .sidebar-quick-actions { order: 3; }
#sidebar-user-badge { order: 4; }
body.auth-pending .sidebar-footer { visibility: hidden; }

/* ==========================================================
   CLUB MANAGER PHONE APP (view-home, concept C)
   ========================================================== */
.mobile-tab-item.cm-only { display: none; }
.role-club_manager .mobile-tab-item.cm-only { display: flex; }
/* Salary opens from the burger menu and the home tile; the 5-slot bottom bar stays as is */
.role-club_manager .mobile-tab-item[data-tab="managersalary"] { display: none !important; }
.role-club_manager .mobile-tabbar { grid-template-columns: repeat(5, 1fr); }
.role-club_manager .mobile-quick-nav { display: none !important; }

.cm-home, .cm-sheet {
  --cm-ink: #14161B; --cm-card: #FFFFFF; --cm-pg: #F3F4F7; --cm-mut: #6B7080; --cm-ln: #E7E9ED;
  --cm-vi: #6B3FD4; --cm-vil: #F0EBFC; --cm-vib: #DCD0F5; --cm-ye: #F2B626; --cm-yel: #FFF6DF;
  --cm-re: #D6453D; --cm-rel: #FDECEC; --cm-gr: #1F9D63; --cm-grl: #E3F5EC;
  --cm-font: Onest, system-ui, -apple-system, sans-serif;
  color: var(--cm-ink); font-family: var(--cm-font);
}
.cm-home { max-width: 560px; margin: 0 auto; background: var(--cm-pg); border-radius: 24px; overflow: hidden; border: 1px solid var(--cm-ln); }
.cm-app { display: flex; flex-direction: column; min-height: 640px; }

/* phone: the app takes the whole screen, no CRM top bar or bottom bar */
@media (max-width: 768px) {
  body.role-club_manager:has(#view-home:not(.hidden)) .mobile-topbar,
  body.role-club_manager:has(#view-home:not(.hidden)) .mobile-tabbar { display: none !important; }
  body.role-club_manager:has(#view-home:not(.hidden)) .page-container { padding: 0 !important; }
  body.role-club_manager:has(#view-home:not(.hidden)) .main-content { padding-bottom: 0 !important; background: #F3F4F7; }
  .cm-home { max-width: none; border-radius: 0; border: 0; overflow: visible; }
  .cm-app { min-height: 100vh; min-height: 100dvh; }
  .cm-hero, .cm-ahead { position: sticky; top: 0; z-index: 20; }
}

.cm-hero { background: var(--cm-ink); padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 16px; display: flex; flex-direction: column; gap: 12px; flex: none; }
.cm-hero-top { display: flex; align-items: center; gap: 10px; }
.cm-logo { height: 28px; width: auto; display: block; }
.cm-club { flex: 1; text-align: right; font-size: 12px; color: #A9AEBB; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-ahead { background: var(--cm-ink); color: #fff; padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 14px; display: flex; align-items: center; gap: 10px; flex: none; }
.cm-ttl { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cm-ttl b { font-size: 17px; font-weight: 700; }
.cm-ttl small { font-size: 12px; color: #A9AEBB; }
.cm-ibtn { width: 40px; height: 40px; border-radius: 12px; border: 0; background: rgba(255,255,255,.1); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; }
.cm-ibtn svg { width: 20px; height: 20px; }
.cm-ibtn.is-sm { width: 34px; height: 34px; border-radius: 10px; }
.cm-ibtn.is-sm svg { width: 18px; height: 18px; }
.cm-content { flex: 1; padding: 14px 14px calc(22px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 14px; }
.cm-content > * { flex-shrink: 0; }

.cm-srch { display: flex; align-items: center; gap: 8px; background: var(--cm-card); border: 1px solid var(--cm-ln); border-radius: 14px; padding: 0 6px 0 12px; height: 48px; cursor: text; }
.cm-srch svg { width: 19px; height: 19px; color: var(--cm-mut); flex: none; }
.cm-srch input { border: 0 !important; outline: 0; background: none !important; font: 500 16px var(--cm-font); color: var(--cm-ink); flex: 1; min-width: 0; height: 100%; padding: 0 !important; box-shadow: none !important; }
.cm-srch input::-webkit-search-cancel-button { display: none; }
.cm-srch:focus-within { border-color: var(--cm-vi); box-shadow: 0 0 0 3px rgba(107,63,212,.18); }
.cm-srch.is-dark { background: rgba(255,255,255,.1); border-color: transparent; }
.cm-srch.is-dark input { color: #fff; }
.cm-srch.is-dark input::placeholder { color: #A9AEBB; }
.cm-srch.is-dark:focus-within { box-shadow: 0 0 0 3px rgba(107,63,212,.45); }
.cm-srch-x { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #E7E9EE; color: var(--cm-ink); font-size: 20px; line-height: 1; cursor: pointer; flex: none; }
.cm-srch.is-dark .cm-srch-x { background: rgba(255,255,255,.16); color: #fff; }

.cm-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cm-tile { border: 1px solid var(--cm-ln); background: var(--cm-card); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; cursor: pointer; text-align: left; font-family: var(--cm-font); color: var(--cm-ink); min-height: 108px; }
.cm-tile:active { transform: scale(.98); }
.cm-ti { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #EEF0F3; }
.cm-ti svg { width: 21px; height: 21px; }
.cm-tile b { font-size: 15px; font-weight: 700; }
.cm-tile small { font-size: 12px; color: var(--cm-mut); font-weight: 500; margin-top: -6px; }
.cm-tile.is-vi { background: var(--cm-vi); border-color: var(--cm-vi); color: #fff; }
.cm-tile.is-vi .cm-ti { background: rgba(255,255,255,.18); }
.cm-tile.is-vi small { color: #E2D8FA; }

.cm-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cm-mut); padding: 0 4px; margin: 0; }
.cm-h em { font-style: normal; letter-spacing: 0; text-transform: none; font-weight: 600; }
.cm-rlabel { font-size: 13px; font-weight: 600; color: var(--cm-mut); padding: 0 4px; }
.cm-list { background: var(--cm-card); border-radius: 16px; border: 1px solid var(--cm-ln); overflow: hidden; }
.cm-row { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; min-height: 64px; border-bottom: 1px solid var(--cm-ln); cursor: pointer; text-align: left; width: 100%; color: var(--cm-ink); box-sizing: border-box; }
.cm-row:last-child { border-bottom: 0; }
.cm-row:active { background: #F7F7FA; }
.cm-row:focus-visible, .cm-tile:focus-visible, .cm-chip:focus-visible, .cm-btn:focus-visible, .cm-call:focus-visible, .cm-fseg:focus-visible, .cm-step:focus-visible { outline: 3px solid var(--cm-vi); outline-offset: -3px; }
.cm-av { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 14px; font-weight: 700; background: var(--cm-vil); color: var(--cm-vi); }
.cm-av.k-promo { background: var(--cm-yel); color: #8A5D00; }
.cm-av.k-loc { background: #E6F0FB; color: #2860A8; }
.cm-av.k-player { background: #EEF0F3; color: #3B404D; }
.cm-av.is-lg { width: 52px; height: 52px; font-size: 18px; }
.cm-rm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cm-rt { font-weight: 600; font-size: 15px; display: flex; gap: 6px; align-items: center; min-width: 0; }
.cm-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-rs { font-size: 13px; color: var(--cm-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-due { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; white-space: nowrap; flex: none; }
.cm-due.is-over { background: var(--cm-rel); color: var(--cm-re); }
.cm-due.is-today { background: var(--cm-yel); color: #8A5D00; }
.cm-due.is-new { background: var(--cm-vil); color: var(--cm-vi); }
.cm-due.is-later { background: #EEF0F3; color: #5B6070; }
.cm-call { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--cm-ink); color: #fff; display: grid; place-items: center; flex: none; cursor: pointer; }
.cm-call svg { width: 19px; height: 19px; }
.cm-call.is-ghost { background: var(--cm-vil); color: var(--cm-vi); }
.cm-chev { color: #B4B8C2; width: 18px; height: 18px; flex: none; }
.cm-empty { text-align: center; color: var(--cm-mut); font-size: 14px; padding: 24px 12px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cm-empty > svg { width: 26px; height: 26px; color: var(--cm-gr); }
.cm-empty .cm-btn { align-self: stretch; }

.cm-funnel { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; background: var(--cm-card); border: 1px solid var(--cm-ln); border-radius: 14px; padding: 4px; }
.cm-fseg { border: 0; background: none; border-radius: 10px; padding: 7px 2px; display: flex; flex-direction: column; align-items: center; gap: 1px; cursor: pointer; font-family: var(--cm-font); color: var(--cm-ink); }
.cm-fseg b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cm-fseg span { font-size: 10.5px; font-weight: 600; color: var(--cm-mut); }
.cm-fseg.is-on { background: var(--cm-ink); color: #fff; }
.cm-fseg.is-on span { color: #C9CCD5; }
.cm-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: #E7E9EE; border-radius: 12px; padding: 3px; }
.cm-seg button { border: 0; background: none; font: 600 13px var(--cm-font); color: var(--cm-mut); padding: 8px 4px; border-radius: 9px; cursor: pointer; }
.cm-seg button.is-on { background: var(--cm-card); color: var(--cm-ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.cm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cm-two .cm-btn { height: 44px; font-size: 13.5px; padding: 0 8px; }
.cm-tplc { background: var(--cm-card); border: 1px solid var(--cm-ln); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.cm-tplc h3 { font-size: 15px; font-weight: 700; margin: 0; }
.cm-tplc p { font-size: 14px; color: #3B404D; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.cm-ev { background: var(--cm-card); border: 1px solid var(--cm-ln); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.cm-ev-d { font-size: 12px; font-weight: 700; color: var(--cm-vi); text-transform: uppercase; letter-spacing: .04em; }
.cm-ev-p { font-size: 14px; font-weight: 600; line-height: 1.3; }
.cm-ev-p small { display: block; font-weight: 500; color: var(--cm-mut); font-size: 12.5px; }
.cm-bar { height: 6px; border-radius: 3px; background: #ECEEF2; overflow: hidden; }
.cm-bar i { display: block; height: 100%; background: var(--cm-vi); border-radius: 3px; }
.cm-ev-c { font-size: 12px; color: var(--cm-mut); font-variant-numeric: tabular-nums; }

.cm-btn { height: 48px; border-radius: 14px; border: 0; background: var(--cm-ink); color: #fff; font: 700 15px var(--cm-font); display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; text-decoration: none; padding: 0 14px; position: relative; box-sizing: border-box; }
.cm-btn svg { width: 18px; height: 18px; flex: none; }
.cm-btn.is-vi { background: var(--cm-vi); }
.cm-btn.is-dark { background: var(--cm-ink); }
.cm-btn.is-light { background: var(--cm-card); color: var(--cm-ink); border: 1px solid var(--cm-ln); }
.cm-btn.is-icon { padding: 0; }
.cm-btn.is-big { height: 50px; width: 100%; }
.cm-btn.is-md { height: 42px; font-size: 14px; }
.cm-btn.is-sm { height: 36px; font-size: 13px; border-radius: 10px; padding: 0 12px; }
.cm-btn:disabled, .cm-btn[disabled] { opacity: .4; cursor: default; }

/* sheets */
.cm-sheet-host { position: fixed; inset: 0; z-index: 56; }
.cm-sheet-host.hidden { display: none; }
body.cm-sheet-open { overflow: hidden; }
.cm-shade { position: absolute; inset: 0; background: rgba(15,16,22,.45); animation: cmFade .2s; }
.cm-sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 92vh; background: var(--cm-pg); border-radius: 24px 24px 0 0; display: flex; flex-direction: column; animation: cmUp .26s cubic-bezier(.16,1,.3,1); }
@supports (height: 100dvh) { .cm-sheet { max-height: 92dvh; } }
.cm-sheet.is-full { top: max(12px, env(safe-area-inset-top, 0px)); max-height: none; }
.cm-sheet.is-full .cm-sh-body { flex: 1; min-height: 0; padding-bottom: 40vh; }
@media (min-width: 769px) {
  .cm-sheet { left: 50%; right: auto; width: 480px; transform: translateX(-50%); bottom: 24px; border-radius: 24px; animation: cmFade .2s; max-height: calc(100vh - 48px); }
  .cm-sheet.is-full { top: 24px; }
  .cm-sheet.is-full .cm-sh-body { padding-bottom: 16px; }
  .cm-grab { display: none; }
  .cm-sh-head { padding-top: 16px !important; }
}
@keyframes cmUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes cmFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cm-sheet, .cm-shade { animation: none !important; } }
.cm-grab { width: 40px; height: 5px; border-radius: 3px; background: #C9CCD5; margin: 8px auto 0; flex: none; }
.cm-sh-head { display: flex; gap: 12px; align-items: center; padding: 10px 16px 0; flex: none; }
.cm-sh-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cm-sh-t h2 { font-size: 20px; font-weight: 800; line-height: 1.15; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-sh-t span { font-size: 14px; color: var(--cm-mut); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-x { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #E7E9EE; color: var(--cm-ink); font-size: 20px; cursor: pointer; flex: none; }
.cm-sh-body { overflow-y: auto; padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; scroll-padding-bottom: 24px; }
.cm-sh-body > * { flex-shrink: 0; }
.cm-sh-foot { flex: none; display: grid; grid-template-columns: 48px 1fr 1.3fr; gap: 8px; padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--cm-card); border-top: 1px solid var(--cm-ln); }
.cm-sh-foot.is-two { grid-template-columns: 1fr 2fr; }
@media (min-width: 769px) { .cm-sh-foot { border-radius: 0 0 24px 24px; } }
.cm-steps { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; }
.cm-step { border: 0; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; gap: 5px; font: 600 10.5px var(--cm-font); letter-spacing: -.01em; color: var(--cm-mut); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-step i { height: 5px; border-radius: 3px; background: #DADDE3; display: block; }
.cm-step.is-past i { background: var(--cm-vib); }
.cm-step.is-cur i { background: var(--cm-vi); }
.cm-step.is-cur { color: var(--cm-vi); }
.cm-step.is-lost.is-cur i { background: var(--cm-re); }
.cm-step.is-lost.is-cur { color: var(--cm-re); }
.cm-sumc { background: var(--cm-card); border: 1px solid var(--cm-ln); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.cm-sumc b { font-size: 15px; }
.cm-sumc span { font-size: 13px; color: var(--cm-mut); }
.cm-sumc p { font-size: 14px; color: #3B404D; margin: 6px 0 0; white-space: pre-line; }
.cm-nextc { display: flex; align-items: center; gap: 10px; background: var(--cm-yel); border: 1px solid #F3DFA6; border-radius: 14px; padding: 10px 10px 10px 12px; }
.cm-nextc.is-over { background: var(--cm-rel); border-color: #F5C9C6; }
.cm-nextc.is-none { background: var(--cm-card); border-color: var(--cm-ln); }
.cm-nextc > svg { width: 20px; height: 20px; color: #8A5D00; flex: none; }
.cm-nextc.is-over > svg { color: var(--cm-re); }
.cm-nextc.is-none > svg { color: var(--cm-mut); }
.cm-nextc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cm-nextc-t small { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8A5D00; }
.cm-nextc.is-over .cm-nextc-t small { color: var(--cm-re); }
.cm-nextc.is-none .cm-nextc-t small { color: var(--cm-mut); }
.cm-nextc-t b { font-size: 15px; }
.cm-move { flex: none; }
.cm-move input, .cm-datef input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; padding: 0; }
.cm-link { border: 0; background: none; font: 600 14px var(--cm-font); color: var(--cm-vi); padding: 4px; cursor: pointer; align-self: center; display: inline-flex; align-items: center; gap: 6px; }
.cm-link svg { width: 15px; height: 15px; }
.cm-link.is-muted { color: var(--cm-mut); font-size: 13px; }
.cm-hist { display: flex; flex-direction: column; background: var(--cm-card); border: 1px solid var(--cm-ln); border-radius: 16px; padding: 4px 14px; }
.cm-h-row { padding: 10px 0; border-bottom: 1px solid var(--cm-ln); display: flex; gap: 10px; }
.cm-h-row:last-child { border-bottom: 0; }
.cm-h-row svg { width: 16px; height: 16px; color: var(--cm-vi); flex: none; margin-top: 2px; }
.cm-h-row small { display: block; font-size: 12px; color: var(--cm-mut); }
.cm-h-row p { font-size: 14px; font-weight: 500; margin: 0; white-space: pre-line; }
.cm-facts { background: var(--cm-card); border: 1px solid var(--cm-ln); border-radius: 16px; padding: 4px 14px; display: flex; flex-direction: column; margin: 0; }
.cm-facts div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--cm-ln); font-size: 14px; }
.cm-facts div:last-child { border-bottom: 0; }
.cm-facts dt { color: var(--cm-mut); }
.cm-facts dd { margin: 0; font-weight: 600; text-align: right; }
.cm-tpl { background: var(--cm-card); border: 1px solid var(--cm-ln); border-radius: 14px; padding: 6px; display: flex; flex-direction: column; }
.cm-tpl button { display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 10px 8px; font: 600 14px var(--cm-font); color: var(--cm-ink); text-align: left; cursor: pointer; border-radius: 10px; }
.cm-tpl button:active { background: var(--cm-pg); }
.cm-tpl svg { width: 16px; height: 16px; color: var(--cm-vi); flex: none; }
.cm-tpl .cm-hint { padding: 8px; }
.cm-hint { font-size: 12px; color: var(--cm-mut); font-weight: 500; }
.cm-warn { background: var(--cm-rel); color: #8E1F23; border-radius: 10px; padding: 8px 10px; font-size: 13px; font-weight: 500; }
.cm-warn button { border: 0; background: none; color: inherit; font: 700 13px var(--cm-font); text-decoration: underline; padding: 0; cursor: pointer; }
.cm-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--cm-mut); }
.cm-field.is-dim .cm-chips, .cm-field.is-dim .cm-datef { opacity: .45; pointer-events: none; }
.cm-field input, .cm-field textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--cm-ln); border-radius: 12px; padding: 0 12px; font: 500 16px var(--cm-font); color: var(--cm-ink); background: var(--cm-card); box-shadow: none; }
.cm-field input { height: 46px; }
.cm-field textarea { min-height: 96px; padding: 10px 12px; resize: none; }
.cm-field input:focus, .cm-field textarea:focus { outline: 0; border-color: var(--cm-vi); box-shadow: 0 0 0 3px rgba(107,63,212,.18); }
.cm-field .cm-srch input { border: 0; height: 100%; padding: 0; box-shadow: none; }
.cm-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cm-chips.is-even .cm-chip { flex: 1; text-align: center; padding: 9px 4px; font-size: 12.5px; }
.cm-chip { border: 1px solid var(--cm-ln); background: var(--cm-card); font: 600 13px var(--cm-font); color: var(--cm-ink); padding: 8px 12px; border-radius: 10px; cursor: pointer; white-space: nowrap; }
.cm-chip.is-on { background: var(--cm-ink); border-color: var(--cm-ink); color: #fff; }
.cm-datef { position: relative; display: flex; align-items: center; gap: 8px; height: 42px; border: 1px dashed #C9CCD5; border-radius: 10px; padding: 0 12px; font: 600 13px var(--cm-font); color: var(--cm-ink); background: var(--cm-card); cursor: pointer; }
.cm-datef svg { width: 17px; height: 17px; color: var(--cm-vi); }
.cm-datef.is-on { border-style: solid; border-color: var(--cm-ink); }
/* Telegram nick row on the club manager card, and the Telegram write button */
.cm-tgrow { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0 12px; height: 46px; border: 1px solid var(--cm-ln); border-radius: 12px; background: var(--cm-card); color: #229ED9; }
.cm-tgrow svg { width: 20px; height: 20px; flex: none; }
.cm-tgrow input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; box-shadow: none; font: 500 16px var(--cm-font); color: var(--cm-ink); padding: 0; }
.cm-tgrow:focus-within { border-color: var(--cm-vi); box-shadow: 0 0 0 3px rgba(107,63,212,.18); }
.cm-call.is-tg { background: #229ED9; color: #fff; }
.cm-call.is-tg.is-ghost { background: #E3F3FB; color: #1C88BD; }

/* ---------- club manager: Telegram broadcasts and players (views/broadcasts.js) ---------- */
button.cm-row { border: 0; border-bottom: 1px solid var(--cm-ln); background: var(--cm-card); font-family: var(--cm-font); border-radius: 0; }
button.cm-row:last-child { border-bottom: 0; }
.cm-row.is-short { min-height: 52px; }
.cm-row.is-mid { min-height: 56px; }
.cm-row.is-dim .cm-rm { opacity: .45; }
.cm-tile { position: relative; }
.cm-tile.is-wide { grid-column: span 2; flex-direction: row; align-items: center; min-height: 0; gap: 12px; }
.cm-tile.is-wide .cm-ti { flex: none; }
.cm-tw { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cm-tile.is-wide small { margin-top: 0; }
.cm-nb { position: absolute; top: 12px; right: 12px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: var(--cm-vil); color: var(--cm-vi); padding: 3px 7px; border-radius: 6px; }
.cm-tip { background: var(--cm-card); border: 1px solid var(--cm-ln); border-radius: 16px; padding: 12px; display: flex; gap: 12px; align-items: center; text-align: left; font-family: var(--cm-font); color: var(--cm-ink); cursor: pointer; width: 100%; }
.cm-tip .cm-ti { width: 40px; height: 40px; border-radius: 12px; background: var(--cm-yel); color: #8A5D00; flex: none; }
.cm-tip .cm-ti.is-re { background: var(--cm-rel); color: var(--cm-re); }
.cm-tip .cm-ti.is-vi { background: var(--cm-vil); color: var(--cm-vi); }
.cm-tip .cm-tw { flex: 1; }
.cm-tip b { font-size: 15px; }
.cm-tip .cm-tw span { font-size: 13px; color: var(--cm-mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-tip:active, .cm-tile:active { transform: scale(.98); }

.cm-chans { background: var(--cm-card); border: 1px solid var(--cm-ln); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.cm-chans-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.cm-chans-top b { font-size: 15px; }
.cm-okpill { font-size: 12px; font-weight: 700; color: var(--cm-gr); background: var(--cm-grl); padding: 4px 9px; border-radius: 8px; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.cm-okpill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: block; }
.cm-okpill.is-off { color: var(--cm-re); background: var(--cm-rel); }
.cm-cgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cm-cgrid div { background: var(--cm-pg); border-radius: 12px; padding: 9px 10px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cm-cgrid b { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cm-cgrid span { font-size: 11.5px; color: var(--cm-mut); font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.cm-ic2 { width: 40px; height: 40px; border-radius: 12px; background: var(--cm-vil); color: var(--cm-vi); display: grid; place-items: center; flex: none; }
.cm-ic2 svg { width: 20px; height: 20px; }
.cm-ic2.is-gr { background: var(--cm-grl); color: var(--cm-gr); }
.cm-ic2.is-ye { background: var(--cm-yel); color: #8A5D00; }
.cm-ic2.is-re { background: var(--cm-rel); color: var(--cm-re); }
.cm-ic2.is-bl { background: #E6F0FB; color: #2860A8; }
.cm-ic2.is-gy { background: #EEF0F3; color: #3B404D; }
.cm-cnt { font-size: 13px; font-weight: 700; color: var(--cm-mut); font-variant-numeric: tabular-nums; flex: none; }
.cm-st { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; white-space: nowrap; flex: none; font-variant-numeric: tabular-nums; }
.cm-st.is-ok { background: var(--cm-grl); color: var(--cm-gr); }
.cm-st.is-part { background: var(--cm-yel); color: #8A5D00; }
.cm-st.is-q { background: var(--cm-vil); color: var(--cm-vi); }
.cm-st.is-bad { background: var(--cm-rel); color: var(--cm-re); }
.cm-st.is-gy { background: #EEF0F3; color: #4A4F5C; }

/* composer */
.cm-wiz { background: var(--cm-card); border-bottom: 1px solid var(--cm-ln); padding: 10px 14px 12px; flex: none; }
.cm-wiz .cm-step { cursor: default; font-size: 11px; }
.cm-wiz .cm-step.is-past { cursor: pointer; color: var(--cm-ink); }
.cm-lbl { font-size: 13px; font-weight: 600; color: var(--cm-mut); padding: 0 2px; }
.cm-rdo { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #C9CCD5; flex: none; display: grid; place-items: center; box-sizing: border-box; }
.cm-row.is-on .cm-rdo { border-color: var(--cm-vi); }
.cm-row.is-on .cm-rdo::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--cm-vi); }
.cm-cbx { width: 24px; height: 24px; border-radius: 8px; border: 2px solid #C9CCD5; flex: none; display: grid; place-items: center; color: #fff; background: var(--cm-card); box-sizing: border-box; }
.cm-cbx svg { width: 15px; height: 15px; opacity: 0; }
.cm-cbx.is-on { background: var(--cm-vi); border-color: var(--cm-vi); }
.cm-cbx.is-on svg { opacity: 1; }
.cm-pst { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; white-space: nowrap; flex: none; }
.cm-pst.is-new { background: var(--cm-vil); color: var(--cm-vi); }
.cm-pst.is-vip { background: var(--cm-yel); color: #8A5D00; }
.cm-pst.is-dorm { background: var(--cm-rel); color: var(--cm-re); }
.cm-pst.is-reg { background: var(--cm-grl); color: var(--cm-gr); }
.cm-pst.is-lead { background: #EEF0F3; color: #4A4F5C; }
.cm-warn-t { color: #8A5D00; }
.cm-box { background: var(--cm-card); border: 1px solid var(--cm-ln); border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.cm-box p { font-size: 14px; color: #3B404D; margin: 0; }
.cm-tglrow { display: flex; align-items: center; gap: 12px; cursor: pointer; width: 100%; border: 0; background: none; padding: 0; text-align: left; font-family: var(--cm-font); color: var(--cm-ink); }
.cm-tglrow .cm-tw { flex: 1; }
.cm-tglrow b { font-size: 15px; font-weight: 600; }
.cm-tglrow .cm-tw span { font-size: 13px; color: var(--cm-mut); }
.cm-tgl { width: 46px; height: 28px; border-radius: 14px; background: #D5D8DF; position: relative; flex: none; transition: background .15s; }
.cm-tgl::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .15s; }
.cm-tgl.is-on { background: var(--cm-vi); }
.cm-tgl.is-on::after { transform: translateX(18px); }
.cm-reach { background: var(--cm-card); border: 1px solid var(--cm-ln); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.cm-reach-n { font-size: 22px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cm-reach-n small { font-size: 14px; color: var(--cm-mut); font-weight: 600; margin-left: 6px; }
.cm-rbar { height: 8px; border-radius: 4px; background: var(--cm-yel); overflow: hidden; display: flex; }
.cm-rbar i { display: block; height: 100%; background: var(--cm-gr); }
.cm-leg { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.cm-leg span { display: flex; gap: 8px; align-items: flex-start; }
.cm-leg i { width: 10px; height: 10px; border-radius: 3px; display: block; flex: none; margin-top: 4px; }
.cm-leg i.is-gr { background: var(--cm-gr); }
.cm-leg i.is-ye { background: var(--cm-ye); }
.cm-chips.is-scroll { flex-wrap: nowrap; overflow-x: auto; margin: 0 -14px; padding: 0 14px 2px; scrollbar-width: none; }
.cm-chips.is-scroll::-webkit-scrollbar { display: none; }
.cm-chips.is-scroll .cm-chip { flex: none; }
.cm-chip small { font-size: 12px; font-weight: 700; opacity: .6; margin-left: 4px; font-variant-numeric: tabular-nums; }
.cm-chip.is-sm { padding: 7px 10px; font-size: 12.5px; }
.cm-editor { background: var(--cm-card); border: 1px solid var(--cm-ln); border-radius: 16px; overflow: hidden; }
.cm-editor:focus-within { border-color: var(--cm-vi); box-shadow: 0 0 0 3px rgba(107,63,212,.18); }
.cm-editor textarea { display: block; width: 100%; box-sizing: border-box; min-height: 230px; border: 0; outline: 0; padding: 12px 14px; font: 500 16px/1.45 var(--cm-font); color: var(--cm-ink); background: none; resize: none; box-shadow: none; }
.cm-etools { display: flex; gap: 6px; align-items: center; padding: 8px 10px; border-top: 1px solid var(--cm-ln); background: #FAFAFC; flex-wrap: wrap; }
.cm-etools button { height: 34px; min-width: 34px; padding: 0 10px; border: 1px solid var(--cm-ln); border-radius: 9px; background: var(--cm-card); font: 700 13px var(--cm-font); color: var(--cm-ink); cursor: pointer; }
.cm-etools button.is-var { color: var(--cm-vi); background: var(--cm-vil); border-color: var(--cm-vib); }
.cm-len { margin-left: auto; font-size: 12px; color: var(--cm-mut); font-variant-numeric: tabular-nums; }
.cm-content > .cm-hint { padding: 0 2px; line-height: 1.4; }
.cm-tgw { border-radius: 18px; overflow: hidden; border: 1px solid var(--cm-ln); }
.cm-tgh { background: #fff; padding: 9px 12px; display: flex; gap: 10px; align-items: center; border-bottom: 1px solid var(--cm-ln); }
.cm-tgh .cm-av { width: 34px; height: 34px; font-size: 12px; background: #2AABEE; color: #fff; }
.cm-tgh b { font-size: 14px; display: block; line-height: 1.2; }
.cm-tgh small { font-size: 12px; color: var(--cm-mut); }
.cm-tgb { background: #C8D9E6; background-image: radial-gradient(rgba(255,255,255,.35) 1px, transparent 1.5px); background-size: 14px 14px; padding: 12px 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.cm-bub { align-self: flex-start; max-width: 94%; background: #fff; border-radius: 16px 16px 16px 6px; padding: 8px 11px 6px; font-size: 14px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px 1px rgba(0,0,0,.08); color: #111; box-sizing: border-box; }
.cm-bub a, .cm-bub .cm-tags { color: #2481CC; text-decoration: none; }
.cm-bub time { display: block; text-align: right; font-size: 11px; color: #8E9AA6; margin-top: 2px; }
.cm-bub.is-out { align-self: flex-end; background: #EFFDDE; border-radius: 16px 16px 6px 16px; }
.cm-bub.is-out time { color: #5DA74E; }
.cm-var { background: #E9F7E4; border-radius: 4px; }
.cm-var.is-missing { background: var(--cm-rel); color: var(--cm-re); }
.cm-cfoot, .cm-selbar { flex: none; padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--cm-card); border-top: 1px solid var(--cm-ln); position: sticky; bottom: 0; z-index: 15; }
.cm-cfoot { display: flex; flex-direction: column; gap: 8px; }
.cm-cfoot .cm-link.is-muted { padding: 2px; }
.cm-meta { font-size: 12.5px; color: var(--cm-mut); text-align: center; }
.cm-selbar { display: flex; gap: 10px; align-items: center; }
.cm-selbar .cm-btn { flex: 1; }
.cm-selbar-c { font-size: 14px; font-weight: 700; white-space: nowrap; }
.cm-hbtn { border: 0; background: rgba(255,255,255,.1); color: #fff; font: 600 14px var(--cm-font); padding: 9px 12px; border-radius: 10px; cursor: pointer; flex: none; }
.cm-btn.is-gr { background: var(--cm-gr); }

/* manual sending */
.cm-mprog { display: flex; flex-direction: column; gap: 6px; }
.cm-mprog-t { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--cm-mut); font-variant-numeric: tabular-nums; }
.cm-mprog .cm-bar i { background: var(--cm-gr); }
.cm-mcard { background: var(--cm-card); border: 1px solid var(--cm-ln); border-radius: 20px; padding: 14px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 12px 30px -20px rgba(20,22,27,.35); }
.cm-who { display: flex; gap: 12px; align-items: center; }
.cm-who-nm { font-size: 19px; font-weight: 800; line-height: 1.15; }
.cm-who small { display: block; font-size: 13px; color: var(--cm-mut); }
.cm-dest { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 600; color: #1D7FB8; background: #E3F2FB; border-radius: 10px; padding: 8px 10px; }
.cm-dest svg { width: 15px; height: 15px; flex: none; }
.cm-howto { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--cm-mut); padding: 0 2px; counter-reset: cmhw; }
.cm-howto span { display: flex; gap: 8px; align-items: flex-start; }
.cm-howto span::before { counter-increment: cmhw; content: counter(cmhw); width: 18px; height: 18px; border-radius: 50%; background: var(--cm-vil); color: var(--cm-vi); font-size: 11px; font-weight: 800; display: grid; place-items: center; flex: none; margin-top: 1px; }
.cm-mbtns { display: grid; grid-template-columns: 1fr 1.5fr; gap: 8px; }
.cm-big-ok { width: 64px; height: 64px; border-radius: 50%; background: var(--cm-grl); color: var(--cm-gr); display: grid; place-items: center; align-self: center; margin-top: 8px; }
.cm-big-ok svg { width: 32px; height: 32px; }
.cm-ttl-c { text-align: center; display: flex; flex-direction: column; gap: 2px; }
.cm-ttl-c b { font-size: 20px; font-weight: 800; }
.cm-ttl-c span { font-size: 14px; color: var(--cm-mut); }
.cm-sent { padding-top: 16px; }
.cm-resgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cm-resgrid div { border-radius: 14px; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.cm-resgrid b { font-size: 24px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.cm-resgrid span { font-size: 12px; font-weight: 600; }
.cm-resgrid .is-gr { background: var(--cm-grl); color: var(--cm-gr); }
.cm-resgrid .is-vi { background: var(--cm-vil); color: var(--cm-vi); }
.cm-resgrid .is-ye { background: var(--cm-yel); color: #8A5D00; }
.cm-resgrid .is-gy { background: #EEF0F3; color: #4A4F5C; }

/* players */
.cm-av { position: relative; }
.cm-av.is-vip { background: var(--cm-yel); color: #8A5D00; }
.cm-av.is-dorm { background: #EEF0F3; color: var(--cm-mut); }
.cm-tgd { position: absolute; right: -2px; bottom: -2px; width: 16px; height: 16px; border-radius: 50%; background: #2AABEE; border: 2px solid #fff; display: grid; place-items: center; box-sizing: border-box; }
.cm-tgd svg { width: 8px; height: 8px; color: #fff; }
.cm-sortb { border: 0; background: none; font: 600 13px var(--cm-font); color: var(--cm-mut); display: flex; gap: 4px; align-items: center; cursor: pointer; padding: 0 4px; text-transform: none; letter-spacing: 0; }
.cm-sortb b { color: var(--cm-ink); }
.cm-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cm-kpis div { background: var(--cm-card); border: 1px solid var(--cm-ln); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 1px; }
.cm-kpis b { font-size: 20px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cm-kpis span { font-size: 11.5px; color: var(--cm-mut); font-weight: 600; }
.cm-tagsrow { display: flex; gap: 6px; flex-wrap: wrap; }
.cm-tagsrow span { font-size: 12px; font-weight: 700; padding: 5px 9px; border-radius: 8px; background: #EEF0F3; color: #3B404D; }
.cm-tagsrow span.is-v { background: var(--cm-vil); color: var(--cm-vi); }
.cm-tagsrow span.is-g { background: var(--cm-grl); color: var(--cm-gr); }
.cm-tagsrow span.is-r { background: var(--cm-rel); color: var(--cm-re); }
.cm-tagsrow span.is-y { background: var(--cm-yel); color: #8A5D00; }
.cm-tagsrow span.is-b { background: #E3F2FB; color: #1D7FB8; }

/* ---------- club manager phone app: «Моя зарплата» и «Ведущие смен» (salary.js) ---------- */
.cm-due.is-ok { background: var(--cm-grl); color: var(--cm-gr); }
.cm-due.cm-pay-corp { background: #E6F0FB; color: #2860A8; }
.cm-pay-tile { background: var(--cm-ink); border-color: var(--cm-ink); color: #fff; }
.cm-pay-tile .cm-ti { background: rgba(255,255,255,.12); color: var(--cm-ye); }
.cm-pay-tile .cm-tw { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cm-pay-tile .cm-tw b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cm-pay-tile small { color: #A9AEBB; }
.cm-pay-tile .cm-chev { color: #6B7080; }
.cm-pay-hero { background: var(--cm-ink); color: #fff; padding: 4px 14px 18px; display: flex; flex-direction: column; gap: 14px; flex: none; }
.cm-pay-hero.is-short { padding-bottom: 14px; }
.cm-pay-mseg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: rgba(255,255,255,.08); border-radius: 12px; padding: 3px; }
.cm-pay-mseg button { border: 0; background: none; font: 600 13px var(--cm-font); color: #A9AEBB; padding: 7px 4px; border-radius: 9px; cursor: pointer; display: flex; flex-direction: column; align-items: center; line-height: 1.25; }
.cm-pay-mseg button small { font-size: 10.5px; font-weight: 600; opacity: .85; font-variant-numeric: tabular-nums; }
.cm-pay-mseg button.is-on { background: #fff; color: var(--cm-ink); }
.cm-pay-mseg button:focus-visible { outline: 3px solid var(--cm-vi); outline-offset: -3px; }
.cm-pay-tot { display: flex; flex-direction: column; gap: 4px; }
.cm-pay-l { font-size: 13px; color: #A9AEBB; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cm-pay-v { font-size: 40px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cm-pay-s { font-size: 13px; color: #C9CCD5; font-variant-numeric: tabular-nums; }
.cm-pay-st { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.cm-pay-st.is-live { background: rgba(242,182,38,.18); color: var(--cm-ye); }
.cm-pay-st.is-closed { background: rgba(255,255,255,.1); color: #C9CCD5; }
.cm-pay-stack { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; background: rgba(255,255,255,.08); }
.cm-pay-stack i { display: block; height: 100%; }
.cm-pay-lgd { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: #C9CCD5; }
.cm-pay-lgd span { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.cm-pay-lgd span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--c); }
.cm-pay-lgd b { color: #fff; font-weight: 700; }
.cm-pay-callout { display: flex; gap: 10px; align-items: center; background: var(--cm-rel); border: 1px solid #F5C9C6; border-radius: 14px; padding: 10px 10px 10px 12px; text-align: left; font-family: var(--cm-font); color: var(--cm-ink); cursor: pointer; width: 100%; }
.cm-pay-callout > svg:first-child { width: 20px; height: 20px; color: var(--cm-re); flex: none; }
.cm-pay-ct { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cm-pay-ct small { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cm-re); }
.cm-pay-ct b { font-size: 14.5px; }
.cm-pay-ct span { font-size: 12.5px; color: #7A3A36; }
.cm-pay-kc { background: var(--cm-card); border: 1px solid var(--cm-ln); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; text-align: left; font-family: var(--cm-font); color: var(--cm-ink); cursor: pointer; width: 100%; }
.cm-pay-kc:focus-visible, .cm-pay-callout:focus-visible { outline: 3px solid var(--cm-vi); outline-offset: -3px; }
.cm-pay-hd { display: flex; align-items: center; gap: 10px; }
.cm-pay-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--cm-vil); color: var(--cm-vi); }
.cm-pay-ic svg { width: 19px; height: 19px; }
.cm-pay-tw { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cm-pay-tw b { font-size: 15px; }
.cm-pay-tw small { font-size: 12px; color: var(--cm-mut); }
.cm-pay-now { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cm-pay-now.is-zero { color: var(--cm-mut); }
.cm-pay-r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.cm-pay-r b { font-variant-numeric: tabular-nums; font-size: 15px; }
.cm-pay-prog { position: relative; height: 8px; border-radius: 4px; background: #ECEEF2; margin: 6px 0 16px; display: block; }
.cm-pay-prog > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--cm-vi); }
.cm-pay-tk { position: absolute; top: -4px; width: 2px; height: 16px; background: #C9CCD5; border-radius: 1px; transform: translateX(-1px); }
.cm-pay-tk.is-hit { background: var(--cm-vi); }
.cm-pay-tk em { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--cm-mut); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cm-pay-tk.is-last em { transform: translateX(-100%); }
.cm-pay-tk.is-hit em { color: var(--cm-vi); }
.cm-pay-gap { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #3B404D; background: var(--cm-pg); border-radius: 10px; padding: 8px 10px; }
.cm-pay-gap b { color: var(--cm-ink); }
.cm-pay-up { margin-left: auto; font-weight: 800; color: var(--cm-gr); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cm-pay-up.is-mut { color: var(--cm-mut); }
.cm-pay-dots { display: grid; gap: 4px; }
.cm-pay-dots i { height: 22px; border-radius: 6px; background: #ECEEF2; position: relative; }
.cm-pay-dots i.is-ok, .cm-pay-dlg i.is-ok { background: var(--cm-vi); }
.cm-pay-dots i.is-miss, .cm-pay-dlg i.is-miss { background: var(--cm-rel); box-shadow: inset 0 0 0 1.5px #F5C9C6; }
.cm-pay-dots i.is-plan, .cm-pay-dlg i.is-plan { background: var(--cm-card); box-shadow: inset 0 0 0 1.5px var(--cm-vib); }
.cm-pay-dots i.is-tier::after { content: ""; position: absolute; right: -3px; top: -4px; bottom: -4px; width: 2px; background: #C9CCD5; border-radius: 1px; }
.cm-pay-dlg { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--cm-mut); }
.cm-pay-dlg span { display: flex; gap: 5px; align-items: center; }
.cm-pay-dlg i { width: 10px; height: 10px; border-radius: 3px; display: block; }
.cm-pay-ics { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; background: #EEF0F3; color: #3B404D; font-size: 12px; font-weight: 800; }
.cm-pay-ics svg { width: 19px; height: 19px; }
.cm-pay-ics.is-vi { background: var(--cm-vil); color: var(--cm-vi); }
.cm-pay-ics.is-ye { background: var(--cm-yel); color: #8A5D00; }
.cm-pay-ics.is-gr { background: var(--cm-grl); color: var(--cm-gr); }
.cm-pay-amt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 15px; }
.cm-pay-amt.is-zero { color: var(--cm-mut); font-weight: 600; }
.cm-pay-sub { display: flex; justify-content: space-between; padding: 10px 12px 10px 14px; font-size: 13px; color: var(--cm-mut); border-bottom: 1px solid var(--cm-ln); font-variant-numeric: tabular-nums; }
.cm-pay-total { display: flex; justify-content: space-between; align-items: center; padding: 12px 12px 12px 14px; background: #F7F7FA; font-weight: 800; font-variant-numeric: tabular-nums; }
.cm-pay-day { width: 44px; height: 44px; border-radius: 12px; background: #EEF0F3; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; line-height: 1; color: var(--cm-ink); }
.cm-pay-day b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cm-pay-day small { font-size: 10px; font-weight: 700; color: var(--cm-mut); text-transform: uppercase; margin-top: 2px; }
.cm-pay-day.is-today { background: var(--cm-vi); color: #fff; }
.cm-pay-day.is-today small { color: #E2D8FA; }
.cm-pay-day.is-corp { background: #E6F0FB; color: #2860A8; }
.cm-pay-day.is-lg { width: 52px; height: 52px; }
.cm-pay-plus { color: var(--cm-gr); font-weight: 600; }
.cm-pay-c { text-align: center; }
.cm-pay-hs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cm-pay-hs div { background: var(--cm-card); border: 1px solid var(--cm-ln); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cm-pay-hs b { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cm-pay-hs span { font-size: 11.5px; font-weight: 600; color: var(--cm-mut); }
.cm-pay-hbar { height: 6px; border-radius: 3px; background: #ECEEF2; overflow: hidden; width: 64px; display: block; }
.cm-pay-hbar i { display: block; height: 100%; background: var(--cm-vi); }
.cm-pay-ladder { background: var(--cm-card); border: 1px solid var(--cm-ln); border-radius: 16px; overflow: hidden; }
.cm-pay-ladder div { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--cm-ln); font-size: 14px; font-variant-numeric: tabular-nums; }
.cm-pay-ladder div:last-child { border-bottom: 0; }
.cm-pay-ladder div span { flex: 1; }
.cm-pay-ladder div b { font-weight: 700; white-space: nowrap; }
.cm-pay-ladder div.is-cur { background: var(--cm-vil); }
.cm-pay-ladder div.is-cur b { color: var(--cm-vi); }
.cm-pay-ladder div.is-nx { background: #F7FBF8; }
.cm-pay-ladder div.is-nx b { color: var(--cm-gr); }
.cm-pay-ladder em { font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 6px; border-radius: 5px; background: var(--cm-vi); color: #fff; }
.cm-pay-ladder .is-nx em { background: var(--cm-gr); }
.cm-pay-calc { background: var(--cm-card); border: 1px solid var(--cm-ln); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 6px; font-variant-numeric: tabular-nums; font-size: 14px; }
.cm-pay-calc div { display: flex; justify-content: space-between; gap: 10px; }
.cm-pay-calc div.is-t { border-top: 1px solid var(--cm-ln); padding-top: 8px; margin-top: 2px; font-weight: 800; font-size: 16px; }
.cm-pay-calc span { color: var(--cm-mut); }
.cm-pay-calc div.is-t span { color: var(--cm-ink); }
.cm-pay-ok { display: flex; gap: 10px; align-items: flex-start; background: var(--cm-grl); color: #14593A; border-radius: 12px; padding: 10px 12px; font-size: 13.5px; font-weight: 500; }
.cm-pay-ok svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.cm-pay-ok.is-bad { background: var(--cm-rel); color: #8E1F23; }
.cm-pay-ok.is-wait { background: var(--cm-yel); color: #6B4A00; }