:root {
  --bg: #d8dde3;
  --panel: #ffffff;
  --text: #37474f;
  --muted: #90a4ae;
  --blue: #2196f3;
  --blue-dark: #1e88e5;
  --line: #cfd8dc;
  --danger: #e53935;
  --accent: #e53935;
  --content: 1040px;
  --content-max: 100%;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-width: min(var(--content), 100%);
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 14px;
}

a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }

.page { min-height: 100vh; padding: 0; display: flex; flex-direction: column; background: var(--bg); }
.page-body,
.home-body,
.chrome-inner,
.quick-nav-inner {
  width: var(--content);
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
}
.page-body {
  flex: 1;
  padding: 0 0 28px;
}
.page-body.page-body-wide {
  width: min(1880px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
}
.home-body { padding-left: 0; padding-right: 0; }
.quick-nav {
  margin: auto 0 0;
  background: #4f9ad8;
  color: #fff;
}
.quick-nav-inner {
  padding: 18px 0 28px;
}
@media (max-width: 1040px) {
  .chrome-inner,
  .quick-nav-inner { padding-left: 10px; padding-right: 10px; }
}
.quick-nav-title { font-size: 12px; font-weight: 400; opacity: 0.9; margin: 0 0 10px; }
.quick-nav-grid {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  column-gap: 72px;
  row-gap: 6px;
}
.quick-nav-grid a { color: #fff; line-height: 1.55; }
.quick-nav-count {
  display: inline-block;
  margin-left: 8px;
  min-width: 22px;
  padding: 0 7px;
  border-radius: 10px;
  background: #c4b49a;
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  vertical-align: middle;
}
.chrome-head {
  background: #fff;
  border-bottom: 1px solid #eceff1;
  padding: 8px 0 10px;
}
.chrome-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.chrome-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.chrome-logo {
  width: auto;
  height: 48px;
  border-radius: 4px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}
.chrome-mark {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #4fc3f7;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 20px;
}
.chrome-title { font-weight: 700; font-size: 18px; color: #455a64; line-height: 1.15; }
.chrome-tag,
.chrome-sub { font-size: 12px; color: var(--muted); line-height: 1.25; }
.chrome-user {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 6px;
  align-items: center;
}
.chrome-user-text {
  grid-column: 1;
  grid-row: 1;
  text-align: right;
  font-size: 13px;
  color: #546e7a;
  line-height: 1.25;
}
.chrome-user-name { white-space: nowrap; }
.chrome-role { font-size: 12px; color: var(--muted); }
.chrome-actions {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.chrome-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border: 0;
  border-radius: 4px;
  background: var(--blue);
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
}
.chrome-btn:hover { background: var(--blue-dark); }
.chrome-avatar {
  grid-column: 2;
  grid-row: 1 / 3;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #b0bec5;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  overflow: hidden;
  flex-shrink: 0;
  align-self: center;
}
.chrome-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.chrome-avatar span { font-size: 14px; }
.chrome-link {
  background: none;
  border: 0;
  color: var(--blue);
  cursor: pointer;
  padding: 0;
  font-size: 13px;
}
.center-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 40px 14px;
  color: var(--muted);
}
.center-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.center-name { font-size: 22px; color: #546e7a; font-weight: 400; }
.center-name-link { cursor: pointer; }
.center-name-link:hover { color: var(--blue); text-decoration: underline; }
.center-line .btn {
  min-height: 28px;
  height: 28px;
  padding: 0 12px;
  font-size: 13px;
}
.center-pick { position: relative; }
.modal-head {
  background: #66bb6a;
  color: #fff;
  padding: 10px 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.modal-close {
  background: none;
  border: 0;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.center-modal {
  width: 640px;
  max-width: calc(100% - 48px);
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.center-modal-error { margin: 12px 18px 0; }
.center-modal-body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 18px;
}
.center-modal-body select {
  flex: 1;
  min-width: 0;
  height: 38px;
  border: 1px solid #90caf9;
  border-radius: 4px;
  padding: 0 10px;
  background: #fff;
  color: #42a5f5;
}
.home-widgets {
  display: flex;
  background: #fff;
  border: 2px solid #8bc34a;
  margin: 8px 0 26px;
}
.home-widget {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  color: #546e7a;
  border-right: 1px solid #e8f5e9;
}
.home-widget-gear {
  flex: 0 0 auto;
  padding: 8px 14px;
  justify-content: center;
  border-right: 0;
}
.home-widget-gear .widget-ico {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.widget-title { display: block; font-size: 15px; line-height: 1.25; }
.widget-sub { display: block; font-size: 12px; line-height: 1.25; color: var(--blue); margin-top: 2px; }
.widget-count {
  display: inline-block;
  margin-left: 6px;
  min-width: 22px;
  padding: 0 6px;
  border-radius: 10px;
  background: #bcaaa4;
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  vertical-align: middle;
}
.widget-count-sm {
  min-width: 16px;
  padding: 0 5px;
  font-size: 10px;
  line-height: 14px;
  margin-left: 4px;
}
.widget-ico {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}
.widget-ico-tasks {
  width: 22px;
  height: 16px;
  align-self: flex-start;
  margin-top: 2px;
}
.module-head { display: flex; align-items: center; gap: 16px; margin: 8px 0 18px; }
.module-head h1 { margin: 0; font-size: 22px; font-weight: 400; }
.btn-back {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 12px 4px 8px;
  line-height: 1.15;
  font-size: 12px;
  text-align: left;
}
.btn-back-arrow { font-size: 18px; }
.btn-back-text { font-size: 12px; }
.btn-dark { background: #546e7a; color: #fff; }
.btn-dark:hover { background: #455a64; }
.btn-quiet { background: #90caf9; }
.btn-quiet:hover { background: var(--blue); }
.client-form {
  width: 100%;
  margin: 0 0 12px;
  background: #fff;
  padding: 8px 22px 0;
}
.form-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
}
.form-2 input,
.form-2 select,
.lists-row select,
.source-row select {
  width: 100%;
  height: 38px;
  border: 1px solid #e0e0e0;
  border-radius: 2px;
  padding: 0 10px;
  background: #fff;
  color: var(--text);
}
.form-2 input::placeholder,
.client-form textarea::placeholder {
  color: #b0bec5;
}
.phone-field {
  display: flex;
  align-items: center;
  border: 1px solid #e0e0e0;
  height: 38px;
  background: #fff;
}
.phone-field input { border: 0; height: 36px; flex: 1; min-width: 0; }
.phone-code {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  color: #78909c;
  white-space: nowrap;
  font-size: 13px;
}
.flag-ru {
  width: 18px;
  height: 12px;
  display: inline-block;
  background: linear-gradient(to bottom, #fff 33.3%, #0039a6 33.3%, #0039a6 66.6%, #d52b1e 66.6%);
  border: 1px solid #cfd8dc;
}
.birth-row { display: flex; gap: 8px; align-items: center; position: relative; }
.birth-label { flex: 0 0 46%; font-size: 12px; height: 38px; min-height: 38px; padding: 0 8px; white-space: nowrap; }
.birth-input-wrap {
  flex: 1;
  position: relative;
  min-width: 0;
}
.birth-input-wrap > input {
  width: 100%;
  height: 38px;
  padding-right: 38px;
}
.birth-cal {
  position: absolute;
  top: 0;
  right: 0;
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  color: #546e7a;
  cursor: pointer;
}
.birth-pop {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  right: 0;
  width: 280px;
  padding: 10px;
  background: #fff;
  border: 1px solid #cfd8dc;
  box-shadow: 0 8px 24px rgba(38, 50, 56, 0.16);
}
.birth-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
}
.birth-pop-head select {
  flex: 1;
  height: 28px;
  border: 1px solid #cfd8dc;
  background: #fff;
  font-size: 12px;
  text-transform: capitalize;
}
.birth-pop-head button {
  width: 28px;
  height: 28px;
  border: 0;
  background: #eceff1;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.birth-pop-week,
.birth-pop-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}
.birth-pop-week {
  color: #90a4ae;
  font-size: 11px;
  margin-bottom: 4px;
}
.birth-day {
  height: 28px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  border-radius: 2px;
}
.birth-day:hover:not(:disabled) { background: #e3f2fd; }
.birth-day.outside { color: #b0bec5; }
.birth-day.today { box-shadow: inset 0 0 0 1px #90caf9; }
.birth-day.picked,
.birth-day.picked:hover { background: #1e88e5; color: #fff; }
.birth-day:disabled { color: #cfd8dc; cursor: default; }
.mt-8 { margin-top: 8px; }
.plan-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 22px 0 18px;
}
.plan-label { color: var(--blue); font-size: 13px; line-height: 1.3; width: 118px; flex-shrink: 0; }
.plan-cal { display: block; }
.plan-type { display: flex; flex-direction: column; gap: 3px; width: 148px; min-width: 148px; }
.plan-later-wrap { margin-left: auto; max-width: 230px; }
.plan-later-hint { font-size: 11px; color: var(--muted); margin-bottom: 4px; line-height: 1.2; }
.plan-later {
  text-align: left;
  line-height: 1.25;
  min-height: 56px;
  font-size: 13px;
  white-space: normal;
}
.box {
  width: 14px;
  height: 14px;
  border: 1px solid #fff;
  background: transparent;
  flex-shrink: 0;
  display: inline-block;
}
.box.checked { background: #fff; }
.lists-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.list-line { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; }
.chip-btn {
  text-align: left;
  line-height: 1.2;
  font-size: 13px;
  min-height: 48px;
  white-space: normal;
  flex: 0 0 150px;
}
.lists-row textarea {
  width: 100%;
  min-height: 72px;
  border: 1px solid #e0e0e0;
  padding: 8px 10px;
  resize: vertical;
}
.source-row { display: flex; align-items: center; gap: 12px; margin: 8px 0 12px; }
.source-row select { max-width: 360px; }
.comment-area {
  width: 100%;
  min-height: 88px;
  border: 1px solid #e0e0e0;
  padding: 8px 10px;
  resize: vertical;
}
.client-form-actions {
  background: #eceff1;
  margin: 16px -22px 0;
  padding: 12px 22px;
  display: flex;
  gap: 8px;
}
.topbar { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.search { margin-left: auto; display: flex; gap: 8px; align-items: flex-start; position: relative; z-index: 2; }
.search-open { z-index: 20; }
.search-field { position: relative; }
.search input { width: 360px; height: 34px; border: 1px solid var(--line); border-radius: 2px; padding: 0 10px; background: #fff; }
.search-suggest {
  position: absolute;
  top: 38px;
  left: 0;
  width: 360px;
  max-height: 320px;
  overflow: auto;
  background: #fff;
  border: 1px solid #cfd8dc;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}
.search-suggest-head,
.search-empty {
  padding: 8px 12px;
  color: #90a4ae;
  font-size: 12px;
}
.search-suggest a {
  display: block;
  padding: 8px 12px;
  border-top: 1px solid #eceff1;
  text-decoration: none;
  color: inherit;
}
.search-suggest a:hover { background: #f5f7f8; }
.search-name { display: block; color: var(--blue); font-weight: 600; }
.search-meta { display: block; margin-top: 2px; color: #90a4ae; font-size: 12px; }
.search-suggest mark { background: #fff3bf; color: inherit; padding: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; padding: 0 14px; border: 0; border-radius: 2px; background: var(--blue); color: #fff; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--blue-dark); }
.btn.btn-dark { background: #546e7a; color: #fff; }
.btn.btn-dark:hover { background: #455a64; }
.btn.plan-schedule {
  background: #eceff1;
  color: var(--blue);
  min-height: 56px;
  min-width: 150px;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.btn.plan-schedule:hover { background: #e0e0e0; color: var(--blue); }
.btn.plan-schedule:disabled { opacity: 0.55; cursor: default; }
.btn.plan-kind {
  min-height: 26px;
  height: 26px;
  padding: 0 12px;
  font-size: 13px;
  border-radius: 2px;
  background: #90caf9;
}
.btn.plan-kind:hover,
.btn.plan-kind.active { background: var(--blue); }
.btn.plan-later {
  text-align: left;
  line-height: 1.25;
  min-height: 56px;
  font-size: 13px;
  white-space: normal;
  justify-content: flex-start;
  padding: 8px 12px;
}
.btn.chip-btn {
  text-align: left;
  line-height: 1.2;
  font-size: 13px;
  min-height: 48px;
  white-space: normal;
  flex: 0 0 150px;
  justify-content: flex-start;
}
.btn-icon { width: 16px; height: 16px; fill: #fff; }
.btn-icon-img { width: 18px; height: 18px; object-fit: contain; display: block; }
.btn-ghost { background: #fff; color: var(--blue); border: 1px solid var(--blue); }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tile {
  background: var(--panel);
  min-height: 99px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow: visible;
}
.tile.current { outline: 2px solid var(--accent); }
.tile-icon {
  width: 50px;
  height: 56px;
  object-fit: contain;
  object-position: center;
  display: block;
  flex-shrink: 0;
  overflow: visible;
}
.tile-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.tile h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  background: none;
}
.tile-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 32px;
  padding: 4px 8px;
  border-radius: 2px;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  line-height: 1.2;
  text-align: center;
  box-sizing: border-box;
}
.tile-action:hover { background: var(--blue-dark); }
.tile p { margin: 0; color: var(--muted); font-size: 12px; }
.panel { background: var(--panel); padding: 16px 18px 20px; }
.tabs { display: flex; gap: 18px; margin-bottom: 14px; }
.tab { color: var(--blue); padding-bottom: 6px; border-bottom: 2px solid transparent; background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; }
.tab.active { border-bottom-color: var(--blue); font-weight: 600; }
.subtabs { display: flex; gap: 8px; margin: 10px 0 16px; }
.subtab { background: #fff; border: 1px solid var(--line); color: var(--text); padding: 6px 12px; cursor: pointer; }
.subtab.active { background: #e8f5e9; border-color: #81c784; }
.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.toolbar .spacer { margin-left: auto; }
.journal-date { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.journal-date-btn {
  min-width: 40px;
  min-height: 34px;
  padding: 0 12px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.journal-date-value {
  min-width: 230px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: #fff;
  box-sizing: border-box;
  white-space: nowrap;
  color: var(--blue);
  cursor: pointer;
  font: inherit;
}
.journal-date-value:hover { text-decoration: underline; }
.journal-cal {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  z-index: 20;
  width: 280px;
  transform: translateX(-50%);
  padding: 10px 12px 12px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 2px;
  box-shadow: 0 8px 24px rgba(38, 50, 56, 0.18);
}
.journal-cal-head {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  align-items: center;
  margin-bottom: 8px;
  color: #546e7a;
  font-size: 14px;
}
.journal-cal-head span { text-align: center; }
.journal-cal-head button {
  height: 28px;
  border: 0;
  background: transparent;
  color: #90a4ae;
  font-size: 18px;
  cursor: pointer;
}
.journal-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px 0;
  text-align: center;
}
.journal-cal-grid > div {
  padding: 4px 0 6px;
  color: #90a4ae;
  font-size: 11px;
  letter-spacing: 0.02em;
}
.journal-cal-weekend { color: #fb8c00 !important; }
.journal-cal-grid button {
  height: 32px;
  border: 0;
  background: transparent;
  color: #455a64;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.journal-cal-grid button.is-weekend { color: #fb8c00; }
.journal-cal-grid button.is-outside { color: #cfd8dc; }
.journal-cal-grid button.is-selected { color: #1e88e5; font-weight: 700; }
.grid { width: 100%; border-collapse: collapse; }
.grid th, .grid td { border: 1px solid #e0e0e0; padding: 8px 6px; text-align: center; min-width: 64px; }
.grid th { background: #fafafa; font-weight: 600; }
.slot { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--blue); color: var(--blue); background: #fff; cursor: pointer; }
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #f5f7f8; }
.login-box { width: 420px; background: #fff; padding: 28px 32px 24px; border: 1px solid var(--line); }
.login-box h1 { margin: 0 0 18px; font-size: 20px; }
.field { margin-bottom: 12px; }
.field label { display: block; margin-bottom: 4px; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; height: 36px; border: 1px solid var(--line); padding: 0 10px; }
.error { color: var(--danger); margin: 8px 0; }
.phone-error { margin: 4px 0 0; font-size: 13px; line-height: 1.3; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { border-bottom: 1px solid #eee; text-align: left; padding: 8px 6px; }
.journal-table { width: 100%; table-layout: fixed; }
.journal-table th:nth-child(1) { width: 68px; }
.journal-table th:nth-child(2) { width: 48%; }
.journal-table th:nth-child(6) { width: 118px; }
.journal-table th:nth-child(7) { width: 72px; }
.journal-table td.journal-cell-missed { background: #faedee; }
.journal-table td.journal-cell-completed { background: #e7f8f0; }
.journal-time-link {
  color: #367ec0;
  cursor: pointer;
}
.journal-time-link:hover {
  color: #1e88e5;
  text-decoration: underline;
}
.journal-status-block {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.25;
  text-align: right;
}
.journal-status-text {
  font-size: 13px;
  color: #37474f;
}
.journal-status-cancel {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  color: #367ec0;
  font-size: 12px;
  line-height: 1.25;
  cursor: pointer;
  text-decoration: underline;
}
.journal-status-cancel:hover {
  color: #1e88e5;
}
.journal-status-cancel:disabled {
  opacity: 0.6;
  cursor: default;
}
.journal-client-main { min-width: 0; }
.journal-client-line {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}
.journal-client-link {
  display: block;
  min-width: 0;
  color: inherit;
  cursor: pointer;
}
.journal-client {
  color: #367ec0;
  min-width: 0;
  white-space: nowrap;
}
.journal-client-parent {
  color: #367ec0;
  margin-top: 2px;
}
.journal-client strong { font-weight: 700; }
.journal-actions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  flex-shrink: 0;
  gap: 6px;
  margin-left: auto;
}
.journal-actions .btn {
  flex: 0 0 29px;
  width: 29px;
  height: 29px;
  min-height: 29px;
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1;
  border-radius: 2px;
  white-space: nowrap;
}
.journal-actions .journal-skip {
  flex: 0 0 auto;
  width: auto;
  min-width: 29px;
  padding: 0 8px;
}
.journal-sale-btn {
  flex: 0 0 29px;
  width: 29px;
  height: 29px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.journal-sale-btn img { width: 29px; height: 29px; display: block; }
.journal-nopass {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e53935;
  color: #fff;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
}
.userbar { color: var(--muted); margin-left: 12px; }
.muted { color: var(--muted); }
.off-hours { background: #eceff1; color: var(--muted); }
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(55, 71, 79, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}
.modal-backdrop.journal-sale-backdrop {
  z-index: 24;
  align-items: flex-start;
  overflow: auto;
  padding: 28px 16px;
}
.journal-sale-modal {
  width: min(1080px, 100%);
  margin: auto;
  background: #fff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}
.journal-sale-modal .sale-card { width: 100%; margin: 0; }
.modal { width: 560px; background: #fff; }
.modal-head {
  background: #66bb6a;
  color: #fff;
  padding: 10px 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.modal-body { padding: 16px 18px 20px; }
.field textarea { height: 80px; padding: 8px 10px; }
.groups-card {
  width: 980px;
  max-width: 100%;
  margin: 0 auto 12px;
  background: #fff;
  padding: 8px 18px 24px;
}
.groups-controls {
  display: grid;
  grid-template-columns: 1fr 250px;
  grid-template-rows: auto auto;
  column-gap: 24px;
  row-gap: 10px;
  align-items: center;
  margin-bottom: 0;
}
.groups-toolbar { margin: 0; grid-column: 1; grid-row: 1; }
.groups-create { display: flex; gap: 8px; align-items: center; }
.groups-create input { height: 32px; width: 280px; border: 1px solid var(--line); padding: 0 10px; }
.groups-search {
  grid-column: 2;
  grid-row: 1 / 3;
  height: 28px;
  width: 100%;
  border: 1px solid #cfd8dc;
  padding: 0 10px;
}
.groups-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  border-bottom: 1px solid #d0d0d0;
  margin: 0;
  grid-column: 1;
  grid-row: 2;
}
.groups-tab {
  background: #e8e8e8;
  color: #333;
  border: 1px solid #d0d0d0;
  border-bottom: 0;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 13px;
  align-self: stretch;
}
.groups-tab.active {
  background: #fff;
  position: relative;
  top: 1px;
  font-weight: 600;
}
.groups-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.groups-table th {
  background: #eceff1;
  color: #607d8b;
  font-weight: 600;
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid #d0d0d0;
  vertical-align: top;
}
.groups-table td {
  padding: 10px;
  border-bottom: 1px solid #eee;
  color: #455a64;
}
.th-sort {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  line-height: 1.25;
}
.th-sort span { color: #90a4ae; font-size: 12px; }
.group-name { color: #4f9ad8; cursor: pointer; }
.icon-action {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #607d8b;
  line-height: 0;
}
.icon-action svg { display: block; }
.sale-card {
  width: 1040px;
  max-width: 100%;
  margin: 0 auto 12px;
  background: #fff;
  padding: 8px 22px 0;
}
.sale-card .btn-back {
  min-width: 118px;
  min-height: 52px;
}
.sale-find { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; margin: 4px 0 22px; }
.sale-find > .btn { margin-top: 0; height: 36px; }
.sale-find-field { position: relative; flex: 1 1 280px; min-width: 0; }
.sale-find-field input {
  width: 100%;
  height: 36px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 0 12px;
}
.sale-suggest {
  position: static;
  margin-top: 4px;
  background: #fff;
  border: 1px solid #e0e0e0;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
  z-index: 4;
}
.sale-suggest button {
  display: block;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #f5f5f5;
  padding: 8px 12px;
  cursor: pointer;
}
.sale-suggest button:hover { background: #f5f7f8; }
.sale-user { width: 16px; height: 16px; fill: #fff; }
.sale-lines-wrap { overflow-x: auto; margin-bottom: 12px; }
.sale-lines { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.sale-lines-wrap .sale-lines { min-width: 720px; margin-bottom: 0; table-layout: fixed; }
.sale-lines th {
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  padding: 0 4px 8px;
  color: #455a64;
  white-space: nowrap;
}
.sale-lines td { padding: 0 4px 8px; vertical-align: middle; }
.sale-lines select,
.sale-lines input,
.sale-wide {
  width: 100%;
  height: 34px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 0 8px;
  background: #fff;
  color: #263238;
}
.sale-lines-wrap .sale-lines input { text-align: center; padding: 0 4px; }
.sale-lines-wrap .sale-lines td:first-child input { text-align: left; padding: 0 28px 0 10px; }
.sale-lines input:disabled { background: #f5f7f8; color: #455a64; }
.sale-lines-wrap .sale-lines th:nth-child(2),
.sale-lines-wrap .sale-lines td:nth-child(2),
.sale-lines-wrap .sale-lines th:nth-child(3),
.sale-lines-wrap .sale-lines td:nth-child(3) { width: 52px; }
.sale-lines-wrap .sale-lines th:nth-child(4),
.sale-lines-wrap .sale-lines td:nth-child(4) { width: 68px; }
.sale-lines-wrap .sale-lines th:nth-child(5),
.sale-lines-wrap .sale-lines td:nth-child(5) { width: 168px; }
.sale-lines-wrap .sale-lines th:nth-child(6),
.sale-lines-wrap .sale-lines td:nth-child(6),
.sale-lines-wrap .sale-lines th:nth-child(7),
.sale-lines-wrap .sale-lines td:nth-child(7) { width: 84px; }
.sale-lines-wrap .sale-lines th:last-child,
.sale-lines-wrap .sale-lines td:last-child { width: 28px; padding-right: 0; }
.sale-del {
  width: 22px;
  height: 22px;
  background: #e53935;
  border: 0;
  border-radius: 2px;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.sale-add { margin: 4px 0 16px; }
.sale-wide { display: block; width: 360px; max-width: 100%; margin: 0 0 10px; }
.sale-total { font-size: 16px; margin: 16px 0 12px; cursor: pointer; width: fit-content; }
.sale-cash { display: flex; gap: 24px; margin-bottom: 18px; flex-wrap: wrap; }
.sale-cash label { display: flex; align-items: center; gap: 8px; color: #90a4ae; }
.sale-cash input {
  width: 200px;
  height: 36px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 0 10px;
}
.sale-bottom { display: flex; gap: 28px; align-items: flex-start; margin-bottom: 8px; flex-wrap: wrap; }
.sale-bottom > .sale-debt { flex: 0 0 auto; }
.sale-bottom > .sale-comment { flex: 1 1 280px; min-width: 0; }
.sale-debt { display: flex; align-items: center; gap: 14px; padding-top: 18px; }
.sale-debt-sum {
  min-width: 200px;
  background: #e8f5e9;
  color: #43a047;
  font-size: 18px;
  padding: 18px 22px;
}
.sale-debt-sum-warn {
  background: #ffebee;
  color: #c62828;
}
.sale-debt-label { color: #90a4ae; }
.sale-comment { flex: 1; color: #90a4ae; font-size: 13px; }
.sale-comment textarea {
  display: block;
  width: 100%;
  min-height: 72px;
  margin-top: 4px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 8px 10px;
  resize: vertical;
  color: var(--text);
}
.sale-actions {
  background: #eceff1;
  margin: 16px -22px 0;
  padding: 12px 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.sale-actions .btn-dark { background: #455a64; }
.money-card {
  width: 1040px;
  max-width: 100%;
  margin: 0 auto 12px;
  background: #fff;
  padding: 8px 22px 22px;
}
.money-note { color: #2e7d32; margin: 8px 0; }
.dict-add { display: flex; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.dict-add input,
.dict-add select { height: 36px; border: 1px solid #e0e0e0; border-radius: 4px; padding: 0 10px; background: #fff; }
.dict-add input:first-child { flex: 1; min-width: 220px; }
.sale-combo { position: relative; }
.sale-combo input { width: 100%; padding-right: 34px; }
.sale-combo-arrow {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 3px;
  background: #3f8fd8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}
.sale-combo-arrow svg { width: 10px; height: 10px; fill: #fff; }
.sale-combo .sale-suggest { position: absolute; left: 0; right: 0; top: 100%; max-height: 260px; overflow: auto; }
.sale-suggest-pop {
  position: fixed;
  z-index: 40;
  margin-top: 0;
  max-height: 260px;
  overflow: auto;
}
.sale-modal { position: fixed; inset: 0; background: rgba(38, 50, 56, 0.45); display: flex; align-items: center; justify-content: center; z-index: 30; }
.sale-modal-box { background: #fff; width: 460px; max-width: 94vw; padding: 18px 22px; display: flex; flex-direction: column; gap: 10px; }
.sale-modal-box h2 { margin: 0 0 4px; font-size: 18px; font-weight: 400; }
.sale-modal-box input,
.sale-modal-box select { height: 36px; border: 1px solid #e0e0e0; border-radius: 4px; padding: 0 10px; background: #fff; }
.sale-modal-box .phone-field input { border: 0; height: 36px; padding: 0 10px; }
.sale-modal-actions { display: flex; gap: 8px; margin-top: 6px; }
.money-extra { display: flex; flex-direction: column; gap: 4px; color: #78909c; font-size: 12px; }
.anketa-actions { display: flex; flex-wrap: wrap; gap: 3px; padding: 8px; background: #f5f5f5; border: 1px solid #eceff1; }
.anketa-actions .btn { border-radius: 2px; }
.anketa-events { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 12px; color: #546e7a; }
.anketa-events th { text-align: left; font-weight: 400; color: #455a64; font-size: 14px; padding: 8px; border-bottom: 2px solid #e0e0e0; }
.anketa-events td { padding: 8px; border-top: 1px solid #eceff1; vertical-align: top; }
.anketa-events tr.success td { background: #e8f5e9; }
.anketa-events tr.danger td { background: #fdecea; }
.option-modal { background: #fff; width: 620px; max-width: 94vw; border-radius: 4px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2); }
.option-modal-body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.option-row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: start; font-size: 14px; color: #455a64; }
.option-row input,
.option-row select,
.option-row textarea { width: 100%; height: 34px; border: 1px solid #e0e0e0; border-radius: 4px; padding: 0 10px; background: #fff; }
.option-row textarea { height: 72px; padding: 8px 10px; resize: vertical; }
.option-row .muted { font-size: 12px; margin: 4px 0 0; }
.option-warning { color: #e53935; font-size: 18px; }
.option-actions { display: flex; align-items: center; gap: 10px; }
.option-actions .btn-plain { border: 0; background: none; color: #4f9ad8; cursor: pointer; }
.shift-modal { background: #fff; width: 460px; max-width: 94vw; border-radius: 4px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2); }
.shift-modal-body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 10px; color: #455a64; }
.shift-modal-body h2 { margin: 0; font-size: 20px; font-weight: 500; }
.shift-expected { display: flex; justify-content: space-between; align-items: center; background: #f5f7f8; border-radius: 4px; padding: 10px 12px; }
.shift-expected b { font-size: 20px; }
.shift-choice { display: flex; gap: 16px; }
.shift-choice label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.shift-modal-body input[type='number'] { height: 36px; border: 1px solid #e0e0e0; border-radius: 4px; padding: 0 10px; }
.debts-block { margin: 18px 0 28px; max-width: 700px; }
.debts-block-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.debts-block-head h2 { margin: 0; font-size: 20px; font-weight: 600; color: #455a64; }
.debts-block-head label { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #455a64; }
.debts-block-head input { height: 28px; width: 180px; border: 1px solid #9e9e9e; border-radius: 2px; padding: 0 6px; }
.debts-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.debts-table th { background: #7cb9db; color: #fff; font-weight: 400; padding: 8px; border: 1px solid #ddd; cursor: pointer; user-select: none; }
.debts-table td { padding: 8px; border: 1px solid #ddd; text-align: center; }
.debts-table td:first-child { text-align: left; }
.money-type-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.money-type-table th { text-align: left; font-weight: 600; color: #455a64; padding: 8px; background: #f5f7f8; }
.money-type-table td { padding: 6px 8px; border-top: 1px solid #eceff1; }
.money-type-table input[type='text'],
.money-type-table select { height: 32px; border: 1px solid #e0e0e0; border-radius: 6px; padding: 0 8px; background: #fff; }
.money-type-table .money-type-name { width: 100%; min-width: 220px; background: #f5f7f8; }
.money-type-source { color: #90a4ae; }
.anketa-subtabs { display: flex; align-items: center; gap: 8px; margin: 8px 0 14px; }
.finance-export {
  margin-left: auto;
  border: 0;
  background: #1ab167;
  padding: 4px 0;
  cursor: pointer;
  font-size: 120%;
  color: #fff;
  white-space: pre;
  line-height: 1.2;
}
.finance-paid-total {
  font-size: 120%;
  white-space: pre;
  line-height: 1.2;
}
.finance-paid-sum { color: #1ab167; }
.anketa-debt-note { color: #90a4ae; font-size: 12px; }
.money-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.money-table td { padding: 10px 8px; border-top: 1px solid #eceff1; vertical-align: top; }
.finance-history { width: 100%; border-collapse: collapse; font-size: 13px; }
.finance-history th {
  text-align: left;
  font-weight: 400;
  color: #90a4ae;
  background: #f7f9fa;
  padding: 8px 10px;
  border-bottom: 1px solid #e0e0e0;
  white-space: nowrap;
}
.finance-history td {
  padding: 10px;
  border-bottom: 1px solid #eceff1;
  vertical-align: top;
  color: #455a64;
}
.finance-history th:nth-child(1),
.finance-history td:nth-child(1) { width: 96px; white-space: nowrap; }
.finance-history th:nth-child(2),
.finance-history td:nth-child(2) { width: 58px; white-space: nowrap; }
.finance-history th:nth-child(5),
.finance-history td.finance-qty { width: 64px; text-align: center; }
.finance-history td.finance-sum { white-space: nowrap; color: #2e7d32; font-weight: 600; text-align: right; }
.finance-history th:nth-child(6) { text-align: right; }
.finance-history td.finance-sum.finance-out { color: #c62828; }
.finance-history tr.finance-cancel td,
.finance-history tr.finance-cancel td.finance-sum { color: #90a4ae; font-weight: 400; }
.money-row-in { background: #e8f5e9; }
.money-row-out { background: #fdecea; }
.money-row-cancel { background: #eceff1; color: #90a4ae; }
.money-card.mv-page { width: 1080px; padding: 20px 20px 24px; color: #5f6771; font-size: 14px; }
.mv-head { display: flex; justify-content: space-between; align-items: flex-start; }
.mv-head-left { display: flex; align-items: flex-end; gap: 20px; padding-left: 10px; }
.mv-back {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  width: 92px;
  height: 65px;
  padding: 0 7px 7px 0;
  border-radius: 4px;
  background: #3e8ad0;
  color: #fff;
  font-size: 12px;
  line-height: 14.4px;
  text-align: right;
  text-decoration: none;
}
.mv-back:hover { background: #2f7bc1; }
.mv-back-arrow { position: absolute; top: 0; right: 8px; font-size: 34px; font-weight: 300; line-height: 1; }
.mv-head h1 { margin: 0; font-size: 23px; font-weight: 400; line-height: 25px; color: #5f6771; }
.mv-balance { padding-top: 10px; text-align: right; font-size: 23px; font-weight: 400; line-height: 25px; }
.mv-balance div { margin-bottom: 5px; }
.mv-balance span { color: #1ab167; }
.mv-form { margin-top: 32px; }
.mv-grid { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.mv-grid > * { padding: 0 10px; }
.mv-col-2 { width: 16.6667%; }
.mv-col-3 { width: 25%; }
.mv-col-4 { width: 33.3333%; }
.mv-col-6 { width: 50%; }
.mv-field { display: flex; flex-direction: column; margin-bottom: 12px; }
.mv-label { margin: 8px 0; font-size: 11.9px; line-height: 15px; color: #89949e; }
.mv-extra { width: 50%; gap: 8px; }
.mv-goods { display: flex; gap: 10px; }
.mv-goods .mv-qty { width: 120px; flex: none; }
.mv-input,
.mv-select,
.mv-filters select,
.mv-date-group input {
  width: 100%;
  height: 40px;
  padding: 5px;
  border: 1px solid #d8e3f0;
  border-radius: 9px;
  background: #fff;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  color: #555;
  font: inherit;
}
.mv-select {
  appearance: none;
  padding-right: 34px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Crect width='18' height='18' rx='4' fill='%233e8ad0'/%3E%3Cpath d='M5 7h8l-4 5z' fill='%23fff'/%3E%3C/svg%3E") no-repeat right 8px center / 18px 18px;
}
.mv-empty { color: #919ba4; }
.mv-textarea { height: 72px; resize: none; }
.mv-actions { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.mv-files { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.mv-hidden { visibility: hidden; pointer-events: none; }
.mv-fileform { position: relative; display: flex; align-items: center; height: 30px; border: 1px solid #d8e3f0; border-radius: 4px; overflow: hidden; }
.mv-file-name { flex: 1; padding-left: 5px; color: #89949e; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mv-fileform .mv-browse { min-height: 30px; height: 30px; border-radius: 0; background: #3e8ad0; }
.mv-fileform input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.btn.mv-submit,
.btn.mv-choose,
.mv-round .btn,
.mv-date-group .btn,
.btn.mv-cancel { background: #3e8ad0; }
.btn.mv-submit:hover,
.btn.mv-choose:hover,
.mv-round .btn:hover,
.mv-date-group .btn:hover,
.btn.mv-cancel:hover { background: #2f7bc1; }
.btn.mv-submit { height: 34px; padding: 6px 12px; border-radius: 4px; }
.mv-hide { display: flex; align-items: center; gap: 12px; margin: 22px 0 5px; }
.mv-hr { border: 0; border-top: 1px solid #89949e; margin: 18px 0; }
.mv-closed { font-size: 21px; font-weight: 200; line-height: 29px; color: #e93a3a; }
.mv-toolbar { display: flex; gap: 20px; margin-bottom: 18px; }
.mv-day { position: relative; width: 245px; flex: none; }
.mv-round { position: absolute; top: 0; right: 0; display: flex; gap: 5px; }
.mv-round .btn { width: 32px; height: 34px; min-height: 34px; padding: 0; border-radius: 50%; }
.mv-day-text { margin: 0 0 3px; font-size: 18px; font-weight: 500; line-height: 18px; }
.mv-link { padding: 0; border: 0; background: none; color: #367ec0; font: inherit; cursor: pointer; }
.mv-link:hover { text-decoration: underline; }
.mv-filters { flex: 1; display: grid; grid-template-columns: 245px 1fr 1fr 1fr 1fr; gap: 20px; align-items: start; }
.mv-date-group { display: flex; }
.mv-date-group input { background: #f5f5f5; border-radius: 9px 0 0 9px; }
.mv-date-group .btn { height: 40px; min-height: 40px; padding: 6px 12px; border-radius: 0 4px 4px 0; white-space: nowrap; }
.mv-filters select:disabled { background: #eee; cursor: not-allowed; }
.btn.mv-choose { height: 34px; border-radius: 4px; }
.mv-legend { display: flex; gap: 10px; margin: 0 0 20px 10px; font-weight: 700; }
.mv-legend span { display: inline-flex; align-items: center; gap: 4px; }
.mv-dot { display: inline-block; width: 15px; height: 15px; border-radius: 50%; }
.mv-dot-cancel { background: #d4d4d4; }
.mv-dot-out { background: #faedee; }
.mv-dot-in { background: #e7f8f0; }
.mv-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mv-table td { padding: 2px 5px 2px 10px; border-top: 2px solid #fff; line-height: 23.8px; vertical-align: top; }
.mv-table td:nth-child(1) { width: 31px; }
.mv-table td:nth-child(2) { width: 93px; }
.mv-table td:nth-child(3) { width: 89px; }
.mv-table td:nth-child(5) { width: 31px; }
.mv-table a { color: #367ec0; }
.mv-row-shift td { background: #f5f5f5; }
.mv-row-out td { background: #faedee; }
.mv-row-in td { background: #e7f8f0; }
.mv-row-cancel td { background: #d4d4d4; }
.mv-plus,
.mv-minus { display: inline-block; width: 16px; height: 16px; margin-top: 4px; border-radius: 50%; font-size: 14px; line-height: 12px; text-align: center; }
.mv-plus { color: #1ab167; border: 1px solid #1ab167; }
.mv-minus { color: #e93a3a; border: 1px solid #e93a3a; }
.btn.mv-cancel { min-height: 28px; height: 28px; padding: 0 10px; border-radius: 4px; font-size: 12px; white-space: nowrap; }
.clients-card {
  width: 1040px;
  max-width: 100%;
  margin: 0 auto 12px;
  background: #fff;
  padding: 10px 22px 4px;
}
.clients-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 16px;
}
.clients-head h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 400;
  white-space: nowrap;
}
.clients-count {
  color: #90a4ae;
  font-size: 13px;
  white-space: nowrap;
}
.clients-count span {
  display: inline-block;
  margin-left: 6px;
  min-width: 22px;
  padding: 0 7px;
  border-radius: 10px;
  background: #bcaaa4;
  color: #fff;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}
.clients-search {
  margin-left: auto;
  width: 280px;
  height: 32px;
  border: 1px solid #cfd8dc;
  padding: 0 10px;
}
.clients-filters {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 36px;
  gap: 16px;
  align-items: end;
  margin-bottom: 10px;
}
.clients-filters label {
  display: block;
  color: #90a4ae;
  font-size: 13px;
}
.clients-filters select {
  display: block;
  width: 100%;
  height: 32px;
  margin-top: 4px;
  border: 1px solid #cfd8dc;
  background: #fff;
  color: #607d8b;
  padding: 0 8px;
}
.clients-cloud {
  background: none;
  border: 0;
  padding: 0 0 6px;
  cursor: pointer;
  line-height: 0;
}
.clients-empty { padding: 18px 0 24px; }
.client-row {
  display: grid;
  grid-template-columns: 1.5fr 0.7fr 0.75fr 1fr;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid #eceff1;
  align-items: start;
}
.client-name {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--blue);
}
.client-badge {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: currentColor;
  color: #fff !important;
  font-size: 9px;
  font-weight: 700;
  font-style: italic;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.client-parent { color: #90a4ae; font-size: 13px; margin: 2px 0; }
.client-visits { color: #90a4ae; font-size: 12px; }
.client-meta { color: #546e7a; font-size: 14px; }
.client-meta-label {
  color: #90a4ae;
  font-size: 12px;
  margin-bottom: 4px;
  line-height: 1.25;
}
.client-rest {
  color: #90a4ae;
  font-size: 13px;
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.client-rest span { color: #43a047; }
.client-rest span.client-debt { color: #e53935; }
.profile-card {
  width: 1040px;
  max-width: 100%;
  min-height: 520px;
  margin: 0 auto 12px;
  background: #fff;
  padding: 18px 24px 28px;
}
.profile-title {
  margin: 0 0 16px;
  font-size: 22px;
  font-weight: 400;
  color: var(--text);
}
.profile-photo {
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  object-fit: contain;
  object-position: top left;
  margin: 0 0 12px;
}
.profile-file {
  display: flex;
  width: 280px;
  height: 34px;
  margin-bottom: 16px;
  border: 1px solid #cfd8dc;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}
.profile-file span {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: #90a4ae;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-file .btn {
  height: 100%;
  min-height: 0;
  border-radius: 0;
  padding: 0 14px;
}
.profile-field {
  display: block;
  width: 280px;
  margin-bottom: 12px;
  color: #90a4ae;
  font-size: 13px;
}
.profile-field input {
  display: block;
  width: 100%;
  height: 34px;
  margin-top: 4px;
  border: 1px solid #cfd8dc;
  border-radius: 4px;
  padding: 0 10px;
  color: var(--text);
}
.profile-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.sms-card {
  width: 1040px;
  max-width: 100%;
  margin: 0 0 12px;
  background: #fff;
  padding: 8px 22px 0;
}
.sms-card .btn-back {
  min-width: 118px;
  min-height: 52px;
}
.sms-find {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 4px 0 16px;
}
.sms-find-field { position: relative; flex: 1; }
.sms-find-field input {
  width: 100%;
  height: 36px;
  border: 1px solid #e0e0e0;
  border-radius: 2px;
  padding: 0 12px;
}
.sms-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: 38px;
  background: #fff;
  border: 1px solid #e0e0e0;
  z-index: 4;
}
.sms-suggest button {
  display: block;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #f5f5f5;
  padding: 8px 12px;
  cursor: pointer;
}
.sms-suggest button:hover { background: #f5f7f8; }
.sms-suggest-head,
.sms-suggest-empty {
  padding: 8px 12px;
  font-size: 12px;
  color: #90a4ae;
}
.sms-suggest-head { border-bottom: 1px solid #f0f0f0; }
.sms-table {
  width: 100%;
  border-collapse: collapse;
}
.sms-table th {
  background: #eceff1;
  text-align: left;
  font-weight: 400;
  font-size: 13px;
  color: #78909c;
  padding: 8px 12px;
}
.sms-table td {
  padding: 8px 12px;
  border-bottom: 1px solid #eceff1;
  font-size: 13px;
  color: var(--text);
}
.sms-table th:nth-child(1),
.sms-table td:nth-child(1) { width: 28%; }
.sms-table th:nth-child(2),
.sms-table td:nth-child(2) { width: 28%; }
.sms-table th:nth-child(3),
.sms-table td:nth-child(3) { width: 22%; }
.sms-table th:last-child,
.sms-table td:last-child {
  width: 36px;
  text-align: center;
  padding-right: 8px;
}
.sms-clear {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: #e53935;
  color: #fff;
  font-size: 14px;
  line-height: 18px;
  cursor: pointer;
}
.sms-compose {
  display: block;
  width: 100%;
  min-height: 110px;
  margin: 16px 0 0;
  padding: 10px 12px;
  border: 1px solid #cfd8dc;
  border-radius: 4px;
  font: inherit;
  resize: vertical;
  box-sizing: border-box;
}
.sms-send { margin: 18px 0 22px; }
.sms-notice { color: var(--muted); font-size: 13px; margin: -12px 0 16px; }
.sms-foot {
  background: #eceff1;
  margin: 0 -22px 0;
  min-height: 22px;
}
.integ-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 720px;
}
.integ-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
}
.integ-mark { width: 40px; height: 40px; flex: 0 0 40px; }
.integ-text { display: flex; flex-direction: column; min-width: 0; }
.integ-title { color: #e53935; font-size: 18px; font-weight: 600; line-height: 1.2; }
.integ-sub { color: #1e88e5; font-size: 14px; line-height: 1.3; margin-top: 2px; }
.integ-count {
  margin-left: auto;
  min-width: 28px;
  height: 22px;
  padding: 0 8px;
  border-radius: 11px;
  background: #eceff1;
  color: #78909c;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.integ-ver { margin-left: 8px; color: #90a4ae; font-size: 13px; }
.max-add { margin: 0 0 16px; }
.max-list { display: flex; flex-direction: column; gap: 12px; }
.max-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #e0e0e0;
}
.max-item span { flex: 1; color: #37474f; }
.max-edit-btn, .max-delete {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.max-edit-btn { color: #1e88e5; }
.max-edit-btn svg { width: 22px; height: 22px; }
.max-delete { color: #e53935; font-size: 22px; line-height: 1; }
.max-edit-title { color: #90a4ae; font-weight: 400; }
.max-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px 48px;
  align-items: start;
}
.max-col label { display: block; margin: 14px 0 0; color: #263238; font-weight: 700; font-size: 14px; }
.max-col input, .max-col select, .max-col textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  border: 1px solid #cfd8dc;
  border-radius: 2px;
  font: inherit;
  font-weight: 400;
  box-sizing: border-box;
}
.max-col input, .max-col select { height: 36px; padding: 0 10px; }
.max-col textarea { padding: 8px 10px; resize: vertical; }
.max-req { color: #e53935; }
.max-hint { margin-top: 4px; color: #90a4ae; font-size: 13px; }
.max-centers-title { margin: 18px 0 8px; font-weight: 700; }
.max-check { display: inline-flex; align-items: center; gap: 6px; margin: 0 16px 8px 0; font-weight: 400; }
.max-col label.max-check { display: inline-flex; font-weight: 400; }
.max-col label.max-check input { width: auto; height: auto; margin: 0; }
.max-city { margin-top: 8px; }
.max-city-name { margin-bottom: 4px; color: #37474f; }
.max-city-boxes { display: flex; flex-wrap: wrap; }
.max-save { margin-top: 22px; }
.client-msg-open { margin: 8px 0 16px; background: #1565c0; }
.client-msg-table { width: 100%; border-collapse: collapse; background: #fff; }
.client-msg-table th {
  background: #f7f7f7;
  text-align: left;
  font-weight: 400;
  color: #90a4ae;
  font-size: 13px;
  padding: 8px 10px;
  border-bottom: 1px solid #eceff1;
}
.client-msg-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
  color: #546e7a;
  vertical-align: top;
}
.msg-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(55, 71, 79, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
}
.msg-box { width: min(640px, calc(100vw - 32px)); background: #fff; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2); }
.msg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #3dce6e;
  color: #fff;
  padding: 10px 14px;
  font-size: 16px;
}
.msg-close { border: 0; background: transparent; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.msg-body { padding: 16px 18px 18px; }
.msg-body label { display: block; color: #607d8b; font-size: 14px; }
.msg-body textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  min-height: 96px;
  border: 1px solid #cfd8dc;
  border-radius: 4px;
  padding: 8px 10px;
  font: inherit;
  box-sizing: border-box;
  resize: vertical;
}
.msg-actions { display: flex; gap: 8px; margin-top: 14px; }
.msg-cancel {
  height: 36px;
  padding: 0 16px;
  border: 0;
  background: #78909c;
  color: #fff;
  cursor: pointer;
}
.leads-card {
  width: 1040px;
  max-width: 100%;
  margin: 0 0 12px;
  background: #fff;
  padding: 8px 22px 18px;
}
.leads-card .btn-back {
  min-width: 118px;
  min-height: 52px;
}
.leads-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 14px;
}
.leads-tab {
  background: #eceff1;
  border: 0;
  color: #607d8b;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
}
.leads-tab.active {
  background: #fff;
  color: #455a64;
  box-shadow: inset 0 -2px 0 var(--blue);
  font-weight: 600;
}
.leads-tools {
  display: grid;
  grid-template-columns: auto 170px 1fr auto;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
}
.leads-views {
  display: grid;
  grid-template-columns: 18px;
  justify-items: center;
  row-gap: 0;
  color: #90a4ae;
}
.leads-views-label { font-size: 11px; margin: 0 0 2px; }
.leads-view {
  width: 18px;
  height: 16px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #b0bec5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.leads-view.active { color: #546e7a; }
.leads-view svg { display: block; }
.leads-search {
  height: 32px;
  border: 1px solid #cfd8dc;
  padding: 0 10px;
  width: 170px;
}
.leads-create { justify-self: center; }
.leads-setup { justify-self: end; }
.leads-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  min-height: 220px;
  margin-bottom: 22px;
}
.leads-col {
  background: #fafafa;
  border: 1px solid #eceff1;
  min-height: 180px;
}
.leads-col header {
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #546e7a;
  background: #e3f2fd;
  border-bottom: 1px solid #e0e0e0;
}
.leads-col.tone-cyan header { background: #e0f7fa; border-top: 3px solid #4dd0e1; }
.leads-col.tone-green header { background: #f1f8e9; border-top: 3px solid #9ccc65; }
.leads-col.tone-orange header { background: #fff8e1; border-top: 3px solid #ffb74d; }
.leads-col.tone-pink header { background: #fce4ec; border-top: 3px solid #f48fb1; }
.leads-col-body { padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.lead-card {
  background: #fff;
  border: 1px solid #eceff1;
  padding: 8px 10px;
}
.lead-top,
.lead-bottom {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: flex-start;
}
.lead-bottom { margin-top: 6px; align-items: center; }
.lead-name { font-size: 13px; font-weight: 600; color: #37474f; line-height: 1.25; }
.lead-sub { font-size: 12px; color: #607d8b; margin-top: 2px; }
.lead-date,
.lead-phone { font-size: 12px; color: #90a4ae; white-space: nowrap; }
.lead-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #90a4ae;
}
.lead-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}
.lead-dot.fresh { background: #fff; border: 1px solid #90a4ae; }
.lead-dot.worked { background: #fbc02d; }
.lead-dot.done { background: #43a047; }
.lead-dot.late { background: #e53935; }
.lead-dot.archive { background: #263238; }
.leads-table { width: 100%; border-collapse: collapse; margin-bottom: 22px; }
.leads-table th {
  text-align: left;
  font-weight: 400;
  font-size: 12px;
  color: #90a4ae;
  padding: 8px 10px;
  background: #eceff1;
}
.leads-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #eceff1;
  font-size: 13px;
}
.leads-legend {
  color: #90a4ae;
  font-size: 12px;
  line-height: 1.45;
  padding-top: 8px;
}
.leads-legend-title { margin-bottom: 8px; }
.leads-legend ul {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.leads-legend li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 6px;
}
.leads-legend li .lead-dot { margin-top: 3px; }
.leads-legend strong { font-weight: 600; color: #78909c; }
.leads-legend p { margin: 0 0 8px; }
.dict-card {
  width: 1040px;
  max-width: 100%;
  margin: 0 0 12px;
  background: #fff;
  padding: 8px 22px 22px;
}
.dict-card .btn-back {
  min-width: 118px;
  min-height: 52px;
}
.dict-create,
.dict-inline,
.dict-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 16px;
  flex-wrap: wrap;
}
.dict-create input,
.dict-inline input,
.dict-inline select {
  height: 36px;
  border: 1px solid #e0e0e0;
  padding: 0 10px;
  min-width: 180px;
}
.dict-split {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
}
.dict-label {
  font-size: 13px;
  color: #78909c;
  margin: 12px 0 8px;
}
.dict-item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid #eceff1;
  border-bottom: 0;
  padding: 10px 12px;
  cursor: pointer;
}
.dict-item:last-child { border-bottom: 1px solid #eceff1; }
.dict-item.active { background: #e3f2fd; }
.dict-item span { color: #90a4ae; font-size: 12px; }
.dict-list { margin: 0 0 10px; padding: 0; list-style: none; }
.dict-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.dict-swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  display: inline-block;
}
.dict-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
  margin-bottom: 16px;
}
.dict-span { grid-column: 1 / -1; }
.dict-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
}
.dict-service {
  display: grid;
  grid-template-columns: 1fr 90px 120px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.dict-service input { height: 32px; border: 1px solid #e0e0e0; padding: 0 8px; }
.dict-service-list li.dict-service-item {
  justify-content: space-between;
  border-bottom: 1px solid #eceff1;
  padding: 8px 0;
  gap: 12px;
}
.dict-service-text {
  flex: 1;
  color: #37474f;
}
.dict-service-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.dict-service-btn {
  min-height: 28px;
  padding: 0 10px;
  font-size: 12px;
}
.dict-service-del {
  background: #e53935;
}
.dict-service-del:hover {
  background: #c62828;
}
.dict-service-edit {
  margin: 0;
  width: 100%;
}
.settings-panel {
  width: 780px;
  max-width: 100%;
  margin: 12px auto;
  background: #fff;
  border: 1px solid #cfd8dc;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.settings-panel .modal-head {
  background: #5cb85c;
  font-size: 16px;
  padding: 11px 16px;
}
.settings-body {
  padding: 14px 16px 16px;
}
.settings-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}
.settings-toolbar select {
  width: 340px;
  max-width: 100%;
  height: 36px;
  border: 1px solid #90caf9;
  border-radius: 4px;
  padding: 0 10px;
  background: #fff;
  color: #42a5f5;
}
.settings-grid {
  border: 1px solid #e0e0e0;
}
.settings-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.settings-row:last-child .settings-item {
  border-bottom: 0;
}
.settings-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 7px 12px;
  border-right: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  color: #2196f3;
  font-size: 14px;
  line-height: 1.25;
}
.settings-item:last-child {
  border-right: 0;
}
.settings-item:hover {
  background: #f5fbff;
}
.settings-ico {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: #8bc34a;
}
.client-debt { color: #e53935; }
a.client-name { text-decoration: none; cursor: pointer; color: var(--blue); }
a.client-name:hover { text-decoration: underline; }
.anketa-card {
  width: 1040px;
  max-width: 100%;
  margin: 0 auto 12px;
  background: #fff;
  padding: 10px 22px 24px;
}
.anketa-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 8px 0 14px;
}
.anketa-head h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 400;
  color: #90a4ae;
}
.anketa-head h1 span { color: #ef6c00; }
.anketa-archive-badge {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 10px;
  border-radius: 12px;
  background: #cfd8dc;
  color: #455a64;
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  vertical-align: middle;
}
.anketa-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 16px;
}
.anketa-tab {
  background: #eceff1;
  border: 1px solid #e0e0e0;
  color: #607d8b;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 13px;
}
.anketa-tab.active {
  background: #fff;
  color: #455a64;
}
.anketa-tab em {
  display: inline-block;
  margin-left: 6px;
  min-width: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #b0bec5;
  color: #fff;
  font-size: 11px;
  font-style: normal;
  line-height: 16px;
  text-align: center;
}
.anketa-stub { padding: 24px 0 40px; }
.anketa-main {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  margin-bottom: 18px;
}
.anketa-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.anketa-fields input,
.anketa-fields select {
  width: 100%;
  height: 38px;
  border: 1px solid #e0e0e0;
  border-radius: 2px;
  padding: 0 10px;
  background: #fff;
  color: var(--text);
}
.anketa-fields .phone-field { width: 100%; }
.anketa-fields .birth-row { width: 100%; }
.anketa-fields .birth-pop-head select {
  width: auto;
  height: 28px;
  padding: 0 4px;
}
.anketa-wa {
  color: #66bb6a;
  padding: 0 10px;
  font-size: 16px;
}
.anketa-file {
  display: flex;
  height: 38px;
  border: 1px solid #e0e0e0;
  overflow: hidden;
  background: #fff;
}
.anketa-file span {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: #90a4ae;
  font-size: 13px;
}
.anketa-file .btn {
  height: 100%;
  min-height: 0;
  border-radius: 0;
  padding: 0 16px;
}
.anketa-side { padding-top: 8px; }
.anketa-avatar {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 12px;
}
.anketa-messengers {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-bottom: 18px;
}
.anketa-msg-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #3b6ef6;
  font-size: 13px;
  line-height: 1.2;
}
.anketa-msg-link:hover .anketa-msg-ico {
  transform: scale(1.06);
  opacity: 0.92;
}
.anketa-msg-link:hover .anketa-msg-label {
  text-decoration: underline;
}
.anketa-msg-ico {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  user-select: none;
  cursor: pointer;
  transition: transform 0.12s ease, opacity 0.12s ease;
  flex-shrink: 0;
}
.anketa-msg-ico:hover {
  transform: scale(1.06);
  opacity: 0.92;
}
.anketa-msg-ico.ico-max {
  background: linear-gradient(135deg, #3b6ef6 0%, #7b42f6 100%);
  position: relative;
}
.anketa-msg-ico.ico-max .ico-max-ring {
  width: 12px;
  height: 12px;
  border: 2.5px solid #fff;
  border-radius: 50%;
  display: block;
}
.anketa-block { margin-bottom: 14px; color: #607d8b; font-size: 13px; }
.anketa-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  color: #546e7a;
}
.anketa-passes-heading {
  font-size: 15px;
  color: #546e7a;
}
.anketa-sell {
  min-height: 32px;
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 4px;
}
.anketa-sell-ico {
  flex-shrink: 0;
}
.anketa-passes-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.anketa-passes-head {
  display: grid;
  grid-template-columns: 1fr 64px 92px;
  gap: 8px;
  color: #607d8b;
  font-size: 13px;
  margin-bottom: 2px;
}
.anketa-col-center {
  text-align: center;
}
.anketa-col-right {
  text-align: right;
}
.anketa-pass-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.anketa-pass-section-title {
  color: #4caf50;
  font-size: 14px;
}
.anketa-pass-row {
  display: grid;
  grid-template-columns: 1fr 64px 92px;
  gap: 8px;
  align-items: start;
  font-size: 14px;
  line-height: 1.3;
}
.anketa-pass-link {
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  text-align: left;
  color: #2980b9;
  font-size: 14px;
  line-height: 1.3;
  cursor: pointer;
  font-family: inherit;
}
.anketa-pass-link:hover {
  text-decoration: underline;
  color: #1f6391;
}
.anketa-pass-left {
  text-align: center;
  color: #455a64;
}
.anketa-pass-valid {
  text-align: right;
  color: #546e7a;
  font-size: 13px;
}
.anketa-bonus-line {
  color: #2980b9;
  font-size: 15px;
  margin: 16px 0 14px;
}
.anketa-debt-block {
  margin-bottom: 14px;
}
.anketa-debt-title {
  color: #455a64;
  font-size: 15px;
  margin-bottom: 2px;
}
.anketa-debt-table {
  margin: 4px 0 6px;
  font-size: 13px;
}
.anketa-debt-head,
.anketa-debt-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0;
}
.anketa-debt-head {
  color: #607d8b;
}
.anketa-debt-note {
  color: #607d8b;
  font-size: 13px;
}
.anketa-next-line {
  color: #607d8b;
  font-size: 13px;
  margin-bottom: 14px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.anketa-next-val {
  color: #43a047;
  font-size: 17px;
}
.anketa-green { color: #43a047; }
.anketa-pass { color: #43a047; font-size: 13px; margin: 4px 0; }
.anketa-line { color: #607d8b; font-size: 13px; margin-bottom: 12px; }
.anketa-line b { color: #455a64; }
.anketa-split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  border-top: 1px solid #eceff1;
  padding-top: 16px;
}
.anketa-addfield {
  text-align: right;
  color: #42a5f5;
  font-size: 13px;
  margin-bottom: 10px;
}
.anketa-wait {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 8px 12px;
  margin-bottom: 12px;
}
.anketa-check {
  font-size: 12px;
  color: #607d8b;
  line-height: 1.25;
}
.anketa-wait select,
.anketa-wait textarea {
  width: 100%;
  border: 1px solid #e0e0e0;
  padding: 8px 10px;
  color: var(--text);
}
.anketa-wait select { height: 36px; }
.anketa-wait textarea { grid-column: 2; min-height: 72px; resize: vertical; }
.anketa-h {
  margin: 22px 0 8px;
  font-size: 16px;
  font-weight: 400;
  color: #455a64;
}
.anketa-comment {
  display: block;
  width: 100%;
  height: 36px;
  margin-bottom: 8px;
  border: 1px solid #e0e0e0;
  padding: 0 10px;
}
.anketa-comments-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.anketa-comments-head .anketa-h { margin: 22px 0 8px; }
.anketa-comments { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.anketa-comments td {
  border-bottom: 1px solid #eceff1;
  padding: 8px 6px;
  font-size: 12px;
  color: #607d8b;
  vertical-align: top;
}
.anketa-comments td:first-child { width: 90px; color: #90a4ae; }
.anketa-comments td:last-child { width: 140px; text-align: right; }
.anketa-plan-box {
  position: relative;
  border: 3px solid #2b7bb9;
  border-radius: 14px;
  padding: 18px 22px 16px;
  margin-top: 8px;
  margin-bottom: 12px;
  text-align: center;
}
.anketa-plan-title {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: #fafafa;
  padding: 0 12px;
  color: #2b7bb9;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.anketa-plan-actions { display: flex; gap: 18px; }
.anketa-plan-actions .btn { flex: 1; border-radius: 4px; }
.anketa-wide { display: flex; width: 100%; margin-bottom: 8px; }
.anketa-call-btns { display: flex; gap: 8px; margin: 8px 0 14px; }
.anketa-call-btns .btn { flex: 1; font-size: 12px; padding: 0 8px; }
.anketa-calls-title { margin-bottom: 8px; color: #455a64; }
.anketa-call {
  border: 1px solid #eceff1;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  padding: 8px 10px 10px;
  margin-bottom: 10px;
  background: #fff;
}
.anketa-call-head {
  display: flex;
  justify-content: space-between;
  color: #42a5f5;
  font-size: 13px;
  margin-bottom: 6px;
}
.anketa-call-head button {
  background: none;
  border: 0;
  color: #90a4ae;
  cursor: pointer;
  font-size: 16px;
}
.anketa-call-body { font-size: 12px; color: #90a4ae; line-height: 1.4; }
.anketa-call-body b { color: #455a64; }
.anketa-source {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin: 16px 0 12px;
}
.anketa-source select { height: 32px; margin-top: 4px; }
.anketa-note { display: block; color: #90a4ae; font-size: 13px; margin-bottom: 8px; }
.anketa-note textarea {
  display: block;
  width: 100%;
  min-height: 64px;
  margin-top: 4px;
  border: 1px solid #e0e0e0;
  padding: 8px 10px;
  color: var(--text);
  resize: vertical;
}
.sch-card {
  width: 100%;
  max-width: none;
  margin: 0 auto 12px;
  background: #fff;
  padding: 8px 18px 24px;
}
.sch-centers { flex-wrap: wrap; }
.sch-card { min-width: 0; max-width: 100%; }
.sch-card .sch-centers {
  min-width: 0;
  max-width: 100%;
  display: flex;
  gap: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  background: #2bac6c;
  margin: 0 0 14px;
  padding: 0;
}
.sch-card .sch-centers .subtab {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: #fff;
  padding: 14px 16px;
  font-size: 18px;
}
.sch-card .sch-centers .subtab.active {
  background: #fff;
  color: #111;
}
.sch-card .sch-views {
  gap: 0;
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 12px;
}
.sch-card .sch-views .tab {
  background: #f7f7f7;
  border: 1px solid #e0e0e0;
  border-bottom: 0;
  color: #546e7a;
  padding: 8px 18px;
  font-weight: 400;
}
.sch-card .sch-views .tab.active {
  background: #e6e6e6;
  color: #263238;
  font-weight: 400;
  border-bottom-color: #e6e6e6;
}
.sch-cabs { margin-top: 0; }
.sch-card .sch-cabs { gap: 0; margin: 4px 0 12px; }
.sch-card .sch-cabs .subtab {
  background: #fff;
  border: 1px solid #30b171;
  border-radius: 0;
  color: #30b171;
  padding: 12px 16px;
  font-size: 16px;
}
.sch-card .sch-cabs .subtab + .subtab { margin-left: -1px; }
.sch-card .sch-cabs .subtab.active {
  background: #3dc280;
  border-color: #3dc280;
  color: #fff;
}
.sch-toolbar { flex-wrap: wrap; }
.sch-day { margin: 0 0 18px; width: 100%; min-width: 0; }
.sch-day-title {
  font-size: 18px;
  font-weight: 400;
  margin: 8px 0 6px;
  text-align: center;
  text-transform: none;
  color: #367ec0;
}
.sch-day-week { color: #90a4ae; font-size: 14px; margin-left: 8px; }
.sch-card { max-width: 100%; }
.sch-scroll { overflow-x: hidden; width: 100%; min-width: 0; }
.sch-grid > *,
.sch-track > * { min-width: 0; }
.sch-grid {
  display: grid;
  width: 100%;
  min-width: 0;
  border: 0;
}
.sch-corner,
.sch-hour {
  background: transparent;
  border-bottom: 1px solid #90a4ae;
  border-right: 0;
  font-size: 12px;
  font-weight: 600;
  color: #111;
  text-align: left;
  padding: 0 0 3px 1px;
  position: relative;
  min-width: 0;
}
.sch-hour::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 1px;
  height: 8px;
  background: #111;
}
.sch-teacher,
.sch-teacher-empty {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  padding: 4px 8px;
  border: 0;
  background: #e7f6fb;
  color: #5f6771;
  font-size: 13px;
  min-height: 40px;
  min-width: 0;
  overflow: hidden;
}
.sch-teacher { cursor: pointer; border: 0; background: #e7f6fb; color: #5f6771; }
.sch-teacher-empty { color: #90a4ae; background: #e7f6fb; }
.sch-track {
  grid-column: 2 / -1;
  display: grid;
  position: relative;
  min-height: 40px;
  min-width: 0;
  border-bottom: 1px solid #eceff1;
  background: #f3fbfe;
}
.sch-plus {
  grid-row: 1;
  z-index: 1;
  min-height: 40px;
  min-width: 0;
  border: 0;
  border-right: 1px solid #e1f5fe;
  background: transparent;
  color: #4fc3f7;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}
.sch-track .sch-plus {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  margin: 0;
  min-height: 40px;
  border: 0;
  border-right: 1px solid #e1f5fe;
  background: transparent;
  overflow: hidden;
}
.sch-plus-time { font-size: 10px; font-weight: 600; line-height: 1; color: #111; max-width: 100%; overflow: hidden; }
.sch-track .sch-plus-time { display: none; }
.sch-off .sch-plus-time { color: #111; }
.sch-track .sch-plus span:first-child {
  width: 14px;
  height: 14px;
  border: 1px solid #7ec8f3;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  line-height: 1;
  font-size: 0;
}
.sch-track .sch-plus span:first-child::before {
  content: '+';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4fc3f7;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-1px);
}
.sch-add-teacher {
  background: transparent;
  border: 0;
  color: #2196f3;
  padding: 6px 0 0;
  box-shadow: none;
}
.sch-now {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e53935;
  z-index: 5;
  pointer-events: none;
}
.sch-hide {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}
.sch-hide input { width: auto; height: auto; }
.sch-block {
  grid-row: 1;
  z-index: 2;
  margin: 1px 0;
  border: 0;
  border-radius: 1px;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  padding: 2px 3px;
  overflow: hidden;
  cursor: pointer;
  white-space: normal;
  min-width: 0;
}
.sch-block-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.sch-block-lines span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sch-kind-group { background: #1e88e5; }
.sch-kind-ind { background: #e53935; }
.sch-kind-split { background: #c9a227; color: #fff; }
.sch-kind-comb { background: #c62828; }
.sch-kind-new { background: #43a047; }
.sch-kind-trial { background: #fb8c00; color: #fff; }
.sch-off-cell { background: #eceff1; color: #607d8b; font-size: 12px; text-align: center; }
.sch-legend-block {
  margin-top: 22px;
  padding: 14px 16px 8px;
  background: #f7f9fb;
  border: 1px solid #e0e0e0;
}
.sch-legend-block h2 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
  color: #263238;
}
.sch-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 8px; font-size: 13px; color: #455a64; }
.sch-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sch-legend i { display: inline-block; width: 16px; height: 16px; flex: 0 0 16px; border: 1px solid rgba(38, 50, 56, 0.15); }
.sch-legend-notes {
  margin: 4px 0 10px;
  padding: 0;
  list-style: none;
  color: #546e7a;
  font-size: 13px;
}
.sch-legend-notes li { margin: 4px 0; }
.sch-legend-notes b { color: #263238; font-weight: 600; }
.sch-legend-note { margin: 0 0 10px; font-size: 13px; color: #546e7a; }
.sch-legend .sch-kind-group, .sch-legend .sch-kind-senior, .sch-legend .sch-kind-ind, .sch-legend .sch-kind-comb, .sch-legend .sch-kind-new, .sch-legend .sch-kind-trial, .sch-legend .sch-kind-split { color: transparent; }
.sch-prefs { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; margin: 0 0 14px; padding: 10px; background: #f5f9fc; }
.sch-prefs label { font-size: 13px; color: var(--muted); }
.sch-prefs input, .sch-prefs select { display: block; height: 32px; margin-top: 4px; }
.sch-newbie { margin-left: 6px; color: #2e7d32; font-weight: 700; font-size: 12px; }
.sch-track .sch-has-phone::after { content: none; }
.sch-export { display: flex; gap: 12px; align-items: end; }
.sch-export label { font-size: 13px; color: var(--muted); }
.sch-export input, .sch-export select { display: block; height: 36px; margin-top: 4px; }
.sch-kind-senior { background: #8e24aa; }
.sch-dim { opacity: 0.22; }
.sch-skip { text-decoration: line-through; opacity: 0.7; }
.sch-off { background: #eceff1; color: #90a4ae; }
.sch-staff {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
}
.sch-staff-row { display: inline-flex; align-items: center; gap: 4px; }
.sch-staff-row select { height: 32px; }
.sch-month-num { font-weight: 600; color: #90a4ae; }
.sch-month-num.sch-weekend,
.sch-month th.sch-weekend { color: #e53935; }
.sch-month-plus {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 22px;
  border: 0;
  background: #4fc3f7;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  line-height: 22px;
}
.sch-add-teacher { margin-top: 8px; }
.sch-modal { width: min(780px, calc(100vw - 24px)); max-height: 92vh; overflow: auto; background: #fff; }
.sch-modal .modal-head { background: #1b6ca8; padding: 8px 14px; font-size: 16px; font-weight: 600; }
.sch-lesson { padding: 14px 16px 8px; }
.sch-lesson-date { margin: 0 0 12px; color: #37474f; font-size: 14px; }
.sch-lesson-label { margin: 0 0 4px; color: #607d8b; font-size: 13px; }
.sch-lesson-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 12px;
  align-items: start;
}
.sch-lesson-top label,
.sch-lesson-mid label,
.sch-lesson-wide { display: block; color: #607d8b; font-size: 13px; }
.sch-lesson select,
.sch-lesson input[type='text'],
.sch-lesson input:not([type='checkbox']),
.sch-lesson textarea {
  display: block;
  width: 100%;
  height: 34px;
  margin-top: 4px;
  border: 1px solid #d5dde3;
  border-radius: 3px;
  padding: 0 8px;
  background: #fff;
  color: #263238;
}
.sch-lesson textarea { height: 58px; padding: 8px; resize: vertical; }
.sch-lesson select:focus,
.sch-lesson input:focus,
.sch-lesson textarea:focus { outline: none; border-color: #2196f3; }
.sch-lesson-teacher { display: flex; align-items: center; gap: 8px; }
.sch-lesson-teacher select { flex: 1; margin-top: 0; }
.sch-lesson-extra { margin-top: 6px; }
.sch-lesson-plus {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border: 2px solid #1e88e5;
  border-radius: 50%;
  background: #fff;
  color: #1e88e5;
  font-size: 22px;
  line-height: 24px;
  cursor: pointer;
  padding: 0;
}
.sch-duration { position: relative; display: block; margin-top: 4px; }
.sch-duration input { margin-top: 0 !important; padding-right: 22px; }
.sch-duration-spin {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  width: 18px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid #d5dde3;
  border-radius: 0 2px 2px 0;
  overflow: hidden;
  background: #fff;
}
.sch-duration-spin button {
  flex: 1 1 0;
  border: 0;
  background: #f7f9fa;
  color: #607d8b;
  cursor: pointer;
  font-size: 8px;
  line-height: 1;
  padding: 0;
}
.sch-duration-spin button + button { border-top: 1px solid #d5dde3; }
.sch-lesson-mid {
  display: grid;
  grid-template-columns: 1.5fr 150px 170px;
  gap: 12px;
  align-items: end;
  margin-bottom: 12px;
}
.sch-lesson-wide { margin-bottom: 12px; }
.sch-lesson-flags {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 4px 0 14px;
}
.sch-lesson-flags .sch-check { margin: 0; }
.sch-lesson-flags select { width: 190px; margin-left: auto; margin-top: 0; }
.sch-lesson-new { min-width: 118px; gap: 6px; }
.sch-lesson-new svg { width: 16px; height: 16px; fill: #fff; }
.sch-lesson-comment { margin-top: 12px; }
.sch-seat-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.sch-seat-table th {
  background: #5eb0d8;
  color: #fff;
  font-weight: 600;
  text-align: left;
  padding: 6px 8px;
  font-size: 13px;
}
.sch-seat-table td { padding: 6px 8px; border-bottom: 1px solid #eceff1; vertical-align: middle; }
.sch-seat-table th:nth-child(1),
.sch-seat-table td:nth-child(1),
.sch-seat-table th:nth-child(2),
.sch-seat-table td:nth-child(2) { width: 52px; text-align: center; }
.sch-seat-table th:nth-child(4),
.sch-seat-table td:nth-child(4) { width: 180px; }
.sch-seat-table th:nth-child(5),
.sch-seat-table td:nth-child(5) { width: 148px; text-align: center; }
.sch-mark {
  min-width: 42px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid #cfd8dc;
  border-radius: 2px;
  background: #fff;
  color: #607d8b;
  cursor: pointer;
}
.sch-mark.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.sch-seat-move { min-height: 26px; padding: 0 8px; font-size: 12px; margin-right: 6px; }
.sch-seat-table select { margin-top: 0; }
.sch-lesson-foot {
  background: #eceff1;
  padding: 12px 16px;
  display: flex;
  gap: 8px;
}
@media (max-width: 720px) {
  .sch-lesson-top,
  .sch-lesson-mid { grid-template-columns: 1fr; }
  .sch-lesson-flags select { margin-left: 0; }
}
.sch-head-link {
  margin-right: auto;
  background: none;
  border: 0;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.sch-card-when {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.sch-card-when input[type='date'] { height: 36px; border: 1px solid var(--line); padding: 0 8px; }
.sch-card-line,
.sch-card-flags,
.sch-whole {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 10px 14px;
  margin-bottom: 12px;
  align-items: end;
}
.sch-card-line label,
.sch-card-flags label,
.sch-whole label { display: block; color: var(--muted); font-size: 13px; }
.sch-card-line input,
.sch-card-line select,
.sch-card-flags select,
.sch-whole select {
  display: block;
  width: 100%;
  height: 36px;
  margin-top: 4px;
  border: 1px solid var(--line);
  padding: 0 10px;
}
.sch-card-flags .sch-check { margin-top: 0; }
.sch-whole {
  grid-template-columns: 1fr 1fr;
  background: #f5f9fc;
  padding: 10px;
}
.sch-whole .sch-staff { grid-column: 1 / -1; }
.sch-card-search { display: flex; gap: 8px; align-items: center; }
.sch-card-search .sch-search { flex: 1; margin-bottom: 0; }
.sch-card-search .btn { min-width: 110px; }
.sch-mark {
  min-width: 46px;
  height: 28px;
  border: 1px solid #cfd8dc;
  background: #fff;
  cursor: pointer;
}
.sch-mark.on { background: #e8f5e9; border-color: #43a047; color: #2e7d32; font-weight: 700; }
.sch-mark-yes {
  background: #43a047;
  border-color: #43a047;
  color: #fff;
  font-weight: 700;
}
.sch-mark-no {
  background: #eceff1;
  border-color: #cfd8dc;
  color: #90a4ae;
}
.sch-seat-client { text-align: left; }
.sch-seat-client .muted { margin-left: 6px; }
.sch-seat-client select { display: block; width: 100%; height: 28px; margin-top: 4px; }
.sch-seat-actions { white-space: nowrap; }
.sch-transfer { background: #43a047; min-height: 28px; padding: 0 10px; margin-right: 6px; }
.sch-transfer:hover { background: #2e7d32; }
.sch-actions-main { display: flex; gap: 10px; }
.sch-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin-bottom: 12px;
}
.sch-form-grid label { display: block; color: var(--muted); font-size: 13px; }
.sch-form-grid input,
.sch-form-grid select {
  display: block;
  width: 100%;
  height: 36px;
  margin-top: 4px;
  border: 1px solid var(--line);
  padding: 0 10px;
  color: var(--text);
}
.sch-check {
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  color: var(--text) !important;
}
.sch-check input { width: auto; height: auto; margin: 0; }
.sch-block-title { margin: 16px 0 8px; font-size: 15px; font-weight: 600; }
.sch-search {
  width: 100%;
  height: 36px;
  border: 1px solid var(--line);
  padding: 0 10px;
  margin-bottom: 8px;
}
.sch-hits { display: flex; flex-direction: column; gap: 2px; margin: 0 0 10px; }
.sch-hit {
  text-align: left;
  background: #e3f2fd;
  border: 0;
  padding: 6px 10px;
  cursor: pointer;
  color: var(--text);
}
.sch-hit:hover { background: #bbdefb; }
.sch-seats { margin-bottom: 12px; }
.sch-seats a { color: var(--blue); }
.sch-x {
  background: none;
  border: 0;
  color: var(--danger);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}
.sch-quick {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
  gap: 8px;
  align-items: end;
  margin: 8px 0 14px;
}
.sch-quick-title { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }
.sch-quick input {
  height: 36px;
  border: 1px solid var(--line);
  padding: 0 10px;
}
.sch-wait { list-style: none; margin: 0 0 12px; padding: 0; }
.sch-wait li { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sch-wait li span { flex: 1; }
.sch-actions { display: flex; gap: 10px; margin-top: 16px; justify-content: space-between; align-items: center; }
.sch-del { background: #e53935; }
.sch-del:hover { background: #c62828; }
.sch-cal { width: 100%; min-width: 0; table-layout: fixed; }
.sch-cal-wrap { position: relative; }
.sch-cal th, .sch-cal td { padding: 0; vertical-align: top; }
.sch-cal th { font-size: 13px; padding: 8px 6px; }
.sch-cal-count { font-size: 12px; font-weight: 400; color: var(--muted); }
.sch-cal-now td { box-shadow: inset 0 2px 0 #e53935; }
.sch-now-cal {
  left: 52px;
  right: 0;
  width: auto;
  height: 2px;
  bottom: auto;
}
.sch-cal-time {
  width: 52px;
  font-size: 12px;
  color: #111;
  padding: 4px 2px !important;
  vertical-align: middle;
}
.sch-cal-cell { height: auto; min-height: 36px; position: relative; vertical-align: top; }
.sch-cal-stack { min-height: 36px; vertical-align: top; }
.sch-cal .sch-plus {
  width: 100%;
  min-height: 36px;
  grid-row: auto;
  border-right: 0;
}
.sch-cal .sch-block {
  position: relative;
  inset: auto;
  grid-row: auto;
  display: block;
  width: 100%;
  margin: 1px 0;
  min-height: 32px;
  height: auto;
  white-space: normal;
}
.sch-cal-stack .sch-block {
  position: relative;
  left: auto;
  right: auto;
  height: auto;
  inset: auto;
  min-height: 32px;
}
.sch-month td {
  height: 108px;
  vertical-align: top;
  text-align: left;
  cursor: pointer;
  padding: 6px 8px 28px;
  position: relative;
}
.sch-month-empty { background: #fafafa; cursor: default; }
.sch-month-today { background: #e8f5e9; }
.sch-month-item {
  font-size: 11px;
  line-height: 1.25;
  color: #fff;
  border-radius: 2px;
  padding: 1px 4px;
  margin-bottom: 2px;
  overflow: visible;
  white-space: normal;
}
.sch-month-client { display: block; }
.sch-series {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0 4px;
}
.sch-series .sch-block-title { width: 100%; margin: 8px 0 0; }
.sch-series input, .sch-series select {
  height: 36px;
  border: 1px solid var(--line);
  padding: 0 10px;
  width: 100px;
}
.sch-seats .btn-ghost { min-height: 28px; padding: 0 8px; font-size: 12px; margin-right: 6px; }
.sch-toolbar input[type='date'] {
  height: 34px;
  border: 1px solid var(--line);
  padding: 0 8px;
}
.receipt-sheet {
  padding: 8px 4px 16px;
}
.receipt-sheet h2 {
  margin: 0 0 4px;
  font-size: 22px;
}
.receipt-meta {
  color: #90a4ae;
  margin: 0 0 14px;
}
.receipt-period {
  color: #90a4ae;
  font-size: 12px;
  margin-top: 2px;
}
.receipt-sheet p {
  margin: 0 0 8px;
}
.receipt-lines {
  margin: 12px 0 16px;
}
.receipt-totals {
  display: grid;
  gap: 8px;
  max-width: 420px;
  margin-bottom: 12px;
}
.receipt-totals div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.receipt-comment {
  color: #546e7a;
}
@media print {
  .chrome,
  .quick-nav,
  .no-print {
    display: none !important;
  }
  .page,
  .page-body,
  .sale-card {
    background: #fff;
    box-shadow: none;
    margin: 0;
    width: auto;
    max-width: none;
    padding: 0;
  }
}
.staff-center { margin: -6px 0 14px; color: #607d8b; font-size: 13px; }
.staff-center strong { color: #37474f; font-weight: 600; }
.staff-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.staff-search {
  width: 320px;
  max-width: 100%;
  height: 28px;
  border: 1px solid #cfd8dc;
  padding: 0 10px;
}
.staff-section { border: 1px solid #e0e0e0; margin: 0 0 14px; }
.staff-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: #eceff1;
  color: #607d8b;
  font-weight: 600;
}
.staff-name {
  display: block;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 0;
  border-top: 1px solid #eee;
  padding: 10px 12px;
  color: #4f9ad8;
  cursor: pointer;
}
.staff-name:hover { background: #f5f7f8; }
.staff-empty { margin: 0; padding: 10px 12px; color: #90a4ae; }
.staff-form { max-width: 640px; }
.staff-form .profile-field { width: 100%; max-width: 420px; }
.staff-password-row {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-top: 4px;
}
.staff-password-row input {
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  margin-top: 0 !important;
}
.staff-password-toggle {
  flex: 0 0 44px;
  width: 44px;
  height: 34px;
  border: 1px solid #2e77bc;
  border-radius: 4px;
  background: #3684ce;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}
.staff-password-toggle:hover {
  background: #286090;
  border-color: #204d74;
}
.staff-password-toggle.active {
  background: #1e5c93;
  border-color: #164670;
}
.staff-password-toggle:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.staff-password-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
}
.staff-form textarea {
  display: block;
  width: 100%;
  height: 72px;
  margin-top: 4px;
  border: 1px solid #cfd8dc;
  border-radius: 4px;
  padding: 8px 10px;
  color: var(--text);
}
.staff-select {
  display: block;
  width: 100%;
  max-width: 420px;
  height: 34px;
  margin: 0 0 12px;
  border: 1px solid #cfd8dc;
  border-radius: 4px;
  padding: 0 8px;
  background: #fff;
}
.staff-form select {
  display: block;
  width: 100%;
  height: 34px;
  margin-top: 4px;
  border: 1px solid #cfd8dc;
  border-radius: 4px;
  padding: 0 8px;
  background: #fff;
}
.staff-hint { color: #90a4ae; font-size: 12px; margin: -4px 0 12px; max-width: 560px; }
.staff-req { color: #e53935; }
.staff-days { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; }
.staff-times { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; color: #607d8b; }
.staff-times input { height: 34px; border: 1px solid #cfd8dc; border-radius: 4px; padding: 0 8px; }
.staff-actions { display: flex; gap: 8px; margin-top: 8px; }
.staff-services-block {
  margin: 18px 0 16px;
}
.staff-services-head {
  display: flex;
  align-items: center;
  gap: 170px;
  margin-bottom: 14px;
}
.staff-services-label {
  font-size: 18px;
  color: #455a64;
  font-weight: 400;
}
.staff-services-edit-btn {
  min-height: 30px;
  padding: 4px 12px;
  font-size: 13px;
  border-radius: 3px;
  background: #337ab7;
}
.staff-services-edit-btn:hover {
  background: #286090;
}
.staff-services-list {
  font-size: 14px;
  color: #455a64;
  line-height: 1.45;
}
.staff-services-modal {
  width: 900px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 6px solid #fff;
  border-radius: 2px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.staff-services-modal-head {
  background: #3dce6e;
  color: #fff;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 400;
}
.staff-services-modal-close {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.staff-services-modal-close:hover {
  color: #fff;
}
.staff-services-modal-body {
  padding: 28px 18px 40px;
  background: #fff;
}
.staff-services-modal-title {
  font-size: 18px;
  color: #546e7a;
  margin-bottom: 24px;
}
.staff-services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  padding-left: 22px;
}
.staff-service-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #546e7a;
  cursor: pointer;
  user-select: none;
}
.staff-service-item input[type='checkbox'] {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #0075ff;
  cursor: pointer;
}
.staff-services-modal-foot {
  background: #f5f7f8;
  border-top: 1px solid #eceff1;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.staff-services-save-btn {
  background: #3684ce;
  border-radius: 4px;
  min-height: 36px;
  padding: 0 16px;
  font-size: 14px;
}
.staff-services-cancel-btn {
  background: #5a6268;
  border-radius: 4px;
  min-height: 36px;
  padding: 0 16px;
  font-size: 14px;
}
@media (max-width: 640px) {
  .staff-services-head {
    gap: 24px;
  }
  .staff-services-grid {
    grid-template-columns: 1fr;
    padding-left: 0;
  }
}
.missed-card { width: 1100px; }
.missed-period { color: #90a4ae; font-size: 16px; font-weight: 400; }
.missed-filters { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.missed-filters input {
  height: 34px;
  width: 180px;
  border: 1px solid #cfd8dc;
  border-radius: 2px;
  padding: 0 10px;
  background: #fff;
}
.missed-current {
  display: block;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: none;
  color: #4f9ad8;
  cursor: pointer;
  font-size: 13px;
}
.missed-table th { text-align: center; }
.missed-table td { vertical-align: top; }
.missed-client {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #4f9ad8;
}
.missed-client img { width: 36px; height: 36px; object-fit: cover; background: #eceff1; }
.missed-comment { max-width: 280px; white-space: normal; }

.ce-card { width: 1100px; }
.ce-tabs { display: flex; gap: 4px; margin: 8px 0 0; }
.ce-tab {
  background: #eceff1;
  border: 1px solid #d7dde2;
  border-bottom: 0;
  color: #455a64;
  padding: 10px 18px;
  cursor: pointer;
  font-size: 14px;
}
.ce-tab.active { background: #f7f8f9; color: #263238; font-weight: 600; }
.ce-panel {
  background: #f7f8f9;
  border: 1px solid #e0e0e0;
  padding: 18px 16px 22px;
}
.ce-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 12px; }
.ce-input {
  width: 100%;
  height: 38px;
  border: 1px solid #d5dde3;
  border-radius: 4px;
  background: #fff;
  padding: 0 12px;
  color: #37474f;
  font: inherit;
}
.ce-area { height: 96px; padding: 8px 12px; resize: vertical; }
.ce-phone {
  display: flex;
  width: calc(50% - 9px);
  height: 38px;
  margin-bottom: 16px;
  border: 1px solid #d5dde3;
  border-radius: 4px;
  background: #fff;
  overflow: hidden;
}
.ce-phone span {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-right: 1px solid #d5dde3;
  color: #546e7a;
  background: #fafafa;
}
.ce-phone input { flex: 1; border: 0; padding: 0 10px; font: inherit; }
.ce-pay-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 4px 0 18px;
}
.ce-cash {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 180px;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid #cfd8dc;
  border-radius: 4px;
  background: #fff;
  color: #37474f;
  cursor: pointer;
}
.ce-cash.on { background: #2196f3; border-color: #1e88e5; color: #fff; }
.ce-panel h3 { margin: 16px 0 8px; font-size: 16px; font-weight: 500; }
.ce-times { display: flex; gap: 16px; max-width: 520px; margin-bottom: 8px; }
.ce-times .ce-input { max-width: 220px; }
.ce-split { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 0; margin-top: 12px; }
.ce-rooms { border-left: 1px solid #b6bbc1; padding-left: 16px; }
.ce-rooms-head { display: flex; align-items: center; gap: 12px; }
.ce-rooms-head h3 { margin-right: auto; }
.ce-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
  color: #37474f;
}
.ce-line > span:first-child, .ce-box {
  flex: 1;
  text-align: left;
}
.ce-box {
  display: block;
  border: 1px solid #d5dde3;
  border-radius: 4px;
  background: #fff;
  padding: 8px 12px;
  color: #37474f;
}
button.ce-room { width: 100%; cursor: pointer; font: inherit; }
.ce-line input { accent-color: #2196f3; }
.ce-field { display: flex; flex-direction: column; gap: 6px; max-width: 560px; margin-bottom: 14px; }
.ce-site { display: flex; align-items: center; gap: 12px; }
.ce-hint { margin: 4px 0 0; color: #90a4ae; font-size: 12px; max-width: 520px; }
.ce-modal {
  position: fixed;
  inset: 0;
  background: rgba(38, 50, 56, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 48px 16px;
  z-index: 30;
  overflow: auto;
}
.ce-dialog {
  width: 640px;
  background: #fff;
  border-radius: 4px;
  padding: 16px 18px 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.ce-dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 18px;
}
.ce-dialog-head button { border: 0; background: transparent; font-size: 22px; cursor: pointer; }
.ce-service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; margin: 8px 0 12px; }
.ce-grids { display: flex; gap: 16px; margin-bottom: 12px; }
.ce-grids label, .ce-service-grid label { display: flex; align-items: center; gap: 6px; }
.ce-save-room { margin-top: 14px; }
.pass-card { width: 1180px; }
.pass-actions { display: flex; gap: 10px; margin: 8px 0 14px; }
.pass-section { margin: 0 0 18px; }
.pass-section h2 { margin: 0 0 8px; color: #2196f3; font-size: 22px; font-weight: 500; }
.pass-empty { margin: 0 0 8px; color: #90a4ae; }
.pass-row {
  display: grid;
  grid-template-columns: minmax(180px, 2fr) 70px 120px 90px 60px 110px minmax(140px, 1.4fr) 28px auto;
  gap: 8px;
  align-items: end;
  padding: 8px 0;
  border-bottom: 1px solid #eceff1;
}
.pass-label { color: #90a4ae; font-size: 12px; margin-bottom: 2px; }
.pass-row a { color: #2196f3; }
.pass-copy { color: #2196f3; font-size: 18px; text-decoration: none; }
.pass-form { display: flex; flex-direction: column; gap: 10px; }
.pass-form .ce-input { max-width: 640px; }
.pass-block { margin-top: 8px; font-weight: 600; }
.pass-short { max-width: 90px; }

.auto-panel {
  background: #fff;
  padding: 26px 28px 34px;
  margin-top: 12px;
}
.auto-head {
  display: flex;
  align-items: flex-end;
  gap: 28px;
  margin-bottom: 24px;
}
.auto-head h1 {
  margin: 0 0 2px;
  font-size: 22px;
  font-weight: 400;
  color: #4b5b63;
}
.auto-tabs {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding-left: 8px;
  border-bottom: 1px solid #e0e4e8;
}
.auto-tab {
  background: #efefef;
  border: 1px solid #e0e4e8;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  color: #4b5b63;
  padding: 10px 18px;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  bottom: -1px;
}
.auto-tab.active {
  background: #fff;
  border-bottom: 1px solid #fff;
}
.auto-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 18px;
}
.auto-link {
  color: #4f9ad8;
  font-size: 14px;
  line-height: 1.5;
}
.auto-link:hover {
  text-decoration: underline;
}
.auto-tab-placeholder {
  padding: 24px 4px 8px;
}
.auto-params {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.auto-param-row {
  display: grid;
  grid-template-columns: 515px auto;
  align-items: center;
  column-gap: 16px;
}
.auto-param-row-reminder {
  align-items: flex-start;
}
.auto-param-label {
  color: #4b5b63;
  font-size: 14px;
  line-height: 1.45;
}
.auto-param-control {
  display: flex;
  align-items: center;
  gap: 24px;
}
.auto-num-input {
  width: 68px;
  height: 40px;
  border: 1px solid #cfd8dc;
  border-radius: 6px;
  padding: 0 10px;
  font-size: 14px;
  color: #37474f;
  background: #fff;
}
.auto-param-unit {
  color: #4b5b63;
  font-size: 14px;
}
.auto-archive-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #4b5b63;
  font-size: 14px;
  cursor: pointer;
}
.auto-archive-row input[type='checkbox'] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #1976d2;
}
.auto-param-radio-wrap {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.auto-radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 4px solid #555;
  background: #fff;
  padding: 0;
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
}
.auto-radio.checked {
  background: #4caf50;
}
.auto-radio-text {
  cursor: pointer;
}
.auto-tpl-list {
  margin-top: 22px;
  padding-left: 154px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auto-tpl-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.auto-tpl-row input[type='checkbox'] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #1976d2;
  cursor: pointer;
}
.auto-tpl-link {
  background: none;
  border: 0;
  padding: 0;
  color: #4f9ad8;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.auto-tpl-link:hover {
  text-decoration: underline;
}
.auto-tpl-modal {
  width: 720px;
  max-width: calc(100% - 32px);
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.auto-tpl-modal-body {
  padding: 20px 24px 24px;
}
.auto-tpl-modal-title {
  font-size: 18px;
  color: #4b5b63;
  margin-bottom: 10px;
}
.auto-tpl-textarea {
  width: 100%;
  min-height: 96px;
  border: 1px solid #cfd8dc;
  border-radius: 4px;
  padding: 10px 12px;
  font: inherit;
  color: #37474f;
  resize: vertical;
  margin-bottom: 18px;
}
.auto-tpl-vars-head {
  font-size: 18px;
  color: #4b5b63;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0e4e8;
  margin-bottom: 12px;
}
.auto-tpl-vars {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #546e7a;
  font-size: 13px;
  margin-bottom: 22px;
}
.auto-tpl-actions {
  display: flex;
  gap: 10px;
}


/* Period planning modal in client card */
.period-modal {
  background: #fff;
  width: 600px;
  max-width: 96vw;
  max-height: 94vh;
  overflow-y: auto;
  border-radius: 4px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
.period-modal-head {
  background: #62b85f;
  color: #fff;
  padding: 12px 18px;
  font-size: 18px;
}
.period-modal-body {
  padding: 18px 24px 20px;
}
.period-form-grid {
  display: grid;
  grid-template-columns: 205px 1fr;
  gap: 10px 14px;
  align-items: center;
}
.period-label {
  text-align: right;
  font-size: 13px;
  color: #37474f;
  line-height: 1.3;
}
.period-field {
  position: relative;
}
.period-field select,
.period-field input[type='number'],
.period-field input[type='text'] {
  width: 100%;
  height: 32px;
  border: 1px solid #cfd8dc;
  border-radius: 3px;
  padding: 0 8px;
  font-size: 13px;
  color: #37474f;
  background: #fff;
}
.period-field textarea {
  width: 100%;
  border: 1px solid #cfd8dc;
  border-radius: 3px;
  padding: 6px 8px;
  font-size: 13px;
  color: #37474f;
  background: #fff;
  resize: vertical;
}
.period-teachers-input {
  min-height: 32px;
  border: 1px solid #cfd8dc;
  border-radius: 3px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  cursor: pointer;
  background: #fff;
}
.period-teachers-empty {
  color: #78909c;
  font-size: 13px;
}
.period-teacher-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.period-teacher-chip {
  background: #66bb6a;
  color: #fff;
  font-size: 12px;
  border-radius: 3px;
  padding: 2px 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.period-teacher-chip button {
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  padding: 0;
  font-size: 13px;
  line-height: 1;
}
.period-teachers-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 30;
  background: #fff;
  border: 1px solid #cfd8dc;
  border-radius: 3px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  max-height: 180px;
  overflow-y: auto;
  padding: 4px 0;
}
.period-teacher-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  font-size: 13px;
  color: #37474f;
  cursor: pointer;
}
.period-teacher-option:hover {
  background: #f5f7f8;
}
.period-teachers-none {
  padding: 6px 10px;
  font-size: 12px;
  color: #78909c;
}
.period-flags-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 40px;
}
.period-split-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #37474f;
  cursor: pointer;
}
.period-weekdays-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.period-weekday-check {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  color: #37474f;
  cursor: pointer;
}
.period-time-input {
  width: 86px !important;
}
.period-dates-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.period-date-wrap {
  flex: 1;
  position: relative;
  min-width: 0;
}
.period-field .period-date-wrap > input.period-date-input {
  width: 100%;
  height: 32px;
  padding-right: 32px;
}
.period-date-wrap > .birth-cal {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.period-date-wrap > .birth-pop {
  z-index: 40;
}
.period-date-wrap.align-left > .birth-pop {
  left: 0;
  right: auto;
}
.period-field .birth-pop-head select {
  width: auto;
  flex: 1;
  height: 28px;
  padding: 0 4px;
  font-size: 12px;
}
.period-date-input {
  flex: 1;
}
.period-dates-sep {
  color: #546e7a;
}
.period-summary-box {
  margin-top: 14px;
  background: #dceef8;
  border: 1px solid #bce1f4;
  border-radius: 3px;
  padding: 12px 14px;
  color: #2b669a;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}
.period-conflicts-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.period-conflict-msg {
  color: #e53935;
  font-size: 13px;
  margin-bottom: 4px;
  text-align: center;
}
.period-conflict-controls {
  display: grid;
  grid-template-columns: 18px 1fr 1.2fr 132px 68px;
  gap: 6px;
  align-items: center;
}
.period-conflict-controls select,
.period-conflict-controls input[type='text'] {
  height: 30px;
  border: 1px solid #cfd8dc;
  border-radius: 3px;
  padding: 0 6px;
  font-size: 12px;
  color: #37474f;
  background: #fff;
}
.period-conflict-controls .period-conflict-date-wrap > input.period-date-input {
  height: 30px;
  padding-right: 28px;
}
.period-conflict-controls .period-conflict-date-wrap > .birth-cal {
  width: 28px;
  height: 30px;
}
.period-skip-warning {
  margin-top: 8px;
  color: #f39c12;
  font-size: 13px;
}
.period-submit-error {
  margin-top: 8px;
}
.period-modal-actions {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #eceff1;
  display: flex;
  align-items: center;
  gap: 6px;
}
.period-btn-plan {
  background: #5ca9dd;
  color: #fff;
}
.period-btn-cancel {
  background: #37474f;
  color: #fff;
}

.pass-info-modal {
  width: 780px;
  max-width: 95vw;
  max-height: 92vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  color: #546e7a;
}
.pass-info-head {
  background: #2bb673;
  color: #fff;
  padding: 11px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 500;
  border-radius: 4px 4px 0 0;
}
.pass-info-close {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.pass-info-close:hover {
  color: #fff;
}
.pass-info-body {
  padding: 20px 22px 18px;
}
.pass-info-grid {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: 26px;
  align-items: start;
}
.pass-info-heading {
  font-size: 17px;
  font-weight: 400;
  color: #5a6e7f;
  margin-bottom: 12px;
  line-height: 1.3;
}
.pass-info-table {
  display: flex;
  flex-direction: column;
}
.pass-info-row {
  display: grid;
  grid-template-columns: 205px 1fr;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-bottom: 1px solid #cfd8dc;
  font-size: 13.5px;
  color: #546e7a;
}
.pass-info-row.pass-info-row-noborder {
  border-bottom: 0;
}
.pass-info-row.pass-info-subrow {
  padding-top: 6px;
  padding-bottom: 10px;
}
.pass-info-label {
  font-weight: 700;
  color: #546e7a;
}
.pass-info-val {
  display: flex;
  align-items: center;
  color: #546e7a;
  line-height: 1.35;
}
.pass-info-val-between {
  justify-content: space-between;
  gap: 10px;
}
.pass-info-check {
  width: 14px;
  height: 14px;
  margin: 0;
  cursor: pointer;
}
.pass-info-inline-btn {
  background: #337ab7;
  color: #fff;
  font-size: 12.5px;
  padding: 5px 12px;
  border-radius: 3px;
  height: auto;
  line-height: 1.2;
}
.pass-info-input-num {
  width: 112px;
  height: 36px;
  border: 1px solid #cfd8dc;
  border-radius: 6px;
  padding: 0 10px;
  font-size: 13.5px;
  color: #455a64;
  background: #fff;
}
.pass-info-input-sum {
  width: 100%;
  max-width: 248px;
  height: 36px;
  border: 1px solid #cfd8dc;
  border-radius: 6px;
  padding: 0 10px;
  font-size: 13.5px;
  color: #455a64;
  background: #eef3f7;
}
.pass-info-input-date {
  height: 34px;
  border: 1px solid #cfd8dc;
  border-radius: 4px;
  padding: 0 8px;
  font-size: 13px;
  color: #455a64;
}
.pass-info-select {
  width: 100%;
  max-width: 248px;
  height: 36px;
  border: 1px solid #cfd8dc;
  border-radius: 6px;
  padding: 0 10px;
  font-size: 13.5px;
  color: #546e7a;
  background: #fff;
}
.pass-info-service-list {
  margin: 6px 0 0;
  padding-left: 18px;
  color: #546e7a;
  font-size: 14px;
  line-height: 1.55;
}
.pass-info-comment {
  width: 100%;
  min-height: 62px;
  margin-top: 16px;
  border: 1px solid #cfd8dc;
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 13.5px;
  color: #455a64;
  resize: vertical;
}
.pass-info-footer {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pass-info-footer-left {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pass-info-save,
.pass-info-block {
  background: #337ab7;
  color: #fff;
  padding: 7px 14px;
  font-size: 13.5px;
  border-radius: 3px;
}
.pass-info-cancel {
  background: #5a6268;
  color: #fff;
  padding: 7px 14px;
  font-size: 13.5px;
  border-radius: 3px;
}

.rep-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rep-top-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #d9e1e7;
  padding-bottom: 10px;
}
.rep-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rep-subtab {
  border: 1px solid #cfd8dc;
  background: #eceff1;
  color: #37474f;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}
.rep-subtab.active {
  background: #2196f3;
  border-color: #1e88e5;
  color: #fff;
  font-weight: 600;
}
.rep-btn-excel {
  background: #1ab167;
  border-color: #169c5a;
  color: #fff;
}
.rep-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  background: #f5f7f9;
  border: 1px solid #e0e6ed;
  border-radius: 4px;
  padding: 10px 14px;
}
.rep-filter-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: #37474f;
}
.rep-filter-field select,
.rep-filter-field input {
  height: 34px;
  border: 1px solid #cfd8dc;
  border-radius: 4px;
  padding: 0 10px;
  background: #fff;
  font: inherit;
}
.link-btn {
  background: none;
  border: 0;
  padding: 0;
  color: #1565c0;
  cursor: pointer;
  font: inherit;
  text-decoration: underline;
}
.rep-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}
.rep-presets button {
  border: 1px solid #cfd8dc;
  background: #fff;
  color: #1976d2;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 12.5px;
  cursor: pointer;
}
.rep-presets button:hover {
  background: #e3f2fd;
}
.rep-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.rep-kpi-card {
  background: #f8fafc;
  border: 1px solid #dfe6ed;
  border-radius: 6px;
  padding: 12px 14px;
}
.rep-kpi-label {
  font-size: 13px;
  color: #607d8b;
  margin-bottom: 4px;
}
.rep-kpi-value {
  font-size: 21px;
  font-weight: 700;
  color: #263238;
  margin-bottom: 4px;
}
.rep-kpi-sub {
  font-size: 12px;
  color: #546e7a;
}
.rep-val-pos {
  color: #1b8a50;
}
.rep-val-neg {
  color: #d32f2f;
}
.rep-charts-row {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
.rep-chart-card {
  background: #fff;
  border: 1px solid #dfe6ed;
  border-radius: 6px;
  padding: 12px 14px;
}
.rep-chart-title {
  font-size: 14px;
  font-weight: 600;
  color: #37474f;
  margin-bottom: 10px;
}
.rep-chart-empty {
  background: #fafbfc;
  border: 1px dashed #cfd8dc;
  border-radius: 6px;
  padding: 28px 16px;
  text-align: center;
  color: #78909c;
  font-size: 13.5px;
}
.rep-svg-chart {
  width: 100%;
  height: auto;
  display: block;
}
.rep-chart-legend {
  display: flex;
  gap: 18px;
  margin-top: 8px;
  font-size: 12.5px;
  color: #546e7a;
}
.rep-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rep-chart-legend i {
  width: 12px;
  height: 3px;
  display: inline-block;
  border-radius: 2px;
}
.rep-pie-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}
.rep-pie-svg {
  width: 150px;
  height: 150px;
  flex-shrink: 0;
}
.rep-pie-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  flex: 1;
}
.rep-pie-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rep-pie-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rep-pie-name {
  color: #37474f;
  flex: 1;
}
.rep-pie-val {
  color: #546e7a;
  font-weight: 600;
}
.rep-subtitle {
  margin: 16px 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: #263238;
}
.rep-table th {
  background: #eceff1;
  font-weight: 600;
}
.rep-total-row td {
  font-weight: 700;
  background: #f1f5f9;
  border-top: 2px solid #cfd8dc;
}
.rep-badge-in,
.rep-badge-out {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
}
.rep-badge-in {
  background: #e8f5e9;
  color: #2e7d32;
}
.rep-badge-out {
  background: #ffebee;
  color: #c62828;
}

.archive-modal {
  background: #fff;
  width: 780px;
  max-width: 95vw;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  color: #546e7a;
}
.archive-modal-head {
  background: #4caf7b;
  color: #fff;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 500;
}
.archive-modal-close {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.archive-modal-close:hover {
  color: #fff;
}
.archive-modal-body {
  padding: 22px 20px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.archive-modal-row {
  display: grid;
  grid-template-columns: 245px 1fr;
  gap: 16px;
  align-items: start;
  font-size: 14px;
  color: #5a6e7f;
}
.archive-modal-row > span {
  padding-top: 8px;
  line-height: 1.3;
}
.archive-modal-row textarea {
  width: 100%;
  min-height: 78px;
  border: 1px solid #d5dfe5;
  border-radius: 6px;
  padding: 8px 12px;
  font: inherit;
  color: #37474f;
  resize: vertical;
}
.archive-modal-row textarea:focus {
  outline: none;
  border-color: #2196f3;
}
.archive-select-wrap {
  position: relative;
  width: 100%;
}
.archive-select-wrap select {
  width: 100%;
  height: 44px;
  border: 1px solid #d5dfe5;
  border-radius: 8px;
  padding: 0 42px 0 12px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: #546e7a;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.archive-select-wrap select:focus {
  outline: none;
  border-color: #03a9f4;
}
.archive-select-arrow {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background: #337ab7;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
}
.archive-modal-footer {
  background: #f5f5f5;
  border-top: 1px solid #e5e5e5;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.archive-btn-save {
  background: #337ab7;
  color: #fff;
  height: 36px;
  padding: 0 16px;
  border-radius: 4px;
  font-size: 14px;
}
.archive-btn-save:hover {
  background: #286090;
}
.archive-btn-cancel {
  background: #5a6268;
  color: #fff;
  height: 36px;
  padding: 0 16px;
  border-radius: 4px;
  font-size: 14px;
}
.archive-btn-cancel:hover {
  background: #484e53;
}