/* BlackLemon desk — phone-first, no webfonts, no blur */
:root {
  color-scheme: dark;
  --bg: #12120f;
  --bg-raise: #1a1915;
  --bg-card: #1a1915;
  --dock-bg: #1e1d18;
  --ink: #f0ede5;
  --muted: #918d80;
  --dim: #918d80;
  --line: #34332c;
  --line-strong: #34332c;
  --gold: #c2b28b;
  --gold-deep: #9a8b68;
  --gold-ink: #12120f;
  --ok: #3cba78;
  --ok-soft: rgba(60, 186, 120, 0.14);
  --bad: #8e625a;
  --bad-soft: rgba(142, 98, 90, 0.16);
  --radius: 14px;
  --sans: "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --display: "Iowan Old Style", Palatino, "Palatino Linotype", Georgia, serif;
  --dock: calc(94px + env(safe-area-inset-bottom));
  --top: calc(56px + env(safe-area-inset-top));
}

html.theme-light {
  color-scheme: light;
  --bg: #ebe4d6;
  --bg-raise: #ffffff;
  --bg-card: #ffffff;
  --dock-bg: #ffffff;
  --ink: #1a1612;
  --muted: #4f4940;
  --dim: #5c564c;
  --line: #c9bfb0;
  --line-strong: #b3a794;
  --gold: #6e4c10;
  --gold-deep: #53390c;
  --gold-ink: #fffaf2;
  --ok: #0d6b3d;
  --ok-soft: rgba(13, 107, 61, 0.12);
  --bad: #9c2f24;
  --bad-soft: rgba(156, 47, 36, 0.12);
}

* { box-sizing: border-box; }
h1, h2, h3, h4, p { margin: 0; }
button, input, select, textarea { margin: 0; }
html, body { margin: 0; height: 100%; }
html { scroll-padding-top: calc(var(--top) + 12px); }
.section, .admin-panel, .crm-card, .section-header, .admin-pane { scroll-margin-top: calc(var(--top) + 12px); }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select, textarea { font-family: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }

#app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--top);
  min-height: 0;
  padding: env(safe-area-inset-top) 16px 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.logo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo-mark {
  width: 22px; height: 22px; border-radius: 6px;
  object-fit: cover; flex-shrink: 0;
}
.logo-text {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 28px;
  color: var(--gold);
}
.topbar-user { display: flex; align-items: center; gap: 8px; min-width: 0; }
.user-name {
  font-size: 13px; color: var(--muted);
  max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; color: var(--muted);
  border: 1px solid var(--line);
  font-size: 12px; font-weight: 500; line-height: 1; flex-shrink: 0;
}
.user-avatar:empty { display: none; }
.user-avatar.has-photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: transparent;
}

.content {
  flex: 1;
  padding: 22px 24px calc(var(--dock) + 16px);
  overflow-x: hidden;
}
#payouts { display: none !important; }
.section { display: none; }
.section.active { display: block; }
.section.admin-only,
.section.can-pause-only { display: none !important; }
.section.admin-only.visible,
.section.can-pause-only.visible { display: none !important; }
.section.admin-only.visible.active,
.section.can-pause-only.visible.active { display: block !important; }

.section-header { margin-bottom: 16px; }
.section-header h1, .section-header h2, .modal-header h2 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.03em;
  margin: 0 0 6px;
  font-size: 36px;
  line-height: 44px;
}
.section-desc, .section-hint, .panel-hint, .form-hint, .admin-panel-desc, .crm-hint {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.section-hint.admin-only { display: none; }
.section-hint.admin-only.visible { display: block; }

.filters, .crm-tabs, .search-tabs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}
.filter-group, .scope-chips, .tools-actions, .wl-actions, .kick-actions, .form-actions, .chat-card-actions, .sched-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}
.filter-group-per-page, .form-actions, .sched-card-actions { align-items: center; }
.filter-label, .panel-label, .create-chat-type-label, .more-sheet-title {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 16px;
  color: var(--muted);
}
.panel-label, .create-chat-type-label, .more-sheet-title { min-height: 0; }

button, .chip, .pager-btn, .btn-calendar-nav, .btn-cancel, .btn-sched-new, .dock-more-btn, .nav-btn, .invite-open, .modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}
.chip, .pager-btn, .btn-calendar-nav, .btn-cancel, .btn-sched-new, .dock-more-btn, .nav-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  border-radius: 10px;
  min-height: 32px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  cursor: pointer;
}
.chip.active, .nav-btn.active, .crm-tab.active, .sched-active-chip.active {
  background: var(--gold);
  color: var(--gold-ink);
  border-color: transparent;
}
.chip-danger, .btn-danger, .chip-danger-outline { color: var(--bad); border-color: var(--bad); background: transparent; }
.chip-success { color: var(--ok); border-color: rgba(60, 186, 120, 0.4); }
.chip:disabled { opacity: 0.4; }

.btn-primary, .btn-send, .btn-create-chat, .btn-retry {
  appearance: none;
  border: 0;
  border-radius: 12px;
  width: 100%;
  min-height: 46px;
  padding: 0 18px;
  background: var(--gold);
  color: var(--gold-ink);
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}
.auth-error .btn-retry { width: auto; min-width: 168px; }
.btn-sched-new { width: auto; }
.btn-send:disabled { opacity: 0.5; }

#app input, #app select, #app textarea, .wl-input, .crm-input, .crm-textarea, #confirm-note {
  width: 100%;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  min-height: 44px;
  padding: 10px 12px;
  font-size: 15px;
}
#app textarea, .crm-textarea { min-height: 96px; resize: vertical; border-radius: 12px; }
#app input:focus, #app select:focus, #app textarea:focus, #confirm-note:focus {
  outline: none;
  border-color: var(--gold);
}
.crm-input-sm, .crm-input-num, .crm-input-time { width: auto; min-width: 0; }
.crm-input-color { width: 44px; padding: 4px; min-height: 44px; }
.crm-form-row, .form-row, .liquidity-row, .crm-salary-filters, .manual-invite-form, .chat-contacts-add {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}
.form-row label { font-size: 12px; color: var(--dim); }

.card-panel, .broadcast-panel, .liquidity-panel, .admin-panel, .crm-card, .sched-card, .info-card, .invite-card, .role-card, .crm-staff-card, .crm-reg-card, .crm-shift-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}
.broadcast-panel, .create-chat-panel, .liquidity-panel {
  background: transparent;
  border: 0;
  padding: 0;
  margin-top: 0;
}
.sched-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  padding: 8px 0 16px;
}
.card-panel, .admin-panel, .crm-card { margin-top: 12px; }
.admin-panel.admin-only, .admin-panel.superadmin-only, .roles-list.superadmin-only { display: none !important; }
.admin-panel.admin-only.visible, .admin-panel.superadmin-only.visible, .roles-list.superadmin-only.visible { display: block !important; }
.admin-panel-title, .crm-card-title, .sched-form-title, .crm-subtitle {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 500;
}

.status-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
}
.status-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  padding: 8px 0 18px;
  min-height: 0;
}
.status-card-icon { display: none; }
.status-card-value {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(44px, 14vw, 65px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.status-card-label { margin-top: 2px; color: var(--muted); font-size: 11px; line-height: 16px; }
#status .section-desc, .status-summary { display: none; }

.invites-list, .list-wrap, .roles-list, .crm-result-list, .crm-mini-list, .crm-reg-list, .crm-shifts-list, .crm-staff-cards, .create-chat-mine-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.invite-card-tag, .badge-paused, .text-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: auto;
  height: auto;
  min-height: 22px;
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.badge-paused {
  width: auto;
  height: auto;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: 10px;
}
.invite-card-title, .info-card-title, .role-name, .crm-staff-card-name, .crm-reg-title, .sched-card-header {
  font-size: 13px;
  font-weight: 400;
  line-height: 19px;
  margin: 0;
}
.filter-block { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.filter-block:has(.tag-rail) { flex-direction: column; align-items: stretch; }
.filter-block .filter-label { min-height: 0; flex: 0 0 auto; }
.filter-block .tag-rail { width: 100%; align-items: center; }
.filter-block .filter-segment { width: auto; align-items: center; }
.sched-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.sched-card-actions-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.sched-card-actions-inner .btn-sched-del { grid-column: 1 / -1; }
.btn-sched-action {
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-weight: 650;
}
.btn-sched-del { color: var(--bad); border-color: rgba(232, 93, 76, 0.45); }
.tools-actions { flex-direction: column; align-items: stretch; }
.tools-actions .chip { width: 100%; justify-content: flex-start; padding-left: 14px; }
.chat-tag-section {
  display: flex;
  align-items: center;
  min-height: 28px;
  margin: 6px 0 0;
  padding: 0 2px;
  background: none;
  color: var(--dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.invite-card-link-wrap { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.invite-card-link {
  color: var(--gold);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.invite-card-copy {
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer;
}
.invite-card-copy.copied { background: var(--gold); color: var(--gold-ink); }
.invite-card-error, .empty-state, .empty, .empty-hint { color: var(--muted); font-size: 14px; }
.empty-state { text-align: center; padding: 28px 8px; }
.empty-state-icon { font-size: 28px; margin-bottom: 8px; }
.info-card-meta, .crm-reg-meta, .audit-entry-time, .audit-entry-actor, .role-id { color: var(--dim); font-size: 12px; margin-top: 4px; }

.pager, .audit-pager, .crm-calendar-nav {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px;
}
.pager-info, .crm-calendar-month { font-variant-numeric: tabular-nums; color: var(--muted); }

.create-chat-row { display: flex; flex-direction: column; gap: 12px; }
.create-chat-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.create-chat-panel .create-chat-header { display: none; }
.create-chat-icon { display: none; }
.broadcast-input { display: flex; flex-direction: column; gap: 10px; }
.sched-create-form { margin: 12px 0; }
.sched-card-text, .crm-reg-preview { color: var(--muted); font-size: 14px; white-space: pre-wrap; }
.sched-card-body { margin-top: 8px; }
.result { margin-top: 10px; font-size: 14px; color: var(--muted); white-space: pre-wrap; }
.result.success { color: var(--ok); }
.result.error { color: var(--bad); }
.pager-btn:disabled { opacity: 0.35; }

.role-card, .crm-staff-card, .crm-salary-row, .crm-calendar-staff-row {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between;
}
.role-select { max-width: 180px; }
.role-badge { border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 500; background: transparent; color: var(--gold); border: 1px solid var(--line); }
.role-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-staff-color-swatch { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.crm-salary-total { font-family: var(--display); font-size: 20px; }

.crm-calendar-grid, .crm-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.crm-calendar-cell, .cell-day {
  min-height: 36px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: 12px;
  display: grid;
  place-items: center;
}
.cell-fill-day, .legend-day { background: rgba(194, 178, 139, 0.35); }
.cell-fill-night, .legend-night { background: rgba(80, 90, 140, 0.45); }
.crm-calendar-legend, .legend-item { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 12px; }
.crm-calendar-wrap { overflow-x: auto; }

.dock {
  position: fixed;
  left: 50%;
  right: auto;
  width: min(320px, calc(100% - 48px));
  height: 62px;
  transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 30;
  display: flex;
  gap: 0;
  padding: 0 6px;
  background: var(--dock-bg);
  border: 1px solid var(--line);
  border-radius: 31px;
}
.dock .nav-btn, .dock-more-btn {
  flex: 1;
  min-width: 0;
  border: 0;
  border-radius: 0;
  min-height: 0;
  height: 62px;
  padding: 8px 2px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: transparent;
  color: var(--dim);
}
.dock .nav-btn.active, .dock-more-btn[aria-expanded="true"], .dock-more-btn.is-current {
  background: transparent;
  color: var(--ink);
}
.dock .nav-label { font-size: 10px; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 13px; }
.dock .nav-btn.active .nav-label::after,
.dock-more-btn[aria-expanded="true"] .nav-label::after,
.dock-more-btn.is-current .nav-label::after {
  content: "";
  display: block;
  width: 2px;
  height: 2px;
  margin: 3px auto 0;
  border-radius: 50%;
  background: var(--ink);
}
.nav-btn.admin-only, .nav-btn.can-pause-only { display: none !important; }
.nav-btn.admin-only.visible, .nav-btn.can-pause-only.visible { display: flex !important; }
.nav-icon { display: block; width: 18px; height: 18px; flex: 0 0 18px; }
.nav-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-icon circle { fill: currentColor; stroke: none; }
.dock .nav-label { display: block; max-width: 100%; overflow: visible; }

.more-sheet { position: fixed; inset: 0; z-index: 40; }
.more-sheet-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); border: 0; width: 100%; }
.more-sheet-panel {
  position: absolute;
  left: 12px; right: 12px;
  bottom: calc(var(--dock) + 8px);
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  padding: 16px;
}
.more-sheet-panel { max-height: min(72vh, 560px); overflow: auto; }
.more-sheet-grid { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.more-sheet .nav-btn { width: 100%; justify-content: flex-start; border-radius: 14px; min-height: 48px; }
.more-sheet .nav-btn.active { background: transparent; color: var(--ink); border-color: var(--line); }
.menu-row {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 58px;
  padding: 10px 14px;
}
.menu-row .nav-label { font-size: 16px; font-weight: 700; }
.menu-hint { font-size: 12px; font-weight: 500; color: var(--dim); }
.nav-btn.active .menu-hint { color: inherit; opacity: 0.7; }

.modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); }
.modal-content {
  position: relative;
  width: min(560px, 100%);
  max-height: min(86vh, 720px);
  overflow: auto;
  background: var(--bg-card);
  border-radius: 22px 22px 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  border: 1px solid var(--line);
}
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal-close {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 20px; cursor: pointer;
}

.loader {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: rgba(9, 9, 9, 0.72);
  color: var(--ink);
}
html.theme-light .loader { background: rgba(244, 239, 230, 0.82); }
.loader-spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--gold);
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--dock) + 12px);
  transform: translateX(-50%);
  z-index: 70;
  background: var(--ink);
  color: var(--bg);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 650;
  max-width: calc(100% - 32px);
}
.toast.error { background: var(--bad); color: white; }
.toast.success { background: var(--ok); color: #062; }

.auth-error {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  padding: 24px;
}
.auth-error h2 { font-family: var(--display); font-size: 32px; margin: 0; }
.auth-hint { color: var(--muted); }

.audit-entry { padding: 10px 0; border-bottom: 1px solid var(--line); }
.audit-entry-action { font-weight: 700; }
.group-name-input, .group-chat-id-input, .kick-user-input { max-width: 100%; }
.small, .small-list { font-size: 13px; }
.crm-panel.hidden { display: none !important; }

.invites-head { margin: 0 0 12px; }
.invites-head h1 { font-size: 36px; font-weight: 400; margin-bottom: 0; }
.filters { gap: 10px; margin-top: 0; }
.filter-segment {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.filter-segment .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 10px;
  min-height: 32px;
  padding: 0 12px;
}
.filter-segment .chip.active,
.filter-group-per-page .chip.active {
  background: var(--gold);
  color: var(--gold-ink);
}
.tag-rail {
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tag-rail::-webkit-scrollbar { display: none; }
.tag-rail .chip { flex: 0 0 auto; }
.tag-rail {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 16px), transparent);
}
.invites-head .tag-rail,
#chats .tag-rail {
  margin: 0 -24px;
  padding: 2px 24px;
}
.filter-group-per-page {
  justify-content: center;
  margin-top: 10px;
}
.filter-group-per-page .chip {
  min-height: 26px;
  height: 26px;
  padding: 0 10px;
  border-radius: 13px;
  font-size: 12px;
  background: transparent;
}
.filter-group-per-page .filter-label {
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-size: 10px;
  line-height: 14px;
  margin-right: 4px;
}
.invite-card { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 18px; }
.invite-card-open { flex: 1; min-width: 0; color: inherit; text-decoration: none; display: block; }
.invite-card-head { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.invite-card-head .invite-card-tag { flex-shrink: 0; }
.invite-card-title {
  margin: 0;
  min-width: 0;
  white-space: normal;
}
.invite-card-head .invite-card-tag,
.chat-card-kicker .invite-card-tag {
  width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0 4px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 500;
}
.invite-card-copy {
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  flex: 0 0 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
}
.invite-card-copy svg { width: 14px; height: 14px; display: block; }
.invite-card-copy svg rect, .invite-card-copy svg path { fill: none; stroke: currentColor; stroke-width: 1; }
.invite-card-copy.copied { background: var(--ok); color: #062; }
.search-field { position: relative; display: block; margin: 0 0 10px; }
#app .search-field input {
  padding-left: 40px;
  padding-right: 40px;
  min-height: 42px;
  height: 42px;
  border-radius: 21px;
  font-size: 13px;
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23918d80' stroke-width='1.5' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>");
  background-repeat: no-repeat;
  background-position: 14px center;
}
.search-field input::-webkit-search-cancel-button { display: none; }
.search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  transform: translateY(-50%);
}
.search-clear::before, .search-clear::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 8px;
  width: 1.5px;
  height: 16px;
  background: currentColor;
  border-radius: 1px;
}
.search-clear::before { transform: rotate(45deg); }
.search-clear::after { transform: rotate(-45deg); }
.section-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.section-title-row h1 { margin: 0; }
.list-count { color: var(--muted); font-size: 13px; font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
#inv-count { color: var(--gold); }
.how, .settings-fold { margin-top: 8px; }
.how summary, .settings-fold summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  list-style: none;
}
.how summary::-webkit-details-marker, .settings-fold summary::-webkit-details-marker { display: none; }
.how summary::after, .settings-fold summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  flex: 0 0 7px;
}
.how[open] summary::after, .settings-fold[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.how .section-desc, .settings-fold .panel-hint { margin-top: 8px; }
.settings-fold { padding-top: 4px; }
.create-preview {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.create-preview-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
}
.create-preview-row:last-child { border-bottom: 0; }
.create-preview-kind {
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.create-preview-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.3;
}
.status-card[data-goto] { position: relative; cursor: pointer; }
.status-card[data-goto]::after { content: none; }
.status-card[data-goto]:active { opacity: 0.72; }
.confirm-sheet { position: fixed; inset: 0; z-index: 80; }
.confirm-sheet .more-sheet-backdrop { background: rgba(0, 0, 0, 0.72); }
.confirm-panel {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(var(--dock) + 8px);
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  padding: 16px;
}
.confirm-panel h2 { font-family: var(--display); font-size: 24px; font-weight: 500; margin: 0 0 8px; }
.confirm-panel p { color: var(--muted); white-space: pre-wrap; line-height: 1.4; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; margin-top: 14px; }
.confirm-actions .chip, .confirm-actions .btn-primary { width: 100%; min-height: 48px; }
.confirm-ok-danger { background: var(--bad) !important; color: white !important; }
.panel-block + .panel-block { margin-top: 14px; }
#broadcast-scopes, #broadcast-tags, #sched-tags {
  flex-wrap: wrap;
  overflow: visible;
  margin-top: 8px;
  -webkit-mask-image: none;
  mask-image: none;
}
#broadcast-scopes::-webkit-scrollbar, #broadcast-tags::-webkit-scrollbar, #sched-tags::-webkit-scrollbar { display: none; }
.chat-card-kicker { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.chat-card-kicker .invite-card-tag { flex: 0 0 auto; }
.badge-paused {
  margin-left: auto;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 400;
}
.chat-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.chat-card-actions .chip {
  width: 100%;
  justify-content: center;
  min-height: 42px;
  border-radius: 11px;
  background: transparent;
  font-size: 13px;
  font-weight: 400;
}
.chat-action-exclude::before,
.chat-action-tag::before,
.chat-action-merchant-tags::before,
.chat-action-contacts::before,
.chat-action-delete-telegram::before,
.chat-action-hide::before {
  content: "";
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.chat-action-exclude { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'><path d='M9 5v14M15 5v14'/></svg>"); }
.chat-action-exclude[data-exclude="0"] { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'><path d='M4 12a8 8 0 1 0 2.2-5.5'/><path d='M4 4v5h5'/></svg>"); }
.chat-action-tag { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'><path d='M4 12.5 12.5 4H20v7.5L11.5 20z'/><circle cx='16.5' cy='7.5' r='1'/></svg>"); }
.chat-action-merchant-tags { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'><path d='M4 7h16M4 12h16M4 17h16'/><circle cx='8' cy='7' r='1.4' fill='black'/><circle cx='15' cy='12' r='1.4' fill='black'/><circle cx='10' cy='17' r='1.4' fill='black'/></svg>"); }
.chat-action-contacts { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'><circle cx='12' cy='8' r='3'/><path d='M5 19c1.4-3 3.8-4.5 7-4.5s5.6 1.5 7 4.5'/></svg>"); }
.chat-action-delete-telegram { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'><path d='M5 7h14M9 7V5h6v2M8 7l1 13h6l1-13'/></svg>"); grid-column: 1 / -1; }
.chat-action-hide { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'><path d='M3 12s4-6 9-6 9 6 9 6-4 6-9 6-9-6-9-6z'/><circle cx='12' cy='12' r='2.2'/><path d='M5 19 19 5'/></svg>"); grid-column: 1 / -1; }
.chat-card-actions .chip:last-child:nth-child(odd) { grid-column: 1 / -1; }
#liquidity-save {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.pager-btn { width: auto; height: auto; min-height: 0; padding: 4px 8px; border: 0; border-radius: 0; background: transparent; color: var(--muted); }
.menu-row { white-space: normal; }
.section-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
}
.section-toolbar h2 { margin: 0; font-size: 26px; font-weight: 400; line-height: 32px; }
.crm-tabs, .search-tabs {
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  align-items: center;
  scrollbar-width: none;
}
.crm-tabs::-webkit-scrollbar, .search-tabs::-webkit-scrollbar { display: none; }
.crm-tabs .chip, .search-tabs .chip { flex: 0 0 auto; }
.tools-actions, .wl-actions, .kick-actions { align-items: stretch; }
.tools-actions .chip, .wl-actions .chip, .kick-actions .chip { min-height: 40px; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.empty-state-icon { line-height: 1; }
.info-card-meta.invite-card-tag {
  display: flex;
  width: auto;
  margin-top: 6px;
  padding: 0;
  background: none;
  color: var(--dim);
  font-weight: 500;
  letter-spacing: 0;
}
.modal-close { width: 36px; height: 36px; min-height: 36px; padding: 0; flex: 0 0 36px; }
.modal-header h2 { margin: 0; }
#app select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 L6 6.5 L11 1.5' fill='none' stroke='%23918d80' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.liquidity-time-row { display: flex; align-items: center; gap: 8px; }
.liquidity-time-row input { width: 96px; flex: 0 0 96px; }
.liquidity-time-rm { width: 44px; min-height: 44px; padding: 0; flex: 0 0 44px; }
#app .crm-input-color { width: 44px; height: 44px; padding: 4px; align-self: flex-start; }

.status-segment { display: flex; flex-wrap: wrap; gap: 8px; }
.status-segment .chip { white-space: nowrap; line-height: 16px; min-height: 32px; padding: 0 12px; }
.panel-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
#liquidity-auto-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
#liquidity-auto-weekdays .chip { width: 100%; min-height: 40px; padding: 0; }
#search-btn { width: 100%; min-height: 44px; }
@media (max-width: 839px) {
  .status-cards .status-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (min-width: 840px) {
  .content { max-width: 920px; margin: 0 auto; width: 100%; }
  .status-cards { grid-template-columns: repeat(5, 1fr); }
  .modal { align-items: center; }
  .modal-content { border-radius: 22px; }
}

.form-row > label {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
.person-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.person-top .info-card-title, .person-top .role-name { min-width: 0; }
.sched-card-lead { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.sched-time { font-family: var(--display); font-size: 34px; font-weight: 400; line-height: 40px; letter-spacing: -0.03em; color: var(--ink); }
.panel-label, .filter-label, .create-chat-type-label { color: var(--muted); }
.role-card { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; }
.role-name { font-size: 16px; font-weight: 650; line-height: 1.25; }
.role-select { max-width: none; width: 100%; }
.role-tags { width: 100%; }
.role-card .panel-label { margin-top: 4px; }
#liquidity-auto-enabled,
#liquidity-send-to-m,
#sched-scope-active-row .scope-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin-top: 8px;
  background: transparent;
  border: 0;
  border-radius: 0;
}
#liquidity-auto-enabled .chip,
#liquidity-send-to-m .chip,
#sched-scope-active-row .scope-chips .chip {
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 10px;
  min-height: 32px;
  width: auto;
}
#liquidity-auto-enabled .chip.active,
#liquidity-send-to-m .chip.active,
#sched-scope-active-row .scope-chips .chip.active {
  background: var(--gold);
  color: var(--gold-ink);
}
.form-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; width: 100%; align-items: stretch; }
.form-actions .btn-cancel, .form-actions .btn-send { width: 100%; min-height: 48px; border-radius: 14px; }
.wl-actions, .kick-actions { width: 100%; }
.wl-actions .chip, .kick-actions .chip, .wl-actions .btn-primary { width: 100%; }
.admin-pane { display: none; }
.admin-pane.active { display: block; }
.admin-tabs { margin-top: 4px; }
.tag-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.crm-period-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.crm-period-row > div { min-width: 0; }
.auth-mark { width: 64px; height: 64px; border-radius: 16px; }
.auth-error p { max-width: 280px; color: var(--muted); line-height: 1.45; }
.btn-primary:active, .btn-send:active, .btn-create-chat:active, .chip:active, .invite-card-copy:active {
  transform: scale(0.98);
}
@media (prefers-reduced-motion: reduce) {
  .loader-spinner { animation: none; }
  .btn-primary:active, .btn-send:active, .btn-create-chat:active, .chip:active, .invite-card-copy:active { transform: none; }
}
#tasks .panel-block { margin-top: 8px; }
#task-body { margin-top: 8px; }
#task-create { width: 100%; margin-top: 12px; }
#task-status { margin: 22px 0 8px; }
#task-mine { margin: 0 0 12px; }
#confirm-note { margin-top: 12px; }
#task-filter { margin: 0 0 12px; }
.task-card-kicker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.task-card .info-card-title { font-size: 16px; line-height: 22px; }
.task-card-body {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 19px;
  white-space: pre-wrap;
}
#tasks .list-count { color: var(--gold); }
.dock-more-btn { position: relative; overflow: visible; }
.dock-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--gold);
  color: var(--gold-ink);
  font-size: 9px;
  font-weight: 600;
  line-height: 15px;
  text-align: center;
}
.status-duty { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.status-duty-label {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.status-duty-names { margin: 8px 0 0; font-size: 16px; line-height: 22px; color: var(--ink); }
.broadcast-photo-row { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.broadcast-photo-row .info-card-meta { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#task-due { margin-top: 8px; }
#task-due-date { margin-top: 8px; }
.task-due { margin: 8px 0 0; font-size: 12px; line-height: 16px; color: var(--muted); }
.task-due.is-overdue { color: var(--bad); }
.task-events { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 18px; }
.staff-dept { margin-top: 10px; }

#app input::placeholder,
#app textarea::placeholder { color: var(--muted); opacity: 1; }

html.theme-light #app input,
html.theme-light #app select,
html.theme-light #app textarea,
html.theme-light .wl-input,
html.theme-light .crm-input,
html.theme-light .crm-textarea,
html.theme-light #confirm-note {
  background-color: #ffffff;
  border-color: var(--line);
}
html.theme-light #app .search-field input {
  background-color: #ffffff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c564c' stroke-width='1.6' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>");
}
html.theme-light #app select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 L6 6.5 L11 1.5' fill='none' stroke='%235c564c' stroke-width='1.6' stroke-linecap='round'/></svg>");
}
html.theme-light .dock {
  border-color: var(--line-strong);
  box-shadow: 0 8px 22px rgba(28, 22, 14, 0.12);
}
html.theme-light .nav-icon path { stroke-width: 1.6; }
html.theme-light .toast.success,
html.theme-light .invite-card-copy.copied { color: #f4fff8; }
html.theme-light .cell-fill-day,
html.theme-light .legend-day { background: rgba(110, 76, 16, 0.22); }
html.theme-light .cell-fill-night,
html.theme-light .legend-night { background: rgba(55, 68, 120, 0.28); color: var(--ink); }