:root {
  color-scheme: light;
  --bg: #f5f4f2;
  --panel: #ffffff;
  --panel-soft: #faf9f7;
  --line: #e0dfdb;
  --line-strong: #c9c7c2;
  --text: #111111;
  --muted: #686865;
  --font-ui: Montserrat, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-accent: "Montserrat Alternates", var(--font-ui);
  --font-data: var(--font-ui);
  --brand: #e30613;
  --brand-dark: #b5000c;
  --brand-soft: #fff0f1;
  --brand-ink: #0d0d0d;
  --brand-gray: #bcbcbb;
  --green: #2f9b69;
  --amber: #d9901f;
  --red: #e30613;
  --brand-readable: var(--brand-dark);
  --success-readable: #236f4c;
  --warning-readable: #704d00;
  --danger-readable: var(--brand-dark);
  --return-readable: #56358b;
  --call-outgoing-readable: #24697d;
  --ink-soft: #f0efec;
  --accent: var(--brand);
  --accent-dark: var(--brand-dark);
  --ink: var(--text);
  --soft: var(--panel-soft);
  --page: var(--bg);
  --surface: var(--panel);
  --surface-raised: var(--panel);
  --field: var(--panel);
  --field-border: var(--line-strong);
  --header: var(--panel);
  --meta: var(--muted);
  --separator: var(--line-strong);
  --upcoming: var(--panel);
  --upcoming-muted: var(--muted);
  --warning-bg: #fff8e7;
  --warning-text: #704d00;
  --warning-border: #e3a008;
  --state-neutral-bg: color-mix(in srgb, var(--panel-soft) 86%, var(--panel));
  --state-info-bg: color-mix(in srgb, var(--brand) 8%, var(--panel));
  --state-success-bg: color-mix(in srgb, var(--success) 10%, var(--panel));
  --state-warning-bg: color-mix(in srgb, var(--warning) 13%, var(--panel));
  --state-danger-bg: color-mix(in srgb, var(--danger) 9%, var(--panel));
  --state-info-border: color-mix(in srgb, var(--brand) 26%, var(--line));
  --state-success-border: color-mix(in srgb, var(--success) 34%, var(--line));
  --state-warning-border: color-mix(in srgb, var(--warning) 42%, var(--line));
  --state-danger-border: color-mix(in srgb, var(--danger) 34%, var(--line));
  --success: var(--green);
  --warning: var(--amber);
  --danger: var(--red);
  --return: #6e4aa8;
  --call-incoming: var(--green);
  --call-outgoing: #4fb4d2;
  --audio-client: #8296ff;
  --audio-operator: #a7b0b8;
  --audio-extra-1: #d9901f;
  --audio-extra-2: #7c6ee6;
  --audio-extra-3: #169f8f;
  --audio-extra-4: #c55f3a;
  --audio-extra-5: #c05aa3;
  --audio-extra-6: #6a9b3e;
  --shadow: 0 8px 18px rgba(17, 17, 17, 0.08);
  --shadow-control: 0 3px 8px color-mix(in srgb, var(--ink) 8%, transparent);
  --shadow-control-active: 0 3px 8px color-mix(in srgb, var(--brand) 20%, transparent);
  --shadow-menu: 0 10px 22px color-mix(in srgb, var(--ink) 16%, transparent);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
  --focus-ring-strong: 0 0 0 3px color-mix(in srgb, var(--brand) 24%, transparent);
  --motion-press: 110ms;
  --motion-fast: 140ms;
  --motion-base: 160ms;
  --motion-panel: 180ms;
  --motion-entry: 220ms;
  --motion-stagger-step: 34ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-emphasized-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-emphasized-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --scroll-rail-padding: 12px;
  --z-base: 0;
  --z-raised: 1;
  --z-active: 2;
  --z-sticky-table: 3;
  --z-sticky-corner: 4;
  --z-floating-action: 80;
  --z-dropdown: 90;
  --z-header: 120;
  --z-popover: 150;
  --z-tooltip: 220;
  --z-confirm-layer: 260;
  --z-confirm-popover: 270;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--page);
  font-kerning: normal;
  font-synthesis: none;
}

:root[data-theme="dark"],
body[data-theme="dark"] {
  color-scheme: dark;
  --bg: #11171b;
  --panel: #182229;
  --panel-soft: #1f2b33;
  --line: #2d3c45;
  --line-strong: #40525d;
  --text: #e7edf1;
  --muted: #9aabb4;
  --brand: #4fb4d2;
  --brand-dark: #8bd3e8;
  --brand-soft: #16313b;
  --brand-ink: #071116;
  --brand-gray: #9aabb4;
  --green: #53c58e;
  --amber: #e2a73f;
  --red: #f06b6b;
  --brand-readable: var(--brand-dark);
  --success-readable: color-mix(in srgb, var(--success) 42%, var(--ink));
  --warning-readable: color-mix(in srgb, var(--warning) 45%, var(--ink));
  --danger-readable: color-mix(in srgb, var(--danger) 42%, var(--ink));
  --return-readable: color-mix(in srgb, var(--return) 46%, var(--ink));
  --call-outgoing-readable: color-mix(in srgb, var(--call-outgoing) 44%, var(--ink));
  --ink-soft: #23313a;
  --warning-bg: #2c2414;
  --warning-text: #f1cb7b;
  --warning-border: #d49726;
  --success: var(--green);
  --warning: var(--amber);
  --danger: var(--red);
  --return: #b59ae8;
  --call-incoming: var(--green);
  --call-outgoing: #7acfe8;
  --audio-client: #91a2ff;
  --audio-operator: #7e8f9a;
  --audio-extra-1: #f0b24a;
  --audio-extra-2: #a89bff;
  --audio-extra-3: #42d4c4;
  --audio-extra-4: #ef8c67;
  --audio-extra-5: #eb83c8;
  --audio-extra-6: #a6d96e;
  --shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  padding-right: var(--safe-right);
  padding-left: var(--safe-left);
  color: var(--ink);
  background: var(--page);
  transition:
    color 160ms ease,
    background-color 160ms ease;
}

@keyframes ui-surface-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ui-popover-in {
  from {
    opacity: 0;
    transform: translateY(-5px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ui-list-item-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ui-message-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ui-dialog-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.965);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ui-backdrop-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes ui-attention {
  0% {
    transform: scale(0.992);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes ui-bar-fill {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.motion-enter {
  animation: ui-surface-in var(--motion-entry) var(--ease-emphasized-out) both;
}

.motion-item {
  animation: ui-list-item-in var(--motion-entry) var(--ease-emphasized-out) both;
  animation-delay: calc(var(--motion-index, 0) * var(--motion-stagger-step));
  will-change: opacity, transform;
}

.telegram-bubble.motion-item {
  animation-name: ui-message-in;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.app-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 70px;
  padding: 12px max(24px, calc((100vw - 1320px) / 2));
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--panel) 70%, transparent);
}

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

.brand {
  order: 1;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  width: 152px;
  min-height: 48px;
}

.brand img {
  display: block;
  width: 152px;
  max-width: 100%;
  max-height: 48px;
  height: auto;
  object-fit: contain;
}

.brand:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
  border-radius: 6px;
}

.app-tabs {
  order: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
}

.app-tabs,
.admin-tabs,
.ai-soldly-tabs,
.monitor-analytics-summary,
.manager-rating-summary,
.call-stats-heatmap,
.call-stats-table-wrap,
.manager-rating-table {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--scroll-rail-padding);
}

.app-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.app-tabs a[hidden] {
  display: none;
}

.app-tabs a:hover,
.app-tabs a.active {
  background: var(--brand);
  color: #ffffff;
}

.app-tabs a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

body[data-theme="dark"] .app-tabs a:hover,
body[data-theme="dark"] .app-tabs a.active {
  color: var(--brand-ink);
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}

@media (min-width: 1321px) {
  .header-actions {
    align-self: flex-end;
    flex-basis: 600px;
  }
}

.phone-search {
  display: flex;
  align-items: center;
  flex: 1 1 280px;
  width: min(500px, 42vw);
  max-width: 500px;
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--field-border);
  background: var(--field);
  border-radius: 7px;
  overflow: hidden;
}

.phone-search:focus-within {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.search-icon {
  display: grid;
  width: 44px;
  align-self: stretch;
  place-items: center;
  color: var(--muted);
}

.search-icon svg {
  width: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.phone-search input {
  min-width: 0;
  flex: 1;
  height: 44px;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 13px;
  font-weight: 800;
}

.phone-search input::placeholder,
.note-form textarea::placeholder {
  color: var(--muted);
  opacity: 0.85;
}

.phone-search button,
.note-form button,
.primary-button,
.secondary-button {
  min-height: 44px;
  border: 1px solid var(--brand);
  border-radius: 7px;
  background: var(--brand);
  color: #ffffff;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 900;
  box-shadow: none;
  transition:
    border-color var(--motion-base) var(--ease-standard),
    background var(--motion-base) var(--ease-standard),
    color var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard),
    filter var(--motion-base) var(--ease-standard),
    transform var(--motion-press) var(--ease-emphasized-out);
}

.phone-search button {
  flex: 0 0 auto;
  align-self: stretch;
  margin: -1px;
  border-radius: 0 7px 7px 0;
  white-space: nowrap;
}

.phone-search button:hover,
.note-form button:hover,
.primary-button:hover,
.secondary-button:hover {
  border-color: var(--brand-dark);
  background: var(--brand-dark);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 24%, transparent);
}

.phone-search button:focus-visible,
.note-form button:focus-visible,
.primary-button:focus-visible,
.secondary-button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.secondary-button {
  background: var(--panel-soft);
  color: var(--accent);
  box-shadow: none;
}

.secondary-button:hover {
  color: #ffffff;
}

:where(
  .secondary-action,
  .custom-select-button,
  .custom-select-option,
  .profile-menu-item,
  .theme-toggle,
  .messaging-tab,
  .telegram-account-trigger,
  .telegram-account-option,
  .telegram-reply-button,
  .telegram-reply-preview,
  .telegram-media-photo,
  .telegram-media-file,
  .modal-close,
  .admin-icon-button,
  .monitor-page-button,
  .manager-rating-person-button,
  .ai-gradient-button,
  .ai-white-button,
  .ai-quiet-button,
  .ai-icon-button-soft,
  .ai-type-open,
  .ai-metric-open,
  .ai-side-accordion,
  .ai-side-toggle,
  .ai-modal-type-button,
  .ai-color-choice,
  .ai-dialog-head button,
  .ai-word-input button,
  .audio-play-button,
  .audio-speed,
  .transcript-play
) {
  transition:
    border-color var(--motion-base) var(--ease-standard),
    background var(--motion-base) var(--ease-standard),
    background-color var(--motion-base) var(--ease-standard),
    color var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard),
    filter var(--motion-base) var(--ease-standard),
    opacity var(--motion-base) var(--ease-standard),
    transform var(--motion-press) var(--ease-emphasized-out);
}

@media (hover: hover) and (pointer: fine) {
  :where(
    .phone-search button,
    .note-form button,
    .primary-button,
    .secondary-button,
    .secondary-action,
    .custom-select-button,
    .theme-toggle,
    .messaging-tab,
    .telegram-account-trigger,
    .telegram-account-option,
    .telegram-reply-button,
    .telegram-reply-preview,
    .telegram-media-file,
    .modal-close,
    .admin-icon-button,
    .monitor-page-button,
    .manager-rating-person-button,
    .ai-gradient-button,
    .ai-white-button,
    .ai-quiet-button,
    .ai-icon-button-soft,
    .ai-type-open,
    .ai-metric-open,
    .ai-side-accordion,
    .ai-side-toggle,
    .ai-modal-type-button,
    .ai-color-choice,
    .ai-dialog-head button,
    .ai-word-input button,
    .audio-speed,
    .transcript-play
  ):not(:disabled):hover {
    transform: translateY(-1px);
  }
}

:where(
  .phone-search button,
  .note-form button,
  .primary-button,
  .secondary-button,
  .secondary-action,
  .custom-select-button,
  .profile-menu-trigger,
  .profile-menu-item,
  .theme-toggle,
  .messaging-tab,
  .telegram-account-trigger,
  .telegram-account-option,
  .telegram-reply-button,
  .telegram-reply-preview,
  .telegram-media-photo,
  .telegram-media-file,
  .modal-close,
  .order-link,
  .admin-icon-button,
  .note-action-button,
  .booking-action-confirm-button,
  .monitor-page-button,
  .manager-rating-person-button,
  .ai-gradient-button,
  .ai-white-button,
  .ai-quiet-button,
  .ai-icon-button-soft,
  .ai-type-open,
  .ai-metric-open,
  .ai-side-accordion,
  .ai-side-toggle,
  .ai-modal-type-button,
  .ai-color-choice,
  .ai-dialog-head button,
  .ai-word-input button,
  .audio-play-button,
  .audio-speed,
  .transcript-play
):not(:disabled):active {
  transform: scale(0.97);
  transition-duration: var(--motion-press);
}

button:disabled,
input:disabled,
textarea:disabled,
select:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.native-select-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.custom-select {
  position: relative;
  min-width: 0;
  color: var(--ink);
}

.custom-select-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--field-border);
  border-radius: 7px;
  background: var(--field);
  color: var(--ink);
  padding: 0 34px 0 12px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  text-align: left;
  white-space: nowrap;
  box-shadow: none;
  transition:
    border-color var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard),
    background var(--motion-base) var(--ease-standard),
    transform var(--motion-press) var(--ease-emphasized-out);
}

.custom-select-button::after {
  content: "";
  position: absolute;
  right: 12px;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.78;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--motion-base) var(--ease-standard);
}

.custom-select.is-open .custom-select-button::after {
  transform: translateY(2px) rotate(225deg);
}

.custom-select-button:hover,
.custom-select-button:focus-visible,
.custom-select.is-open .custom-select-button {
  border-color: var(--accent);
  outline: 0;
  box-shadow: var(--focus-ring);
}

.custom-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-select-menu {
  position: absolute;
  z-index: var(--z-dropdown);
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  width: max-content;
  min-width: max(100%, 190px);
  max-width: min(520px, calc(100vw - 32px));
  max-height: min(280px, 52vh);
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--panel);
  padding: 6px;
  box-shadow: var(--shadow-menu);
  transform-origin: top left;
  animation: ui-popover-in var(--motion-panel) var(--ease-emphasized-out) both;
}

.monitor-period .custom-select-menu {
  left: auto;
  right: 0;
  transform-origin: top right;
}

.custom-select-menu[hidden] {
  display: none;
}

.custom-select-option {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  padding: 8px 10px 8px 30px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  text-align: left;
  white-space: nowrap;
}

.custom-select-option::before {
  content: "";
  position: absolute;
  left: 10px;
  width: 10px;
  height: 6px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0;
  transform: translateY(-2px) rotate(-45deg);
  transition:
    opacity var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-emphasized-out);
}

.custom-select-option.is-active::before {
  opacity: 1;
}

.custom-select-option:hover::before,
.custom-select-option:focus-visible::before {
  opacity: 0.46;
  transform: translateY(-2px) rotate(-45deg) scale(0.9);
}

.custom-select-option:hover,
.custom-select-option:focus-visible,
.custom-select-option.is-active {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-soft));
  color: var(--accent);
  outline: 0;
}

.secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--ink);
  padding: 0 14px;
  font-size: 12px;
  font-weight: 900;
  box-shadow: none;
  transition:
    border-color var(--motion-base) var(--ease-standard),
    background var(--motion-base) var(--ease-standard),
    color var(--motion-base) var(--ease-standard),
    opacity var(--motion-base) var(--ease-standard),
    transform var(--motion-press) var(--ease-emphasized-out);
}

.secondary-action:hover,
.secondary-action:focus-visible {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
  outline: 0;
}

.secondary-action:disabled {
  cursor: default;
  opacity: 0.55;
}

.secondary-action:disabled:hover {
  border-color: var(--line-strong);
  background: var(--panel-soft);
  color: var(--ink);
}

.auth-user {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
}

.auth-user-name {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  max-width: 140px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-user-name:empty {
  display: none;
}

.logout-button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 7px;
  font-size: 13px;
  white-space: nowrap;
}

.profile-menu {
  position: relative;
  z-index: var(--z-dropdown);
  flex: 0 0 auto;
}

.profile-menu-trigger {
  position: relative;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--ink);
  padding: 0;
  box-shadow: var(--shadow-control);
  transition:
    border-color var(--motion-base) var(--ease-standard),
    background var(--motion-base) var(--ease-standard),
    color var(--motion-base) var(--ease-standard),
    transform var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard);
}

.profile-menu-trigger:hover,
.profile-menu-trigger:focus-visible,
.profile-menu.is-open .profile-menu-trigger {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow-control-active);
}

.profile-menu-trigger:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 24%, transparent);
  outline-offset: 2px;
}

.profile-menu-trigger svg,
.profile-menu-item svg {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.profile-menu-trigger svg {
  width: 21px;
  height: 21px;
}

.profile-menu-popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: var(--z-popover);
  display: grid;
  width: 270px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 8px;
  box-shadow: var(--shadow-menu);
  transform-origin: top right;
  animation: ui-popover-in var(--motion-panel) var(--ease-emphasized-out) both;
}

.profile-menu-popover[hidden] {
  display: none;
}

@keyframes profile-menu-in {
  from {
    opacity: 0;
    transform: translateY(-5px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.profile-menu-summary {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 8px;
}

.profile-menu-avatar {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-soft));
  color: var(--accent);
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-menu-identity {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.profile-menu-identity strong,
.profile-menu-identity small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-menu-identity strong {
  color: var(--ink);
  font-size: 14px;
}

.profile-menu-identity small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.profile-menu-divider {
  height: 1px;
  margin: 5px 4px;
  background: var(--line);
}

.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  text-align: left;
  text-decoration: none;
  transition:
    background var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    transform var(--motion-press) var(--ease-emphasized-out);
}

.profile-menu-item:hover,
.profile-menu-item:focus-visible,
.profile-menu-item.active {
  background: var(--panel-soft);
  color: var(--accent);
  outline: 0;
}

.profile-menu-item.is-danger {
  color: var(--danger);
}

.profile-menu-item.is-danger:hover,
.profile-menu-item.is-danger:focus-visible {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.profile-menu-item svg {
  flex: 0 0 19px;
  width: 19px;
  height: 19px;
}

.detail-reanalyze-button {
  min-height: 44px;
  border-radius: 8px;
  white-space: nowrap;
}

body[data-theme="dark"] .primary-button {
  color: var(--brand-ink);
  box-shadow: var(--shadow-control-active);
}

body[data-theme="dark"] .ai-gradient-button,
body[data-theme="dark"] .ai-dialog-submit,
body[data-theme="dark"] .ai-options-box header button,
body[data-theme="dark"] .ai-insights-button {
  color: var(--brand-ink);
}

.theme-toggle {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  justify-content: center;
  gap: 2px;
  width: 78px;
  min-height: 44px;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  transition:
    border-color var(--motion-base) var(--ease-standard),
    background var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard);
}

.theme-toggle::before {
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: var(--z-base);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: var(--shadow-control-active);
  content: "";
  transform: translateX(0);
  transition:
    transform 320ms var(--ease-out),
    background-color 320ms var(--ease-standard),
    box-shadow 320ms var(--ease-standard);
}

body[data-theme="dark"] .theme-toggle::before {
  box-shadow: var(--shadow-control-active);
  transform: translateX(34px);
}

.theme-toggle:hover {
  border-color: var(--brand);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.theme-toggle-option {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  color: var(--muted);
  transition:
    color 240ms var(--ease-standard),
    transform 320ms var(--ease-out);
}

.theme-toggle-option svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

body:not([data-theme="dark"]) .theme-toggle-option.is-sun,
body[data-theme="dark"] .theme-toggle-option.is-moon {
  color: #ffffff;
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle::before,
  .theme-toggle-option {
    transition-duration: 0.01ms;
  }
}

.login-body {
  min-width: 320px;
}

.login-page {
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  place-items: center;
  padding: max(24px, var(--safe-top)) 24px max(24px, var(--safe-bottom));
  background: var(--page);
}

body[data-theme="dark"] .login-page {
  background: var(--page);
}

.login-card {
  position: relative;
  overflow: hidden;
  width: min(430px, 100%);
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 3px 8px rgba(31, 48, 58, 0.08);
  animation: ui-surface-in 260ms var(--ease-emphasized-out) both;
}

.login-card > * {
  position: relative;
  z-index: var(--z-raised);
}

.login-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.login-brand {
  display: inline-flex;
  width: 156px;
  max-width: 58vw;
  min-height: 48px;
}

.login-brand img {
  display: block;
  width: 156px;
  max-width: 100%;
  max-height: 48px;
  object-fit: contain;
}

.login-theme-toggle {
  flex: 0 0 auto;
}

.login-card h1 {
  margin: 4px 0 8px;
  color: var(--ink);
  font-size: 28px;
  line-height: 1.1;
}

.login-muted,
.form-message {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.55;
}

.login-form {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}

.login-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.login-form input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--field-border);
  border-radius: 7px;
  padding: 9px 11px;
  background: var(--field);
  color: var(--ink);
  outline: 0;
}

.login-form input:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

body[data-theme="dark"] .login-form input:focus {
  box-shadow: var(--focus-ring);
}

.login-form .primary-button {
  min-height: 44px;
  justify-content: center;
}

.form-message {
  min-height: 20px;
  color: var(--danger);
}

.page-shell {
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
  padding: 28px 0 64px;
}

.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.empty-state {
  min-height: clamp(220px, 34vh, 320px);
  display: grid;
  grid-template-columns: auto minmax(0, 430px);
  gap: 6px 18px;
  align-content: center;
  justify-content: center;
  padding: 30px 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 5%, transparent), transparent 46%),
    var(--panel);
  text-align: left;
  color: var(--muted);
}

.empty-state h1 {
  margin: 0;
  color: var(--ink);
  font-family:
    "Montserrat Alternates", Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 24px;
  line-height: 1.18;
  text-wrap: balance;
}

.empty-state p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  text-wrap: pretty;
}

.empty-icon {
  display: grid;
  grid-row: 1 / 3;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 8px;
  background: var(--brand-soft);
  color: var(--accent);
}

.empty-icon svg {
  width: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.loading-state {
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 850;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.mini-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: -2px;
}

.inline-loading,
.async-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.no-data.async-loading {
  display: flex;
  justify-content: center;
}

.trip-info .inline-loading {
  color: var(--muted);
  font-weight: 850;
}

.admin-page {
  display: grid;
  gap: 12px;
}

.admin-hero,
.admin-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 3px 8px rgba(31, 48, 58, 0.06);
}

.admin-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 78px;
  padding: 14px 18px;
}

.admin-hero h1,
.admin-hero p {
  margin: 0;
}

.admin-hero h1 {
  font-family:
    "Montserrat Alternates", Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 24px;
  line-height: 1.14;
}

.admin-hero p:not(.section-label) {
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 750;
}

.admin-add-user {
  flex: 0 0 auto;
  min-height: 44px;
  white-space: nowrap;
}

.admin-tabs {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
  padding: 3px;
}

.admin-tabs button {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  padding: 0 13px;
  font-size: 12px;
  font-weight: 900;
}

.admin-tabs button:hover,
.admin-tabs button:focus-visible {
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  color: var(--ink);
  outline: 0;
}

.admin-tabs button:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.admin-tabs button.active {
  background: var(--brand);
  color: #ffffff;
}

body[data-theme="dark"] .admin-tabs button.active {
  color: var(--brand-ink);
}

.admin-panel {
  display: grid;
  gap: 12px;
  padding: 16px 18px 18px;
}

.admin-users-list {
  display: grid;
  gap: 8px;
}

.admin-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-panel-actions button {
  min-height: 44px;
  padding: 0 14px;
  white-space: nowrap;
}

.admin-numbers-list {
  display: grid;
  gap: 8px;
}

.admin-user-card {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(180px, 1fr) 118px auto;
  align-items: center;
  gap: 8px 12px;
  min-height: 64px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 10px 12px;
}

.admin-number-card {
  display: grid;
  grid-template-columns: 52px minmax(150px, 0.9fr) 104px minmax(220px, 1.2fr);
  align-items: center;
  gap: 8px 12px;
  min-height: 68px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 10px 12px;
}

.admin-number-card.is-disabled {
  background: color-mix(in srgb, var(--panel-soft) 72%, var(--danger) 8%);
}

.admin-number-switch {
  position: relative;
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}

.admin-number-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.admin-number-switch span {
  position: relative;
  width: 44px;
  height: 26px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel);
  transition:
    background var(--motion-base) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard);
}

.admin-number-switch span::after {
  position: absolute;
  top: 50%;
  left: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--muted);
  content: "";
  transform: translateY(-50%);
  transition:
    background var(--motion-base) var(--ease-standard),
    transform var(--motion-base) var(--ease-standard);
}

.admin-number-switch input:checked + span {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
  background: color-mix(in srgb, var(--brand) 18%, var(--panel));
}

.admin-number-switch input:checked + span::after {
  background: var(--brand);
  transform: translate(18px, -50%);
}

.admin-number-switch input:focus-visible + span {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.admin-user-main,
.admin-user-meta,
.admin-number-main,
.admin-number-meta,
.admin-number-extra {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.admin-user-main strong,
.admin-user-meta strong,
.admin-number-main strong,
.admin-number-meta strong,
.admin-number-extra strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-user-main span,
.admin-user-meta span,
.admin-number-main span,
.admin-number-meta span,
.admin-number-extra span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-number-card.is-disabled .admin-number-extra strong {
  color: var(--danger);
}

.admin-role-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  color: var(--brand-readable);
  padding: 0 11px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.admin-role-pill.is-admin {
  border-color: color-mix(in srgb, var(--brand) 32%, var(--line));
  background: color-mix(in srgb, var(--brand) 10%, var(--panel));
  color: var(--brand-readable);
}

.admin-role-pill.is-department-head {
  border-color: var(--state-info-border);
  background: var(--state-info-bg);
  color: var(--ink);
}

.admin-user-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.admin-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  padding: 0;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.admin-icon-button .ai-svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.4;
}

.admin-icon-button:hover,
.admin-icon-button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: 0;
}

.admin-icon-button.is-danger {
  color: var(--danger);
}

.admin-icon-button.is-danger:hover,
.admin-icon-button.is-danger:focus-visible {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, var(--panel));
}

.admin-empty {
  margin: 0;
  border: 1px solid var(--state-info-border);
  border-radius: 9px;
  background: var(--state-info-bg);
  color: var(--muted);
  padding: 18px;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.45;
  text-align: center;
}

.admin-feedback-list {
  display: grid;
  gap: 8px;
}

.admin-feedback-card {
  display: grid;
  grid-template-columns: minmax(240px, 1.35fr) 82px minmax(190px, 0.95fr) minmax(150px, 0.72fr) auto;
  align-items: center;
  gap: 8px 12px;
  min-height: 76px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 10px 12px;
}

.admin-feedback-main,
.admin-feedback-call,
.admin-feedback-meta,
.admin-feedback-score {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.admin-feedback-main strong,
.admin-feedback-call strong,
.admin-feedback-meta strong,
.admin-feedback-score strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-feedback-main span,
.admin-feedback-call span,
.admin-feedback-meta span,
.admin-feedback-score span {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-feedback-main p {
  display: -webkit-box;
  overflow: hidden;
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.admin-feedback-score strong {
  justify-self: start;
  min-width: 52px;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  color: var(--brand-readable);
  padding: 7px 9px;
  text-align: center;
}

.admin-feedback-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
}

.admin-feedback-prompt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--brand-readable) 30%, var(--line-strong));
  border-radius: 7px;
  background: color-mix(in srgb, var(--brand-readable) 9%, var(--panel));
  color: var(--brand-readable);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  transition:
    border-color var(--motion-base) var(--ease-standard),
    background var(--motion-base) var(--ease-standard),
    color var(--motion-base) var(--ease-standard),
    opacity var(--motion-base) var(--ease-standard),
    transform var(--motion-press) var(--ease-emphasized-out);
}

.admin-feedback-prompt .ai-svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.6;
}

.admin-feedback-prompt:hover,
.admin-feedback-prompt:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
  color: var(--accent);
  outline: 0;
  transform: translateY(-1px);
}

.admin-feedback-prompt:disabled {
  cursor: default;
  opacity: 0.76;
  transform: none;
}

.admin-feedback-prompt.is-applied {
  border-color: color-mix(in srgb, var(--success) 36%, var(--line));
  background: color-mix(in srgb, var(--success) 10%, var(--panel));
  color: var(--success);
}

.admin-feedback-link,
.admin-feedback-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--panel);
  color: var(--muted);
  transition:
    border-color var(--motion-base) var(--ease-standard),
    background var(--motion-base) var(--ease-standard),
    color var(--motion-base) var(--ease-standard),
    transform var(--motion-press) var(--ease-emphasized-out);
}

.admin-feedback-delete {
  color: var(--danger);
}

.admin-feedback-link .ai-svg,
.admin-feedback-delete .ai-svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.5;
}

.admin-feedback-link:hover,
.admin-feedback-link:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  outline: 0;
  transform: translateY(-1px);
}

.admin-feedback-delete:hover,
.admin-feedback-delete:focus-visible {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 9%, var(--panel));
  color: var(--danger);
  outline: 0;
  transform: translateY(-1px);
}

.admin-telegram-add {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.admin-telegram-add .primary-button,
.admin-telegram-confirm .secondary-button {
  min-height: 44px;
}

.admin-telegram-add label,
.admin-telegram-confirm {
  display: grid;
  gap: 6px;
}

.admin-telegram-add span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.admin-telegram-add input,
.admin-telegram-confirm input {
  min-height: 44px;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background: var(--field);
  color: var(--ink);
  padding: 0 12px;
  font-size: 14px;
  font-weight: 800;
}

.admin-telegram-list {
  display: grid;
  gap: 8px;
}

.admin-telegram-card {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto minmax(150px, 0.7fr) auto;
  align-items: center;
  gap: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 10px 12px;
}

.admin-telegram-card.is-connected {
  border-color: color-mix(in srgb, var(--brand) 26%, var(--line));
}

.admin-telegram-main,
.admin-telegram-meta {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.admin-telegram-main strong,
.admin-telegram-meta strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-telegram-main span,
.admin-telegram-meta span,
.admin-telegram-error {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-telegram-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.admin-telegram-confirm {
  grid-column: 1 / -1;
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto;
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.admin-telegram-error {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--danger);
}

.account-dialog {
  width: min(560px, calc(100% - 28px));
  max-height: min(88vh, 720px);
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: 0;
}

.account-dialog::backdrop {
  background: rgba(6, 12, 16, 0.72);
  backdrop-filter: blur(5px);
}

.account-dialog form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: min(88vh, 720px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.35);
}

:where(.account-dialog, .tickets-modal, .telegram-photo-modal, .ai-soldly-dialog)[open]::backdrop {
  animation: ui-backdrop-in var(--motion-panel) var(--ease-standard) both;
}

:where(.account-dialog[open] form, .tickets-modal[open] .tickets-modal-panel, .telegram-photo-modal[open] .telegram-photo-modal-panel, .ai-soldly-dialog[open] form) {
  transform-origin: center;
  animation: ui-dialog-in 240ms var(--ease-drawer) both;
}

.account-dialog-head,
.account-dialog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}

.account-dialog-head {
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 50%),
    var(--panel);
}

.account-dialog-head h2,
.account-dialog-head p {
  margin: 0;
}

.account-dialog-head h2 {
  font-family:
    "Montserrat Alternates", Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 22px;
}

.account-dialog-body {
  display: grid;
  gap: 14px;
  min-height: 0;
  overflow: auto;
  padding: 20px;
}

.account-dialog-body label {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.account-dialog-body label span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.account-dialog-body input,
.account-dialog-body select,
.account-dialog-body textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background: var(--field);
  color: var(--ink);
  padding: 0 12px;
  font-size: 14px;
  font-weight: 800;
}

.account-dialog-body textarea {
  min-height: 128px;
  resize: vertical;
  padding-block: 10px;
  line-height: 1.45;
}

.account-dialog-body input:focus,
.account-dialog-body select:focus,
.account-dialog-body textarea:focus {
  border-color: var(--accent);
  outline: 0;
  box-shadow: var(--focus-ring);
}

.metric-feedback-subtitle {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--muted);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.45;
}

.metric-prompt-dialog {
  width: min(980px, calc(100% - 28px));
}

.metric-prompt-diff {
  display: grid;
  gap: 12px;
}

.metric-prompt-diff-section {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 12px;
}

.metric-prompt-diff-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.metric-prompt-diff-head strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-prompt-diff-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.metric-prompt-diff-field {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.metric-prompt-diff-label {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding-top: 6px;
}

.metric-prompt-diff-label strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  line-height: 1.25;
}

.metric-prompt-diff-label span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
}

.metric-prompt-before,
.metric-prompt-after {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.metric-prompt-before > span,
.metric-prompt-after > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
}

.metric-prompt-before p {
  min-height: 96px;
  max-height: 190px;
  overflow: auto;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
  white-space: pre-wrap;
}

.metric-prompt-after textarea {
  min-height: 96px;
  resize: vertical;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.metric-prompt-rationale {
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  color: var(--ink);
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.45;
}

.account-dialog-footer {
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.account-dialog-footer .primary-button,
.account-dialog-footer .secondary-button {
  flex: 1;
}

.metric-feedback-delete {
  border-color: color-mix(in srgb, var(--danger) 32%, var(--line-strong));
  color: var(--danger);
}

.metric-feedback-delete:hover,
.metric-feedback-delete:focus-visible {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, var(--panel));
  outline: 0;
}

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

.user-dialog {
  width: min(720px, calc(100% - 28px));
}

/* This control lives inside .account-dialog-body, whose general form rules
 * intentionally make text fields full-width. Keep the checkbox list explicit
 * here so those field styles can never turn it into a stack of giant inputs. */
.admin-user-binotel-assignment {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  padding: 12px;
}

.admin-user-binotel-assignment[hidden] {
  display: none;
}

.admin-user-binotel-assignment > div:first-child {
  display: grid;
  gap: 3px;
}

.admin-user-binotel-assignment > div:first-child > strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}

.admin-user-binotel-assignment > div:first-child > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.4;
}

.admin-user-binotel-managers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.account-dialog-body .admin-user-binotel-option {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 48px;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  padding: 8px 10px;
  cursor: pointer;
}

.account-dialog-body .admin-user-binotel-option:hover {
  border-color: color-mix(in srgb, var(--accent) 36%, var(--line));
}

.account-dialog-body .admin-user-binotel-option.is-unavailable {
  border-style: dashed;
}

.account-dialog-body .admin-user-binotel-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
  background: color-mix(in srgb, var(--accent) 9%, var(--panel));
}

.account-dialog-body .admin-user-binotel-option input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: checkbox;
  display: block;
  box-sizing: border-box;
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
  border: 0;
  border-radius: 3px;
  background: transparent;
  padding: 0;
  box-shadow: none;
  flex: 0 0 16px;
  accent-color: var(--accent);
}

.account-dialog-body .admin-user-binotel-option input[type="checkbox"]:focus {
  border-color: transparent;
  box-shadow: none;
}

.account-dialog-body .admin-user-binotel-option input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.account-dialog-body .admin-user-binotel-option > span {
  display: grid;
  min-width: 0;
  gap: 2px;
  color: var(--ink);
}

.account-dialog-body .admin-user-binotel-option strong,
.account-dialog-body .admin-user-binotel-option small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-dialog-body .admin-user-binotel-option strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
}

.account-dialog-body .admin-user-binotel-option small,
.admin-user-binotel-empty {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
}

.admin-user-binotel-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 4px 2px;
}

.client-card {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(420px, 0.75fr);
  gap: 14px;
  align-items: start;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.warning-stack {
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
}

.warning {
  border: 1px solid var(--state-warning-border);
  border-radius: 7px;
  background: var(--state-warning-bg);
  color: var(--warning-readable);
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.45;
}

.warning-stack:empty {
  display: none;
}

.identity-row,
.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.identity-row {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  overflow: hidden;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--brand) 10%, transparent), transparent 46%),
    var(--panel);
  box-shadow: var(--shadow-control);
}

.identity-row > * {
  position: relative;
  z-index: var(--z-raised);
}

.section-label {
  margin: 0 0 7px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.identity-row h1 {
  margin: 0;
  font-family:
    "Montserrat Alternates", Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 34px;
  line-height: 1.15;
}

.identity-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 15px;
}

.identity-meta a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -8px;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
}

.summary-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(100px, 1fr)) minmax(220px, 1.6fr);
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.summary-item {
  min-height: 96px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 16px 20px;
  border-right: 1px solid var(--line);
}

.summary-item:last-child {
  border-right: 0;
}

.summary-item span,
.profile-dates span {
  color: var(--muted);
  font-size: 12px;
}

.summary-item strong {
  font-size: 24px;
}

.summary-wide strong {
  font-size: 18px;
}

.profile-grid {
  grid-column: 1 / -1;
  grid-row: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, auto);
  gap: 14px;
  align-items: stretch;
}

.profile-block {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.profile-block h2,
.section-heading h2 {
  margin: 0;
  font-family:
    "Montserrat Alternates", Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 21px;
}

.passenger-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.passenger {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--soft);
  padding: 8px 11px;
  font-size: 13px;
  font-weight: 800;
}

.profile-dates {
  display: flex;
  gap: 28px;
}

.profile-dates div {
  min-width: 145px;
}

.profile-dates strong {
  display: block;
  margin-top: 8px;
  font-size: 14px;
}

.upcoming-section {
  grid-column: 1 / -1;
  grid-row: 3;
  position: relative;
  overflow: hidden;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 5%, transparent), transparent 38%),
    var(--panel);
  color: var(--text);
  box-shadow: none;
}

.upcoming-section .section-label {
  color: var(--brand);
}

.status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 10%, transparent);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.status-paid {
  color: var(--success-readable);
}

.status-cancelled {
  color: var(--danger-readable);
}

.status-returned {
  color: var(--return-readable);
}

.status-reserved {
  color: var(--warning-readable);
}

.upcoming-section .status-paid {
  color: var(--success-readable);
}

.upcoming-trip {
  margin-top: 14px;
  position: relative;
  z-index: var(--z-raised);
}

.trip-card {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.trip-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(178px, 0.19fr);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  border-radius: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--panel-soft) 94%, var(--brand)), var(--panel-soft)),
    var(--panel-soft);
}

.trip-route {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(96px, 120px) minmax(220px, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
  min-height: 78px;
  padding: 12px 16px;
}

.trip-place {
  min-width: 0;
  width: min(100%, 360px);
}

.trip-place-from {
  justify-self: start;
}

.trip-place-to {
  justify-self: end;
}

.trip-place > span,
.trip-departure > span,
.trip-info dt {
  display: block;
  color: var(--upcoming-muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.trip-place strong {
  display: block;
  overflow: hidden;
  margin-top: 3px;
  color: var(--ink);
  font-family:
    "Montserrat Alternates", Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 24px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.08;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trip-place small {
  display: block;
  margin-top: 4px;
  color: var(--upcoming-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: normal;
}

.trip-place small span,
.trip-segment-place small span {
  display: block;
}

.trip-place small span + span,
.trip-segment-place small span + span {
  margin-top: 2px;
  font-size: 1em;
  font-weight: 750;
  opacity: 0.84;
}

.trip-route-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
}

.trip-route-line {
  position: relative;
  display: block;
  width: 78px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--brand) 15%, transparent),
    var(--brand),
    color-mix(in srgb, var(--brand) 15%, transparent)
  );
}

.trip-route-line::before,
.trip-route-line::after {
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  border: 2px solid var(--brand);
  border-radius: 50%;
  background: var(--panel);
  content: "";
  transform: translateY(-50%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent);
}

.trip-route-line::before {
  left: -3px;
}

.trip-route-line::after {
  right: -3px;
}

.trip-departure {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 11px 14px;
  border-left: 1px solid var(--line);
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--brand) 18%, transparent), transparent 66%),
    color-mix(in srgb, var(--brand) 8%, var(--panel-soft));
}

.trip-departure strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-family:
    "Montserrat Alternates", Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.12;
}

.trip-departure b {
  display: block;
  margin-top: 5px;
  color: var(--brand);
  font-family:
    "Montserrat Alternates", Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 25px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
}

.trip-departure small {
  display: block;
  margin-top: 5px;
  color: var(--upcoming-muted);
  font-size: 12px;
  font-weight: 850;
}

.trip-segments,
.trip-general {
  display: grid;
  gap: 8px;
}

.trip-related-button {
  flex: 0 0 auto;
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--brand) 46%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 10%, var(--panel));
  color: var(--brand);
  padding: 0 11px;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0;
  white-space: nowrap;
}

.trip-related-button:hover,
.trip-related-button:focus-visible {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 16%, var(--panel));
  outline: 0;
}

.trip-subsection-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.trip-subsection-title span,
.trip-subsection-title strong {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.trip-subsection-title span {
  color: var(--brand);
}

.trip-subsection-title strong {
  overflow: hidden;
  color: var(--upcoming-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trip-segment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(390px, 1fr));
  gap: 10px;
}

.trip-segment-card {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(210px, 1.05fr);
  gap: 8px 14px;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel-soft) 86%, var(--panel));
}

.trip-segment-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.trip-segment-head span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 1px solid color-mix(in srgb, var(--brand) 50%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--brand);
  font-size: 11px;
  font-weight: 950;
}

.trip-segment-head strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trip-segment-route {
  grid-column: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-width: 0;
}

.trip-segment-place {
  min-width: 0;
}

.trip-segment-place > span,
.trip-segment-meta b {
  display: block;
  color: var(--upcoming-muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.trip-segment-place strong {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.16;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trip-segment-place small {
  display: block;
  margin-top: 3px;
  color: var(--upcoming-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.trip-segment-line {
  position: relative;
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 62%, transparent);
}

.trip-segment-line::before,
.trip-segment-line::after {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border: 2px solid var(--brand);
  border-radius: 50%;
  background: var(--panel-soft);
  content: "";
  transform: translateY(-50%);
}

.trip-segment-line::before {
  left: -2px;
}

.trip-segment-line::after {
  right: -2px;
}

.trip-segment-meta {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
  gap: 6px;
  align-self: start;
}

.trip-segment-meta > div {
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 64%, transparent);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.trip-segment-meta em {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-top: 3px;
  color: inherit;
  font-style: normal;
}

.trip-segment-note {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 0;
  color: var(--upcoming-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.trip-info {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
}

.trip-info-item {
  grid-column: span 3;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel-soft) 78%, transparent);
}

.trip-info-passenger,
.trip-info-agent {
  grid-column: span 3;
}

.trip-info-order,
.trip-info-ticket,
.trip-info-booking,
.trip-info-bus,
.trip-info-price {
  grid-column: span 2;
}

.trip-info dd {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.22;
  overflow-wrap: anywhere;
  white-space: normal;
  margin-inline-start: 0;
}

.trip-bus-value {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
}

.trip-bus-color {
  display: inline-block;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border: 2px solid color-mix(in srgb, var(--ink) 18%, transparent);
  border-radius: 50%;
  background: var(--bus-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bus-color) 18%, transparent);
}

.content-grid {
  grid-column: 1 / -1;
  grid-row: 5;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(420px, 0.75fr);
  gap: 14px;
  align-items: start;
  min-width: 0;
}

.client-main-stack,
.tickets-section {
  grid-column: 1;
}

.client-main-stack,
.client-side-stack {
  display: grid;
  gap: 14px;
  align-items: start;
  min-width: 0;
}

.client-side-stack {
  grid-column: 2;
}

.client-main-stack,
.calls-section,
.notes-section,
.telegram-section {
  min-width: 0;
}

.calls-section,
.tickets-section,
.notes-section,
.telegram-section {
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 3px 8px rgba(31, 48, 58, 0.08);
}

.telegram-section {
  align-self: start;
}

.messaging-section .section-heading {
  align-items: flex-start;
}

.messaging-tabs {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 3px;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 3px;
}

.messaging-tab {
  flex: 0 0 auto;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  padding: 0 12px;
  cursor: pointer;
  min-width: 84px;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
}

.messaging-tab:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}

.messaging-tab:focus-visible {
  color: var(--ink);
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  outline: 3px solid color-mix(in srgb, var(--accent) 20%, transparent);
  outline-offset: 2px;
}

.messaging-tab.is-active {
  border-color: color-mix(in srgb, var(--brand) 36%, var(--line));
  background: color-mix(in srgb, var(--brand) 14%, var(--panel));
  color: var(--brand-readable);
}

.messaging-panel {
  min-width: 0;
}

.messaging-panel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.messaging-channel-title {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.messaging-channel-title strong,
.messaging-channel-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messaging-channel-title strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 1000;
}

.messaging-channel-title span {
  overflow: visible;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.25;
  text-overflow: clip;
  white-space: normal;
}

.telegram-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.telegram-account-dropdown {
  position: relative;
  width: min(230px, 42vw);
  min-width: 170px;
}

.telegram-account-trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--field-border);
  border-radius: 10px;
  background: var(--field);
  color: var(--ink);
  padding: 6px 9px 6px 11px;
  cursor: pointer;
  text-align: left;
}

.telegram-account-trigger:disabled {
  cursor: default;
  opacity: 0.78;
}

.telegram-account-dropdown.is-open .telegram-account-trigger,
.telegram-account-trigger:not(:disabled):focus-visible,
.telegram-account-trigger:not(:disabled):hover {
  border-color: color-mix(in srgb, var(--brand) 48%, var(--field-border));
  background: color-mix(in srgb, var(--brand) 8%, var(--field));
}

.telegram-account-trigger:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 18%, transparent);
  outline-offset: 2px;
}

.telegram-account-trigger-main {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.telegram-account-trigger-main strong,
.telegram-account-trigger-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.telegram-account-trigger-main strong {
  font-size: 12px;
  font-weight: 950;
}

.telegram-account-trigger-main small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.telegram-account-trigger-main small.is-success {
  color: var(--success-readable);
}

.telegram-account-trigger-main small.is-error {
  color: var(--danger-readable);
}

.telegram-account-trigger-main small.is-neutral {
  color: var(--brand-readable);
}

.telegram-account-chevron {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 950;
  line-height: 1;
  transition: transform var(--motion-base) var(--ease-standard);
}

.telegram-account-dropdown.is-open .telegram-account-chevron {
  transform: rotate(180deg);
}

.telegram-account-menu {
  position: absolute;
  z-index: var(--z-dropdown);
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  width: min(310px, 76vw);
  max-height: 260px;
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line));
  border-radius: 12px;
  background: var(--panel);
  box-shadow: var(--shadow-menu);
  padding: 6px;
  transform-origin: top right;
  animation: ui-popover-in var(--motion-panel) var(--ease-emphasized-out) both;
}

.telegram-account-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  padding: 9px 10px;
  cursor: pointer;
  text-align: left;
}

.telegram-account-option:hover,
.telegram-account-option:focus-visible,
.telegram-account-option.is-selected {
  border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}

.telegram-account-option:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 18%, transparent);
  outline-offset: 1px;
}

.telegram-account-option-main {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.telegram-account-option-main strong,
.telegram-account-option-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.telegram-account-option-main strong {
  font-size: 12px;
  font-weight: 950;
}

.telegram-account-option-main small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.telegram-account-option-badge {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  padding: 4px 7px;
  font-size: 9px;
  font-weight: 950;
  white-space: nowrap;
}

.telegram-account-option.is-success .telegram-account-option-badge {
  border-color: color-mix(in srgb, var(--success) 46%, var(--line));
  color: var(--success-readable);
  background: color-mix(in srgb, var(--success) 12%, transparent);
}

.telegram-account-option.is-error .telegram-account-option-badge {
  border-color: color-mix(in srgb, var(--danger) 46%, var(--line));
  color: var(--danger-readable);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

.telegram-account-option.is-neutral .telegram-account-option-badge {
  border-color: color-mix(in srgb, var(--brand) 38%, var(--line));
  color: var(--brand-readable);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}

.telegram-refresh,
.viber-refresh {
  min-height: 44px;
  padding: 0 12px;
  white-space: nowrap;
}

.telegram-thread {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line));
  border-radius: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 10%, transparent), transparent 62%),
    var(--surface);
  padding: 10px 12px;
  animation: ui-list-item-in var(--motion-entry) var(--ease-emphasized-out) both;
}

.telegram-thread-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand) 22%, var(--panel));
  color: var(--brand);
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: 0;
}

.telegram-thread-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.telegram-thread-main strong,
.telegram-thread-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.telegram-thread-main strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 1000;
}

.telegram-thread-main span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.telegram-thread-status {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--panel);
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 950;
  white-space: nowrap;
}

.telegram-thread-status.is-success {
  border-color: color-mix(in srgb, var(--success) 45%, var(--line));
  color: var(--success-readable);
  background: color-mix(in srgb, var(--success) 12%, var(--panel));
}

.telegram-thread-status.is-error {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
  color: var(--danger-readable);
  background: color-mix(in srgb, var(--danger) 12%, var(--panel));
}

.telegram-thread-status.is-neutral {
  border-color: color-mix(in srgb, var(--brand) 30%, var(--line));
  color: var(--brand-readable);
  background: color-mix(in srgb, var(--brand) 10%, var(--panel));
}

.telegram-chat {
  display: flex;
  flex-direction: column;
  gap: 9px;
  height: 310px;
  margin-top: 10px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 7%, transparent), transparent 42%),
    var(--surface);
  padding: 14px;
}

.viber-chat {
  height: 378px;
}

.telegram-empty {
  display: grid;
  min-height: 100%;
  place-items: center;
  border-radius: 8px;
  background: color-mix(in srgb, var(--state-neutral-bg) 72%, transparent);
  color: var(--muted);
  padding: 16px;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.45;
  text-align: center;
}

.telegram-bubble {
  display: grid;
  gap: 4px;
  max-width: min(82%, 360px);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 9px 11px;
  transition:
    border-color var(--motion-panel) var(--ease-standard),
    box-shadow var(--motion-panel) var(--ease-standard),
    transform var(--motion-press) var(--ease-emphasized-out);
}

.telegram-bubble.is-highlighted {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
  animation: ui-attention 220ms var(--ease-emphasized-out) both;
}

.telegram-bubble p {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.42;
  white-space: pre-wrap;
  word-break: break-word;
}

.telegram-bubble-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-height: 0;
}

.telegram-bubble time {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
}

.telegram-reply-button {
  position: relative;
  display: inline-grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.telegram-reply-button::before {
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  content: "";
}

.telegram-reply-button:hover,
.telegram-reply-button:focus-visible {
  border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}

.telegram-reply-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 18%, transparent);
  outline-offset: 2px;
}

.telegram-reply-button .ai-svg {
  width: 13px;
  height: 13px;
}

.telegram-reply-preview {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: inherit;
  padding: 6px 8px;
  text-align: left;
  cursor: pointer;
}

.telegram-reply-preview:hover,
.telegram-reply-preview:focus-visible {
  border-color: color-mix(in srgb, var(--brand) 42%, var(--line));
  background: color-mix(in srgb, var(--brand) 13%, transparent);
  outline: 0;
}

.telegram-reply-preview:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.telegram-reply-preview span {
  color: var(--brand);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.telegram-reply-preview strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.telegram-media-photo {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 8%, var(--panel));
  cursor: zoom-in;
}

.telegram-media-photo:hover,
.telegram-media-photo:focus-visible {
  border-color: var(--brand);
  outline: 0;
}

.telegram-media-photo:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.telegram-media-photo img {
  display: block;
  width: 100%;
  max-height: 240px;
  object-fit: cover;
}

.telegram-media-file {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 10%, var(--panel));
  color: var(--ink);
  padding: 9px 10px;
  text-decoration: none;
}

.telegram-media-file:hover,
.telegram-media-file:focus-visible {
  border-color: var(--brand);
  outline: 0;
}

.telegram-media-file.is-static {
  cursor: default;
}

.telegram-media-file.is-static:hover {
  border-color: color-mix(in srgb, var(--brand) 24%, var(--line));
}

.telegram-media-file:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.telegram-media-file .ai-svg {
  width: 22px;
  height: 22px;
  color: var(--brand);
}

.telegram-media-file span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.telegram-media-file strong,
.telegram-media-file small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.telegram-media-file strong {
  font-size: 12px;
  font-weight: 900;
}

.telegram-media-file small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.telegram-photo-modal {
  width: min(1040px, calc(100% - 32px));
  max-height: min(92vh, 940px);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
}

.telegram-photo-modal::backdrop {
  background: rgba(6, 12, 16, 0.78);
  backdrop-filter: blur(6px);
}

.telegram-photo-modal-panel {
  display: flex;
  max-height: min(92vh, 940px);
  min-height: 220px;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--line));
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.42);
}

.telegram-photo-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--brand) 7%, var(--panel));
}

.telegram-photo-modal-header h2 {
  overflow: hidden;
  max-width: min(680px, 70vw);
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.telegram-photo-modal-body {
  display: grid;
  min-height: 0;
  flex: 1 1 auto;
  place-items: center;
  overflow: auto;
  background: #071015;
  padding: 14px;
}

.telegram-photo-modal-body img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: calc(92vh - 110px);
  border-radius: 8px;
  object-fit: contain;
}

.telegram-bubble.is-incoming {
  align-self: flex-start;
  border-top-left-radius: 5px;
  background: var(--panel);
}

.telegram-bubble.is-outgoing {
  align-self: flex-end;
  border-color: color-mix(in srgb, var(--brand) 34%, var(--line));
  border-top-right-radius: 5px;
  background: color-mix(in srgb, var(--brand) 15%, var(--panel));
}

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

.telegram-reply-bar {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 9%, var(--panel));
  padding: 8px 10px;
  animation: ui-list-item-in var(--motion-entry) var(--ease-emphasized-out) both;
}

.telegram-reply-bar div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.telegram-reply-bar span {
  color: var(--brand);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.telegram-reply-bar strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.telegram-reply-bar #telegram-reply-cancel {
  display: grid;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  flex: 0 0 30px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.telegram-reply-bar #telegram-reply-cancel:hover,
.telegram-reply-bar #telegram-reply-cancel:focus-visible {
  border-color: var(--brand);
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}

.telegram-reply-bar #telegram-reply-cancel:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 18%, transparent);
  outline-offset: 2px;
}

.telegram-compose textarea {
  min-height: 44px;
  max-height: 120px;
  resize: vertical;
  border: 1px solid var(--field-border);
  border-radius: 9px;
  background: var(--field);
  color: var(--ink);
  padding: 11px 12px;
  font: inherit;
  font-size: 13px;
  line-height: 1.35;
}

.telegram-compose textarea:focus {
  border-color: var(--brand);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
}

.telegram-compose #telegram-send {
  min-height: 44px;
  padding: 0 16px;
}

.muted {
  color: var(--muted);
  font-size: 13px;
}

.ai-summary-card {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 50%),
    var(--panel-soft);
}

.ai-summary-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.ai-summary-head h3 {
  margin: 0;
  font-family:
    "Montserrat Alternates", Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 18px;
}

.ai-summary-text {
  margin: 13px 0 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
}

.ai-summary-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.ai-summary-details span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 800;
}

.call-list,
.ticket-list {
  margin-top: 14px;
  border-top: 1px solid var(--line);
}

.call-row {
  display: grid;
  grid-template-columns: minmax(126px, max-content) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  transition:
    border-color var(--motion-base) var(--ease-standard),
    background-color var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard),
    transform var(--motion-press) var(--ease-emphasized-out);
}

.ticket-row {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr) 220px;
  gap: 28px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}

.ticket-row.is-transfer {
  margin: 10px 0;
  border: 1px solid color-mix(in srgb, var(--brand) 32%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--brand) 6%, var(--panel));
  padding: 18px 14px;
}

.order-row {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  overflow: visible;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    box-shadow var(--motion-base) var(--ease-standard),
    transform var(--motion-press) var(--ease-emphasized-out);
}

.order-row-main {
  display: grid;
  grid-template-columns: clamp(145px, 16vw, 170px) minmax(0, 1fr) minmax(160px, 220px);
  align-items: start;
  gap: 24px;
  min-width: 0;
}

.order-row:hover,
.order-row:focus-visible {
  background: color-mix(in srgb, var(--call-outgoing) 5%, transparent);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--call-outgoing) 10%, transparent);
  outline: none;
}

.call-row[href]:hover,
.call-row[href]:focus-visible {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
  outline: 0;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 8%, transparent);
}

.order-row:active,
.call-row[href]:active,
.monitor-call-link:active,
.call-stats-interactive:active {
  transform: scale(0.992);
  transition-duration: var(--motion-press);
}

.order-main {
  min-width: 0;
}

.order-date {
  min-width: 0;
}

.order-date strong,
.order-date span {
  display: block;
}

.order-date strong {
  color: var(--ink);
  font-family:
    "Montserrat Alternates", Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.25;
  white-space: nowrap;
}

.order-date span {
  margin-top: 5px;
  color: var(--call-outgoing);
  font-size: 15px;
  font-weight: 800;
}

.order-headline {
  display: flex;
  align-items: flex-start;
  min-width: 0;
}

.order-row .order-title {
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: nowrap;
}

.order-row .order-title strong {
  flex: 0 0 auto;
  font-size: 22px;
  white-space: nowrap;
}

.order-row .order-title .status {
  flex: 0 0 auto;
  white-space: nowrap;
}

.order-caption {
  margin: 0;
  color: color-mix(in srgb, var(--call-outgoing) 48%, var(--muted));
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
  max-width: 620px;
}

.order-info-grid {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.order-info-item {
  box-sizing: border-box;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel-soft) 72%, transparent);
}

.order-info-item span,
.order-info-item strong {
  display: block;
}

.order-info-item span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-transform: uppercase;
}

.order-info-item strong {
  margin-top: 5px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
  white-space: normal;
}

.order-info-item:nth-child(n + 3) strong {
  font-size: 13px;
}

.order-price strong {
  font-size: 24px;
}

.order-price {
  display: grid;
  align-content: start;
  justify-items: end;
  gap: 8px;
  min-width: 0;
  text-align: right;
}

.order-price strong,
.order-price span {
  display: block;
}

.order-price strong {
  color: var(--call-outgoing-readable);
  font-family:
    "Montserrat Alternates", Montserrat, "Segoe UI", system-ui, sans-serif;
  line-height: 1.2;
  white-space: nowrap;
}

.order-price span {
  max-width: 220px;
  margin-top: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.calls-section .call-row {
  grid-template-columns: minmax(122px, max-content) minmax(0, 1fr);
  gap: 10px;
  min-height: 44px;
  padding: 8px 0;
}

.ticket-date strong,
.ticket-date span {
  display: block;
}

.call-date {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  white-space: nowrap;
}

.call-date strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.ticket-date strong {
  color: var(--ink);
  font-family:
    "Montserrat Alternates", Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.25;
}

.ticket-date span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.call-date span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.ticket-date span {
  color: var(--call-outgoing);
  font-size: 15px;
  font-weight: 800;
}

.call-title,
.ticket-route {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.call-title strong {
  font-size: 15px;
}

.call-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  line-height: 1.2;
}

.call-main .call-direction {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 900;
}

.call-operator {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.call-main .status {
  min-height: 24px;
  padding-inline: 8px;
  font-size: 11px;
  white-space: nowrap;
}

.ticket-route {
  gap: 12px;
  margin-bottom: 10px;
}

.ticket-route strong {
  color: var(--ink);
  font-family:
    "Montserrat Alternates", Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 20px;
  line-height: 1.25;
}

.call-direction {
  color: var(--ink);
}

.call-incoming {
  color: var(--call-incoming);
}

.call-outgoing {
  color: var(--call-outgoing);
}

.call-direction-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, currentColor 32%, var(--line));
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 11%, var(--panel-soft));
  color: var(--muted);
}

.call-row .call-direction-icon {
  width: 26px;
  height: 26px;
}

.call-direction-icon.call-incoming {
  color: var(--call-incoming);
}

.call-direction-icon.call-outgoing {
  color: var(--call-outgoing);
}

.call-direction-icon svg {
  width: 21px;
  height: 21px;
  overflow: visible;
}

.call-row .call-direction-icon svg {
  width: 17px;
  height: 17px;
}

.call-direction-icon-phone,
.call-direction-icon-arrow {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.call-direction-icon-phone {
  stroke-width: 1.7;
}

.call-direction-icon-arrow {
  stroke-width: 2.25;
}

.call-main p,
.ticket-main p {
  margin: 7px 0 9px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.ticket-main p {
  margin: 0 0 13px;
  color: color-mix(in srgb, var(--call-outgoing) 48%, var(--muted));
  font-size: 14px;
  font-weight: 700;
}

.ticket-schedule {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0 0 15px;
}

.ticket-schedule span {
  padding: 7px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--call-outgoing) 12%, transparent), transparent 70%),
    var(--panel-soft);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
}

.ticket-schedule span:last-child {
  max-width: 100%;
  border-radius: 12px;
}

.call-meta,
.ticket-meta {
  display: flex;
  gap: 10px 14px;
  flex-wrap: wrap;
  color: var(--meta);
  font-size: 13px;
  line-height: 1.45;
}

.call-meta span:not(:last-child)::after,
.ticket-meta span:not(:last-child)::after {
  content: "•";
  margin-left: 14px;
  color: var(--separator);
}

.call-side,
.ticket-price {
  text-align: right;
}

.ticket-price {
  display: grid;
  align-content: start;
  justify-items: end;
  gap: 12px;
}

.call-side strong,
.call-side span,
.ticket-price strong,
.ticket-price span,
.ticket-price a,
.ticket-price button {
  display: block;
}

.call-side strong {
  font-size: 14px;
}

.call-side span {
  margin-top: 7px;
  color: var(--muted);
  font-size: 11px;
}

.ticket-price strong {
  color: var(--call-outgoing-readable);
  font-family:
    "Montserrat Alternates", Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 21px;
  line-height: 1.2;
}

.ticket-price span {
  max-width: 220px;
  margin-top: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.order-link {
  min-width: 180px;
  margin-top: 2px;
  padding: 13px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  appearance: none;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--call-outgoing) 12%, transparent), transparent 62%),
    var(--panel-soft);
  color: var(--call-outgoing);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  transition:
    border-color 160ms ease,
    color 160ms ease,
    transform 160ms ease,
    background 160ms ease;
}

.order-link:hover,
.order-link:focus-visible {
  border-color: var(--call-outgoing);
  background: color-mix(in srgb, var(--call-outgoing) 18%, var(--panel-soft));
  color: var(--call-outgoing);
  transform: translateY(-1px);
}

.order-link[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.55;
}

.tickets-action {
  display: flex;
  justify-content: center;
  padding-top: 18px;
}

.show-all-tickets,
.show-all-calls {
  min-width: 210px;
  min-height: 44px;
}

.tickets-modal {
  width: min(980px, calc(100% - 32px));
  max-height: min(86vh, 920px);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
}

.tickets-modal:not(.calls-modal) {
  width: min(1180px, calc(100% - 32px));
}

.tickets-modal::backdrop {
  background: rgba(6, 12, 16, 0.72);
  backdrop-filter: blur(5px);
}

.tickets-modal-panel {
  max-height: min(86vh, 920px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.35);
}

.tickets-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 50%),
    var(--panel);
}

.tickets-modal-header h2 {
  margin: 0;
  font-family:
    "Montserrat Alternates", Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 24px;
}

.modal-close {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--ink);
  font-size: 24px;
  line-height: 1;
}

.modal-close:hover,
.modal-close:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.modal-close:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 20%, transparent);
  outline-offset: 2px;
}

.tickets-modal-list {
  margin-top: 0;
  padding: 0 24px 24px;
  overflow: auto;
  border-top: 0;
}

.tickets-modal-list .ticket-row:not(.order-row) {
  grid-template-columns: 110px minmax(0, 1fr) 190px;
}

.tickets-modal-list .call-row {
  grid-template-columns: minmax(126px, max-content) minmax(0, 1fr);
}

#tickets-modal-list {
  display: grid;
  gap: 14px;
  padding-top: 16px;
}

#tickets-modal-list.order-list {
  gap: 0;
}

.tickets-modal-list.order-list .order-row,
.tickets-modal-list.order-list .ticket-row.order-row {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

.modal-ticket-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--panel-soft) 90%, var(--brand)), transparent 76%),
    color-mix(in srgb, var(--panel) 96%, var(--panel-soft));
}

.modal-ticket-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}

.modal-ticket-title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.modal-ticket-title strong {
  overflow: hidden;
  color: var(--ink);
  font-family:
    "Montserrat Alternates", Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-ticket-transfer {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  min-height: 24px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--brand) 52%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 10%, var(--panel));
  color: var(--brand);
  font-size: 10px;
  font-weight: 950;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.modal-ticket-badges {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.modal-ticket-badges > strong {
  color: var(--brand);
  font-family:
    "Montserrat Alternates", Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 950;
  line-height: 1.05;
  white-space: nowrap;
}

.modal-ticket-hero {
  grid-template-columns: minmax(0, 1fr) minmax(150px, 0.18fr);
  border-radius: 12px;
}

.modal-ticket-route {
  grid-template-columns: minmax(170px, 1fr) minmax(74px, 96px) minmax(170px, 1fr);
  min-height: 76px;
  padding: 11px 14px;
}

.modal-ticket-route .trip-route-line {
  width: 64px;
}

.modal-ticket-route .trip-place strong {
  font-size: 22px;
}

.modal-ticket-route .trip-place small {
  font-size: 12px;
}

.modal-ticket-departure {
  padding: 10px 14px;
}

.modal-ticket-departure strong {
  font-size: 15px;
}

.modal-ticket-departure b {
  font-size: 24px;
}

.modal-ticket-departure small {
  font-size: 12px;
}

.modal-ticket-section,
.modal-ticket-segments {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.modal-ticket-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.modal-ticket-section-title span,
.modal-ticket-section-title strong {
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
}

.modal-ticket-section-title span {
  color: var(--brand);
}

.modal-ticket-section-title strong {
  color: var(--upcoming-muted);
}

.modal-ticket-info {
  gap: 8px;
}

.modal-ticket-info .trip-info-item {
  padding: 8px 10px;
  border-radius: 11px;
}

.modal-ticket-info .trip-info-passenger,
.modal-ticket-info .trip-info-agent {
  grid-column: span 3;
}

.modal-ticket-info .trip-info-price,
.modal-ticket-info .trip-info-ticket,
.modal-ticket-info .trip-info-bus {
  grid-column: span 2;
}

.modal-ticket-info .modal-ticket-carrier,
.modal-ticket-info .modal-ticket-route-code {
  grid-column: span 4;
}

.modal-ticket-segment-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
}

.modal-ticket-segment {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--panel-soft) 78%, transparent);
}

.modal-ticket-segment-route {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.modal-ticket-segment-route span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 1px solid color-mix(in srgb, var(--brand) 55%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--brand);
  font-size: 11px;
  font-weight: 950;
}

.modal-ticket-segment-route strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-ticket-segment-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--upcoming-muted);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.3;
}

.modal-ticket-segment-meta > span {
  min-width: 0;
}

.modal-ticket-actions {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}

.modal-ticket-order-link {
  min-width: 190px;
  padding: 11px 16px;
  border-radius: 11px;
}

.notes-section {
  align-self: start;
}

.note-form {
  margin-top: 18px;
}

.note-form textarea {
  display: block;
  width: 100%;
  min-height: 108px;
  resize: vertical;
  border: 1px solid var(--field-border);
  border-radius: 7px;
  background: var(--field);
  padding: 13px;
  outline: 0;
  color: var(--ink);
  line-height: 1.45;
}

.note-form textarea:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.note-form button {
  min-height: 44px;
  width: 100%;
  margin-top: 10px;
}

.form-message {
  min-height: 0;
  margin: 7px 0 0;
  color: var(--danger-readable);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.4;
}

.form-message:not(:empty) {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 34px;
  border: 1px solid var(--state-danger-border);
  border-radius: 7px;
  background: var(--state-danger-bg);
  padding: 8px 10px;
  animation: ui-list-item-in var(--motion-entry) var(--ease-emphasized-out) both;
}

.form-message:not(:empty)::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 0.48em;
  border-radius: 999px;
  background: currentColor;
}

.form-message[data-tone="success"],
.form-message.success {
  border-color: var(--state-success-border);
  background: var(--state-success-bg);
  color: var(--success-readable);
}

.form-message[data-tone="warning"],
.form-message.warning {
  border-color: var(--state-warning-border);
  background: var(--state-warning-bg);
  color: var(--warning-readable);
}

.form-message[data-tone="neutral"],
.form-message.neutral {
  border-color: var(--state-info-border);
  background: var(--state-info-bg);
  color: var(--muted);
}

.form-message[data-tone="danger"],
.form-message[data-tone="error"],
.form-message.error {
  border-color: var(--state-danger-border);
  background: var(--state-danger-bg);
  color: var(--danger-readable);
}

.notes-list {
  margin-top: 20px;
}

.note {
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.note-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.note p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

.note-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.note-action-button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid color-mix(in srgb, var(--line-strong) 78%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-soft) 82%, transparent);
  color: var(--muted);
  padding: 0;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.note-action-button .ai-svg {
  width: 15px;
  height: 15px;
}

.note-action-button.is-danger {
  color: var(--danger);
}

.note-action-button:hover,
.note-action-button:focus-visible {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, var(--panel));
  color: var(--brand);
  outline: 0;
  transform: translateY(-1px);
}

.note-action-button.is-danger:hover,
.note-action-button.is-danger:focus-visible {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, var(--panel));
  color: var(--danger);
}

.note.is-editing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.note-edit-input {
  min-height: 92px;
  width: 100%;
  resize: vertical;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background: var(--field);
  color: var(--ink);
  padding: 11px 12px;
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
}

.note-edit-input:focus {
  border-color: var(--brand);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent);
}

.booking-action-confirm-layer {
  position: fixed;
  inset: 0;
  z-index: var(--z-confirm-layer);
  background: rgba(7, 17, 22, 0.08);
  animation: ui-backdrop-in var(--motion-panel) var(--ease-standard) both;
}

.booking-action-confirm-dialog {
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  border: 0;
  padding: 0;
  color: inherit;
}

.booking-action-confirm-dialog::backdrop {
  background: transparent;
}

.booking-action-confirm-popover {
  --confirm-accent: var(--brand);
  --confirm-accent-2: var(--brand-dark);
  --confirm-arrow-left: 50%;
  position: fixed;
  z-index: var(--z-confirm-popover);
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 24px));
  padding: 13px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 12px 24px rgba(17, 17, 17, 0.18);
  transform-origin: var(--confirm-arrow-left) bottom;
}

.booking-action-confirm-popover::after {
  position: absolute;
  bottom: -6px;
  left: var(--confirm-arrow-left);
  width: 10px;
  height: 10px;
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  background: inherit;
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.booking-action-confirm-popover.is-placement-below {
  transform-origin: var(--confirm-arrow-left) top;
}

.booking-action-confirm-popover.is-placement-below::after {
  top: -6px;
  bottom: auto;
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
  border-right: 0;
  border-bottom: 0;
}

.booking-action-confirm-popover.is-centered {
  transform-origin: center;
}

.booking-action-confirm-popover.is-centered::after {
  display: none;
}

.booking-action-confirm-popover.is-success {
  --confirm-accent: #15803d;
  --confirm-accent-2: #16a34a;
}

.booking-action-confirm-popover.is-warning {
  --confirm-accent: #d97706;
  --confirm-accent-2: #f59e0b;
}

.booking-action-confirm-popover.is-danger {
  --confirm-accent: #b91c1c;
  --confirm-accent-2: #ef4444;
}

.booking-action-confirm-head {
  display: flex;
  align-items: center;
  gap: 9px;
}

.booking-action-confirm-head strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
}

.booking-action-confirm-mark {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--confirm-accent-2), var(--confirm-accent));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--confirm-accent) 14%, transparent);
}

.booking-action-confirm-popover p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.booking-action-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 2px;
}

.booking-action-confirm-button {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 950;
  transition:
    transform var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard),
    filter var(--motion-base) var(--ease-standard);
}

.booking-action-confirm-button:hover {
  transform: translateY(-1px);
}

.booking-action-confirm-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand) 34%, transparent);
  outline-offset: 2px;
}

.booking-action-confirm-button.is-ghost {
  border-color: var(--line-strong);
  background: var(--panel-soft);
  color: var(--text);
}

.booking-action-confirm-button.is-confirm {
  background: linear-gradient(135deg, var(--confirm-accent-2), var(--confirm-accent));
  color: #ffffff;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--confirm-accent) 24%, transparent);
}

.note footer {
  margin-top: 9px;
  color: var(--muted);
  font-size: 11px;
}

.no-data {
  margin: 18px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--state-info-border);
  border-radius: 8px;
  background: var(--state-info-bg);
  color: var(--muted);
  text-align: center;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.45;
}

.monitor-page,
.call-stats-page,
.analytics-page,
.call-detail-page {
  display: grid;
  gap: 16px;
}

.monitor-hero,
.monitor-panel,
.monitor-call-row,
.call-detail-hero,
.call-detail-facts,
.detail-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 3px 8px rgba(31, 48, 58, 0.06);
}

.monitor-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.58fr);
  gap: 16px;
  align-items: stretch;
  padding: 16px 18px;
}

.monitor-hero h1 {
  margin: 0;
  font-family:
    "Montserrat Alternates", Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 28px;
  line-height: 1.12;
  text-wrap: balance;
}

.monitor-hero p:not(.section-label) {
  max-width: 760px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.monitor-status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  overflow: hidden;
}

.monitor-status-grid div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-height: 66px;
  padding: 10px 12px;
  border-right: 1px solid var(--line);
}

.monitor-status-grid div:last-child {
  border-right: 0;
}

.monitor-status-grid span {
  color: var(--muted);
  font-size: 12px;
}

.monitor-status-grid strong {
  line-height: 1.28;
  font-size: 14px;
}

.monitor-panel {
  padding: 16px 18px 18px;
}

.monitor-analytics {
  overflow: hidden;
}

.monitor-analytics-heading {
  align-items: center;
}

.monitor-period {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  border: 1px solid var(--field-border);
  border-radius: 7px;
  background: var(--field);
  color: var(--muted);
  padding: 0 11px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.monitor-period .custom-select {
  min-width: 92px;
}

.monitor-page-size .custom-select-button,
.monitor-filter-select .custom-select-button,
.monitor-period .custom-select-button {
  min-height: 34px;
  border: 0;
  background: transparent;
  padding: 0 24px 0 0;
  box-shadow: none;
}

.monitor-page-size .custom-select-button:hover,
.monitor-page-size .custom-select-button:focus-visible,
.monitor-page-size .custom-select.is-open .custom-select-button,
.monitor-filter-select .custom-select-button:hover,
.monitor-filter-select .custom-select-button:focus-visible,
.monitor-filter-select .custom-select.is-open .custom-select-button,
.monitor-period .custom-select-button:hover,
.monitor-period .custom-select-button:focus-visible,
.monitor-period .custom-select.is-open .custom-select-button {
  box-shadow: none;
}

.monitor-period:focus-within {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.monitor-analytics-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.monitor-analytics-summary > div {
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 88px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: 8px;
  background: var(--panel-soft);
}

.monitor-analytics-summary span,
.monitor-analytics-summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}

.monitor-analytics-summary span {
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.monitor-analytics-summary strong {
  min-width: 0;
  color: var(--ink);
  font-family:
    "Montserrat Alternates", Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 21px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.call-type-overview {
  display: flex;
  width: 100%;
  height: 12px;
  margin-top: 16px;
  border-radius: 999px;
  background: var(--panel-soft);
  overflow: hidden;
}

.call-type-overview span {
  min-width: 3px;
  height: 100%;
  background: var(--chart-color);
  transform-origin: left center;
  animation: ui-bar-fill 360ms var(--ease-emphasized-out) both;
}

.call-type-chart {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.analytics-subsection {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.analytics-subsection h2 {
  margin: 0;
  font-family:
    "Montserrat Alternates", Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 20px;
  line-height: 1.2;
}

.manager-rating-heading {
  align-items: center;
}

.manager-rating-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.manager-rating-summary span {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  gap: 8px;
  scroll-snap-align: start;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.manager-rating-summary small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.manager-rating-summary strong {
  font-family:
    "Montserrat Alternates", Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
}

.manager-rating-table {
  margin-top: 14px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  scrollbar-gutter: stable;
}

.manager-rating-matrix {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.manager-rating-matrix th,
.manager-rating-matrix td {
  padding: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.manager-rating-matrix th:last-child,
.manager-rating-matrix td:last-child {
  border-right: 0;
}

.manager-rating-matrix tbody tr:last-child th,
.manager-rating-matrix tbody tr:last-child td {
  border-bottom: 0;
}

.manager-rating-matrix thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-active);
  min-height: 58px;
  padding: 12px;
  background: color-mix(in srgb, var(--panel-soft) 88%, var(--panel));
  color: var(--muted);
  text-align: left;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0;
}

.manager-rating-sticky {
  position: sticky;
  left: 0;
  z-index: var(--z-sticky-table);
  background: var(--panel);
}

.manager-rating-matrix thead .manager-rating-sticky {
  z-index: var(--z-sticky-corner);
  background: color-mix(in srgb, var(--panel-soft) 92%, var(--panel));
}

.manager-rating-manager-head,
.manager-rating-manager-cell {
  width: 280px;
  min-width: 280px;
}

.manager-rating-total-head,
.manager-rating-total-cell {
  width: 138px;
  min-width: 138px;
}

.manager-rating-metric-head,
.manager-rating-matrix td {
  width: 166px;
  min-width: 166px;
}

.manager-rating-matrix td.manager-rating-total-cell {
  width: 138px;
  min-width: 138px;
}

.manager-rating-metric-head {
  --metric-color: #94a3b8;
  box-shadow: inset 0 3px 0 color-mix(in srgb, var(--metric-color) 74%, transparent);
}

.manager-rating-metric-head strong,
.manager-rating-metric-head small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manager-rating-metric-head strong {
  color: var(--ink);
  font-size: 12px;
}

.manager-rating-metric-head small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}

.manager-rating-person-button {
  display: flex;
  width: 100%;
  min-height: 72px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.manager-rating-person-button:hover,
.manager-rating-person-button:focus-visible {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.manager-rating-rank {
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-soft));
  color: var(--accent);
  font-family:
    "Montserrat Alternates", Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 950;
}

.manager-rating-person {
  display: block;
  min-width: 0;
}

.manager-rating-person strong,
.manager-rating-person small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manager-rating-person strong {
  font-size: 14px;
}

.manager-rating-person small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.manager-rating-matrix td {
  padding: 8px;
  background: var(--panel);
}

.manager-rating-cell {
  --metric-color: #94a3b8;
  --cell-tone: var(--metric-color);
  display: flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--cell-tone) 34%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--metric-color) 7%, var(--panel-soft));
}

.manager-rating-cell-score {
  font-family:
    "Montserrat Alternates", Montserrat, "Segoe UI", system-ui, sans-serif;
  color: color-mix(in srgb, var(--cell-tone) 78%, var(--ink));
  font-size: 18px;
  font-weight: 950;
}

.manager-rating-cell.quality-good,
.manager-rating-modal-metric.quality-good {
  --cell-tone: #22c55e;
}

.manager-rating-cell.quality-warning,
.manager-rating-modal-metric.quality-warning {
  --cell-tone: #d99a27;
}

.manager-rating-cell.quality-bad,
.manager-rating-modal-metric.quality-bad {
  --cell-tone: var(--accent);
}

.manager-rating-cell.quality-empty,
.manager-rating-modal-metric.quality-empty {
  --cell-tone: #94a3b8;
}

.manager-rating-modal {
  width: min(1040px, calc(100% - 32px));
}

.manager-rating-modal-header p:not(.section-label) {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.manager-rating-modal-body {
  display: grid;
  gap: 18px;
  min-height: 0;
  padding: 18px 24px 24px;
  overflow: auto;
}

.manager-rating-modal-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.manager-rating-modal-stat {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.manager-rating-modal-stat span,
.manager-rating-modal-stat small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
}

.manager-rating-modal-stat strong {
  font-family:
    "Montserrat Alternates", Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 950;
}

.manager-rating-modal-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.manager-rating-modal-metric {
  --metric-color: #94a3b8;
  --cell-tone: var(--metric-color);
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--cell-tone) 34%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--metric-color) 5%, var(--panel-soft));
}

.manager-rating-modal-metric-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.manager-rating-modal-metric-head strong,
.manager-rating-modal-metric-head small {
  display: block;
  min-width: 0;
}

.manager-rating-modal-metric-head strong {
  font-size: 14px;
}

.manager-rating-modal-metric-head small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.manager-rating-modal-metric-head span {
  flex: 0 0 auto;
  color: color-mix(in srgb, var(--cell-tone) 78%, var(--ink));
  font-family:
    "Montserrat Alternates", Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 20px;
  font-weight: 950;
}

.manager-rating-modal-metric-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.manager-rating-modal-metric-facts div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
}

.manager-rating-modal-metric-facts dt,
.manager-rating-modal-metric-facts dd {
  margin: 0;
}

.manager-rating-modal-metric-facts dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.manager-rating-modal-metric-facts dd {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}

.ai-settings-page {
  --ai-bg: var(--page);
  --ai-panel: var(--panel);
  --ai-panel-soft: var(--panel-soft);
  --ai-line: var(--line);
  --ai-line-strong: var(--line-strong);
  --ai-text: var(--ink);
  --ai-muted: var(--muted);
  --ai-soft-text: var(--muted);
  --ai-label: var(--ink);
  --ai-card: var(--panel);
  --ai-field: var(--field);
  --ai-field-soft: var(--panel-soft);
  --ai-button-soft: var(--panel-soft);
  --ai-control-contrast: var(--panel);
  --ai-control-text: var(--ink);
  --ai-swatch-border: var(--line-strong);
  --ai-switch-off: var(--line-strong);
  --ai-brand: var(--brand);
  --ai-brand-dark: var(--brand-dark);
  --ai-brand-soft: var(--brand-soft);
  --ai-indigo: var(--brand);
  --ai-purple: var(--brand-dark);
  --ai-focus: color-mix(in srgb, var(--brand) 18%, transparent);
  --ai-shadow: none;
  position: relative;
  display: grid;
  gap: 14px;
  max-width: 100%;
  color: var(--ai-text);
}

body[data-theme="dark"] .ai-settings-page {
  --ai-bg: var(--page);
  --ai-panel: var(--panel);
  --ai-panel-soft: var(--panel-soft);
  --ai-line: var(--line);
  --ai-line-strong: var(--line-strong);
  --ai-text: var(--ink);
  --ai-muted: var(--muted);
  --ai-soft-text: var(--muted);
  --ai-label: var(--ink);
  --ai-card: var(--panel);
  --ai-field: var(--field);
  --ai-field-soft: var(--panel-soft);
  --ai-button-soft: var(--panel-soft);
  --ai-control-contrast: var(--panel-soft);
  --ai-control-text: var(--ink);
  --ai-swatch-border: var(--line-strong);
  --ai-switch-off: var(--line-strong);
  --ai-indigo: var(--brand);
  --ai-purple: var(--brand-dark);
  --ai-focus: color-mix(in srgb, var(--brand) 24%, transparent);
  --ai-shadow: none;
}

.page-shell:has(.ai-settings-page:not(.hidden)) {
  width: min(1920px, calc(100% - 48px));
}

.ai-settings-page :where(button, input, textarea, select) {
  font: inherit;
}

.ai-settings-page button,
.ai-soldly-dialog button {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  line-height: 1;
  text-decoration: none;
}

.ai-settings-page :where(button, input, textarea, select):focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px var(--ai-focus);
}

.ai-svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-js-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.ai-soldly-tabs {
  display: flex;
  gap: 34px;
  min-height: 54px;
  border-bottom: 1px solid var(--ai-line);
}

.ai-soldly-tabs button {
  position: relative;
  border: 0;
  background: transparent;
  color: var(--ai-muted);
  padding: 0 0 15px;
  font-size: 16px;
  font-weight: 800;
}

.ai-soldly-tabs button::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: transparent;
}

.ai-soldly-tabs button.active {
  color: var(--ai-indigo);
}

.ai-soldly-tabs button.active::after {
  background: var(--ai-indigo);
}

.ai-soldly-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 68px;
  margin-top: 0;
  border: 1px solid var(--ai-line);
  border-radius: 8px;
  background: var(--ai-panel);
  color: var(--ai-text);
  padding: 14px 18px;
  box-shadow: none;
}

.ai-hero-title {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.ai-hero-title-stack {
  align-items: flex-start;
  flex: 1;
}

.ai-hero-title h1 {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--ai-text);
  font-size: 20px;
  line-height: 1.15;
  font-weight: 900;
}

.ai-hero-title p {
  max-width: 850px;
  margin: 5px 0 0;
  color: var(--ai-muted);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
}

.ai-hero-title .section-label {
  margin-bottom: 4px;
  color: var(--accent);
}

.ai-hero-icon,
.ai-target-badge,
.ai-check-badge,
.ai-chain-icon,
.ai-side-icon,
.ai-sparkle-square {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.ai-hero-icon::before {
  content: "AI";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 12px;
  font-weight: 900;
}

.ai-hero-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ai-line-strong);
  border-radius: 8px;
  background: var(--ai-panel-soft);
  color: var(--ai-text);
  padding: 0;
  line-height: 1;
}

.ai-hero-back::before,
.ai-side-chevron::before,
.ai-chain-chevron::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
}

.ai-hero-back::before {
  transform: rotate(45deg);
}

.ai-side-chevron::before,
.ai-chain-chevron::before {
  transform: rotate(-45deg);
}

.ai-hero-actions,
.ai-create-actions,
.ai-list-title,
.ai-list-head,
.ai-metrics-title,
.ai-metrics-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ai-list-head,
.ai-metrics-head {
  justify-content: space-between;
}

.ai-hero-actions,
.ai-create-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ai-gradient-button,
.ai-white-button,
.ai-quiet-button,
.ai-dialog-submit,
.ai-dialog-cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  transition:
    transform var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard),
    border-color var(--motion-base) var(--ease-standard),
    background var(--motion-base) var(--ease-standard),
    color var(--motion-base) var(--ease-standard);
}

.ai-gradient-button,
.ai-dialog-submit {
  border-color: var(--brand);
  background: var(--brand);
  color: #ffffff;
  box-shadow: none;
}

.ai-gradient-button:hover,
.ai-gradient-button:focus-visible,
.ai-dialog-submit:hover,
.ai-dialog-submit:focus-visible {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  transform: translateY(-1px);
  box-shadow: none;
}

.ai-gradient-button:disabled,
.ai-dialog-submit:disabled,
.ai-white-button:disabled,
.ai-quiet-button:disabled,
.ai-dialog-cancel:disabled,
.ai-settings-page button:disabled {
  cursor: not-allowed;
  opacity: 0.56;
  transform: none;
  box-shadow: none;
}

.ai-white-button {
  min-height: 46px;
  border-color: var(--ai-line-strong);
  border-radius: 8px;
  background: var(--ai-control-contrast);
  color: var(--ai-control-text);
  padding: 0 17px;
  box-shadow: none;
}

.ai-white-button:hover,
.ai-white-button:focus-visible {
  color: var(--ai-indigo);
  border-color: color-mix(in srgb, var(--ai-indigo) 32%, var(--ai-panel));
}

.ai-quiet-button {
  border: 0;
  background: transparent;
  color: var(--ai-muted);
  padding: 0 10px;
  font-size: 13px;
  box-shadow: none;
}

.ai-quiet-button:hover,
.ai-quiet-button:focus-visible,
.ai-quiet-button[data-active="true"] {
  background: color-mix(in srgb, var(--ai-indigo) 12%, var(--ai-panel));
  color: var(--ai-indigo);
}

.ai-soldly-list-panel,
.ai-detail-main,
.ai-detail-side > *,
.ai-placeholder-tab {
  border: 1px solid var(--ai-line);
  border-radius: 8px;
  background: var(--ai-panel);
  box-shadow: var(--ai-shadow);
}

.ai-soldly-list-panel {
  margin-top: 8px;
  padding: 14px;
}

.ai-list-title h2,
.ai-metrics-title h2,
.ai-placeholder-tab h2 {
  margin: 0;
  color: var(--ai-text);
  font-size: 17px;
  line-height: 1.2;
  font-weight: 900;
}

.ai-channel-line {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--ai-line);
}

.ai-channel-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--ai-line));
  background: color-mix(in srgb, var(--accent) 8%, var(--ai-panel));
  color: var(--brand-readable);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 900;
}

.ai-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 10px;
  margin-top: 10px;
}

.ai-type-card,
.ai-metric-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--ai-line);
  border-radius: 8px;
  background: var(--ai-card);
  padding: 10px 12px;
  transition:
    border-color var(--motion-base) var(--ease-standard),
    box-shadow var(--motion-base) var(--ease-standard),
    transform var(--motion-base) var(--ease-standard);
}

.ai-type-card {
  min-height: 76px;
}

.ai-type-card:hover,
.ai-type-card:focus-visible,
.ai-metric-card:hover,
.ai-metric-card:focus-visible {
  border-color: color-mix(in srgb, var(--ai-indigo) 32%, var(--ai-line));
  box-shadow: none;
  transform: translateY(-1px);
}

.ai-type-card-main,
.ai-type-card-actions,
.ai-metric-card-main,
.ai-metric-actions {
  display: flex;
  align-items: center;
  min-width: 0;
}

.ai-type-card-main,
.ai-metric-card-main {
  gap: 10px;
  flex: 1;
}

.ai-type-card-actions,
.ai-metric-actions {
  gap: 7px;
  flex: 0 0 auto;
}

.ai-grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  color: var(--ai-muted);
  cursor: grab;
  font-size: 17px;
  line-height: 1;
  touch-action: none;
  user-select: none;
}

.ai-grip:active {
  cursor: grabbing;
}

.ai-type-open,
.ai-metric-open {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 44px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ai-text);
  padding: 0;
  justify-content: center;
  text-align: left;
  cursor: pointer;
}

.ai-type-open strong,
.ai-metric-open strong {
  overflow: hidden;
  color: var(--ai-text);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-type-open strong {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: clip;
  white-space: normal;
}

.ai-type-open span {
  margin-top: 4px;
  color: var(--ai-soft-text);
  font-size: 12px;
  font-weight: 800;
}

.ai-icon-button-soft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ai-muted);
  font-size: 17px;
  padding: 0;
  line-height: 1;
}

.ai-icon-button-soft:hover,
.ai-icon-button-soft:focus-visible {
  background: var(--ai-button-soft);
  color: var(--ai-indigo);
}

.ai-soldly-switch {
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.ai-soldly-switch::before {
  position: absolute;
  top: 11px;
  left: 4px;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--ai-switch-off);
  content: "";
  transition: background var(--motion-base) var(--ease-standard);
}

.ai-soldly-switch span {
  position: absolute;
  top: 15px;
  left: 8px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.22);
  transition: transform var(--motion-base) var(--ease-standard);
}

.ai-soldly-switch[data-checked="true"] {
  background: transparent;
}

.ai-soldly-switch[data-checked="true"]::before {
  background: var(--success);
}

.ai-soldly-switch[data-checked="true"] span {
  transform: translateX(18px);
}

.ai-soldly-switch.static {
  pointer-events: none;
}

.ai-soldly-detail {
  margin-top: 10px;
}

.ai-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(320px, 0.92fr);
  gap: 14px;
  align-items: start;
}

.ai-detail-grid-single {
  grid-template-columns: minmax(0, 1fr);
}

.ai-detail-main {
  min-width: 0;
  padding: 16px 18px;
}

.ai-metrics-head {
  margin-bottom: 12px;
}

.ai-metrics-title {
  min-width: 0;
  flex-wrap: wrap;
}

.ai-check-badge::before,
.ai-target-badge::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 900;
}

.ai-check-badge::before {
  content: "✓";
  background: var(--accent);
}

.ai-target-badge::before {
  content: "◎";
  background: var(--accent);
}

.ai-count-pill {
  border-radius: 999px;
  background: color-mix(in srgb, var(--ai-indigo) 14%, var(--ai-panel));
  color: var(--ai-indigo);
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 900;
}

.ai-help-dot::before {
  content: "i";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 2px solid var(--ai-line-strong);
  border-radius: 999px;
  color: var(--ai-muted);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.ai-metric-list {
  display: grid;
  gap: 0;
}

.ai-metric-card {
  min-height: 62px;
  border-width: 0 0 1px;
  border-radius: 0;
  box-shadow: none;
  cursor: grab;
  padding: 10px 4px;
  touch-action: none;
  user-select: none;
}

.ai-metric-card:hover,
.ai-metric-card:focus-visible {
  transform: none;
  box-shadow: none;
}

.ai-metric-card:active {
  cursor: grabbing;
}

.ai-metric-card.dragging {
  opacity: 0.48;
}

.ai-metric-card.drag-over-before {
  box-shadow: inset 0 3px 0 var(--ai-indigo);
}

.ai-metric-card.drag-over-after {
  box-shadow: inset 0 -3px 0 var(--ai-indigo);
}

.ai-list-icon {
  margin-right: 8px;
  color: var(--ai-indigo);
  font-size: 17px;
}

.ai-metric-open {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  flex: 1;
}

.ai-chain-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(100% + 36px);
  min-height: 64px;
  margin: 28px -18px -20px;
  border: 0;
  border-top: 1px solid var(--ai-line);
  border-radius: 0 0 10px 10px;
  background: var(--ai-panel-soft);
  color: var(--ai-text);
  padding: 0 20px;
  text-align: left;
}

.ai-chain-icon::before,
.ai-sparkle-square::before {
  content: "AI";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 10%, var(--ai-panel));
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
}

.ai-chain-row strong {
  flex: 0 0 auto;
  font-size: 17px;
  font-weight: 900;
}

.ai-chain-chevron {
  margin-left: auto;
  color: var(--ai-muted);
}

.ai-detail-side {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.ai-side-accordion {
  display: grid;
  grid-template-columns: 40px auto auto 1fr;
  align-items: center;
  gap: 10px;
  min-height: 70px;
  border: 1px solid var(--ai-line);
  border-radius: 8px;
  background: var(--ai-panel);
  color: var(--ai-text);
  padding: 14px;
  text-align: left;
}

.ai-side-accordion strong,
.ai-additional-card header strong {
  color: var(--ai-label);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.ai-side-accordion span:not(.ai-side-icon, .ai-side-chevron) {
  color: var(--ai-muted);
  font-weight: 900;
}

.ai-side-chevron {
  justify-self: end;
  color: var(--ai-muted);
}

.ai-side-icon::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--ai-muted);
  color: #ffffff;
  font-size: 17px;
  font-weight: 900;
}

.ai-side-icon.crown::before {
  content: "♕";
}

.ai-side-icon.layers::before {
  content: "▱";
}

.ai-additional-card {
  overflow: hidden;
  padding: 0;
}

.ai-additional-card header {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  border-bottom: 1px solid var(--ai-line);
  background: var(--ai-panel-soft);
  padding: 14px 16px;
}

.ai-side-toggle {
  display: grid;
  grid-template-columns: 42px 20px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  border: 0;
  border-bottom: 1px solid var(--ai-line);
  background: var(--ai-panel);
  color: var(--ai-label);
  padding: 0 16px;
  font-size: 14px;
  font-weight: 900;
  text-align: left;
}

.ai-side-toggle:last-child {
  border-bottom: 0;
}

.ai-side-toggle[aria-pressed="false"] {
  color: #6b7280;
}

.ai-side-toggle > .ai-help-dot {
  justify-self: end;
}

.ai-word-card {
  display: grid;
  gap: 14px;
  padding: 18px 16px;
}

.ai-word-card label {
  color: var(--ai-text);
  font-size: 16px;
  font-weight: 900;
}

.ai-word-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 50px;
  gap: 10px;
}

.ai-word-input input {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  background: var(--ai-field-soft);
  color: var(--ai-text);
  padding: 0 14px;
  font-size: 14px;
  font-weight: 800;
}

.ai-word-input input::placeholder,
.ai-soldly-dialog input::placeholder,
.ai-soldly-dialog textarea::placeholder {
  color: var(--ai-muted);
}

.ai-word-input button {
  border: 0;
  border-radius: 8px;
  background: var(--brand);
  color: #ffffff;
  font-size: 26px;
  line-height: 1;
}

.ai-sparkle-square {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ai-indigo) 14%, var(--ai-panel));
}

.ai-insights-button {
  position: fixed;
  right: max(34px, calc(var(--safe-right) + 18px));
  bottom: max(88px, calc(var(--safe-bottom) + 34px));
  z-index: var(--z-floating-action);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  border: 0;
  border-radius: 999px;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #ffffff;
  padding: 0 22px;
  font-size: 16px;
  font-weight: 900;
  box-shadow: none;
}

.ai-placeholder-tab {
  margin-top: 26px;
  padding: 24px;
}

.ai-placeholder-tab p,
.ai-settings-status,
.ai-soldly-empty {
  color: var(--ai-muted);
  font-size: 14px;
  font-weight: 700;
}

.ai-soldly-empty {
  margin: 8px 0 0;
  border: 1px solid color-mix(in srgb, var(--ai-indigo) 22%, var(--ai-line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--ai-indigo) 7%, var(--ai-panel));
  padding: 16px;
  font-weight: 850;
  line-height: 1.45;
  text-align: center;
}

.ai-settings-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.ai-settings-message {
  min-height: 20px;
  margin: 0;
}

.ai-soldly-dialog {
  width: min(92vw, 960px);
  max-height: 92vh;
  height: min(92vh, 860px);
  border: 1px solid var(--ai-line);
  border-radius: 12px;
  background: var(--ai-panel);
  color: var(--ai-text);
  padding: 0;
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.35);
}

.ai-type-dialog {
  width: min(92vw, 640px);
  height: auto;
}

.ai-terms-dialog {
  width: min(92vw, 760px);
  height: min(92vh, 720px);
}

.ai-soldly-dialog::backdrop {
  background: rgba(17, 24, 39, 0.54);
  backdrop-filter: blur(2px);
}

.ai-soldly-dialog form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
}

.ai-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  border-bottom: 1px solid var(--ai-line);
  padding: 0 22px;
}

.ai-dialog-head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
}

.ai-dialog-head button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ai-muted);
  font-size: 22px;
  padding: 0;
  line-height: 1;
}

.ai-dialog-head button:hover {
  background: var(--ai-button-soft);
  color: var(--ai-label);
}

.ai-dialog-body {
  overflow: auto;
  padding: 18px 22px;
}

.ai-modal-top-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 1fr) minmax(150px, 0.65fr);
  gap: 12px;
}

.ai-modal-top-row label,
.ai-dialog-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.ai-modal-top-row label > span,
.ai-dialog-field > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--ai-label);
  font-size: 14px;
  font-weight: 900;
}

.ai-dialog-field {
  margin-top: 16px;
}

.ai-dialog-field > span {
  justify-content: flex-start;
}

.ai-dialog-field b {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--ai-indigo) 10%, var(--ai-panel));
  color: var(--ai-indigo);
  padding: 0 9px;
  font-size: 13px;
  font-weight: 900;
}

.ai-soldly-dialog input,
.ai-soldly-dialog textarea,
.ai-soldly-dialog select,
.ai-soldly-dialog .custom-select-button,
.ai-modal-type-button {
  width: 100%;
  border: 1px solid var(--ai-line-strong);
  border-radius: 10px;
  background: var(--ai-field);
  color: var(--ai-text);
  font-size: 16px;
  font-weight: 800;
}

.ai-soldly-dialog input,
.ai-soldly-dialog select,
.ai-soldly-dialog .custom-select-button,
.ai-modal-type-button {
  min-height: 48px;
  padding: 0 14px;
}

.ai-soldly-dialog .custom-select-button {
  padding-right: 36px;
}

.ai-soldly-dialog .custom-select-button:hover,
.ai-soldly-dialog .custom-select-button:focus-visible,
.ai-soldly-dialog .custom-select.is-open .custom-select-button {
  border-color: color-mix(in srgb, var(--ai-indigo) 50%, var(--ai-line-strong));
  box-shadow: 0 0 0 3px var(--ai-focus);
}

.ai-soldly-dialog .custom-select-menu {
  border-color: var(--ai-line);
  background: var(--ai-panel);
  color: var(--ai-text);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
}

.ai-soldly-dialog .custom-select-option {
  color: var(--ai-text);
}

.ai-soldly-dialog .custom-select-option:hover,
.ai-soldly-dialog .custom-select-option:focus-visible,
.ai-soldly-dialog .custom-select-option.is-active {
  background: color-mix(in srgb, var(--ai-indigo) 14%, var(--ai-panel));
  color: var(--ai-indigo);
}

.ai-soldly-dialog textarea {
  min-height: 78px;
  resize: vertical;
  padding: 12px 14px;
  line-height: 1.45;
}

.ai-modal-type-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
  cursor: default;
  line-height: 1.15;
}

.ai-modal-type-button .ai-js-icon:first-child {
  color: var(--ai-indigo);
}

.ai-modal-score-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  border: 1px solid var(--ai-line-strong);
  border-radius: 10px;
  background: var(--ai-field);
  color: var(--success);
}

.ai-modal-score-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ai-toggle-ui {
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--ai-switch-off);
}

.ai-toggle-ui::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.22);
  transition: transform var(--motion-base) var(--ease-standard);
}

.ai-modal-score-toggle input:checked + .ai-toggle-ui {
  background: var(--success);
}

.ai-modal-score-toggle input:checked + .ai-toggle-ui::after {
  transform: translateX(18px);
}

.ai-options-box {
  overflow: hidden;
  margin-top: 22px;
  border: 1px solid var(--ai-line);
  border-radius: 11px;
  background: var(--ai-panel);
}

.ai-options-box header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  border-bottom: 1px solid var(--ai-line);
  background: var(--ai-panel-soft);
  color: var(--ai-text);
  padding: 12px 16px;
}

.ai-options-box header > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ai-options-box h3,
.ai-options-box p {
  margin: 0;
}

.ai-options-box h3 {
  font-size: 16px;
  font-weight: 900;
}

.ai-options-box p {
  margin-top: 4px;
  color: var(--ai-muted);
  font-size: 13px;
  font-weight: 800;
}

.ai-options-box header button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 6px;
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  border: 1px solid var(--brand);
  background: var(--brand);
  color: #ffffff;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.ai-modal-option-list {
  display: grid;
  gap: 0;
  padding: 10px 12px;
}

.ai-modal-option-row {
  display: grid;
  grid-template-columns: 32px minmax(170px, 1fr) 72px 44px 44px;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid var(--ai-line);
  padding: 8px 0;
}

.ai-modal-option-row:last-child {
  border-bottom: 0;
}

.ai-option-number {
  color: var(--ai-muted);
  font-size: 16px;
  font-weight: 900;
}

.ai-modal-option-row .ai-modal-option-label,
.ai-modal-option-row .ai-modal-score,
.ai-modal-option-row .custom-select-button {
  min-height: 48px;
  font-size: 15px;
}

.ai-modal-option-row .custom-select-button {
  justify-content: center;
  padding-left: 10px;
  padding-right: 24px;
}

.ai-modal-option-row .custom-select-menu {
  min-width: 92px;
}

.ai-modal-option-row-muted .ai-modal-score,
.ai-modal-option-row-muted .custom-select-button {
  color: #6b7280;
}

.ai-modal-option-row-muted .ai-option-number {
  color: #b4bcc8;
}

.ai-color-swatch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ai-line-strong);
  border-radius: 10px;
  background: var(--ai-field);
  padding: 0;
  cursor: pointer;
}

.ai-color-swatch[aria-expanded="true"],
.ai-color-swatch:hover,
.ai-color-swatch:focus-visible {
  border-color: color-mix(in srgb, var(--ai-indigo) 50%, var(--ai-line-strong));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ai-indigo) 13%, transparent);
}

.ai-color-swatch span {
  display: block;
  width: 28px;
  height: 28px;
  border: 2px solid var(--ai-swatch-border);
  border-radius: 999px;
}

.ai-color-menu {
  grid-column: 2 / -1;
  display: grid;
  grid-template-columns: repeat(9, 28px);
  gap: 8px;
  width: max-content;
  max-width: 100%;
  margin: 4px 0 2px;
  border: 1px solid var(--ai-line);
  border-radius: 12px;
  background: var(--ai-panel);
  padding: 10px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.ai-color-menu[hidden] {
  display: none;
}

.ai-color-choice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 2px solid var(--ai-line-strong);
  border-radius: 7px;
  background: var(--ai-field);
  padding: 0;
  cursor: pointer;
}

.ai-color-choice span {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 5px;
}

.ai-color-choice.active {
  border-color: var(--ai-text);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ai-indigo) 22%, transparent);
}

.ai-color-choice:hover,
.ai-color-choice:focus-visible {
  transform: translateY(-1px);
  border-color: var(--ai-indigo);
}

.ai-color-choice:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ai-indigo) 20%, transparent);
  outline-offset: 2px;
}

.ai-modal-option-criteria {
  grid-column: 2 / -1;
  min-height: 52px;
  border: 0;
  background: var(--ai-field-soft);
  color: var(--ai-label);
  font-size: 15px;
  font-weight: 700;
}

.ai-dialog-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: 12px;
  border-top: 1px solid var(--ai-line);
  background: var(--ai-panel);
  padding: 14px 22px;
}

.ai-dialog-cancel,
.ai-dialog-submit {
  min-height: 48px;
  border-radius: 10px;
  font-size: 16px;
}

.ai-dialog-cancel {
  border-color: var(--ai-line-strong);
  background: var(--ai-panel);
  color: var(--ai-label);
}

.ai-dialog-cancel:hover {
  background: var(--ai-button-soft);
}

.ai-terms-intro,
.ai-terms-help,
.ai-terms-preview-caption {
  margin: 0;
  color: var(--ai-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.ai-terms-intro code {
  border-radius: 5px;
  background: var(--ai-field-soft);
  color: var(--ai-label);
  padding: 1px 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.92em;
}

.ai-terms-field {
  margin-top: 16px;
}

.ai-terms-dialog .ai-terms-field textarea {
  min-height: 210px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
}

.ai-terms-help {
  margin-top: 8px;
}

.ai-terms-preview {
  margin-top: 20px;
  border-top: 1px solid var(--ai-line);
  padding-top: 18px;
}

.ai-terms-preview-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ai-terms-preview-heading .section-label {
  margin: 0 0 3px;
}

.ai-terms-preview h3 {
  margin: 0;
  color: var(--ai-text);
  font-size: 16px;
  font-weight: 900;
}

.ai-terms-preview-state {
  flex: 0 0 auto;
  max-width: 58%;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ai-indigo) 11%, var(--ai-panel));
  color: var(--ai-indigo);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-terms-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin-top: 12px;
  border: 1px solid var(--ai-line);
  border-radius: 10px;
  background: var(--ai-line);
}

.ai-terms-preview-item {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  min-height: 82px;
  background: var(--ai-field);
  padding: 11px 12px;
}

.ai-terms-preview-item > span,
.ai-terms-preview-item small {
  overflow: hidden;
  color: var(--ai-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-terms-preview-item strong {
  overflow: hidden;
  color: var(--ai-text);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-terms-preview-caption {
  margin-top: 10px;
}

@media (max-width: 1100px) {
  .ai-soldly-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  #ai-settings-detail-hero {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
  }

  #ai-settings-detail-hero .ai-hero-title {
    min-height: 44px;
  }

  #ai-settings-detail-hero .ai-hero-actions {
    grid-column: 2;
  }

  .ai-hero-actions {
    justify-content: flex-start;
    width: 100%;
  }

  #ai-settings-detail-hero .ai-hero-settings {
    width: 100%;
  }

  .ai-detail-grid {
    grid-template-columns: 1fr;
  }

  .ai-detail-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-side-accordion,
  .ai-additional-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .custom-select-option {
    min-height: 44px;
  }

  .page-shell:has(.ai-settings-page:not(.hidden)) {
    width: min(100% - 20px, 1320px);
  }

  .ai-settings-page {
    gap: 14px;
  }

  .ai-terms-dialog {
    width: min(100vw - 20px, 760px);
    height: min(94vh, 720px);
  }

  .ai-terms-dialog .ai-terms-field textarea {
    min-height: 170px;
  }

  .ai-terms-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ai-soldly-tabs {
    gap: 24px;
    overflow-x: auto;
    padding-bottom: 1px;
    scroll-snap-type: x proximity;
    white-space: nowrap;
  }

  .ai-soldly-tabs button {
    flex: 0 0 auto;
    scroll-snap-align: start;
    font-size: 14px;
  }

  .ai-soldly-hero {
    margin-top: 10px;
    padding: 12px 14px;
  }

  .ai-hero-title {
    align-items: flex-start;
  }

  .ai-hero-title h1 {
    font-size: 18px;
  }

  .ai-hero-title p {
    font-size: 13px;
  }

  #ai-detail-description {
    display: none;
  }

  .ai-hero-actions,
  .ai-create-actions,
  .ai-metrics-head,
  .ai-metrics-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .ai-list-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
  }

  .ai-list-title {
    flex-wrap: wrap;
    gap: 6px 8px;
  }

  .ai-create-actions,
  .ai-white-button,
  .ai-quiet-button {
    width: 100%;
  }

  .ai-gradient-button,
  .ai-white-button {
    min-height: 44px;
  }

  .ai-list-head > .ai-gradient-button {
    width: auto;
    justify-self: end;
    padding-inline: 12px;
  }

  .ai-list-title .ai-quiet-button {
    width: auto;
    min-height: 44px;
    padding-inline: 0;
  }

  .ai-icon-button-soft {
    width: 44px;
    height: 44px;
  }

  .ai-soldly-list-panel,
  .ai-detail-main,
  .ai-word-card {
    padding: 14px;
  }

  .ai-type-card,
  .ai-metric-card {
    align-items: flex-start;
  }

  .ai-type-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ai-type-card-actions {
    align-self: center;
  }

  .ai-type-open strong,
  .ai-metric-open strong {
    display: block;
    max-width: 100%;
    overflow: visible;
    overflow-wrap: break-word;
    text-overflow: clip;
    white-space: normal;
  }

  .ai-metric-card {
    gap: 8px;
    padding-block: 9px;
  }

  .ai-metric-card-main {
    flex-wrap: nowrap;
  }

  .ai-metric-actions {
    align-self: center;
  }

  .ai-chain-row {
    width: calc(100% + 32px);
    margin: 24px -16px -16px;
  }

  .ai-detail-side {
    grid-template-columns: 1fr;
  }

  .ai-side-toggle {
    grid-template-columns: 42px 20px minmax(0, 1fr) 20px;
  }

  .ai-insights-button {
    right: max(16px, calc(var(--safe-right) + 12px));
    bottom: max(22px, calc(var(--safe-bottom) + 16px));
    min-height: 48px;
    padding: 0 18px;
    font-size: 14px;
  }

  .ai-soldly-dialog {
    width: calc(100vw - 20px);
    height: min(92vh, 820px);
    border-radius: 14px;
  }

  .ai-dialog-head {
    min-height: 62px;
    padding: 0 16px;
  }

  .ai-dialog-head h2 {
    font-size: 20px;
  }

  .ai-dialog-body {
    padding: 16px;
  }

  .ai-modal-top-row {
    grid-template-columns: 1fr;
  }

  .ai-modal-option-row {
    grid-template-columns: 26px minmax(0, 1fr) 60px 44px 44px;
    gap: 6px;
  }

  .ai-modal-option-criteria {
    grid-column: 1 / -1;
  }

  .ai-color-menu {
    grid-column: 1 / -1;
    grid-template-columns: repeat(7, 28px);
  }

  .ai-dialog-footer {
    grid-template-columns: 1fr;
    padding: 14px 16px;
  }
}

@media (max-width: 460px) {
  .ai-type-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .ai-type-card-actions {
    justify-content: flex-end;
    width: auto;
  }

  .ai-word-input {
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  .ai-modal-option-row {
    grid-template-columns: 22px minmax(0, 1fr) 56px 44px 44px;
    gap: 6px;
  }

  .ai-color-menu {
    grid-template-columns: repeat(6, 28px);
  }

  .ai-soldly-dialog input,
  .ai-soldly-dialog select,
  .ai-modal-type-button {
    min-height: 46px;
    padding-inline: 12px;
    font-size: 14px;
  }

  .ai-soldly-dialog textarea {
    font-size: 14px;
  }
}

.call-type-row {
  display: grid;
  grid-template-columns: minmax(220px, 0.85fr) minmax(260px, 2fr) 66px;
  align-items: center;
  gap: 16px;
}

.call-type-label {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  align-items: center;
  column-gap: 10px;
}

.call-type-marker {
  width: 10px;
  height: 10px;
  grid-row: 1 / span 2;
  border-radius: 3px;
  background: var(--chart-color);
}

.call-type-label strong {
  min-width: 0;
  font-size: 13px;
  line-height: 1.3;
}

.call-type-label small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.call-type-track {
  height: 10px;
  border-radius: 999px;
  background: var(--panel-soft);
  overflow: hidden;
}

.call-type-track span {
  display: block;
  min-width: 3px;
  height: 100%;
  border-radius: inherit;
  background: var(--chart-color);
  transform-origin: left center;
  animation: ui-bar-fill 360ms var(--ease-emphasized-out) both;
}

.call-type-percentage {
  color: var(--ink);
  font-family:
    "Montserrat Alternates", Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  text-align: right;
}

.monitor-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  margin-top: 14px;
}

.monitor-toolbar input {
  min-width: 0;
  flex: 1 1 240px;
  min-height: 44px;
  border: 1px solid var(--field-border);
  border-radius: 7px;
  background: var(--field);
  color: var(--ink);
  padding: 0 12px;
  font-size: 13px;
  font-weight: 800;
}

.monitor-page-size,
.monitor-filter-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border: 1px solid var(--field-border);
  border-radius: 7px;
  background: var(--field);
  color: var(--muted);
  padding: 0 10px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.monitor-page-size .custom-select {
  min-width: 70px;
}

.monitor-filter-select .custom-select {
  min-width: 138px;
}

.monitor-filter-select .custom-select-menu {
  max-width: min(520px, calc(100vw - 32px));
}

.monitor-toolbar .monitor-page-size .custom-select-button,
.monitor-toolbar .monitor-filter-select .custom-select-button {
  min-height: 44px;
}

.monitor-toolbar > .secondary-button,
.monitor-toolbar > .primary-button,
.monitor-pagination .secondary-button {
  min-height: 44px;
}

.monitor-toolbar input:focus,
.monitor-page-size:focus-within,
.monitor-filter-select:focus-within {
  border-color: var(--accent);
  outline: 0;
  box-shadow: var(--focus-ring);
}

.monitor-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.monitor-call-link {
  display: grid;
  grid-template-columns:
    minmax(200px, 1fr)
    minmax(160px, 0.64fr)
    minmax(190px, 0.82fr)
    minmax(82px, 0.3fr)
    22px;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow var(--motion-base) var(--ease-standard),
    transform var(--motion-press) var(--ease-emphasized-out);
}

.monitor-call-link:hover,
.monitor-call-link:focus-visible {
  border-color: var(--accent);
  background-color: var(--panel-soft);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 10%, transparent);
  outline: 0;
}

.monitor-call-link.is-problem {
  border-color: color-mix(in srgb, var(--warning) 52%, var(--line));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--warning) 11%, transparent), transparent 42%),
    var(--panel);
}

.monitor-call-identity {
  min-width: 0;
}

.monitor-call-phone {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.monitor-call-phone .call-direction-icon {
  width: 32px;
  height: 32px;
}

.monitor-call-phone strong {
  display: block;
  overflow: hidden;
  font-family:
    "Montserrat Alternates", Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitor-call-identity > span {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin-top: 6px;
  border: 1px solid color-mix(in srgb, var(--call-type-color, var(--line-strong)) 55%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--call-type-color, var(--panel-soft)) 12%, var(--panel-soft));
  color: color-mix(in srgb, var(--call-type-color, var(--muted)) 54%, var(--ink));
  padding: 4px 8px;
  overflow: hidden;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body[data-theme="dark"] .monitor-call-identity > span {
  border-color: color-mix(in srgb, var(--call-type-color, var(--line-strong)) 46%, var(--line-strong));
  background: color-mix(in srgb, var(--call-type-color, var(--panel-soft)) 18%, var(--panel-soft));
  color: color-mix(in srgb, var(--call-type-color, var(--ink)) 42%, var(--ink));
}

.monitor-call-alerts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
  margin-top: 6px;
}

.monitor-call-alerts[hidden] {
  display: none;
}

.monitor-alert-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--warning) 58%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--warning) 13%, var(--panel-soft));
  color: var(--warning-readable);
  padding: 4px 8px;
  overflow: hidden;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.monitor-alert-badge[data-tone="danger"] {
  border-color: color-mix(in srgb, var(--danger) 60%, var(--line));
  background: color-mix(in srgb, var(--danger) 12%, var(--panel-soft));
  color: var(--danger-readable);
}

.monitor-alert-badge[data-tone="info"] {
  border-color: color-mix(in srgb, var(--call-outgoing) 60%, var(--line));
  background: color-mix(in srgb, var(--call-outgoing) 12%, var(--panel-soft));
  color: var(--call-outgoing-readable);
}

.monitor-alert-badge[data-tone="success"] {
  border-color: color-mix(in srgb, var(--success) 58%, var(--line));
  background: color-mix(in srgb, var(--success) 11%, var(--panel-soft));
  color: var(--success-readable);
}

.monitor-call-fact {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.monitor-call-fact span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.monitor-call-fact strong {
  overflow: hidden;
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
}

.monitor-call-arrow {
  width: 22px;
  height: 22px;
  color: var(--muted);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition:
    color 160ms ease,
    transform 160ms ease;
}

.monitor-call-link:hover .monitor-call-arrow,
.monitor-call-link:focus-visible .monitor-call-arrow {
  color: var(--accent);
  transform: translateX(3px);
}

.monitor-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.monitor-page-numbers {
  display: flex;
  align-items: center;
  gap: 6px;
}

.monitor-page-button {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-soft);
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.monitor-page-button:hover,
.monitor-page-button:focus-visible,
.monitor-page-button.active {
  border-color: var(--brand);
  background: var(--brand);
  color: #ffffff;
}

.monitor-page-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 20%, transparent);
  outline-offset: 2px;
}

.monitor-page-button:disabled {
  cursor: default;
  opacity: 1;
}

.monitor-page-ellipsis {
  color: var(--muted);
  padding: 0 3px;
  font-weight: 900;
}

.monitor-call-row {
  padding: 12px 14px;
}

.monitor-call-top,
.monitor-call-main,
.monitor-audio {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.monitor-call-top {
  align-items: flex-start;
}

.monitor-call-top strong {
  display: block;
  font-size: 21px;
}

.monitor-call-top span:not(.status) {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.monitor-call-main {
  margin-top: 14px;
  align-items: stretch;
}

.monitor-call-main > div:first-child {
  min-width: 260px;
  color: var(--muted);
  font-size: 13px;
}

.monitor-call-main p {
  margin: 0 0 7px;
}

.monitor-ai {
  flex: 1;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%),
    var(--panel-soft);
}

.monitor-ai strong {
  display: block;
  margin-bottom: 8px;
}

.monitor-ai p {
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.45;
}

.monitor-ai div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.monitor-ai div span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 800;
}

.monitor-audio {
  align-items: center;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.monitor-audio audio {
  width: min(520px, 100%);
  height: 38px;
}

.monitor-audio span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.analytics-hero {
  align-items: center;
}

.analytics-period {
  justify-self: end;
  min-height: 44px;
  padding-inline: 14px;
}

.analytics-period .custom-select-button {
  min-height: 44px;
}

.call-stats-hero {
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.56fr);
  align-items: center;
}

.call-stats-filter {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) repeat(2, minmax(132px, 0.72fr)) auto;
  gap: 8px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.call-stats-filter[data-custom="false"] {
  grid-template-columns: minmax(150px, 1fr) auto;
}

.call-stats-filter label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
}

.call-stats-filter input,
.call-stats-filter .custom-select-button {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background: var(--field);
  color: var(--ink);
  padding: 0 11px;
  font-size: 13px;
  font-weight: 850;
  outline: 0;
}

.call-stats-filter input:focus,
.call-stats-filter .custom-select-button:focus-visible,
.call-stats-filter .custom-select.is-open .custom-select-button {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.call-stats-filter[data-custom="false"] label:has(input) {
  display: none;
}

.call-stats-filter button {
  min-height: 44px;
  justify-content: center;
}

.call-stats-panel {
  overflow: hidden;
}

.call-stats-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.call-stats-summary > div {
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 88px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 8px;
  background: var(--panel-soft);
}

.call-stats-interactive {
  cursor: pointer;
  transition:
    border-color var(--motion-panel) var(--ease-standard),
    box-shadow var(--motion-panel) var(--ease-standard),
    background-color var(--motion-panel) var(--ease-standard),
    transform var(--motion-press) var(--ease-emphasized-out);
}

.call-stats-interactive:hover,
.call-stats-interactive:focus-visible,
.call-stats-is-selected {
  border-color: color-mix(in srgb, var(--accent) 74%, var(--line));
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

.call-stats-summary span,
.call-stats-card-head .section-label,
.call-stats-table th,
.call-stats-list-row span {
  color: var(--muted);
}

.call-stats-summary span {
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.call-stats-summary strong {
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
}

.call-stats-summary small {
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: normal;
}

.call-stats-focus {
  display: grid;
  grid-template-columns: minmax(210px, 0.46fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 8px;
  background: var(--panel-soft);
}

.call-stats-focus span,
.call-stats-focus em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.call-stats-focus strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 950;
  line-height: 1.2;
}

.call-stats-focus small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.call-stats-focus-metrics {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.call-stats-focus-chip {
  display: grid;
  gap: 4px;
  min-width: 88px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 70%, transparent);
}

.call-stats-focus-chip b {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.1;
}

.call-stats-focus-chip[data-tone="warning"] {
  border-color: color-mix(in srgb, var(--warning) 58%, var(--line));
  background: color-mix(in srgb, var(--warning) 12%, var(--panel-soft));
}

.call-stats-focus-chip[data-tone="good"] {
  border-color: color-mix(in srgb, var(--success) 50%, var(--line));
  background: color-mix(in srgb, var(--success) 10%, var(--panel-soft));
}

.call-stats-focus-chip[data-tone="info"] {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--panel-soft));
}

.call-stats-grid,
.call-stats-bottom-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (min-width: 1180px) {
  .call-stats-summary {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .monitor-analytics-summary {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .call-stats-summary strong {
    font-size: 24px;
  }

  .monitor-analytics-summary strong {
    font-size: 18px;
  }

  .call-stats-summary > div {
    min-height: 92px;
    padding-inline: 11px;
  }

  .monitor-analytics-summary > div {
    min-height: 92px;
    padding-inline: 11px;
  }
}

.call-stats-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 3px 8px rgba(31, 48, 58, 0.06);
  padding: 16px;
}

.call-stats-card-wide {
  grid-column: 1 / -1;
}

.call-stats-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.call-stats-card-head h2 {
  margin: 0;
  font-family:
    "Montserrat Alternates", Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.15;
}

.call-stats-chart-wrap {
  position: relative;
  min-height: 260px;
}

.call-stats-card:not(.call-stats-card-wide) .call-stats-chart-wrap {
  min-height: 220px;
}

.call-stats-heatmap {
  display: grid;
  gap: 7px;
  overflow-x: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 42%),
    var(--panel-soft);
  scrollbar-gutter: stable;
}

.call-stats-heatmap-hours,
.call-stats-heatmap-row {
  display: grid;
  grid-template-columns: 34px repeat(24, 44px);
  gap: 3px;
  min-width: max-content;
  align-items: center;
}

.call-stats-heatmap-hours b,
.call-stats-heatmap-row > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.call-stats-heatmap-row > span {
  text-align: left;
}

.call-stats-heatmap-cell {
  display: block;
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--accent) calc(18% + (var(--heatmap-intensity) * 52%)), var(--line));
  border-radius: 6px;
  background: color-mix(
    in srgb,
    var(--accent) calc(10% + (var(--heatmap-intensity) * 76%)),
    var(--panel)
  );
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent);
  appearance: none;
  padding: 0;
  cursor: pointer;
  opacity: calc(0.42 + (var(--heatmap-intensity) * 0.58));
  transition:
    transform var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    opacity var(--motion-fast) var(--ease-standard);
}

.call-stats-heatmap-cell:hover,
.call-stats-heatmap-cell:focus-visible,
.call-stats-heatmap-cell.call-stats-is-selected {
  position: relative;
  z-index: var(--z-active);
  border-color: var(--accent);
  outline: none;
  opacity: 1;
  transform: scale(1.06);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent),
    0 8px 18px color-mix(in srgb, var(--accent) 22%, transparent);
}

body[data-theme="dark"] .call-stats-heatmap-cell {
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #fff 8%, transparent),
    0 0 16px color-mix(in srgb, var(--accent) calc(var(--heatmap-intensity) * 20%), transparent);
}

body[data-theme="dark"] .call-stats-heatmap-cell:hover,
body[data-theme="dark"] .call-stats-heatmap-cell:focus-visible,
body[data-theme="dark"] .call-stats-heatmap-cell.call-stats-is-selected {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent),
    0 10px 22px color-mix(in srgb, var(--accent) 28%, transparent);
}

.call-stats-heatmap-tooltip {
  position: fixed;
  z-index: var(--z-tooltip);
  max-width: min(340px, calc(100vw - 20px));
  max-height: min(240px, calc(100vh - 20px));
  padding: 9px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
  color: var(--ink);
  font-size: 11px;
  font-weight: 850;
  line-height: 1.35;
  overflow: auto;
  overflow-wrap: anywhere;
  pointer-events: none;
  white-space: pre-line;
  transform-origin: center bottom;
}

.call-stats-heatmap-tooltip[hidden] {
  display: none;
}

.call-stats-heatmap-tooltip.is-visible {
  animation: ui-popover-in 150ms var(--ease-emphasized-out) both;
}

.call-stats-table-card {
  padding: 0;
  overflow: hidden;
}

.call-stats-table-card .call-stats-card-head {
  margin: 0;
  padding: 18px;
  border-bottom: 1px solid var(--line);
}

.call-stats-table-wrap {
  overflow-x: auto;
  scrollbar-gutter: stable;
}

.call-stats-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
}

.call-stats-table th,
.call-stats-table td {
  border-bottom: 1px solid var(--line);
  padding: 13px 14px;
  text-align: left;
  vertical-align: middle;
}

.call-stats-table th {
  background: var(--panel-soft);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.call-stats-table td {
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.call-stats-table td:first-child {
  min-width: 260px;
}

.call-stats-table td strong,
.call-stats-table td span {
  display: block;
}

.call-stats-table td span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.call-stats-table tbody tr:last-child td {
  border-bottom: 0;
}

.call-stats-table tbody tr.call-stats-interactive:hover td,
.call-stats-table tbody tr.call-stats-is-selected td,
.call-stats-table tbody tr.call-stats-interactive:focus-visible td {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.call-stats-empty-cell {
  background: var(--state-info-bg) !important;
  color: var(--muted) !important;
  font-weight: 850 !important;
  line-height: 1.45 !important;
  padding: 18px !important;
  text-align: center !important;
}

.call-stats-list {
  display: grid;
  gap: 10px;
}

.call-stats-list-row {
  --row-color: var(--accent);
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 68px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
}

.call-stats-list-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--bar-width, 0%);
  pointer-events: none;
  background: color-mix(in srgb, var(--row-color) 14%, transparent);
  transform-origin: left center;
  animation: ui-bar-fill 360ms var(--ease-emphasized-out) both;
}

.call-stats-list-row > * {
  position: relative;
  z-index: var(--z-raised);
}

.call-stats-list-row strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.call-stats-list-row span {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.call-stats-list-row b {
  color: var(--row-color);
  font-size: 21px;
  font-weight: 950;
}

.call-stats-list-row[data-tone="warning"] {
  --row-color: var(--warning);
}

.call-stats-list-row[data-tone="good"] {
  --row-color: var(--success);
}

.call-stats-list-row[data-tone="info"] {
  --row-color: var(--accent);
}

body[data-theme="dark"] .call-stats-card,
body[data-theme="dark"] .call-stats-summary > div,
body[data-theme="dark"] .call-stats-list-row {
  box-shadow: none;
}

@media (max-width: 1100px) {
  .call-stats-hero {
    grid-template-columns: 1fr;
  }

  .call-stats-filter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .call-stats-filter button {
    grid-column: 1 / -1;
  }

  .call-stats-filter[data-custom="false"] {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .call-stats-filter[data-custom="false"] button {
    grid-column: auto;
  }

  .call-stats-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .call-stats-focus {
    grid-template-columns: 1fr;
  }

  .call-stats-focus-metrics {
    justify-content: flex-start;
  }

  .call-stats-grid,
  .call-stats-bottom-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .call-stats-filter {
    grid-template-columns: 1fr;
  }

  .call-stats-filter[data-custom="false"] {
    grid-template-columns: minmax(0, 1fr) minmax(104px, 0.5fr);
  }

  .call-stats-filter[data-custom="false"] label {
    grid-column: 1;
  }

  .call-stats-filter[data-custom="false"] button {
    grid-column: 2;
  }

  .call-stats-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .call-stats-summary > div {
    min-height: 86px;
    padding: 11px;
  }

  .call-stats-summary span {
    font-size: 10px;
    line-height: 1.25;
  }

  .call-stats-summary strong {
    font-size: 21px;
    line-height: 1.05;
  }

  .call-stats-summary small {
    font-size: 10px;
    line-height: 1.3;
  }

  .call-stats-focus {
    gap: 10px;
    padding: 12px;
  }

  .call-stats-focus-metrics {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    justify-content: flex-start;
    margin-inline: -2px;
    overflow-x: auto;
    padding: 2px 2px 4px;
    scrollbar-width: none;
  }

  .call-stats-focus-metrics::-webkit-scrollbar {
    display: none;
  }

  .call-stats-focus-chip {
    flex: 0 0 108px;
    min-width: 0;
    padding: 7px 8px;
  }

  .call-stats-focus-chip b {
    font-size: 13px;
  }

  .call-stats-card {
    padding: 14px;
  }

  .call-stats-chart-wrap,
  .call-stats-card:not(.call-stats-card-wide) .call-stats-chart-wrap {
    min-height: 210px;
  }
}

.detail-back-link {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 8px;
  min-height: 44px;
  margin-left: -10px;
  border-radius: 8px;
  color: var(--muted);
  padding: 0 10px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
}

.detail-back-link:hover,
.detail-back-link:focus-visible {
  color: var(--accent);
}

.detail-back-link span {
  font-size: 20px;
  line-height: 1;
}

.call-detail-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px;
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--brand) 10%, transparent), transparent 48%),
    var(--panel);
}

.call-detail-hero h1 {
  margin: 0;
  font-family:
    "Montserrat Alternates", Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 38px;
  line-height: 1.08;
}

.call-detail-hero p:not(.section-label) {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.call-detail-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

.call-detail-badges .status:first-child {
  border-color: color-mix(in srgb, var(--call-type-color, var(--line-strong)) 60%, var(--line));
  background: color-mix(in srgb, var(--call-type-color, var(--panel-soft)) 13%, var(--panel-soft));
  color: color-mix(in srgb, var(--call-type-color, var(--ink)) 54%, var(--ink));
}

.call-detail-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
}

.call-detail-facts > div {
  display: grid;
  align-content: center;
  gap: 8px;
  min-height: 84px;
  padding: 14px 18px;
  border-right: 1px solid var(--line);
}

.call-detail-facts > div:last-child {
  border-right: 0;
}

.call-detail-facts span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.call-detail-facts strong {
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.35;
}

.call-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
  gap: 16px;
  align-items: start;
}

.call-detail-grid > .detail-panel:only-child {
  grid-column: 1 / -1;
}

.detail-panel {
  min-width: 0;
  padding: 18px;
}

.call-ai-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.call-detail-grid.is-peer-height-locked .call-ai-panel {
  height: var(--detail-quality-height);
}

.detail-summary {
  margin: 14px 0 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
}

.detail-analysis-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 14px 0 0;
}

.detail-analysis-group {
  --detail-color: var(--line-strong);
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--detail-color) 40%, var(--line));
  border-radius: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--detail-color) 12%, transparent), transparent 58%),
    color-mix(in srgb, var(--panel-soft) 92%, var(--panel));
}

.detail-analysis-group[data-tone="action"] {
  --detail-color: var(--call-outgoing);
}

.detail-analysis-group[data-tone="risk"] {
  --detail-color: var(--warning);
}

.detail-analysis-group[data-tone="context"] {
  --detail-color: var(--return);
}

.detail-analysis-group[data-tone="trip"] {
  --detail-color: var(--success);
}

.detail-analysis-group[data-tone="meta"] {
  --detail-color: var(--muted);
}

.detail-analysis-group > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.detail-analysis-group h3 {
  margin: 0;
  color: var(--ink);
  font-family:
    "Montserrat Alternates", Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.2;
}

.detail-analysis-group header p {
  max-width: 58%;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  text-align: right;
}

.detail-analysis-group-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.detail-analysis-item,
.detail-technical > div {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.detail-analysis-item {
  --item-color: var(--line-strong);
  border-color: color-mix(in srgb, var(--item-color) 38%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--item-color) 9%, transparent), transparent 62%),
    var(--panel-soft);
}

.detail-analysis-item[data-tone="accent"] {
  --item-color: var(--accent);
}

.detail-analysis-item[data-tone="info"] {
  --item-color: var(--call-outgoing);
}

.detail-analysis-item[data-tone="success"] {
  --item-color: var(--success);
}

.detail-analysis-item[data-tone="warning"] {
  --item-color: var(--warning);
}

.detail-analysis-item[data-tone="danger"] {
  --item-color: var(--danger);
}

.detail-analysis-item[data-tone="neutral"] {
  --item-color: var(--line-strong);
}

.detail-analysis-wide {
  grid-column: 1 / -1;
}

.detail-analysis-item > span,
.detail-technical dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.detail-analysis-item > strong,
.detail-technical dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.4;
}

.detail-analysis-item[data-tone="success"] > strong {
  color: color-mix(in srgb, var(--success) 72%, var(--ink));
}

.detail-analysis-item[data-tone="warning"] > strong {
  color: color-mix(in srgb, var(--warning) 78%, var(--ink));
}

.detail-analysis-item[data-tone="danger"] > strong {
  color: color-mix(in srgb, var(--danger) 76%, var(--ink));
}

.detail-analysis-item[data-tone="info"] > strong,
.detail-analysis-item[data-tone="accent"] > strong {
  color: color-mix(in srgb, var(--item-color) 54%, var(--ink));
}

.call-quality-panel {
  display: grid;
  align-content: start;
}

.quality-score {
  --quality-tone: var(--accent);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 78px;
  min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--quality-tone) 42%, var(--line));
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--quality-tone) 18%, transparent), transparent 68%),
    color-mix(in srgb, var(--quality-tone) 8%, var(--panel-soft));
  color: color-mix(in srgb, var(--quality-tone) 78%, var(--ink));
  padding: 0 14px;
  box-shadow: 0 3px 8px color-mix(in srgb, var(--quality-tone) 12%, transparent);
  font-family:
    "Montserrat Alternates", Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.quality-score.quality-good {
  --quality-tone: var(--success);
}

.quality-score.quality-warning {
  --quality-tone: var(--warning);
}

.quality-score.quality-bad {
  --quality-tone: var(--danger);
}

.quality-score.quality-empty {
  --quality-tone: var(--muted);
}

.quality-good:not(.quality-score) {
  background: color-mix(in srgb, var(--success) 18%, var(--panel-soft));
  color: color-mix(in srgb, var(--success) 72%, var(--ink));
}

.quality-warning:not(.quality-score) {
  background: color-mix(in srgb, var(--warning) 22%, var(--panel-soft));
  color: color-mix(in srgb, var(--warning) 75%, var(--ink));
}

.quality-bad:not(.quality-score) {
  background: color-mix(in srgb, var(--danger) 16%, var(--panel-soft));
  color: color-mix(in srgb, var(--danger) 76%, var(--ink));
}

.quality-empty:not(.quality-score) {
  background: var(--panel-soft);
  color: var(--muted);
}

.quality-summary {
  margin: 12px 0 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.5;
}

.quality-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.quality-context-item {
  display: grid;
  gap: 5px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 72%),
    var(--panel-soft);
}

.quality-context-wide {
  grid-column: 1 / -1;
}

.quality-context-item span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.quality-context-item strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}

.quality-context-score {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    var(--panel-soft);
}

.quality-context-score strong {
  justify-self: start;
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 13%, var(--panel));
  color: color-mix(in srgb, var(--accent) 76%, var(--ink));
  padding: 6px 10px;
  font-family:
    "Montserrat Alternates", Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
}

.quality-criteria {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  margin-top: 14px;
}

.quality-criteria:empty,
.quality-notes:empty {
  display: none;
  margin-top: 0;
}

.quality-metric-group {
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 68%),
    var(--panel);
}

.quality-group-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 2px 7px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

.quality-group-header > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.quality-group-header strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.2;
}

.quality-group-header small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.quality-group-list {
  display: grid;
  gap: 8px;
}

.quality-group-score {
  --metric-color: var(--accent);
  min-width: 58px;
}

.quality-item {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.quality-item > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.quality-item strong {
  font-size: 12px;
}

.quality-item span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 6px;
  background: var(--panel);
  font-size: 12px;
  font-weight: 900;
}

.quality-item p {
  margin: 0;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.quality-item small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.quality-improvement {
  color: var(--accent) !important;
}

.quality-metric-item {
  --metric-color: var(--accent);
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--metric-color) 38%, var(--line));
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--metric-color) 10%, transparent), transparent 68%),
    var(--panel-soft);
}

.quality-metric-header {
  align-items: flex-start !important;
}

.quality-metric-title {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  column-gap: 9px;
  row-gap: 4px;
  min-width: 0;
}

.quality-metric-swatch {
  grid-row: 1 / span 2;
  width: 10px;
  height: 10px;
  min-height: 10px !important;
  margin-top: 4px;
  padding: 0 !important;
  border-radius: 999px;
  background: var(--metric-color) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--metric-color) 18%, transparent);
}

.quality-metric-title strong {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.25;
}

.quality-metric-option {
  grid-column: 2;
  color: color-mix(in srgb, var(--muted) 84%, var(--ink)) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

body[data-theme="dark"] .quality-metric-option {
  color: color-mix(in srgb, var(--muted) 72%, var(--ink)) !important;
}

.quality-score-pill,
.quality-item .quality-score-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 52px;
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--metric-color) 34%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--metric-color) 14%, var(--panel)) !important;
  color: color-mix(in srgb, var(--metric-color) 76%, var(--ink)) !important;
  padding: 6px 10px;
  box-shadow: 0 3px 8px color-mix(in srgb, var(--metric-color) 10%, transparent);
  font-family:
    "Montserrat Alternates", Montserrat, "Segoe UI", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.quality-metric-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 0 0 auto;
}

.quality-feedback-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-width: 32px;
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--metric-color) 24%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--metric-color) 8%, var(--panel));
  color: color-mix(in srgb, var(--metric-color) 70%, var(--ink));
  padding: 0;
  transition:
    border-color var(--motion-base) var(--ease-standard),
    background var(--motion-base) var(--ease-standard),
    color var(--motion-base) var(--ease-standard),
    transform var(--motion-press) var(--ease-emphasized-out);
}

.quality-feedback-button .ai-svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.5;
}

.quality-feedback-button:hover,
.quality-feedback-button:focus-visible,
.quality-metric-item.has-feedback .quality-feedback-button {
  border-color: color-mix(in srgb, var(--metric-color) 48%, var(--line));
  background: color-mix(in srgb, var(--metric-color) 15%, var(--panel));
  color: color-mix(in srgb, var(--metric-color) 82%, var(--ink));
  outline: 0;
}

.quality-feedback-button:hover,
.quality-feedback-button:focus-visible {
  transform: translateY(-1px);
}

.quality-metric-item p {
  padding-left: 21px;
}

.quality-metric-item .quality-improvement {
  padding-left: 21px;
}

.quality-feedback-note {
  display: grid;
  gap: 5px;
  margin-left: 21px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  padding: 9px 10px;
}

.quality-feedback-note strong {
  color: color-mix(in srgb, var(--accent) 76%, var(--ink));
  font-size: 12px;
  font-weight: 950;
  line-height: 1.25;
}

.quality-feedback-note p {
  padding-left: 0;
}

.quality-feedback-note small {
  color: var(--muted);
}

.quality-feedback-applied {
  justify-self: start;
  border: 1px solid color-mix(in srgb, var(--success) 34%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--success) 10%, var(--panel));
  color: var(--success);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
}

.quality-notes {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.quality-notes > div {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.quality-notes strong {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.quality-notes ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
}

.quality-notes li {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
}

.detail-audio {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.detail-audio audio {
  display: none;
}

.detail-audio p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.audio-player {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--audio-client) 10%, transparent), transparent 55%),
    var(--panel-soft);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 38%, transparent);
}

.audio-player.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}

.detail-audio.is-empty .audio-player {
  display: none;
}

.audio-visual {
  position: relative;
  min-height: 86px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 88%, transparent), transparent),
    var(--panel);
  cursor: pointer;
}

.audio-visual:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 24%, transparent);
  outline-offset: 3px;
}

.audio-visual canvas {
  display: block;
  width: 100%;
  height: 86px;
  pointer-events: none;
}

.audio-play-button {
  position: absolute;
  left: 50%;
  bottom: 8px;
  z-index: var(--z-active);
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  color: var(--panel);
  cursor: pointer;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  pointer-events: auto;
  transform: translateX(-50%);
  touch-action: manipulation;
  user-select: none;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

.audio-play-button span {
  position: relative;
  z-index: var(--z-raised);
  pointer-events: none;
}

.audio-play-button:hover,
.audio-play-button:focus-visible {
  background: var(--accent);
  color: #ffffff;
  outline: 0;
}

.audio-play-button:not(:disabled):active {
  transform: translateX(-50%) scale(0.97);
}

.audio-controls {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}

.audio-time {
  min-width: 38px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.audio-progress {
  width: 100%;
  min-height: 44px;
  accent-color: var(--accent);
}

.audio-speed {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  font-size: 11px;
  font-weight: 900;
}

.audio-speed:hover,
.audio-speed:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.audio-speed:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 20%, transparent);
  outline-offset: 2px;
}

.transcript-panel {
  overflow: hidden;
}

.detail-transcript-block {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  overflow: hidden;
}

.transcript-list {
  display: grid;
  gap: 7px;
  min-height: 0;
  margin-top: 12px;
  padding-right: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.transcript-item {
  position: relative;
  display: grid;
  grid-template-columns: 44px 150px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.transcript-item header {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.transcript-item header strong {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.transcript-item header span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.transcript-item p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}

.transcript-client {
  border-color: color-mix(in srgb, var(--audio-client) 38%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--panel-soft));
}

.transcript-client header strong {
  color: var(--accent);
}

.transcript-operator {
  border-color: color-mix(in srgb, var(--audio-operator) 38%, var(--line));
  background: color-mix(in srgb, var(--audio-operator) 10%, var(--panel-soft));
}

.transcript-operator header strong {
  color: var(--audio-operator);
}

.transcript-unknown {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--line-strong) 8%, var(--panel-soft));
}

.transcript-unknown header strong {
  color: var(--muted);
}

.transcript-extra {
  --transcript-speaker-color: var(--audio-extra-1);
  border-left-color: var(--transcript-speaker-color);
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--transcript-speaker-color) 12%, transparent),
      transparent 42%
    ),
    color-mix(in srgb, var(--transcript-speaker-color) 7%, var(--panel-soft));
}

.transcript-extra header strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--transcript-speaker-color);
}

.transcript-extra header strong::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--transcript-speaker-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--transcript-speaker-color) 18%, transparent);
}

.transcript-extra p,
.transcript-unknown p {
  color: color-mix(in srgb, var(--ink) 86%, var(--muted));
}

.transcript-play {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.transcript-extra .transcript-play {
  border-color: color-mix(in srgb, var(--transcript-speaker-color) 42%, var(--line));
  background: color-mix(in srgb, var(--transcript-speaker-color) 10%, var(--panel));
  color: var(--transcript-speaker-color);
}

.transcript-play:hover,
.transcript-play:focus-visible {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
  outline: 0;
}

.transcript-play:disabled {
  cursor: default;
  opacity: 0.45;
}

.transcript-plain {
  margin: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  line-height: 1.65;
  white-space: pre-wrap;
}

.detail-technical {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.call-row {
  color: var(--ink);
  text-decoration: none;
  transition:
    background-color 160ms ease,
    padding 160ms ease;
}

.call-row:hover,
.call-row:focus-visible {
  margin-inline: -10px;
  padding-inline: 10px;
  border-radius: 8px;
  outline: 0;
  background: var(--panel-soft);
}

.order-price strong,
.order-date strong,
.identity-row h1,
.trip-place strong,
.trip-departure strong,
.trip-departure b,
.ticket-date strong,
.ticket-route strong,
.ticket-price strong,
.call-side strong,
.modal-ticket-title strong,
.modal-ticket-badges > strong,
.modal-ticket-departure strong,
.modal-ticket-departure b,
.monitor-analytics-summary strong,
.manager-rating-summary strong,
.manager-rating-rank,
.manager-rating-cell-score,
.manager-rating-modal-stat strong,
.manager-rating-modal-metric-head span,
.call-type-percentage,
.monitor-call-phone strong,
.call-stats-summary strong,
.call-stats-focus strong,
.call-detail-facts strong,
.detail-analysis-item > strong,
.detail-technical dd,
.quality-score,
.quality-context-score strong,
.quality-score-pill,
.audio-time,
.audio-speed {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

body[data-theme="dark"] .identity-row,
body[data-theme="dark"] .upcoming-section {
  background: var(--panel);
}

body[data-theme="dark"] .phone-search button,
body[data-theme="dark"] .note-form button,
body[data-theme="dark"] .primary-button {
  color: var(--brand-ink);
  box-shadow: var(--shadow-control-active);
}

body[data-theme="dark"] .phone-search button:hover,
body[data-theme="dark"] .note-form button:hover,
body[data-theme="dark"] .primary-button:hover,
body[data-theme="dark"] .secondary-button:hover {
  color: var(--brand-ink);
  box-shadow: var(--shadow-control-active);
}

body[data-theme="dark"] .calls-section,
body[data-theme="dark"] .tickets-section,
body[data-theme="dark"] .notes-section,
body[data-theme="dark"] .telegram-section,
body[data-theme="dark"] .monitor-hero,
body[data-theme="dark"] .monitor-panel,
body[data-theme="dark"] .monitor-call-row,
body[data-theme="dark"] .call-detail-hero,
body[data-theme="dark"] .call-detail-facts,
body[data-theme="dark"] .detail-panel {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.22);
}

body[data-theme="dark"] .booking-action-confirm-layer {
  background: rgba(0, 0, 0, 0.18);
}

body[data-theme="dark"] .booking-action-confirm-popover {
  border-color: var(--line);
  background: #17232b;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.34);
}

body[data-theme="dark"] .booking-action-confirm-button.is-ghost {
  background: rgba(31, 43, 51, 0.92);
}

@media (max-width: 1240px) {
  .app-header {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .header-actions {
    align-self: auto;
    justify-content: flex-start;
    width: 100%;
  }

  .phone-search {
    width: auto;
    flex: 1;
  }
}

@media (max-width: 1100px) {
  .app-header {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .header-actions {
    width: 100%;
  }

  .phone-search {
    width: auto;
    flex: 1;
  }

  .admin-user-card {
    grid-template-columns: minmax(180px, 1fr) minmax(150px, 0.86fr) auto;
  }

  .admin-number-card {
    grid-template-columns: 44px minmax(180px, 1fr) minmax(120px, 0.7fr);
  }

  .admin-telegram-add,
  .admin-telegram-confirm {
    grid-template-columns: 1fr;
  }

  .admin-telegram-card {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .admin-telegram-meta {
    grid-column: 1;
  }

  .admin-telegram-actions {
    grid-column: 2;
    grid-row: 2;
  }

  .admin-telegram-confirm {
    grid-template-columns: 1fr;
  }

  .admin-number-extra {
    grid-column: 2 / -1;
  }

  .admin-user-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .ai-settings-layout {
    grid-template-columns: minmax(240px, 0.75fr) minmax(0, 1.25fr);
  }

  .ai-metric-editor {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1040px) {
  .client-card {
    grid-template-columns: 1fr;
  }

  .warning-stack,
  .identity-row,
  .upcoming-section,
  .profile-grid,
  .content-grid,
  .client-main-stack,
  .calls-section,
  .tickets-section,
  .notes-section,
  .telegram-section {
    grid-column: 1 / -1;
  }

  .warning-stack {
    grid-row: 1;
  }

  .identity-row {
    grid-row: 2;
  }

  .upcoming-section {
    grid-row: 3;
  }

  .profile-grid {
    grid-row: 4;
  }

  .content-grid {
    grid-row: 5;
    grid-template-columns: 1fr;
  }

  .tickets-section,
  .client-main-stack,
  .client-side-stack,
  .calls-section,
  .notes-section {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .summary-strip {
    grid-template-columns: repeat(3, 1fr);
  }

  .summary-item:nth-child(3),
  .summary-item:nth-child(6) {
    border-right: 0;
  }

  .summary-item:nth-child(-n + 3) {
    border-bottom: 1px solid var(--line);
  }

  .ticket-row {
    grid-template-columns: 120px minmax(0, 1fr) 190px;
    gap: 20px;
  }

  .order-row-main {
    grid-template-columns: 120px minmax(0, 1fr) 190px;
    gap: 20px;
  }

  .trip-hero {
    grid-template-columns: 1fr;
  }

  .trip-route {
    grid-template-columns: minmax(180px, 1fr) minmax(86px, 104px) minmax(180px, 1fr);
    min-height: 0;
    padding: 14px 16px;
  }

  .trip-departure {
    border-top: 1px solid var(--line);
    border-left: 0;
    padding: 12px 16px;
  }

  .trip-segment-grid {
    grid-template-columns: 1fr;
  }

  .trip-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .trip-info-item,
  .trip-info-passenger,
  .trip-info-agent,
  .trip-info-order,
  .trip-info-ticket,
  .trip-info-booking,
  .trip-info-bus,
  .trip-info-price {
    grid-column: span 1;
  }

  .modal-ticket-info .trip-info-item,
  .modal-ticket-info .trip-info-passenger,
  .modal-ticket-info .trip-info-agent,
  .modal-ticket-info .trip-info-price,
  .modal-ticket-info .trip-info-ticket,
  .modal-ticket-info .trip-info-bus {
    grid-column: span 1;
  }

  .modal-ticket-info .modal-ticket-carrier,
  .modal-ticket-info .modal-ticket-route-code {
    grid-column: 1 / -1;
  }

  .tickets-modal-list .ticket-row:not(.order-row) {
    grid-template-columns: 120px minmax(0, 1fr) 190px;
  }

  .tickets-modal-list.order-list .order-row,
  .tickets-modal-list.order-list .ticket-row.order-row {
    display: block;
  }

  .notes-section {
    padding: 20px;
  }

  .monitor-hero {
    grid-template-columns: 1fr;
  }

  .analytics-period {
    justify-self: stretch;
  }

  .monitor-call-link {
    grid-template-columns: minmax(200px, 1fr) minmax(170px, 0.8fr) minmax(170px, 0.8fr) 24px;
  }

  .monitor-call-fact:nth-of-type(4) {
    grid-column: 1 / 3;
  }

  .monitor-call-arrow {
    grid-column: 4;
    grid-row: 1 / 3;
  }

  .call-detail-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .call-detail-facts > div:nth-child(2) {
    border-right: 0;
  }

  .call-detail-facts > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .call-detail-grid {
    grid-template-columns: 1fr;
  }

  .call-detail-grid.is-peer-height-locked .call-ai-panel {
    height: auto;
  }

  .detail-transcript-block {
    flex: none;
  }

  .transcript-list {
    max-height: 420px;
  }

  .detail-technical {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .call-type-row {
    grid-template-columns: minmax(200px, 0.9fr) minmax(220px, 1.6fr) 62px;
  }

  .manager-rating-modal-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monitor-call-main,
  .monitor-audio {
    flex-direction: column;
  }

  .monitor-call-main > div:first-child {
    min-width: 0;
  }
}

@media (max-width: 720px) {
  .app-header {
    position: static;
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    padding: calc(10px + var(--safe-top)) 12px 10px;
  }

  .header-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    width: 100%;
  }

  .telegram-head-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
  }

  .telegram-account-dropdown {
    flex: 1 1 190px;
    width: auto;
  }

  .telegram-account-menu {
    left: 0;
    right: auto;
    width: min(310px, 100%);
  }

  .brand-lockup {
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    overflow: hidden;
  }

  .brand {
    width: 124px;
    min-height: 44px;
  }

  .brand img {
    width: 124px;
    max-height: 38px;
    transform: none;
  }

  .app-tabs {
    order: 2;
    align-self: stretch;
    width: auto;
    max-width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    border-radius: 12px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .app-tabs::-webkit-scrollbar {
    display: none;
  }

  .app-tabs a {
    flex: 0 0 auto;
    justify-content: center;
    min-height: 44px;
    padding: 0 9px;
    scroll-snap-align: start;
    text-align: center;
  }

  .manager-rating-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .manager-rating-summary {
    justify-content: flex-start;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .manager-rating-summary::-webkit-scrollbar {
    display: none;
  }

  .manager-rating-summary span {
    flex: 0 0 auto;
    justify-content: space-between;
  }

  .manager-rating-table {
    border-radius: 10px;
  }

  .manager-rating-manager-head,
  .manager-rating-manager-cell {
    width: 220px;
    min-width: 220px;
  }

  .manager-rating-metric-head,
  .manager-rating-matrix td {
    width: 138px;
    min-width: 138px;
  }

  .manager-rating-person-button {
    min-height: 68px;
    padding: 9px 10px;
  }

  .manager-rating-rank {
    width: 30px;
    height: 30px;
  }

  .manager-rating-total-head,
  .manager-rating-total-cell,
  .manager-rating-matrix td.manager-rating-total-cell {
    width: 124px;
    min-width: 124px;
  }

  .manager-rating-cell {
    min-height: 54px;
    padding: 7px;
  }

  .manager-rating-cell-score {
    font-size: 16px;
  }

  .manager-rating-modal-body {
    padding: 16px;
  }

  .manager-rating-modal-summary,
  .manager-rating-modal-metrics,
  .manager-rating-modal-metric-facts {
    grid-template-columns: 1fr;
  }

  .phone-search {
    grid-column: 1 / -1;
    width: auto;
    min-width: 0;
    min-height: 44px;
  }

  .phone-search input {
    height: 44px;
  }

  .phone-search button,
  .theme-toggle,
  .profile-menu-trigger {
    min-height: 44px;
  }

  .theme-toggle {
    grid-column: 2;
    justify-self: end;
    padding: 4px;
  }

  .theme-toggle::before {
    top: 4px;
    left: 4px;
    width: 34px;
    height: 34px;
  }

  body[data-theme="dark"] .theme-toggle::before {
    transform: translateX(28px);
  }

  .profile-menu-trigger {
    width: 44px;
    height: 44px;
  }

  .profile-menu {
    grid-column: 3;
    justify-self: end;
  }

  .profile-menu-popover {
    right: 0;
    width: min(270px, calc(100vw - 24px));
  }

  .empty-state {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 300px;
    padding: 28px 22px;
    text-align: center;
  }

  .empty-icon {
    grid-row: auto;
  }

  .auth-user {
    width: 100%;
    justify-content: space-between;
  }

  .auth-user-name {
    max-width: min(60vw, 260px);
  }

  .phone-search button {
    padding: 0 12px;
  }

  .admin-hero,
  .admin-panel {
    padding: 14px;
  }

  .admin-hero,
  .account-dialog-head,
  .account-dialog-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-add-user,
  .account-dialog-footer .primary-button,
  .account-dialog-footer .secondary-button {
    width: 100%;
  }

  .admin-user-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px 10px;
    padding: 10px 12px;
  }

  .admin-number-card {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px 10px;
    padding: 10px 12px;
  }

  .admin-user-meta {
    grid-column: 1;
  }

  .admin-user-meta strong {
    overflow: visible;
    line-height: 1.25;
    text-overflow: clip;
    white-space: normal;
  }

  .admin-number-meta {
    grid-column: 3;
    grid-row: 1 / 3;
    text-align: right;
  }

  .admin-role-pill {
    grid-column: 2;
    grid-row: 1;
  }

  .admin-user-actions {
    grid-column: 2;
    grid-row: 2;
  }

  .admin-number-switch {
    grid-row: 1 / 3;
  }

  .admin-number-extra {
    grid-column: 2 / -1;
  }

  .admin-number-switch {
    justify-self: start;
  }

  .admin-user-actions {
    flex-wrap: wrap;
    gap: 6px;
  }

  .admin-feedback-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px 10px;
    padding: 10px 12px;
  }

  .admin-feedback-main {
    grid-column: 1 / -1;
  }

  .admin-feedback-score {
    grid-column: 1;
    grid-row: 2;
  }

  .admin-feedback-call,
  .admin-feedback-meta {
    grid-column: 1 / -1;
  }

  .admin-feedback-actions {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    flex-direction: column;
    gap: 6px;
  }

  .admin-feedback-prompt {
    width: 44px;
    padding: 0;
  }

  .admin-feedback-prompt span {
    display: none;
  }

  .metric-prompt-diff-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .metric-prompt-diff-head strong,
  .metric-prompt-diff-head span {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .metric-prompt-diff-field {
    grid-template-columns: minmax(0, 1fr);
  }

  .metric-prompt-diff-label {
    padding-top: 0;
  }

  .admin-panel-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-panel-actions .primary-button {
    grid-column: 1 / -1;
  }

  .admin-tabs {
    max-width: 100%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .admin-tabs::-webkit-scrollbar {
    display: none;
  }

  .admin-tabs button {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .admin-telegram-card {
    gap: 7px 10px;
    padding: 10px 12px;
  }

  .admin-telegram-confirm {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .admin-telegram-confirm input:first-child {
    grid-column: 1;
  }

  .admin-telegram-confirm input:nth-child(2) {
    grid-column: 1 / -1;
  }

  .admin-telegram-confirm .secondary-button {
    grid-column: 2;
    grid-row: 1;
    padding-inline: 12px;
  }

  .account-form-grid {
    grid-template-columns: 1fr;
  }

  .admin-user-binotel-managers {
    grid-template-columns: 1fr;
  }

  .monitor-hero {
    gap: 10px;
    padding: 14px;
  }

  .monitor-hero h1 {
    font-size: 21px;
    line-height: 1.16;
  }

  .monitor-status-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ai-settings-hero {
    grid-template-columns: 1fr;
  }

  .ai-settings-actions {
    justify-content: stretch;
  }

  .ai-settings-actions .status,
  .ai-settings-actions button {
    flex: 1 1 auto;
  }

  .ai-settings-layout,
  .ai-settings-form-grid,
  .ai-metric-form {
    grid-template-columns: 1fr;
  }

  .ai-option-row {
    grid-template-columns: 28px minmax(0, 1fr) 62px 46px;
  }

  .ai-option-counts {
    grid-column: 2 / 4;
    justify-content: flex-start;
  }

  .ai-option-row .ai-row-action {
    grid-column: 4;
    grid-row: 2;
  }

  .ai-option-row textarea {
    grid-column: 1 / -1;
  }

  .monitor-status-grid div {
    justify-content: center;
    gap: 4px;
    min-height: 60px;
    padding: 8px;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .monitor-status-grid span {
    font-size: 10px;
    line-height: 1.25;
  }

  .monitor-status-grid strong {
    font-size: 12px;
    line-height: 1.3;
  }

  .monitor-status-grid div:last-child {
    border-right: 0;
  }

  .monitor-analytics-summary {
    display: flex;
    overflow-x: auto;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .monitor-analytics-summary::-webkit-scrollbar {
    display: none;
  }

  .monitor-analytics-summary > div {
    flex: 0 0 150px;
    min-height: 104px;
    padding: 11px;
    scroll-snap-align: start;
  }

  .monitor-analytics-summary strong {
    font-size: 18px;
  }

  .monitor-period {
    width: 100%;
    justify-content: space-between;
  }

  .call-type-row {
    grid-template-columns: minmax(0, 1fr) 58px;
    gap: 8px 12px;
  }

  .call-type-track {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .monitor-call-top,
  .monitor-pagination {
    flex-direction: column;
    align-items: stretch;
  }

  .monitor-toolbar {
    display: grid;
    grid-template-columns: minmax(78px, 0.72fr) repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 6px;
  }

  .monitor-toolbar input {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 44px;
    flex: none;
  }

  .monitor-filter-select {
    grid-column: 1 / -1;
  }

  .monitor-page-size {
    grid-column: 1;
  }

  .monitor-toolbar > .secondary-button {
    grid-column: 2;
  }

  .monitor-toolbar > .primary-button {
    grid-column: 3;
  }

  .monitor-page-size,
  .monitor-filter-select,
  .monitor-toolbar > .secondary-button,
  .monitor-toolbar > .primary-button {
    min-height: 44px;
  }

  .monitor-page-size,
  .monitor-filter-select {
    min-width: 0;
    justify-content: space-between;
  }

  .monitor-page-size > span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .monitor-page-size {
    justify-content: center;
    padding-inline: 8px;
  }

  .monitor-filter-select .custom-select {
    min-width: 122px;
  }

  .monitor-page-size .custom-select {
    min-width: 52px;
  }

  .monitor-page-size .custom-select-button,
  .monitor-filter-select .custom-select-button {
    min-height: 44px;
  }

  .monitor-pagination .secondary-button,
  .monitor-page-button {
    min-height: 44px;
  }

  .monitor-page-button {
    min-width: 44px;
  }

  .monitor-call-link {
    grid-template-columns: minmax(0, 1fr) minmax(66px, auto) 20px;
    align-items: start;
    gap: 7px 10px;
  }

  .monitor-call-row {
    padding: 11px 12px;
  }

  .monitor-call-phone .call-direction-icon {
    width: 30px;
    height: 30px;
  }

  .monitor-call-phone strong {
    font-size: 15px;
  }

  .monitor-call-identity > span {
    margin-top: 5px;
    padding: 3px 7px;
  }

  .monitor-call-alerts {
    gap: 4px;
    margin-top: 4px;
  }

  .monitor-alert-badge {
    padding: 3px 7px;
  }

  .monitor-call-identity {
    grid-column: 1 / 3;
    grid-row: 1;
  }

  .monitor-call-fact {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 2px;
  }

  .monitor-call-fact:nth-of-type(2),
  .monitor-call-fact:nth-of-type(3) {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 2px 8px;
  }

  .monitor-call-fact:nth-of-type(2) {
    grid-column: 1;
    grid-row: 2;
  }

  .monitor-call-fact:nth-of-type(3) {
    grid-column: 1 / 3;
    grid-row: 3;
  }

  .monitor-call-fact:nth-of-type(4) {
    grid-column: 2;
    grid-row: 2;
    text-align: right;
  }

  .monitor-call-fact span {
    font-size: 11px;
    line-height: 1.3;
  }

  .monitor-call-fact strong {
    font-size: 13px;
    white-space: normal;
  }

  .monitor-call-arrow {
    grid-column: 3;
    grid-row: 1 / 4;
    align-self: center;
    width: 20px;
    height: 20px;
  }

  .call-detail-hero {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }

  .call-detail-hero h1 {
    font-size: 26px;
    line-height: 1.12;
  }

  .call-detail-badges {
    justify-content: flex-start;
  }

  .call-detail-facts {
    grid-template-columns: 1fr;
  }

  .call-detail-facts > div,
  .call-detail-facts > div:nth-child(2) {
    min-height: 70px;
    padding: 12px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .call-detail-facts > div:last-child {
    border-bottom: 0;
  }

  .detail-analysis-list,
  .detail-analysis-group-body,
  .quality-context,
  .quality-criteria,
  .detail-technical {
    grid-template-columns: 1fr;
  }

  .detail-analysis-group > header {
    display: grid;
    gap: 5px;
  }

  .detail-analysis-group header p {
    max-width: none;
    text-align: left;
  }

  .detail-panel {
    padding: 16px;
  }

  .quality-metric-header {
    gap: 8px;
  }

  .quality-metric-actions {
    align-items: flex-end;
    flex-direction: column;
  }

  .quality-feedback-note {
    margin-left: 0;
  }

  .transcript-item {
    grid-template-columns: 44px minmax(0, 1fr);
    width: 100%;
    gap: 8px 10px;
    padding: 10px;
  }

  .transcript-item p {
    grid-column: 2;
  }

  .detail-back-link,
  .detail-reanalyze-button,
  .audio-play-button,
  .audio-speed,
  .transcript-play {
    min-width: 44px;
    min-height: 44px;
  }

  .detail-back-link {
    margin-block: -12px;
    padding-block: 12px;
  }

  .transcript-play {
    width: 44px;
    height: 44px;
  }

  .audio-progress {
    min-height: 44px;
  }

  .audio-controls {
    grid-template-columns: auto 1fr auto;
  }

  .audio-speed {
    grid-column: 1 / -1;
    justify-self: end;
  }

  .monitor-page-numbers {
    flex-wrap: wrap;
  }

  .monitor-audio span {
    text-align: left;
  }

  .theme-toggle {
    flex: 0 0 auto;
  }

  .page-shell {
    width: min(100% - 20px, 1320px);
    padding: 10px 0 calc(32px + var(--safe-bottom));
  }

  .identity-row,
  .section-heading {
    align-items: flex-start;
  }

  .section-heading {
    flex-direction: column;
    gap: 10px;
  }

  .summary-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .summary-item,
  .summary-item:nth-child(3) {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .summary-item:nth-child(even) {
    border-right: 0;
  }

  .summary-item:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .profile-grid {
    grid-template-columns: 1fr;
  }

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

  .upcoming-section {
    padding: 14px;
    border-radius: 10px;
  }

  .trip-card {
    gap: 10px;
  }

  .trip-hero {
    grid-template-columns: 1fr;
    border-radius: 10px;
  }

  .trip-route {
    grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
    gap: 8px;
    min-height: 0;
    padding: 12px;
  }

  .trip-place {
    width: 100%;
  }

  .trip-place-from,
  .trip-place-to {
    justify-self: stretch;
  }

  .trip-place-to {
    text-align: left;
  }

  .trip-route-connector {
    align-items: center;
    justify-content: center;
    min-height: 86px;
    padding-left: 0;
  }

  .trip-route-line {
    width: 2px;
    height: 60px;
    margin-left: 0;
  }

  .trip-route-line::before,
  .trip-route-line::after {
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
  }

  .trip-route-line::before {
    top: 0;
  }

  .trip-route-line::after {
    top: 100%;
  }

  .trip-segment-route {
    grid-column: 1;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .trip-segment-card {
    grid-template-columns: 1fr;
  }

  .trip-segment-meta,
  .trip-segment-note {
    grid-column: 1;
  }

  .trip-segment-line {
    width: 2px;
    height: 30px;
    margin-left: 11px;
  }

  .trip-segment-line::before,
  .trip-segment-line::after {
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
  }

  .trip-segment-line::before {
    top: 0;
  }

  .trip-segment-line::after {
    top: 100%;
  }

  .trip-place strong {
    font-size: 18px;
    white-space: normal;
  }

  .trip-departure b {
    font-size: 24px;
  }

  .trip-departure {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 12px;
    align-items: center;
    padding: 12px;
  }

  .trip-departure b {
    grid-column: 2;
    grid-row: 1 / 4;
  }

  .trip-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .trip-info-item,
  .trip-info-passenger,
  .trip-info-agent,
  .trip-info-order,
  .trip-info-ticket,
  .trip-info-booking,
  .trip-info-bus,
  .trip-info-price {
    grid-column: auto;
  }

  .trip-info-passenger,
  .trip-info-agent {
    grid-column: 1 / -1;
  }

  .modal-ticket-card {
    padding: 12px;
    border-radius: 13px;
  }

  .modal-ticket-card-head,
  .modal-ticket-badges {
    align-items: flex-start;
    flex-direction: column;
  }

  .modal-ticket-badges {
    gap: 8px;
    width: 100%;
  }

  .modal-ticket-title strong,
  .modal-ticket-segment-route strong {
    white-space: normal;
  }

  .modal-ticket-route {
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .modal-ticket-route .trip-route-line {
    width: 2px;
  }

  .modal-ticket-info {
    gap: 8px;
  }

  .modal-ticket-info .trip-info-item,
  .modal-ticket-info .trip-info-passenger,
  .modal-ticket-info .trip-info-agent,
  .modal-ticket-info .trip-info-price,
  .modal-ticket-info .trip-info-ticket,
  .modal-ticket-info .trip-info-bus,
  .modal-ticket-info .modal-ticket-carrier,
  .modal-ticket-info .modal-ticket-route-code {
    grid-column: auto;
  }

  .modal-ticket-actions {
    justify-content: stretch;
  }

  .call-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .ticket-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .order-row-main {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .order-row .order-title {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .order-row .order-title strong {
    min-width: 0;
    white-space: normal;
  }

  .ticket-date,
  .order-date {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
  }

  .call-main {
    flex-wrap: wrap;
  }

  .call-operator {
    flex-basis: 100%;
  }

  .ticket-price,
  .order-price {
    grid-column: auto;
    justify-items: stretch;
    text-align: left;
  }

  .order-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ticket-price span,
  .order-price span {
    max-width: none;
  }

  .order-link {
    width: 100%;
    min-width: 0;
    min-height: 46px;
  }

  .tickets-modal {
    width: min(100% - 20px, 980px);
    max-height: 90vh;
  }

  .tickets-modal-panel {
    max-height: 90vh;
  }

  .tickets-modal-header {
    padding: 18px;
  }

  .tickets-modal-list {
    padding: 0 18px 18px;
  }

  .tickets-modal-list .ticket-row:not(.order-row) {
    grid-template-columns: 1fr;
  }

  .tickets-modal-list.order-list .order-row,
  .tickets-modal-list.order-list .ticket-row.order-row {
    display: block;
  }

  .tickets-modal-list .ticket-price {
    grid-column: auto;
    text-align: left;
  }

  .calls-section,
  .tickets-section,
  .notes-section,
  .identity-row,
  .profile-block {
    padding: 16px;
  }

  .identity-row h1 {
    font-size: 26px;
  }

  .identity-meta a {
    min-height: 0;
    padding-block: 14px;
    margin-block: -14px;
  }

  .messaging-tab,
  .telegram-account-trigger,
  .telegram-refresh,
  .viber-refresh,
  .note-action-button {
    min-width: 44px;
    min-height: 44px;
  }

  .note-action-button {
    width: 44px;
    height: 44px;
  }

  .trip-place > span,
  .trip-departure > span,
  .trip-info dt,
  .trip-segment-place > span,
  .trip-segment-meta b,
  .trip-subsection-title span,
  .trip-subsection-title strong,
  .monitor-status-grid span,
  .monitor-call-fact span,
  .monitor-call-identity > span,
  .monitor-alert-badge,
  .monitor-analytics-summary span,
  .monitor-analytics-summary small,
  .call-stats-summary span,
  .call-stats-summary small,
  .call-stats-focus span,
  .call-stats-focus em,
  .call-stats-heatmap-hours b,
  .call-stats-heatmap-row > span,
  .call-detail-facts span,
  .detail-analysis-group header p,
  .detail-analysis-item > span,
  .detail-technical dt,
  .quality-context-item span,
  .quality-group-header small,
  .quality-item small,
  .quality-notes strong,
  .call-type-label small {
    font-size: 12px;
    line-height: 1.3;
  }

  .upcoming-section :where(span, small, dt),
  .tickets-section :where(span, small),
  .calls-section :where(.status, footer),
  .notes-section footer,
  .messaging-section :where(.messaging-channel-title span, .telegram-account-trigger-main small, .telegram-thread-status, .telegram-reply-preview span, .telegram-reply-bar span),
  .call-stats-table th,
  .manager-rating-summary small,
  .manager-rating-matrix th,
  .manager-rating-metric-head small,
  .manager-rating-person small,
  .audio-speed,
  .transcript-item header strong,
  .transcript-item header span {
    font-size: 12px;
    line-height: 1.3;
  }

  .trip-place small span,
  .trip-segment-place small span,
  .order-info-item span,
  .call-main .status,
  .messaging-channel-title span,
  .telegram-account-trigger-main small,
  .telegram-reply-preview span,
  .manager-rating-manager-head,
  .manager-rating-total-head {
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  .telegram-thread-main span,
  .telegram-reply-preview strong {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .trip-place small,
  .trip-departure small,
  .trip-segment-place small,
  .trip-segment-note,
  .trip-segment-meta > div,
  .call-stats-list-row span,
  .quality-metric-option,
  .telegram-thread-main span,
  .telegram-bubble time,
  .telegram-media-file small {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .trip-info dd,
  .trip-segment-place strong,
  .monitor-call-fact strong,
  .detail-analysis-item > strong,
  .detail-technical dd,
  .quality-context-item strong,
  .quality-item strong,
  .quality-item p {
    font-size: 13px;
  }
}

:where(
  .phone-search button,
  .note-form button,
  .primary-button,
  .secondary-button,
  .secondary-action,
  .custom-select-button,
  .profile-menu-trigger,
  .profile-menu-item,
  .theme-toggle,
  .messaging-tab,
  .telegram-account-trigger,
  .telegram-account-option,
  .telegram-reply-button,
  .telegram-reply-preview,
  .telegram-media-photo,
  .telegram-media-file,
  .modal-close,
  .order-link,
  .admin-icon-button,
  .note-action-button,
  .booking-action-confirm-button,
  .monitor-page-button,
  .manager-rating-person-button,
  .ai-gradient-button,
  .ai-white-button,
  .ai-quiet-button,
  .ai-icon-button-soft,
  .ai-type-open,
  .ai-metric-open,
  .ai-side-accordion,
  .ai-side-toggle,
  .ai-modal-type-button,
  .ai-color-choice,
  .ai-dialog-head button,
  .ai-word-input button,
  .audio-speed,
  .transcript-play
):not(:disabled):active {
  transform: scale(0.97);
  transition-duration: var(--motion-press);
}

.audio-play-button:not(:disabled):active {
  transform: translateX(-50%) scale(0.97);
  transition-duration: var(--motion-press);
}

.order-row:active,
.call-row[href]:active,
.monitor-call-link:active,
.call-stats-interactive:active {
  transform: scale(0.992);
  transition-duration: var(--motion-press);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}