.dt-wrapper {
  border: 1px solid #dce7f1;
  border: 1px solid var(--line, #dce7f1);
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  background: var(--surface, #ffffff);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  box-shadow: var(--soft-shadow, 0 2px 8px rgba(0,0,0,0.04));
}

.dt-scroll {
  overflow-x: auto;
  overflow-y: auto;
}

.dt-table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 870px;
  width: 100%;
}

.dt-thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}

.dt-thead tr {
  background: #f2f7fb;
  background: var(--surface-mute, #f2f7fb);
}

.dt-th {
  color: #70839a;
  cursor: default;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  padding: 13px 14px;
  text-align: left;
  text-transform: uppercase;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  vertical-align: middle;
  white-space: nowrap;
}

.dt-th--sortable {
  cursor: pointer;
}

.dt-th--sortable:hover {
  color: #21354d;
  color: var(--ink, #21354d);
}

.dt-th--sorted::after {
  content: '\25B2';
  font-size: 9px;
  margin-left: 4px;
}

.dt-th--sorted-desc::after {
  content: '\25BC';
  font-size: 9px;
  margin-left: 4px;
}

.dt-filter-row {
  background: #f2f7fb;
  background: var(--surface-mute, #f2f7fb);
}

.dt-filter-cell {
  padding: 4px 8px;
}

.dt-filter-input {
  background: #ffffff;
  border: 1px solid #dce7f1;
  border: 1px solid var(--line, #dce7f1);
  border-radius: 8px;
  color: #21354d;
  color: var(--ink, #21354d);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  padding: 4px 8px;
  text-transform: none;
  width: 100%;
  box-sizing: border-box;
}

.dt-filter-input:focus {
  border-color: rgba(25, 179, 159, 0.42);
  outline: none;
}

.dt-tbody tr {
  cursor: default;
}

.dt-tbody tr:hover td {
  background: rgba(25, 179, 159, 0.06);
}

.dt-row--clickable {
  cursor: pointer;
}

.dt-row--striped:nth-child(even) td {
  background: rgba(241, 246, 250, 0.5);
}

.dt-td {
  border-bottom: 1px solid #ebf1f6;
  color: #21354d;
  color: var(--ink, #21354d);
  font-size: 13px;
  padding: 13px 14px;
  vertical-align: middle;
}

.dt-footer {
  background: #ffffff;
  border-top: 1px solid #dce7f1;
  border-top: 1px solid var(--line, #dce7f1);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: justify;
      justify-content: space-between;
  padding: 10px 14px;
}

.dt-footer-info {
  color: #6d8299;
  color: var(--ink-muted, #6d8299);
  font-size: 12px;
}

.dt-pagination {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  gap: 4px;
}

.dt-page-btn {
  background: #ffffff;
  border: 1px solid #dce7f1;
  border: 1px solid var(--line, #dce7f1);
  border-radius: 8px;
  color: #3b546f;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  min-height: 30px;
  min-width: 30px;
  padding: 0 8px;
}

.dt-page-btn:hover:not(:disabled) {
  background: #f2f7fb;
  background: var(--surface-mute, #f2f7fb);
}

.dt-page-btn:disabled {
  cursor: default;
  opacity: 0.45;
}

.dt-page-btn--active {
  background-image: linear-gradient(138deg, #1bc0ab 0%, #1491a6 100%);
  border-color: transparent;
  color: #ffffff;
}

.dt-page-ellipsis {
  color: #8aa0b5;
  color: var(--ink-soft, #8aa0b5);
  padding: 0 4px;
}

.dt-page-size-select {
  background: #ffffff;
  border: 1px solid #dce7f1;
  border: 1px solid var(--line, #dce7f1);
  border-radius: 8px;
  color: #21354d;
  color: var(--ink, #21354d);
  font-size: 12px;
  font-weight: 700;
  margin-right: 10px;
  padding: 4px 8px;
}

.dt-empty {
  color: #6d8299;
  color: var(--ink-muted, #6d8299);
  padding: 24px;
  text-align: center;
}
@keyframes skeleton-shimmer {
  0% { background-position: -468px 0; }
  100% { background-position: 468px 0; }
}

@keyframes skeleton-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.skeleton-shimmer {
  animation: skeleton-shimmer 1.2s infinite linear;
  background: linear-gradient(to right, #f0f0f0 8%, #e0e0e0 18%, #f0f0f0 33%);
  background-size: 800px 100%;
  border-radius: 3px;
}

.skeleton-fade-in {
  animation: skeleton-fade-in 0.3s ease-in;
}

/* Table skeleton */

.skeleton-table-wrap {
  min-width: 870px;
}

.skeleton-table-wrap > div {
  border-radius: 5px;
}

/* Card skeleton */

.skeleton-card-container {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}

.skeleton-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* List skeleton */

.skeleton-list-container {
  padding: 0;
}

.skeleton-list-item {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  gap: 12px;
}

.skeleton-list-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.skeleton-list-content {
  -ms-flex: 1;
      flex: 1;
  min-width: 0;
}
.inbound-inbox {
  padding: var(--space-5);
  padding: var(--space-5);
}

.inbound-inbox__count {
  color: var(--ink-muted);
  color: var(--ink-muted);
  font-size: var(--text-sm);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* ── Tabs ────────────────────────────────────── */

.inbound-inbox__tabs {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0;
  margin-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.inbound-inbox__tabs button {
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--ink-muted);
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  min-height: 42px;
  padding: 0 18px 10px;
  position: relative;
  text-transform: uppercase;
  transition: color 180ms ease, border-color 180ms ease,
    background-color 180ms ease;
}

.inbound-inbox__tabs button:hover {
  color: var(--brand-deep);
  color: var(--brand-deep);
}

.inbound-inbox__tabs button.active {
  background-image: linear-gradient(138deg, var(--brand) 0%, var(--brand-deep) 100%);
  background-image: linear-gradient(138deg, var(--brand) 0%, var(--brand-deep) 100%);
  border: 0;
  border-radius: 10px;
  border-bottom: 3px solid transparent;
  box-shadow: 0 14px 24px rgba(20, 145, 166, 0.24);
  color: var(--surface);
  color: var(--surface);
  padding: var(--space-2) 18px;
  padding: var(--space-2) 18px;
  transition: background-image 200ms ease, box-shadow 200ms ease,
    color 200ms ease;
}

/* ── Filter bar ──────────────────────────────── */

.inbound-inbox__filters {
  -ms-flex-align: end;
      align-items: end;
  background: var(--surface-soft);
  background: var(--surface-soft);
  border: 1px solid var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--soft-shadow);
  box-shadow: var(--soft-shadow);
  display: -ms-grid;
  display: grid;
  gap: var(--space-3);
  gap: var(--space-3);
  -ms-grid-columns: (minmax(170px, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin-bottom: 18px;
  padding: var(--space-4);
  padding: var(--space-4);
}

.inbound-inbox__filters label {
  color: var(--ink-muted);
  color: var(--ink-muted);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  font-size: var(--text-xs);
  font-size: var(--text-xs);
  font-weight: 700;
  gap: 6px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.inbound-inbox__search-input {
  background: var(--surface);
  background: var(--surface);
  border: 1px solid var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  color: var(--ink);
  font-size: var(--text-sm);
  font-size: var(--text-sm);
  min-height: 38px;
  outline: none;
  padding: 0 var(--space-3);
  padding: 0 var(--space-3);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.inbound-inbox__search-input:focus {
  border-color: var(--brand);
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(25, 179, 159, 0.16);
}

.inbound-inbox__search-input:-ms-input-placeholder {
  color: var(--ink-soft);
  color: var(--ink-soft);
}

.inbound-inbox__search-input::placeholder {
  color: var(--ink-soft);
  color: var(--ink-soft);
}

.inbound-inbox__filters .secondary {
  -ms-flex-item-align: end;
      -ms-grid-row-align: end;
      align-self: end;
  background: var(--surface);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--ink-muted);
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  min-height: 38px;
  text-transform: uppercase;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}

.inbound-inbox__filters .secondary:hover {
  border-color: var(--brand);
  border-color: var(--brand);
  color: var(--brand-deep);
  color: var(--brand-deep);
}

/* ── Table ──────────────────────────────────── */

.inbound-inbox__table-wrap {
  border: 1px solid var(--line);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--soft-shadow);
  box-shadow: var(--soft-shadow);
  overflow: auto;
}

.inbound-inbox__table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 980px;
  width: 100%;
}

.inbound-inbox__table thead tr {
  background: var(--surface-mute);
  background: var(--surface-mute);
}

.inbound-inbox__table th, .inbound-inbox__table td {
  border-bottom: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: var(--text-sm);
  font-size: var(--text-sm);
  padding: 14px var(--space-3);
  padding: 14px var(--space-3);
  text-align: left;
  vertical-align: top;
}

.inbound-inbox__table th {
  color: var(--ink-muted);
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.inbound-inbox__table tbody tr {
  cursor: pointer;
  transition: background-color 120ms ease;
}

.inbound-inbox__table tbody tr:hover td {
  background: rgba(25, 179, 159, 0.06);
}

.inbound-inbox__table tbody tr.selected td {
  background: rgba(25, 179, 159, 0.11);
}

.inbound-inbox__table .preview {
  max-width: 280px;
  white-space: pre-wrap;
  word-break: break-word;
}

.inbound-inbox__table .empty {
  color: var(--ink-soft);
  color: var(--ink-soft);
  padding: var(--space-5);
  padding: var(--space-5);
  text-align: center;
}

/* ── Assignment cell ─────────────────────────── */

.assignment-cell {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  gap: var(--space-2);
  gap: var(--space-2);
}

.assignment-cell__select {
  min-width: 140px;
}

.assignment-cell__save {
  background-image: linear-gradient(138deg, var(--brand) 0%, var(--brand-deep) 100%);
  background-image: linear-gradient(138deg, var(--brand) 0%, var(--brand-deep) 100%);
  border: 0;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(20, 145, 166, 0.20);
  color: var(--surface);
  color: var(--surface);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  min-height: 34px;
  padding: 0 14px;
  text-transform: uppercase;
  transition: box-shadow 160ms ease, opacity 160ms ease;
}

.assignment-cell__save:hover {
  box-shadow: 0 12px 24px rgba(20, 145, 166, 0.30);
}

.assignment-cell__save:active {
  opacity: 0.85;
}

/* ── Pagination ─────────────────────────────── */

.inbound-inbox__pagination {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  -ms-flex-pack: end;
      justify-content: flex-end;
  margin-top: var(--space-4);
  margin-top: var(--space-4);
}

.inbound-inbox__pagination button {
  background: var(--surface);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--ink-muted);
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  min-height: 36px;
  padding: 0 var(--space-4);
  padding: 0 var(--space-4);
  transition: border-color 140ms ease, color 140ms ease,
    background-color 140ms ease, box-shadow 140ms ease;
}

.inbound-inbox__pagination button:not(:disabled):hover {
  background-image: linear-gradient(138deg, var(--brand) 0%, var(--brand-deep) 100%);
  background-image: linear-gradient(138deg, var(--brand) 0%, var(--brand-deep) 100%);
  border-color: transparent;
  box-shadow: 0 10px 20px rgba(20, 145, 166, 0.22);
  color: var(--surface);
  color: var(--surface);
}

.inbound-inbox__pagination button:disabled {
  background: var(--surface-mute);
  background: var(--surface-mute);
  border-color: var(--line);
  border-color: var(--line);
  color: var(--ink-soft);
  color: var(--ink-soft);
  cursor: default;
  opacity: 0.55;
}

.inbound-inbox__pagination span {
  color: var(--ink-muted);
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 600;
  padding: 0 var(--space-1);
  padding: 0 var(--space-1);
}

/* ── Thread timeline ─────────────────────────── */

.inbound-inbox__events {
  border-top: 1px solid var(--line);
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: var(--space-4);
  padding-top: var(--space-4);
}

.inbound-inbox__events h3 {
  color: var(--ink);
  color: var(--ink);
  font-size: var(--text-lg);
  font-size: var(--text-lg);
  margin: 0 0 var(--space-2);
  margin: 0 0 var(--space-2);
}

.inbound-inbox__events p {
  color: var(--ink-muted);
  color: var(--ink-muted);
}

.inbound-inbox__events ul {
  margin: var(--space-2) 0 0;
  margin: var(--space-2) 0 0;
  padding-left: 18px;
}

.inbound-inbox__events li {
  color: var(--ink);
  color: var(--ink);
  margin-bottom: 6px;
}

.inbound-inbox__empty-cell {
  padding: 0;
}

.inbound-inbox__loading {
  color: var(--ink-soft);
  color: var(--ink-soft);
  padding: 48px 24px;
  text-align: center;
}

.inbound-inbox__no-events {
  color: var(--ink-soft);
  color: var(--ink-soft);
  padding: var(--space-6);
  padding: var(--space-6);
  text-align: center;
}

/* ── Responsive ──────────────────────────────── */

@media (max-width: 960px) {
  .inbound-inbox {
    padding: 14px;
  }

  .inbound-inbox__filters {
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
  }

  .inbound-inbox__pagination {
    -ms-flex-pack: center;
        justify-content: center;
  }
}
.no-plans {
  color: #607892;
  font-size: 15px;
  font-weight: 600;
  padding: 36px 0;
  text-align: center;
}

.pricing-plans {
  display: -ms-grid;
  display: grid;
  gap: var(--space-4);
  gap: var(--space-4);
  -ms-grid-columns: (minmax(260px, 1fr))[auto-fit];
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  padding: var(--space-5);
  padding: var(--space-5);
}

.pricing-plan {
  background: #ffffff;
  border: 1px solid #dbe6f0;
  border-radius: var(--radius-lg);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 42px rgba(15, 33, 56, 0.12);
  margin: 0;
  max-width: none;
  min-width: 0;
  padding: 26px 18px var(--space-6);
  padding: 26px 18px var(--space-6);
  position: relative;
  text-align: center;
  width: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pricing-plan:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 52px rgba(15, 33, 56, 0.18);
}

.pricing-plan.popular {
  border: 2px solid #1ac0aa;
  box-shadow: 0 24px 56px rgba(19, 133, 155, 0.22);
}

.plan-popular-badge {
  background-image: linear-gradient(135deg, #1ac0aa 0%, #149f9f 50%, #1387a2 100%);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 4px 12px rgba(19, 133, 155, 0.3);
  color: #ffffff;
  font-size: var(--text-xs);
  font-size: var(--text-xs);
  font-weight: 700;
  left: 50%;
  letter-spacing: 0.1em;
  padding: 6px 18px;
  position: absolute;
  text-transform: uppercase;
  top: 0;
  transform: translateX(-50%);
  z-index: 1;
}

.plan-current-badge {
  background: #1ac0aa;
  border-radius: 6px;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: var(--space-1) 10px;
  padding: var(--space-1) 10px;
  position: absolute;
  right: 12px;
  text-transform: uppercase;
  top: 12px;
  z-index: 1;
}

.plan-title {
  color: #1f334e;
  font-family: 'Space Grotesk', 'Manrope', sans-serif;
  font-size: 23px;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.plan-monthly {
  color: #7288a0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.plan-per-user-wrapper {
  background-image: linear-gradient(140deg, #1ac0aa 0%, #149f9f 50%, #1387a2 100%);
  border-radius: 14px;
  box-shadow: 0 16px 30px rgba(19, 133, 155, 0.28);
  color: #ffffff;
  margin: 1.4rem auto;
  max-width: 260px;
  padding: 1.1rem var(--space-4);
  padding: 1.1rem var(--space-4);
}

.plan-per-user-price {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.plan-per-user-desc {
  font-size: var(--text-sm);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.plan-per-local-number-price, .plan-per-thousand-minutes-price {
  color: #516983;
  font-size: var(--text-base);
  font-size: var(--text-base);
  font-weight: 600;
}

.plan-per-local-number-price {
  margin-bottom: var(--space-3);
  margin-bottom: var(--space-3);
}

.plan-per-thousand-minutes-price {
  margin-bottom: 2.2rem;
}

.plan-select-btn {
  background-image: linear-gradient(140deg, #1ac0aa 0%, #149f9f 50%, #1387a2 100%);
  border: none;
  border-radius: var(--radius-sm);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 18px rgba(19, 133, 155, 0.25);
  color: #ffffff;
  cursor: pointer;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: var(--space-3) var(--space-8);
  padding: var(--space-3) var(--space-8);
  text-transform: none;
  transition: opacity 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

.plan-select-btn:hover {
  box-shadow: 0 10px 26px rgba(19, 133, 155, 0.35);
  opacity: 0.92;
}

.plan-select-btn:active {
  opacity: 0.85;
}

.plan-select-btn.current, .plan-select-btn:disabled {
  background: #d0d8e0;
  box-shadow: none;
  color: #7288a0;
  cursor: default;
}

.plan-select-btn.current:hover, .plan-select-btn:disabled:hover {
  box-shadow: none;
  opacity: 1;
}

/* Feature Comparison Matrix */

.feature-comparison {
  margin: 0 var(--space-5) 28px;
  margin: 0 var(--space-5) 28px;
  overflow-x: auto;
}

.feature-comparison table {
  border-collapse: collapse;
  width: 100%;
}

.feature-comparison thead tr {
  background-image: linear-gradient(140deg, #1ac0aa 0%, #149f9f 50%, #1387a2 100%);
}

.feature-comparison th {
  color: #ffffff;
  font-size: var(--text-base);
  font-size: var(--text-base);
  font-weight: 600;
  padding: 14px 18px;
  text-align: center;
}

.feature-comparison th:first-child {
  text-align: left;
}

.feature-comparison tbody tr:nth-child(even) {
  background: #f4f8fb;
}

.feature-comparison tbody tr:hover {
  background: #e8f4f7;
}

.feature-comparison td {
  border-bottom: 1px solid #e0e8ef;
  color: #516983;
  font-size: var(--text-base);
  font-size: var(--text-base);
  font-weight: 500;
  padding: var(--space-3) 18px;
  padding: var(--space-3) 18px;
  text-align: center;
}

.feature-comparison td:first-child {
  color: #1f334e;
  font-weight: 600;
  text-align: left;
}

.feature-comparison .feature-check {
  color: #1ac0aa;
  font-size: 18px;
  font-weight: 700;
}

.feature-comparison .feature-dash {
  color: #b0bcc8;
  font-size: 18px;
}

.feature-comparison .feature-value {
  color: #1f334e;
  font-weight: 600;
}

@media (max-width: 600px) {
  .pricing-plans {
    gap: var(--space-3);
    gap: var(--space-3);
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    padding: var(--space-3);
    padding: var(--space-3);
  }

  .feature-comparison {
    margin: 0 var(--space-3) var(--space-5);
    margin: 0 var(--space-3) var(--space-5);
  }

  .feature-comparison th, .feature-comparison td {
    padding: 10px 10px;
    font-size: var(--text-sm);
    font-size: var(--text-sm);
  }
}
.messages-contact-list {
  overflow-y: auto;
  overflow-x: hidden;
  background: #fbfdff;
}

.messages-contact {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  gap: var(--space-3);
  gap: var(--space-3);
  padding: 0.7rem 14px;
  cursor: pointer;
  border-bottom: 1px solid #edf2f7;
  transition: background-color 0.15s ease;
  border-left: 3px solid transparent
}

.messages-contact:hover {
  background-color: rgba(25, 143, 150, 0.05);
}

.messages-contact.active {
  background-color: rgba(25, 143, 150, 0.08);
  border-left-color: #198f96;
}

.messages-contact-avatar {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.messages-contact-content {
  -ms-flex: 1;
      flex: 1;
  min-width: 0;
  overflow: hidden;
}

.messages-contact-top-row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-align: center;
      align-items: center;
}

.messages-contact-name {
  color: #253d58;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -ms-flex: 1;
      flex: 1;
  min-width: 0
}

.messages-contact-name.active {
  color: #198f96;
  font-weight: 700;
}

.messages-contact-time {
  color: #9aabc0;
  font-size: var(--text-xs);
  font-size: var(--text-xs);
  margin-left: var(--space-2);
  margin-left: var(--space-2);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.messages-contact-bottom-row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-align: center;
      align-items: center;
  margin-top: 2px;
}

.messages-contact-last-message {
  color: #7f93ab;
  font-size: var(--text-sm);
  font-size: var(--text-sm);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -ms-flex: 1;
      flex: 1;
  min-width: 0
}

.messages-contact-last-message.unread {
  color: #253d58;
  font-weight: 600;
}

.messages-contact-unread-badge {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #198f96;
  margin-left: var(--space-2);
  margin-left: var(--space-2);
}

.messages-contact-number {
  color: #7f93ab;
  font-size: 12px;
  margin-top: 3px;
}

.messages-new {
  border-top: 1px solid #e1eaf3;
  background: #ffffff;
  padding: 0.5rem 14px;
}

.messages-new-form {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -ms-flex-align: center;
      align-items: center;
  gap: var(--space-2);
  gap: var(--space-2);
}

.messages-new-form .input-text {
  -ms-flex: 1;
      flex: 1;
  border-radius: 22px;
  border: 1px solid #d4e2ef;
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.messages-new-form .input-text:focus-within {
  border-color: #198f96;
}
.messages-message-history-wrapper {
  position: relative;
  -ms-flex: 1;
      flex: 1;
  min-height: 0;
  display: -ms-flexbox;
  display: flex;
}

.messages-message-history {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 20px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 2px;
  background: #f0f5fa;
  -ms-flex: 1;
      flex: 1;
  -webkit-overflow-scrolling: touch;
  scroll-beacon: smooth;
}

/* ===== Message bubbles ===== */

.message-history-item {
  max-width: 68%;
  padding: 10px 14px;
  margin-bottom: 0;
  position: relative;
  word-wrap: break-word;
  overflow-wrap: break-word;
  animation: message-pop 0.2s ease-out
}

.message-history-item.incoming {
  -ms-flex-item-align: start;
      align-self: flex-start;
  background: #ffffff;
  color: #253d58;
  border-radius: 16px 16px 16px 4px;
  border: 1px solid #e1eaf3;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.message-history-item:not(.incoming) {
  -ms-flex-item-align: end;
      align-self: flex-end;

  /* Darkened from #198f96, which only reached 3.9:1 against white text.
       This is 4.96:1, clearing WCAG AA for body text. */
  background: #157c82;
  color: #ffffff;
  border-radius: 16px 16px 4px 16px;
  box-shadow: 0 1px 3px rgba(21, 124, 130, 0.28);
}

@keyframes message-pop {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.history-item-body {
  line-height: 1.45;
  font-size: var(--text-base);
  font-size: var(--text-base);
}

.history-item-time {
  font-size: 10px;
  margin-top: 3px;
  opacity: 0.75;
}

.message-history-item.incoming .history-item-time {
  color: #7e92aa;
  text-align: left;
}

.message-history-item:not(.incoming) .history-item-time {
  color: rgba(255, 255, 255, 0.85);
  text-align: right;
}

/* ===== Date separators ===== */

.history-date-item {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  color: #8da3b8;
  font-size: 11px;
  font-weight: 600;
  background: rgba(141, 163, 184, 0.14);
  border-radius: 999px;
  padding: 4px 14px;
  margin: 0.75rem 0 0.75rem;
}

/* ===== Typing indicator ===== */

.typing-indicator {
  -ms-flex-item-align: start;
      align-self: flex-start;
  display: -ms-flexbox;
  display: flex;
  gap: var(--space-1);
  gap: var(--space-1);
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid #e1eaf3;
  border-radius: 16px 16px 16px 4px;
  margin-top: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.typing-indicator__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b0c4d8;
  animation: typing-bounce 1.2s infinite ease-in-out
}

.typing-indicator__dot:nth-child(2) {
  animation-delay: 0.15s;
}

.typing-indicator__dot:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes typing-bounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

/* ===== Scroll-to-bottom button ===== */

.scroll-to-bottom-button {
  position: absolute;
  bottom: 12px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #d4e2ef;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: center;
      justify-content: center;
  padding: 0;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
  z-index: 10
}

.scroll-to-bottom-button:hover {
  background: #f5f9fc;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}
.messages-search-contact-wrapper {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  border-bottom: 1px solid #e1eaf3;
  background: #ffffff;
  padding: 0.3rem 14px;
}

.messages-search-contact {
  -ms-flex-positive: 1;
      flex-grow: 1;
  border-radius: 8px;
  border: 1px solid #d4e2ef;
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.messages-search-contact:focus-within {
  border-color: #198f96;
}
.messages-contact-info-wrapper {
  border-bottom: 1px solid #e1eaf3;
  background: #ffffff;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  padding: 0 14px;
  -ms-flex-direction: column;
      flex-direction: column;
}

.messages-contact-info-mobile-bar {
  display: none;
  width: 100%;
  -ms-flex-align: center;
      align-items: center;
  padding: 0.6rem 4px;
  border-bottom: 1px solid #edf2f7;
}

.messages-back-button {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background-color 0.15s ease
}

.messages-back-button:hover {
  background-color: rgba(25, 143, 150, 0.06);
}

.messages-contact-info-mobile-name {
  color: #253d58;
  font-size: 16px;
  font-weight: 700;
  margin-left: 4px;
}

.messages-contact-info {
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}

.messages-contact-info > div > div {
      padding: 0.4rem 14px;
    }

.messages-contact-info .contact-info-name {
    color: #253d58;
    font-size: 17px;
    font-weight: 700;
  }

.messages-contact-info .contact-info-call-icon {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
  }

.messages-contact-info .contact-info-call-icon > svg {
      cursor: pointer;
    }

.messages-contact-info .contact-info-search-message {
    padding: 0 14px;
    -ms-flex-positive: 1;
        flex-grow: 1;
  }

@media (max-width: 767px) {
  .messages-contact-info {
    display: none;
  }

  .messages-contact-info-mobile-bar {
    display: -ms-flexbox;
    display: flex;
  }
}
.contact-list-filters {
  border-top: 1px solid #e1eaf3;
  color: #597088;
  font-size: 12px;
  font-weight: 600;
  padding: 0.6rem 14px;
  background: #ffffff;
}
/* ===== Messages page layout ===== */
.messages {
  height: calc(100vh - 206px);
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 340px minmax(0, 1fr);
      grid-template-columns: 340px minmax(0, 1fr);
  -ms-grid-rows: 1fr;
      grid-template-rows: 1fr;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
/* ===== Sidebar (left column) ===== */
.messages__sidebar {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  min-height: 0;
  border-right: 1px solid #e1eaf3;
  background: #fbfdff;
}
.messages__sidebar > .messages-search-contact-wrapper {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.messages__sidebar > .messages-contact-list {
  -ms-flex: 1;
      flex: 1;
  min-height: 0;
}
.messages__sidebar > .contact-list-filters {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
/* ===== Chat pane (right column) ===== */
.messages__chat {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  min-height: 0;
  background: #f0f5fa;
}
.messages__chat > .messages-contact-info-wrapper {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.messages__chat > .messages-message-history-wrapper {
  -ms-flex: 1;
      flex: 1;
  min-height: 0;
}
.messages__chat > .messages-new {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
/* ===== Mobile: drill-down navigation ===== */
@media (max-width: 767px) {
  .messages {
    height: calc(100vh - 140px);
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    -ms-grid-rows: 1fr;
        grid-template-rows: 1fr;
    border-radius: 0;
    position: relative;
    overflow: hidden;
  }

  .messages__sidebar, .messages__chat {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }

  /* Sidebar starts visible, chat is off-screen right */
  .messages--mobile-view-list .messages__sidebar {
    transform: translateX(0);
  }
  .messages--mobile-view-list .messages__chat {
    transform: translateX(100%);
  }

  /* Chat slides in, sidebar slides out left */
  .messages--mobile-view-chat .messages__sidebar {
    transform: translateX(-100%);
  }
  .messages--mobile-view-chat .messages__chat {
    transform: translateX(0);
  }
}
/* Conversations page — revamp design system */

.conversations {
  height: calc(100vh - 206px);
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 320px minmax(0, 1fr);
      grid-template-columns: 320px minmax(0, 1fr);
  overflow: hidden;
}

.conversations-panel-header {
  -ms-flex-align: center;
      align-items: center;
  background: var(--surface);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  color: var(--ink);
  display: -ms-flexbox;
  display: flex;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 18px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Contact list panel */

.conversations-contact-list-panel {
  border-right: 1px solid var(--line);
  border-right: 1px solid var(--line);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.conversations-contact-list {
  background: var(--surface-mute);
  background: var(--surface-mute);
  -ms-flex: 1;
      flex: 1;
  overflow-y: auto;
}

.conversations-search {
  background: var(--surface);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}

.conversations-search input {
  background: var(--surface-mute);
  background: var(--surface-mute);
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--ink);
  color: var(--ink);
  font-size: 13px;
  height: 38px;
  outline: none;
  padding: 0 14px;
  transition: border-color 120ms ease, background-color 120ms ease;
  width: 100%;
}

.conversations-search input:focus {
  background: var(--surface);
  background: var(--surface);
  border-color: rgba(25, 179, 159, 0.42);
}

.conversations-contact {
  -ms-flex-align: center;
      align-items: center;
  border-bottom: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
  padding: 10px 16px;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.conversations-contact:hover {
  background: rgba(25, 179, 159, 0.06);
}

.conversations-contact.active {
  background: rgba(25, 179, 159, 0.1);
  border-left-color: var(--brand);
  border-left-color: var(--brand);
}

.conversations-contact-avatar {
  -ms-flex-align: center;
      align-items: center;
  background-image: linear-gradient(135deg, #18bea8 0%, #1691a5 100%);
  border-radius: 999px;
  color: #ffffff;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  height: 36px;
  -ms-flex-pack: center;
      justify-content: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  width: 36px;
}

.conversations-contact-info {
  -ms-flex: 1;
      flex: 1;
  min-width: 0;
}

.conversations-contact-name {
  color: var(--ink);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversations-contact-number {
  color: var(--ink-soft);
  color: var(--ink-soft);
  font-size: 12px;
  margin-top: 2px;
}

/* Timeline panel */

.conversations-timeline-panel {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.conversations-timeline-header {
  -ms-flex-align: center;
      align-items: center;
  background: var(--surface);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  padding: 14px 18px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1;
}

.conversations-timeline-header-name {
  color: var(--ink);
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}

.conversations-timeline-header-number {
  color: var(--ink-soft);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 400;
}

.conversations-back {
  -ms-flex-align: center;
      align-items: center;
  background: transparent;
  border: none;
  color: var(--ink-muted);
  color: var(--ink-muted);
  cursor: pointer;
  display: none;
  font-size: 13px;
  font-weight: 600;
  gap: 4px;
  padding: 4px 0;
}

.conversations-timeline {
  background: var(--surface-soft);
  background: var(--surface-soft);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  -ms-flex: 1;
      flex: 1;
  overflow-y: auto;
  padding: 12px;
}

/* Message timeline items (chat bubbles) */

.conversations-timeline-item {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  margin-bottom: 8px;
}

.conversations-timeline-item.incoming {
  -ms-flex-align: start;
      align-items: flex-start;
}

.conversations-timeline-item.outgoing {
  -ms-flex-align: end;
      align-items: flex-end;
}

.conversations-timeline-bubble {
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.45;
  max-width: 72%;
  padding: 8px 14px;
}

.conversations-timeline-item.incoming .conversations-timeline-bubble {
  background: var(--surface);
  background: var(--surface);
  border: 1px solid var(--line);
  border: 1px solid var(--line);
  color: var(--ink);
  color: var(--ink);
}

.conversations-timeline-item.outgoing .conversations-timeline-bubble {
  background: #eaf2fb;
  color: var(--ink);
  color: var(--ink);
}

.conversations-timeline-meta {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  font-size: 11px;
  color: var(--ink-soft);
  color: var(--ink-soft);
  gap: 6px;
  margin-top: 4px;
}

.conversations-timeline-item.outgoing .conversations-timeline-meta {
  -ms-flex-pack: end;
      justify-content: flex-end;
}

/* Call timeline items */

.conversations-timeline-call {
  background: var(--surface);
  background: var(--surface);
  border: 1px solid var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 8px;
  padding: 10px 14px;
}

.conversations-timeline-call-header {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  color: var(--ink);
  gap: 8px;
}

.conversations-timeline-call-meta {
  color: var(--ink-soft);
  color: var(--ink-soft);
  font-size: 12px;
  margin-left: auto;
}

.conversations-timeline-call audio {
  margin-top: 8px;
  width: 100%;
}

.conversations-timeline-call-transcript {
  color: var(--ink-muted);
  color: var(--ink-muted);
  font-size: 13px;
  font-style: italic;
  margin: 8px 0 0;
}

/* Empty states */

.conversations-empty {
  color: var(--ink-soft);
  color: var(--ink-soft);
  font-size: 14px;
  margin-top: 40px;
  padding: 32px;
  text-align: center;
}

/* Loading skeletons */

.conversations-skeleton {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
  padding: 16px;
}

.conversations-skeleton-avatar {
  background: var(--surface-mute);
  background: var(--surface-mute);
  border-radius: 999px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: 36px;
  width: 36px;
}

.conversations-skeleton-lines {
  -ms-flex: 1;
      flex: 1;
}

.conversations-skeleton-line {
  background: var(--surface-mute);
  background: var(--surface-mute);
  border-radius: 6px;
  height: 12px;
  margin-bottom: 6px;
}

.conversations-skeleton-line:nth-child(1) { width: 60%; }

.conversations-skeleton-line:nth-child(2) { width: 40%; }

.conversations-skeleton-bubble {
  background: var(--surface-mute);
  background: var(--surface-mute);
  border-radius: 12px;
  height: 48px;
  margin-bottom: 8px;
  max-width: 60%;
}

.conversations-skeleton-bubble:nth-child(1) { width: 50%; }

.conversations-skeleton-bubble:nth-child(2) { width: 65%; }

.conversations-skeleton-bubble:nth-child(3) { width: 80%; }

.conversations-skeleton-bubble:nth-child(4) { width: 50%; }

.conversations-skeleton-bubble:nth-child(5) { width: 65%; }

.conversations-skeleton-timeline {
  padding: 16px;
}

/* Mobile: drill-down between contact list and timeline */

@media (max-width: 960px) {
  .conversations {
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
    -ms-grid-rows: auto;
        grid-template-rows: auto;
    height: auto;
    min-height: calc(100vh - 180px);
  }

  .conversations-contact-list-panel.hidden, .conversations-timeline-panel.hidden {
    display: none;
  }

  .conversations-contact-list-panel {
    border-right: none;
  }

  .conversations-back {
    display: -ms-inline-flexbox;
    display: inline-flex;
  }
}
/* SMS Templates — extracted from inline styles, using revamp.css custom properties */

.sms-templates {
  display: -ms-flexbox;
  display: flex;
  height: calc(100vh - 64px);
  overflow: hidden;
}

.sms-templates__panel {
  border-radius: 0;
  border-right: 1px solid var(--line);
  border-right: 1px solid var(--line);
  min-width: 300px;
  overflow-y: auto;
  width: 300px;
}

.sms-templates__panel-header {
  -ms-flex-align: center;
      align-items: center;
  border-bottom: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
}

.sms-templates__title {
  font-size: var(--text-lg);
  font-size: var(--text-lg);
  font-weight: 600;
}

.sms-templates__form-panel {
  -ms-flex: 1;
      flex: 1;
  overflow-y: auto;
}

/* Template list */

.sms-template-list {
  padding: 0;
}

.sms-template-list__item {
  border-left: 3px solid transparent;
}

.sms-template-list__item--selected {
  background-color: var(--surface-mute) !important;
  background-color: var(--surface-mute) !important;
  border-left: 3px solid var(--brand-deep);
  border-left: 3px solid var(--brand-deep);
}

/* Template form */

.sms-template-form__actions {
  display: -ms-flexbox;
  display: flex;
  gap: var(--space-2);
  gap: var(--space-2);
}
/* Tasks page — extracted from inline styles, using revamp.css custom properties */

.tasks-page {
  padding: var(--space-4);
  padding: var(--space-4);
}

.tasks-page__header {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  margin-bottom: var(--space-4);
  margin-bottom: var(--space-4);
}

.tasks-page__title {
  margin: 0;
}

/* Table column widths */

.tasks-page__col-status {
  width: 110px;
}

.tasks-page__col-priority {
  width: 100px;
}

.tasks-page__col-due {
  width: 150px;
}

.tasks-page__col-assigned {
  width: 160px;
}

.tasks-page__col-actions {
  width: 60px;
}

/* KanbanBoard */

.tasks-kanban__drop-hint {
  color: var(--ink-soft);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  font-size: var(--text-sm);
  padding: 24px 0;
  text-align: center;
}

/* TaskCard */

.tasks-card__row {
  -ms-flex-align: start;
      align-items: flex-start;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
}

.tasks-card__body {
  -ms-flex: 1;
      flex: 1;
  padding-right: var(--space-2);
  padding-right: var(--space-2);
}

.tasks-card__title {
  font-weight: 500;
  margin-bottom: var(--space-1);
  margin-bottom: var(--space-1);
}

.tasks-card__assignee {
  color: var(--ink-soft);
  color: var(--ink-soft);
  font-size: var(--text-xs);
  font-size: var(--text-xs);
  margin-bottom: var(--space-1);
  margin-bottom: var(--space-1);
}

.tasks-card__priority {
  font-size: var(--text-xs);
  font-size: var(--text-xs);
  text-transform: capitalize;
}

/* FilterBar */

.tasks-filterbar {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: var(--space-4);
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  margin-bottom: var(--space-4);
}

.tasks-filterbar__chips {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  gap: var(--space-2);
  gap: var(--space-2);
}

.tasks-filterbar__view-toggle {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  margin-left: auto;
}
:root {
  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* Border-radius scale */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  /* Typography scale */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 26px;
  --text-3xl: 32px;

  /* Brand colors */
  --brand: #19b39f;
  --brand-deep: #117f89;
  --brand-soft: #daf4ef;
  --ink: #1f2f46;
  --ink-muted: #5f738c;
  --ink-soft: #8194aa;
  --surface: #ffffff;
  --surface-soft: #f5f9fc;
  --surface-mute: #f1f6fa;
  --line: #dce6ef;
  --line-strong: #c7d6e5;
  --sidebar: #14233a;
  --sidebar-line: #24344f;
  --card-shadow: 0 22px 48px rgba(19, 37, 59, 0.12);
  --soft-shadow: 0 12px 24px rgba(19, 37, 59, 0.08);
}

* {
  box-sizing: border-box;
}

/* Form controls do not inherit font-family from their ancestors — browsers
   substitute the system UI font. Without this, every button, input, select and
   textarea in the app rendered in Arial while the surrounding text used
   Manrope, which is visible wherever a label sits next to its input or a
   button sits beside a heading. */

button, input, optgroup, select, textarea {
  font-family: inherit;
}

html, body, #root {
  min-height: 100%;
}

html, body {
  background: radial-gradient(circle at 20% 10%, #ddf8f4 0%, transparent 36%),
    radial-gradient(circle at 90% 0%, #e4ebff 0%, transparent 34%),
    linear-gradient(160deg, #f6fbfd 0%, #f3f8fc 45%, #edf5fb 100%);
  color: #1f2f46;
  color: var(--ink);
  font-family: 'Manrope', 'Avenir Next', 'Segoe UI', sans-serif;
  font-size: 14px;
  font-size: var(--text-base);
  line-height: 1.45;
  margin: 0;
  padding: 0;
}

h2 {
  color: #1f2f46;
  color: var(--ink);
  font-family: 'Space Grotesk', 'Manrope', sans-serif;
  font-size: 29px;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-bottom: 18px;
}

a {
  color: inherit;
}

/* --- Merged from index.css: reset & utilities --- */

input:invalid {
  box-shadow: none;
}

.hide {
  display: none !important;
}

.bolder {
  font-weight: 500;
}

.flag-icon {
  width: 1.33333333em;
  height: 1em;
}

.private-layout {
  background: transparent;
  display: -ms-flexbox;
  display: flex;
  height: auto;
  min-height: 100vh;
}

.private-main {
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
      flex: 1;
  -ms-flex-direction: column;
      flex-direction: column;
  min-width: 0;
}

.layout-wrapper {
  -ms-flex: 1;
      flex: 1;
  margin-top: 0 !important;
  overflow-y: auto;
  padding: 24px 30px 30px;
  padding: var(--space-6) 30px 30px;
}

.page-frame {
  min-width: 0;
}

.app-sidebar {
  background: linear-gradient(196deg, #1a2c46 0%, #14233a 44%, #111d30 100%);
  border-right: 1px solid #24344f;
  border-right: 1px solid var(--sidebar-line);
  box-shadow: 26px 0 60px rgba(8, 16, 30, 0.26);
  color: #d5e1f0;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  height: 100vh;
  /* The nav + account + plan card can be taller than the viewport (the manager
     role has nine nav items). Without this the plan card rendered past the
     bottom of the dark panel, onto the light page background, and stretched
     the document. The nav list scrolls instead (see
     .app-sidebar-section--scroll) so the plan card stays pinned and visible. */
  overflow: hidden;
  padding: 24px 18px 20px;
  padding: var(--space-6) 18px var(--space-5);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 276px;
  z-index: 5;
}

.app-sidebar-section--scroll {
  -ms-flex: 1 1 auto;
      flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.app-sidebar-section--scroll::-webkit-scrollbar {
  width: 8px;
}

.app-sidebar-section--scroll::-webkit-scrollbar-track {
  background: transparent;
}

.app-sidebar-section--scroll::-webkit-scrollbar-thumb {
  background: rgba(213, 225, 240, 0.16);
  border-radius: 4px;
}

.app-sidebar-section--scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(213, 225, 240, 0.28);
}

.app-brand {
  -ms-flex-align: center;
      align-items: center;
  border: 1px solid rgba(154, 181, 214, 0.22);
  border-radius: 18px;
  border-radius: var(--radius-lg);
  color: #ffffff;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
  gap: var(--space-3);
  margin-bottom: 22px;
  padding: 12px 12px;
  padding: var(--space-3) var(--space-3);
  text-decoration: none;
}

.app-brand-mark {
  -ms-flex-align: center;
      align-items: center;
  background-image: linear-gradient(135deg, #18bea8 0%, #1691a5 100%);
  border-radius: 12px;
  border-radius: var(--radius-md);
  box-shadow: 0 12px 22px rgba(24, 190, 168, 0.36);
  display: -ms-inline-flexbox;
  display: inline-flex;
  height: 38px;
  -ms-flex-pack: center;
      justify-content: center;
  width: 38px;
}

.app-brand-mark svg {
  height: 17px;
  width: 17px;
}

.app-brand-mark svg path {
  fill: #ffffff !important;
}

.app-brand-name {
  font-family: 'Space Grotesk', 'Manrope', sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.app-brand-caption {
  color: #8ea6c3;
  font-size: 11px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  margin-top: 4px;
  margin-top: var(--space-1);
  text-transform: uppercase;
}

.app-sidebar-section {
  margin-top: 8px;
  margin-top: var(--space-2);
}

.app-sidebar-section-title {
  color: #7f95b3;
  font-size: 11px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
  padding: 0 10px;
  text-transform: uppercase;
}

.app-sidebar-nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 6px;
}

.sidebar-link {
  -ms-flex-align: center;
      align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  border-radius: var(--radius-md);
  color: #cadaef;
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  font-size: 14px;
  font-size: var(--text-base);
  font-weight: 600;
  gap: 12px;
  gap: var(--space-3);
  min-height: 44px;
  padding: 0 12px;
  padding: 0 var(--space-3);
  text-decoration: none;
  text-align: left;
  transition: background-color 140ms ease, border-color 140ms ease,
    color 140ms ease;
  width: 100%;
}

.sidebar-link:hover {
  background: rgba(145, 169, 198, 0.18);
  border-color: rgba(145, 169, 198, 0.22);
  color: #ffffff;
}

.sidebar-link.active {
  background-image: linear-gradient(
    135deg,
    rgba(24, 190, 168, 0.36) 0%,
    rgba(20, 131, 164, 0.4) 100%
  );
  border-color: rgba(85, 209, 193, 0.44);
  box-shadow: 0 14px 24px rgba(11, 31, 58, 0.22);
  color: #ffffff;
}

.sidebar-link-icon {
  height: 15px;
  width: 15px;
}

.sidebar-link-icon path {
  fill: currentColor !important;
}

.sidebar-link-badge {
  -ms-flex-align: center;
      align-items: center;
  background: #ffffff;
  border-radius: 999px;
  color: #0f6f80;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-size: 11px;
  font-size: var(--text-xs);
  font-weight: 700;
  height: 22px;
  -ms-flex-pack: center;
      justify-content: center;
  margin-left: auto;
  min-width: 22px;
  padding: 0 6px;
}

.sidebar-link--ghost {
  border-top: 1px dashed rgba(154, 181, 214, 0.3);
  border-radius: 0;
  margin-top: 8px;
  margin-top: var(--space-2);
  padding-top: 12px;
  padding-top: var(--space-3);
}

.app-plan-card {
  background: linear-gradient(
    135deg,
    rgba(24, 190, 168, 0.08) 0%,
    rgba(20, 131, 164, 0.05) 50%,
    rgba(10, 20, 34, 0.38) 100%
  );
  border: 1px solid rgba(24, 190, 168, 0.22);
  border-radius: 16px;
  box-shadow: 0 0 20px rgba(24, 190, 168, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  -ms-flex: 0 0 auto;
      flex: 0 0 auto;
  margin-top: auto;
  padding: 14px 14px 16px;
  padding: 14px 14px var(--space-4);
  transition: box-shadow 200ms ease, border-color 200ms ease;
}

.app-plan-card:hover {
  border-color: rgba(24, 190, 168, 0.38);
  box-shadow: 0 0 28px rgba(24, 190, 168, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.app-plan-card-header {
  margin-bottom: 10px;
}

.app-plan-card-label {
  color: #87a0bd;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-bottom: 8px;
  margin-bottom: var(--space-2);
  text-transform: uppercase;
}

.app-plan-card-name {
  color: #f1f7ff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.app-plan-card-meta {
  color: #9eb2cc;
  font-size: 12px;
  margin-top: 6px;
}

.app-plan-card-usage {
  margin: 12px 0 14px;
}

.app-plan-card-usage-label {
  -ms-flex-align: center;
      align-items: center;
  color: #9eb2cc;
  display: -ms-flexbox;
  display: flex;
  font-size: 11px;
  font-weight: 600;
  -ms-flex-pack: justify;
      justify-content: space-between;
  margin-bottom: 6px;
}

.app-plan-card-usage-bar {
  background: rgba(10, 20, 34, 0.6);
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}

.app-plan-card-usage-fill {
  background: linear-gradient(90deg, #18bea8 0%, #1691a5 100%);
  border-radius: 999px;
  height: 100%;
  min-width: 2px;
  transition: width 400ms ease;
}

.app-plan-card-actions {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 8px;
  margin-top: 12px;
}

.app-plan-card-cta {
  -ms-flex-align: center;
      align-items: center;
  background-image: linear-gradient(135deg, #18bea8 0%, #1691a5 100%);
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(24, 190, 168, 0.28);
  color: #ffffff;
  display: -ms-flexbox;
  display: flex;
  font-size: 13px;
  font-weight: 700;
  -ms-flex-pack: center;
      justify-content: center;
  letter-spacing: 0.02em;
  min-height: 36px;
  padding: 0 14px;
  text-decoration: none;
  text-transform: uppercase;
  transition: box-shadow 160ms ease, transform 160ms ease;
  width: 100%;
}

.app-plan-card-cta:hover {
  box-shadow: 0 8px 22px rgba(24, 190, 168, 0.4);
  transform: translateY(-1px);
}

.app-plan-card-link {
  color: #9eb2cc;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: color 140ms ease;
}

.app-plan-card-link:hover {
  color: #d5e1f0;
  text-decoration: underline;
}

.header {
  -ms-flex-align: center;
      align-items: center;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #dce6ef;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 12px 24px rgba(19, 37, 59, 0.08);
  box-shadow: var(--soft-shadow);
  display: -ms-flexbox;
  display: flex;
  gap: 14px;
  margin: 18px 26px 0;
  min-height: 74px;
  padding: 12px 16px;
  padding: var(--space-3) var(--space-4);
}

.header-mobile-brand {
  display: none;
}

.header-search {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex: 1;
      flex: 1;
  gap: 6px;
  min-width: 120px;
  position: relative;
}

.header-search-icon {
  height: 15px;
  left: 14px;
  opacity: 0.55;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  z-index: 1;
}

.header-search-icon path {
  fill: #60758e !important;
}

.header-search-input-wrapper {
  -ms-flex: 1;
      flex: 1;
  position: relative;
}

.header-search-target {
  background: #f1f6fa;
  background: var(--surface-mute);
  border: 1px solid transparent;
  border-radius: 14px;
  color: #1f2f46;
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
  height: 46px;
  outline: none;
  padding: 0 8px;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.header-search-target:hover {
  background: #ffffff;
  border-color: #dce6ef;
  border-color: var(--line);
}

.header-search input {
  background: #f1f6fa;
  background: var(--surface-mute);
  border: 1px solid transparent;
  border-radius: 14px;
  color: #1f2f46;
  color: var(--ink);
  -ms-flex: 1;
      flex: 1;
  font-size: 14px;
  font-size: var(--text-base);
  height: 46px;
  outline: none;
  /* Left padding clears .header-search-icon, which is absolutely positioned at
     left:14px and is ~15px wide. At the previous 16px the placeholder started
     underneath the magnifying glass. */
  padding: 0 16px 0 40px;
  padding: 0 var(--space-4) 0 40px;
  transition: border-color 120ms ease, background-color 120ms ease;
  width: 100%;
}

.header-search input:focus {
  background: #ffffff;
  border-color: rgba(25, 179, 159, 0.42);
}

.header-actions {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  gap: var(--space-2);
}

.header-icon-button {
  -ms-flex-align: center;
      align-items: center;
  background: #f1f6fa;
  background: var(--surface-mute);
  border: 1px solid transparent;
  border-radius: 12px;
  border-radius: var(--radius-md);
  color: #6f829b;
  cursor: pointer;
  display: -ms-inline-flexbox;
  display: inline-flex;
  height: 40px;
  -ms-flex-pack: center;
      justify-content: center;
  position: relative;
  transition: all 120ms ease;
  width: 40px;
}

.header-icon-button:hover {
  background: #ffffff;
  border-color: #dce6ef;
  border-color: var(--line);
  color: #425870;
}

.header-icon-badge {
  -ms-flex-align: center;
      align-items: center;
  background: #ff5e3a;
  border-radius: 50%;
  color: #fff;
  display: -ms-flexbox;
  display: flex;
  font-size: 10px;
  font-weight: 700;
  height: 16px;
  -ms-flex-pack: center;
      justify-content: center;
  min-width: 16px;
  padding: 0 3px;
  position: absolute;
  right: -4px;
  top: -2px;
}

.header-account {
  -ms-flex-align: center;
      align-items: center;
  border-left: 1px solid #dce6ef;
  border-left: 1px solid var(--line);
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
  gap: var(--space-3);
  margin-left: 4px;
  margin-left: var(--space-1);
  padding-left: 12px;
  padding-left: var(--space-3);
}

.header-account-copy {
  line-height: 1.2;
}

.header-account-name {
  color: #1e2d45;
  font-size: 15px;
  font-weight: 700;
}

.header-account-role {
  color: #7488a0;
  font-size: 12px;
  margin-top: 2px;
}

.header-avatar {
  -ms-flex-align: center;
      align-items: center;
  background-image: linear-gradient(140deg, #23c4ad 0%, #1394a7 100%);
  border-radius: 999px;
  box-shadow: 0 10px 18px rgba(18, 145, 167, 0.24);
  color: #ffffff;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  height: 40px;
  -ms-flex-pack: center;
      justify-content: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  width: 40px;
}

.header-main-menu {
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.main-menu-trigger {
  border-radius: 12px !important;
  border-radius: var(--radius-md) !important;
  height: 40px !important;
  margin: 0 !important;
  width: 40px !important;
}

.main-menu-trigger > span > span {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-pack: center;
      justify-content: center;
}

.main-menu-trigger svg path {
  fill: #3f556f;
}

.search-form {
  margin: 0;
  padding: 0;
  position: relative;
  top: 0;
  width: 340px;
}

.search-form input {
  background: #f1f6fa;
  background: var(--surface-mute);
  border: 1px solid transparent;
  border-radius: 14px;
  box-shadow: 0 12px 24px rgba(19, 37, 59, 0.08);
  box-shadow: var(--soft-shadow);
  font-size: 14px;
  font-size: var(--text-base);
  height: 44px;
  padding: 0 40px 0 14px;
}

.search-form__icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.55;
}

.main-dashboard {
  /* Single column by default. Pages that genuinely have a side rail opt in
     below; the rest (Managers, Reps, Admins, Pricing) just stack. */
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: minmax(0, 1fr);
      grid-template-columns: minmax(0, 1fr);
  grid-row-gap: 16px;
  grid-row-gap: var(--space-4);
}

/* Call Logs and Contacts put the Make a Call panel in a 318px rail beside the
   table. Full-width rows declare their span explicitly instead of relying on
   auto-placement — that is what previously dealt the table itself into the
   rail and left the header stranded in the wide column. */

.main-dashboard--with-rail {
  -ms-flex-align: start;
      align-items: start;
  grid-column-gap: 24px;
  grid-column-gap: var(--space-6);
  -ms-grid-columns: minmax(0, 1fr) 318px;
      grid-template-columns: minmax(0, 1fr) 318px;
}

.main-dashboard--with-rail > .page-header, .main-dashboard--with-rail > .main-dashboard__full {
  grid-column: 1 / -1;
}

/* Heading for a panel nested inside a page (see components/section-header). */

.section-header {
  -ms-flex-align: start;
      align-items: flex-start;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
  gap: var(--space-4);
  -ms-flex-pack: justify;
      justify-content: space-between;
  margin-bottom: 16px;
  margin-bottom: var(--space-4);
}

.section-header__titles {
  min-width: 0;
}

.section-header__title {
  color: #1f2f46;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
}

.section-header__subtitle {
  color: #8194aa;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.45;
  margin: 4px 0 0;
  max-width: 62ch;
}

.section-header__actions {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  gap: 8px;
  gap: var(--space-2);
}

/* Popover menu rows (header + account menus). */

.ui-menu-item {
  -ms-flex-align: center;
      align-items: center;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: #223046;
  color: #1f2f46;
  color: var(--ink, #223046);
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  font-family: inherit;
  font-size: 13px;
  font-size: 13px;
  font-size: var(--text-sm, 13px);
  gap: 10px;
  line-height: 1.3;
  margin: 0 4px;
  padding: 9px 12px;
  text-align: left;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
  white-space: nowrap;
  width: calc(100% - 8px);
}

.ui-menu-item:hover, .ui-menu-item:focus-visible {
  background: #f1f6fa;
  background: #f1f6fa;
  background: var(--surface-mute, #f1f6fa);
  color: #19b39f;
  color: #19b39f;
  color: var(--brand, #19b39f);
  outline: none;
}

.ui-menu-item__icon {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex: 0 0 auto;
      flex: 0 0 auto;
  height: 16px;
  -ms-flex-pack: center;
      justify-content: center;
  opacity: 0.75;
  width: 16px;
}

.ui-menu-item:hover .ui-menu-item__icon {
  opacity: 1;
}

.ui-menu-item__text {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  min-width: 0;
}

.ui-menu-item__primary {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-menu-item__secondary {
  color: #8ca0b6;
  color: #8194aa;
  color: var(--ink-soft, #8ca0b6);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-menu-item--disabled {
  color: #8ca0b6;
  color: #8194aa;
  color: var(--ink-soft, #8ca0b6);
  cursor: default;
  pointer-events: none;
}

.shadow, .rounded-card {
  background: #ffffff;
  background: var(--surface);
  border: 1px solid #dce6ef;
  border: 1px solid var(--line);
  border-radius: 18px;
  border-radius: var(--radius-lg);
  box-shadow: 0 22px 48px rgba(19, 37, 59, 0.12);
  box-shadow: var(--card-shadow);
}

/* .rounded-card wraps the form pages (Make a Call, Add Rep, Change Password …).
   It had no padding, so the page header and the form sat flush against the
   card border. .shadow is deliberately excluded — it wraps tables, which
   supply their own edge spacing. */

.rounded-card {
  padding: 24px;
  padding: var(--space-6);
}

/* ===== Form fields =====
   Match the header search input: 46px tall, 14px radius, muted fill. These
   were previously inline styles on ui-text-field (37px tall, 8px radius),
   which both looked out of place next to the rest of the UI and could not be
   overridden from CSS. */

.ui-field-label {
  color: #8194aa;
  color: var(--ink-soft);
  display: block;
  font-size: 13px;
  font-size: var(--text-sm);
  font-weight: 500;
  margin-bottom: 6px;
}

.ui-field {
  background: #f1f6fa;
  background: var(--surface-mute);
  border: 1px solid transparent;
  border-radius: 14px;
  box-sizing: border-box;
  color: #1f2f46;
  color: var(--ink);
  font-size: 14px;
  font-size: var(--text-base);
  height: 46px;
  outline: none;
  padding: 0 16px;
  transition: border-color 120ms ease, background-color 120ms ease;
  width: 100%;
}

.ui-field:-ms-input-placeholder {
  color: #5f738c;
  color: var(--ink-muted);
}

.ui-field::placeholder {
  color: #5f738c;
  color: var(--ink-muted);
}

.ui-field:focus {
  background: #ffffff;
  background: var(--surface);
  border-color: #19b39f;
  border-color: var(--brand);
}

.ui-field:disabled {
  color: #5f738c;
  color: var(--ink-muted);
  cursor: not-allowed;
  opacity: 0.7;
}

.ui-field--textarea {
  height: auto;
  min-height: 96px;
  padding: 12px 16px;
  resize: vertical;
}

.ui-field--select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%238196aa' d='M6 8L0 0h12z'/></svg>");
  background-position: right 16px center;
  background-repeat: no-repeat;
  cursor: pointer;
  padding-right: 38px;
}

.ui-field-wrapper {
  display: block;
  margin-bottom: 16px;
  margin-bottom: var(--space-4);
}

.shadow {
  overflow: hidden;
}

.rounded-card {
  box-shadow: 0 12px 24px rgba(19, 37, 59, 0.08);
  box-shadow: var(--soft-shadow);
}

.my-numbers-content {
  padding: 18px 24px 24px;
  padding: 18px var(--space-6) var(--space-6);
}

.my-purchased-numbers-location-number {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-positive: 1;
      flex-grow: 1;
}

.my-purchased-numbers-location-number > div {
    width: 50%;
    overflow: hidden;
  }

.my-numbers-header-help {
  color: #5f738c;
  color: var(--ink-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

.billing-section-header {
  border-bottom: 1px solid #dce6ef;
  border-bottom: 1px solid var(--line);
  color: #1f2f46;
  color: var(--ink);
  font-family: 'Space Grotesk', 'Manrope', sans-serif;
  font-size: 26px;
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  padding: 22px 28px;
}

.billing-section-help {
  padding: 0 28px 8px;
}

.go-back-button {
  background: #ffffff !important;
  border: 1px solid #dce6ef !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 12px 24px rgba(19, 37, 59, 0.08);
  box-shadow: var(--soft-shadow);
  height: 44px !important;
}

.go-back-button svg path {
  fill: #6b7f97;
}

.addWidget {
  background: #ffffff;
  background: var(--surface);
  border: 1px solid #dce6ef;
  border: 1px solid var(--line);
  border-radius: 18px;
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 24px rgba(19, 37, 59, 0.08);
  box-shadow: var(--soft-shadow);
  padding: 22px 24px 24px;
  padding: 22px var(--space-6) var(--space-6);
}

.addWidget h2 {
  font-size: 24px;
}

.mui-text-field-underline, .mui-text-field-focus-underline {
  display: none !important;
}

.mui-flat-button, .mui-raised-button {
  border-radius: 12px !important;
  border-radius: var(--radius-md) !important;
}

.mui-flat-button-label, .mui-raised-button-label {
  font-family: inherit !important;
  font-size: 13px !important;
  font-size: var(--text-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

.mui-raised-button:not(.mui-disabled) {
  box-shadow: 0 14px 26px rgba(18, 134, 154, 0.22) !important;
}

.mui-raised-button-primary .mui-raised-button-container {
  background-image: linear-gradient(140deg, #1ac0aa 0%, #149f9f 48%, #1387a2 100%);
}

.submenu {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}

.submenu__link {
  -ms-flex-align: center;
      align-items: center;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid #dce6ef;
  border: 1px solid var(--line);
  border-radius: 12px;
  border-radius: var(--radius-md);
  color: #5f738c;
  color: var(--ink-muted);
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-size: 13px;
  font-size: var(--text-sm);
  font-weight: 700;
  gap: 8px;
  gap: var(--space-2);
  min-height: 42px;
  padding: 0 14px;
  text-decoration: none;
  transition: all 120ms ease;
}

.submenu__link:hover {
  background: #ffffff;
  border-color: #c7d6e5;
  border-color: var(--line-strong);
  color: #1f2f46;
  color: var(--ink);
}

.submenu__link.active {
  background: #ffffff;
  border-color: rgba(25, 179, 159, 0.35);
  box-shadow: 0 12px 24px rgba(19, 37, 59, 0.08);
  box-shadow: var(--soft-shadow);
  color: #1a8f96;
}

.submenu__icon {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-inline-flexbox;
  display: inline-flex;
  height: 14px;
  width: 14px;
}

.submenu__icon svg path {
  fill: currentColor !important;
}

.submenu__badge {
  -ms-flex-align: center;
      align-items: center;
  background: linear-gradient(135deg, #1bc0ab 0%, #1493a6 100%);
  border-radius: 999px;
  color: #ffffff;
  display: -ms-inline-flexbox;
  display: inline-flex;
  font-size: 10px;
  font-weight: 700;
  height: 20px;
  -ms-flex-pack: center;
      justify-content: center;
  margin-left: 2px;
  min-width: 20px;
  padding: 0 6px;
}

/* --- Merged from index.css: table helpers --- */

.first-row-padding tr:first-child td {
  padding-top: 16px;
}

table > tfoot > tr > td {
  vertical-align: middle;
}

.call-logs-table table, .manager-call-logs-table table, .contacts-table table, .sales-reps-table table, .managers-table table, .admins-table table, .conferences-table table, .manager-usage-table table, .pricings-table table {
  border-collapse: separate !important;
  width: 100%;
}

.call-logs-table table thead tr, .manager-call-logs-table table thead tr, .contacts-table table thead tr, .sales-reps-table table thead tr, .managers-table table thead tr, .admins-table table thead tr, .conferences-table table thead tr, .manager-usage-table table thead tr, .pricings-table table thead tr {
  background: #f1f6fa;
  background: var(--surface-mute);
}

.call-logs-table table thead th, .manager-call-logs-table table thead th, .contacts-table table thead th, .sales-reps-table table thead th, .managers-table table thead th, .admins-table table thead th, .conferences-table table thead th, .manager-usage-table table thead th, .pricings-table table thead th {
  color: #70839a !important;
  font-size: 11px !important;
  font-size: var(--text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.11em !important;
  text-transform: uppercase;
}

.call-logs-table table td, .call-logs-table table th, .manager-call-logs-table table td, .manager-call-logs-table table th, .contacts-table table td, .contacts-table table th, .sales-reps-table table td, .sales-reps-table table th, .managers-table table td, .managers-table table th, .admins-table table td, .admins-table table th, .conferences-table table td, .conferences-table table th, .manager-usage-table table td, .manager-usage-table table th, .pricings-table table td, .pricings-table table th {
  border-bottom: 1px solid #ebf1f6 !important;
  color: #1f2f46 !important;
  color: var(--ink) !important;
  font-size: 13px !important;
  font-size: var(--text-sm) !important;
  padding: 13px 14px !important;
  vertical-align: middle !important;
}

.call-logs-table table tbody tr:hover td, .manager-call-logs-table table tbody tr:hover td, .contacts-table table tbody tr:hover td, .sales-reps-table table tbody tr:hover td, .managers-table table tbody tr:hover td, .admins-table table tbody tr:hover td, .conferences-table table tbody tr:hover td, .manager-usage-table table tbody tr:hover td, .pricings-table table tbody tr:hover td {
  background: rgba(25, 179, 159, 0.06);
}

.handset-on-green {
  height: 20px;
  width: 22px;
}

.handset-on-green path:first-of-type {
  fill: #76cd1a !important;
}

.handset-on-green path:last-of-type {
  fill: #ffffff !important;
}

/* --- Merged from index.css: modals --- */

.call-modal-title {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-align: center;
      align-items: center;
  margin: 0px;
  padding: 24px 41px 20px;
  color: rgba(0, 0, 0, 0.87);
  font-size: 24px;
  line-height: 32px;
  font-weight: 400;
  height: 110px;
  border-bottom: 1px solid #dce6ef;
  border-bottom: 1px solid var(--line);
  border-color: #dce6ef;
  border-color: var(--line);
}

.call-modal-title .number {
    font-weight: 300;
    display: inline-block;
    margin-left: 15px;
  }

.call-modal-title .call-timer {
    text-align: right;
    color: #a1a1a1;
    font-size: 13px;
    font-weight: 300;
  }

.call-modal-title .call-timer .timer {
      font-size: 23px;
      color: #555759;
    }

.call-info-modal-body {
  padding: 2rem 41px;
  border-top: 1px solid #dce6ef;
  border-top: 1px solid var(--line);
  border-color: #dce6ef;
  border-color: var(--line);
}

.call-modal-actions-container {
  padding: 0 !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

.messages, .inbound-inbox, .pricing-plans {
  color: #1f2f46;
  color: var(--ink);
}

.five-px-modal-border-radius > div:first-of-type > div:first-of-type > div:first-of-type {
  border-radius: 16px !important;
}

.dial-pad-dialog {
  padding-top: 120px;
}

.contact-list-filters, .messages-contact-list, .messages-search-contact-wrapper, .messages-contact-info-wrapper, .messages-new-form {
  border-color: #e6eef5 !important;
}

.messages-contact:hover {
  background: rgba(25, 179, 159, 0.08) !important;
}

.messages-contact-name.active {
  color: #178f96;
}

/* ── Spacing utility classes (for replacing inline styles) ─── */

.pad-1 { padding: 4px; padding: var(--space-1); }

.pad-2 { padding: 8px; padding: var(--space-2); }

.pad-3 { padding: 12px; padding: var(--space-3); }

.pad-4 { padding: 16px; padding: var(--space-4); }

.pad-5 { padding: 20px; padding: var(--space-5); }

.pad-6 { padding: 24px; padding: var(--space-6); }

.pad-8 { padding: 32px; padding: var(--space-8); }

.pad-10 { padding: 40px; padding: var(--space-10); }

.mt-0 { margin-top: 0; }

.mt-1 { margin-top: 4px; margin-top: var(--space-1); }

.mt-2 { margin-top: 8px; margin-top: var(--space-2); }

.mt-3 { margin-top: 12px; margin-top: var(--space-3); }

.mt-4 { margin-top: 16px; margin-top: var(--space-4); }

.mt-5 { margin-top: 20px; margin-top: var(--space-5); }

.mt-6 { margin-top: 24px; margin-top: var(--space-6); }

.mt-8 { margin-top: 32px; margin-top: var(--space-8); }

.mb-0 { margin-bottom: 0; }

.mb-1 { margin-bottom: 4px; margin-bottom: var(--space-1); }

.mb-2 { margin-bottom: 8px; margin-bottom: var(--space-2); }

.mb-3 { margin-bottom: 12px; margin-bottom: var(--space-3); }

.mb-4 { margin-bottom: 16px; margin-bottom: var(--space-4); }

.mb-5 { margin-bottom: 20px; margin-bottom: var(--space-5); }

.mb-6 { margin-bottom: 24px; margin-bottom: var(--space-6); }

.mb-8 { margin-bottom: 32px; margin-bottom: var(--space-8); }

.ml-0 { margin-left: 0; }

.ml-1 { margin-left: 4px; margin-left: var(--space-1); }

.ml-2 { margin-left: 8px; margin-left: var(--space-2); }

.ml-3 { margin-left: 12px; margin-left: var(--space-3); }

.ml-4 { margin-left: 16px; margin-left: var(--space-4); }

.ml-6 { margin-left: 24px; margin-left: var(--space-6); }

.ml-8 { margin-left: 32px; margin-left: var(--space-8); }

.mr-0 { margin-right: 0; }

.mr-2 { margin-right: 8px; margin-right: var(--space-2); }

.mr-4 { margin-right: 16px; margin-right: var(--space-4); }

.pad-3-4 { padding: 12px 16px; padding: var(--space-3) var(--space-4); }

.pad-1-2 { padding: 4px 8px; padding: var(--space-1) var(--space-2); }

.pad-2-0 { padding: 8px 0; padding: var(--space-2) 0; }

.pad-3-0 { padding: 12px 0; padding: var(--space-3) 0; }

.pl-2 { padding-left: 8px; padding-left: var(--space-2); }

@media (min-width: 960px) {
  .private-layout .submenu {
    display: none;
  }
  .header-hamburger {
    display: none;
  }

  /* Mobile nav drawer is mobile-only. Every .mobile-nav-* rule lives inside the
     max-width:960px block, so without this the drawer markup renders unstyled
     in the document flow on desktop. */
  .mobile-nav-root {
    display: none;
  }

  /* --- Merged from desktop.css --- */
  .hide-on-desktop {
    display: none !important;
  }

  .my-numbers-grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    grid-column-gap: 20px;
  }

  .my-purchased-numbers {
    height: calc(100vh - 280px);
    overflow: auto;
  }

  .call-modal-content {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[3];
        grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 24px;
    grid-row-gap: 1rem;
  }
    .call-modal-content > div {
      padding-bottom: 8px;
    }
    .call-modal-content > div.notes-form {
      -ms-grid-column: 1;
          grid-column-start: 1;
      grid-column-end: 4;
    }
    .call-modal-content > div.purchase-button {
      -ms-flex-item-align: center;
          -ms-grid-row-align: center;
          align-self: center;
      justify-self: center;
    }
    .call-modal-content > div.call-runtime-settings {
      -ms-flex-item-align: center;
          -ms-grid-row-align: center;
          align-self: center;
    }

  .call-info-modal-content {
      margin: 0 29px 0 !important;
  }

  .call-info-rep-logs .call-info-modal-content {
    width: calc(100% - 402px) !important;
    max-width: calc(100% - 402px) !important;
  }

  .call-info-manager-logs .call-info-modal-content {
    width: calc(100% - 58px) !important;
    max-width: calc(100% - 58px) !important;
  }
}

@media (max-width: 1090px) {
  .app-sidebar {
    width: 252px;
  }

  .header-account-copy {
    display: none;
  }

  .search-form {
    width: 290px;
  }
}

@media (max-width: 960px) {
  html, body {
    background: linear-gradient(160deg, #f7fbfe 0%, #eef6fc 100%);
  }

  .private-layout {
    display: block;
    min-height: 0;
  }

  .app-sidebar {
    display: none !important;
  }

  .header {
    border-left: 0;
    border-radius: 0;
    border-right: 0;
    border-top: 0;
    margin: 0;
    min-height: 62px;
    padding: 10px 12px;
    padding: 10px var(--space-3);
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 20;
  }

  .header-mobile-brand {
    display: -ms-inline-flexbox;
    display: inline-flex;
  }

  .header-mobile-brand svg {
    height: 25px;
    width: 108px;
  }

  .header-search {
    -ms-flex: 1;
        flex: 1;
  }

  .header-search input {
    border-radius: 12px;
    border-radius: var(--radius-md);
    height: 40px;
    padding-left: 38px;
  }

  .header-search-target {
    display: none;
  }

  .header-icon-button {
    display: none;
  }

  .header-account {
    border-left: 0;
    gap: 6px;
    margin-left: 0;
    padding-left: 0;
  }

  .header-avatar {
    height: 34px;
    width: 34px;
  }

  .layout-wrapper {
    padding: 14px 10px 18px;
  }

  .search-form {
    width: 100%;
  }

  .main-dashboard {
    display: block;
  }

  .main-dashboard > div {
    margin-bottom: 12px;
    margin-bottom: var(--space-3);
  }

  .rounded-card {
    margin: 0;
  }

  .my-numbers-content {
    padding: 16px;
    padding: var(--space-4);
  }

  .addWidget {
    padding: 18px 14px 18px;
  }

  .private-layout .submenu {
    display: none;
  }

  .submenu__link {
    -ms-flex: 0 0 auto;
        flex: 0 0 auto;
  }

  /* --- Merged from mobile.css --- */
  .hide-on-mobile {
    display: none;
  }

  dl.mobile-table-dl, dl.my-numbers-dl {
    overflow: hidden;
  }
    dl.mobile-table-dl > div, dl.my-numbers-dl > div {
      padding: .3rem 0
    }
    dl.mobile-table-dl > div:last-child, dl.my-numbers-dl > div:last-child {
    padding-bottom: 0;
  }
    dl.mobile-table-dl > div:first-child, dl.my-numbers-dl > div:first-child {
    padding-top: 0;
  }
    dl.mobile-table-dl dt {
      font-weight: 300;
    }
    dl.mobile-table-dl dd, dl.mobile-table-dl dt {
      display: inline-block;
      padding: 0;
      margin: 0;
      width: 50%;
    }

  dl.mobile-table-dl.stats dt { width: 70%;
  }

  dl.mobile-table-dl.stats dd { width: 30%;
  }

  dl.mobile-table-dl.webhook dt { width: 20%;
  }

  dl.mobile-table-dl.webhook dd { width: 80%;
  }

  dl.mobile-table-dl.add-ons dt { width: 30%;
  }

  dl.mobile-table-dl.add-ons dd { width: 70%;
  }
    dl.my-numbers-dl dd, dl.my-numbers-dl dt {
      padding: 0;
      margin: 0;
    }
    dl.my-numbers-dl dt {
      font-weight: normal;
      font-size: 12px;
      color: rgb(158, 158, 158);
      margin-bottom: .6rem;
    }
      dl.my-numbers-dl dt svg {
        position: relative;
        top: 2px;
        margin-right: 5px;
      }
    dl.my-numbers-dl dd {
      font-size: 16px;
      letter-spacing: 0.8;
      color: #5cbece;
    }

  .my-account .rounded-card {
    min-height: calc(100vh - 110px);
  }

  .my-purchased-numbers-location-number {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
    .my-purchased-numbers-location-number > div {
      width: 100%;
    }

  .call-modal-actions-container > button:nth-child(2) {
    display: none !important;
  }

  .call-modal-title {
    padding: 1rem 16px !important;
    height: auto !important;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
    .call-modal-title .call-timer, .call-modal-title .client-number {
      width: 100%;
      text-align: center;
    }

  .call-modal-content {
    padding: 1rem 16px !important;
  }
    .call-modal-content > div:not(.notes-form):not(.call-from-number-form) {
      text-align: center;
      padding-bottom: 1rem;
    }
      .call-modal-content > div.call-runtime-settings > div {
        width: 140px !important;
        margin: 0 auto;
      }
    .call-modal-content > div.call-from-number-form {
      width: 75% !important;
      margin: 0 auto;
    }

  .call-info-modal-body {
    padding: 1rem 16px;
  }

  /* Hamburger button — mobile only */
  .header-hamburger {
    -ms-flex-align: center;
        align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    gap: 4px;
    height: 40px;
    -ms-flex-pack: center;
        justify-content: center;
    width: 40px;
    padding: 0;
  }

  .header-hamburger-bar {
    background: #3f556f;
    border-radius: 2px;
    display: block;
    height: 3px;
    transition: transform 160ms ease, opacity 160ms ease;
    width: 20px;
  }

  /* Mobile nav drawer */
  .mobile-nav-root {
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 100;
  }

  .mobile-nav-backdrop {
    background: rgba(8, 16, 30, 0.5);
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 200ms ease;
  }

  .mobile-nav-drawer {
    background: linear-gradient(196deg, #1a2c46 0%, #14233a 44%, #111d30 100%);
    border-right: 1px solid #24344f;
    box-shadow: 26px 0 60px rgba(8, 16, 30, 0.4);
    color: #d5e1f0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    height: 100%;
    max-width: 320px;
    overflow-y: auto;
    position: absolute;
    top: 0;
    left: 0;
    width: 82%;
    transform: translateX(-100%);
    transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 101;
  }

  .mobile-nav-root.mobile-nav--open {
    pointer-events: auto;
  }

  .mobile-nav--open .mobile-nav-backdrop {
    opacity: 1;
  }

  .mobile-nav--open .mobile-nav-drawer {
    transform: translateX(0);
  }

  .mobile-nav-header {
    -ms-flex-align: center;
        align-items: center;
    border-bottom: 1px solid rgba(154, 181, 214, 0.18);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
    min-height: 56px;
    padding: 12px 16px;
  }

  .mobile-nav-title {
    color: #ffffff;
    font-family: 'Space Grotesk', 'Manrope', sans-serif;
    font-size: 18px;
    font-weight: 600;
  }

  .mobile-nav-close {
    -ms-flex-align: center;
        align-items: center;
    background: rgba(145, 169, 198, 0.18);
    border: 1px solid transparent;
    border-radius: 10px;
    color: #cadaef;
    cursor: pointer;
    display: -ms-inline-flexbox;
    display: inline-flex;
    height: 36px;
    -ms-flex-pack: center;
        justify-content: center;
    width: 36px;
  }

  .mobile-nav-close:hover {
    background: rgba(145, 169, 198, 0.28);
  }

  .mobile-nav-close svg {
    height: 16px;
    width: 16px;
  }

  .mobile-nav-close svg path {
    fill: currentColor !important;
  }

  .mobile-nav-body {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex: 1;
        flex: 1;
    padding: 16px 14px;
  }

  .mobile-nav-section {
    margin-bottom: 8px;
  }

  .mobile-nav-section-title {
    color: #7f95b3;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    margin-bottom: 10px;
    padding: 0 10px;
    text-transform: uppercase;
  }

  .mobile-nav-links {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    gap: 4px;
  }

  .mobile-nav-link {
    -ms-flex-align: center;
        align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #cadaef;
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    font-size: 14px;
    font-weight: 600;
    gap: 12px;
    min-height: 44px;
    padding: 0 12px;
    text-decoration: none;
    text-align: left;
    transition: background-color 140ms ease, color 140ms ease;
    width: 100%;
  }

  .mobile-nav-link:hover {
    background: rgba(145, 169, 198, 0.18);
    color: #ffffff;
  }

  .mobile-nav-link.active {
    background-image: linear-gradient(
      135deg,
      rgba(24, 190, 168, 0.36) 0%,
      rgba(20, 131, 164, 0.4) 100%
    );
    border-color: rgba(85, 209, 193, 0.44);
    color: #ffffff;
  }

  .mobile-nav-link-icon {
    height: 15px;
    width: 15px;
  }

  .mobile-nav-link-icon path {
    fill: currentColor !important;
  }

  .mobile-nav-link-badge {
    -ms-flex-align: center;
        align-items: center;
    background: #ffffff;
    border-radius: 999px;
    color: #0f6f80;
    display: -ms-inline-flexbox;
    display: inline-flex;
    font-size: 11px;
    font-weight: 700;
    height: 22px;
    -ms-flex-pack: center;
        justify-content: center;
    margin-left: auto;
    min-width: 22px;
    padding: 0 6px;
  }

  .mobile-nav-link--ghost {
    border-top: 1px dashed rgba(154, 181, 214, 0.3);
    border-radius: 0;
    margin-top: 8px;
    padding-top: 12px;
  }

  .mobile-nav-plan-card {
    background: linear-gradient(
      135deg,
      rgba(24, 190, 168, 0.08) 0%,
      rgba(20, 131, 164, 0.05) 50%,
      rgba(10, 20, 34, 0.38) 100%
    );
    border: 1px solid rgba(24, 190, 168, 0.22);
    border-radius: 16px;
    box-shadow: 0 0 20px rgba(24, 190, 168, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.04);
    margin-top: auto;
    padding: 14px 14px 16px;
  }

  .mobile-nav-plan-card-label {
    color: #87a0bd;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin-bottom: 8px;
    text-transform: uppercase;
  }

  .mobile-nav-plan-card-name {
    color: #f1f7ff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
  }

  .mobile-nav-plan-card-meta {
    color: #9eb2cc;
    font-size: 12px;
    margin-top: 6px;
  }

  .mobile-nav-plan-card-usage {
    margin: 10px 0 12px;
  }

  .mobile-nav-plan-card-usage-label {
    -ms-flex-align: center;
        align-items: center;
    color: #9eb2cc;
    display: -ms-flexbox;
    display: flex;
    font-size: 11px;
    font-weight: 600;
    -ms-flex-pack: justify;
        justify-content: space-between;
    margin-bottom: 6px;
  }

  .mobile-nav-plan-card-usage-bar {
    background: rgba(10, 20, 34, 0.6);
    border-radius: 999px;
    height: 6px;
    overflow: hidden;
  }

  .mobile-nav-plan-card-usage-fill {
    background: linear-gradient(90deg, #18bea8 0%, #1691a5 100%);
    border-radius: 999px;
    height: 100%;
    min-width: 2px;
    transition: width 400ms ease;
  }

  .mobile-nav-plan-card-actions {
    -ms-flex-align: center;
        align-items: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    gap: 12px;
    margin-top: 12px;
  }

  .mobile-nav-plan-card-cta {
    -ms-flex-align: center;
        align-items: center;
    background-image: linear-gradient(135deg, #18bea8 0%, #1691a5 100%);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(24, 190, 168, 0.24);
    color: #ffffff;
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1;
        flex: 1;
    font-size: 12px;
    font-weight: 700;
    -ms-flex-pack: center;
        justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    text-decoration: none;
    text-transform: uppercase;
  }

  .mobile-nav-plan-card-link {
    color: #9eb2cc;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
  }
}

/* === My Account Page === */

.my-account-page {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 20px;
  padding: 24px 44px 32px;
}

.my-account-card {
  background: #f5f9fc;
  background: var(--surface-soft);
  border: 1px solid #dce6ef;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px 28px;
}

.my-account-card-title {
  color: #1f2f46;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px;
}

.my-account-card-hint {
  color: #5f738c;
  color: var(--ink-muted);
  font-size: 13px;
  margin: 0 0 16px;
}

/* Profile section */

.my-account-profile {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  gap: 18px;
  margin-bottom: 24px;
}

.my-account-avatar {
  -ms-flex-align: center;
      align-items: center;
  background-image: linear-gradient(140deg, #23c4ad 0%, #1394a7 100%);
  border-radius: 999px;
  box-shadow: 0 10px 18px rgba(18, 145, 167, 0.24);
  color: #ffffff;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 22px;
  font-weight: 700;
  height: 72px;
  -ms-flex-pack: center;
      justify-content: center;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  width: 72px;
}

.my-account-profile-info {
  min-width: 0;
}

.my-account-profile-name {
  color: #1f2f46;
  color: var(--ink);
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.my-account-profile-email {
  color: #5f738c;
  color: var(--ink-muted);
  font-size: 14px;
  margin: 4px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Field rows */

.my-account-fields {
  border-top: 1px solid #dce6ef;
  border-top: 1px solid var(--line);
}

.my-account-field {
  -ms-flex-align: center;
      align-items: center;
  border-bottom: 1px solid #dce6ef;
  border-bottom: 1px solid var(--line);
  display: -ms-flexbox;
  display: flex;
  padding: 14px 0;
}

.my-account-field-label {
  color: #5f738c;
  color: var(--ink-muted);
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 14px;
  font-weight: 500;
  width: 120px;
}

.my-account-field-value {
  color: #1f2f46;
  color: var(--ink);
  font-size: 14px;
}

.my-account-field-link {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 8px;
  text-decoration: none;
  transition: color 140ms ease;
}

.my-account-field-link:hover {
  color: #19b39f;
  color: var(--brand);
}

.my-account-field-link svg {
  height: 14px;
  opacity: 0;
  transition: opacity 140ms ease;
  width: 14px;
}

.my-account-field-link:hover svg {
  opacity: 1;
}

/* Metadata grid */

.my-account-meta {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[2];
      grid-template-columns: repeat(2, 1fr);
  gap: 12px 24px;
  margin-top: 20px;
}

.my-account-meta-item {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 4px;
}

.my-account-meta-label {
  color: #8194aa;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.my-account-meta-value {
  color: #1f2f46;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}

/* Custom toggle */

.my-account-toggle-row {
  -ms-flex-align: center;
      align-items: center;
  border-top: 1px solid #dce6ef;
  border-top: 1px solid var(--line);
  cursor: pointer;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
}

.my-account-toggle-row:first-of-type {
  border-top: none;
  padding-top: 0;
}

.my-account-toggle-label {
  color: #1f2f46;
  color: var(--ink);
  -ms-flex: 1;
      flex: 1;
  font-size: 14px;
  font-weight: 500;
}

.my-account-toggle {
  display: inline-block;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  position: relative;
}

.my-account-toggle input {
  cursor: pointer;
  height: 24px;
  margin: 0;
  opacity: 0;
  position: absolute;
  width: 44px;
  z-index: 1;
}

.my-account-toggle-track {
  background: #c7d6e5;
  background: var(--line-strong);
  border-radius: 999px;
  display: block;
  height: 24px;
  position: relative;
  transition: background-color 200ms ease;
  width: 44px;
}

.my-account-toggle-track::after {
  background: #ffffff;
  background: var(--surface);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(19, 37, 59, 0.2);
  content: '';
  display: block;
  height: 18px;
  left: 3px;
  position: absolute;
  top: 3px;
  transition: transform 200ms ease, background-color 200ms ease;
  width: 18px;
}

.my-account-toggle input:checked ~ .my-account-toggle-track {
  background: #19b39f;
  background: var(--brand);
}

.my-account-toggle input:checked ~ .my-account-toggle-track::after {
  transform: translateX(20px);
}

/* Auth token */

.my-account-token-row {
  -ms-flex-align: center;
      align-items: center;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}

.my-account-token-input {
  background: #ffffff;
  background: var(--surface);
  border: 1px solid #dce6ef;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: #5f738c;
  color: var(--ink-muted);
  -ms-flex: 1;
      flex: 1;
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  padding: 12px 14px;
  -webkit-text-fill-color: #5f738c;
  -webkit-text-fill-color: var(--ink-muted);
}

.my-account-token-input:focus {
  border-color: #19b39f;
  border-color: var(--brand);
  outline: none;
}

.my-account-copy-btn {
  background: #19b39f;
  background: var(--brand);
  border: none;
  border-radius: 10px;
  color: #ffffff;
  cursor: pointer;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-family: 'Manrope', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 20px;
  transition: background-color 140ms ease;
}

.my-account-copy-btn:hover {
  background: #117f89;
  background: var(--brand-deep);
}

/* Body wrapper replaces styled-components Container/Content */

.my-account-body {
  padding: 0;
}

/* My Account responsive */

@media only screen and (max-width: 600px) {
  .my-account-page {
    padding: 16px;
  }

  .my-account-card {
    padding: 18px 16px;
  }

  .my-account-field {
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-align: start;
        align-items: flex-start;
    gap: 4px;
  }

  .my-account-field-label {
    width: auto;
  }

  .my-account-meta {
    -ms-grid-columns: 1fr;
        grid-template-columns: 1fr;
  }

  .my-account-avatar {
    height: 56px;
    width: 56px;
    font-size: 18px;
  }

  .my-account-token-row {
    -ms-flex-direction: column;
        flex-direction: column;
  }

  .my-account-copy-btn {
    width: 100%;
  }
}

/* --- Merged from index.css: Stripe --- */

.StripeElement {
  display: block;
  margin: 10px 0 20px 0;
  max-width: 500px;
  padding: 10px 14px;
  font-size: 1em;
  font-family: 'Source Code Pro', monospace;
  box-shadow: rgba(50, 50, 93, 0.14902) 0px 1px 3px, rgba(0, 0, 0, 0.0196078) 0px 1px 0px;
  border: 0;
  outline: 0;
  border-radius: 4px;
  background: white;
}

.StripeElement--focus {
  box-shadow: rgba(50, 50, 93, 0.109804) 0px 4px 6px, rgba(0, 0, 0, 0.0784314) 0px 1px 3px;
  transition: all 150ms ease;
}

.StripeElement.IdealBankElement, .StripeElement.PaymentRequestButton {
  padding: 0;
}

/* --- Merged from index.css: billing --- */

.billing-overview > div {
  max-width: 600px;
  margin: 0 auto;
}

/* ─── Billing page redesign ─── */

.billing-page {
  max-width: 960px;
  margin: 0 auto;
  padding-bottom: 2rem;
}

.billing-no-card {
  max-width: 480px;
  margin: 2rem auto;
  padding: 3rem 2rem;
  text-align: center;
}

.billing-no-card-icon {
  font-size: 48px;
  margin-bottom: 1rem;
}

.billing-no-card-title {
  font-size: 22px;
  font-weight: 600;
  color: #1f2f46;
  color: var(--ink);
  margin-bottom: 0.5rem;
}

.billing-no-card-help {
  margin-bottom: 1.5rem;
}

.billing-no-card-form {
  max-width: 400px;
  margin: 0 auto;
}

/* Current plan summary card */

.billing-current-plan {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: justify;
      justify-content: space-between;
  padding: 24px 28px;
  margin-bottom: 20px;
}

.billing-current-plan-info {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  gap: 4px;
}

.billing-current-plan-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5f738c;
  color: var(--ink-muted);
}

.billing-plan-name {
  font-size: 24px;
  font-weight: 600;
  color: #1f2f46;
  color: var(--ink);
}

.billing-plan-price {
  font-size: 18px;
  font-weight: 400;
  color: #5f738c;
  color: var(--ink-muted);
}

.billing-current-plan-renewal {
  text-align: right;
}

.billing-plan-renewal-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5f738c;
  color: var(--ink-muted);
}

.billing-plan-renewal-date {
  font-size: 18px;
  font-weight: 500;
  color: #1f2f46;
  color: var(--ink);
}

/* Update card form wrapper */

.billing-update-card-form {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #dce6ef;
  border-top: 1px solid var(--line);
}

/* Invoice total banner */

.billing-invoice-total {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: justify;
      justify-content: space-between;
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 8px;
  background: #f1f6fa;
  background: var(--surface-mute);
  border: 1px solid #dce6ef;
  border: 1px solid var(--line);
}

.billing-invoice-total-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5f738c;
  color: var(--ink-muted);
}

.billing-invoice-total-amount {
  font-size: 20px;
  font-weight: 600;
  color: #1f2f46;
  color: var(--ink);
}

/* Invoice & history tables */

.billing-invoice-table, .billing-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.billing-invoice-table th, .billing-history-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #5f738c;
  color: var(--ink-muted);
  border-bottom: 1px solid #dce6ef;
  border-bottom: 1px solid var(--line);
}

.billing-invoice-table td, .billing-history-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #dce6ef;
  border-bottom: 1px solid var(--line);
  color: #1f2f46;
  color: var(--ink);
}

.billing-invoice-table tbody tr:last-child td, .billing-history-table tbody tr:last-child td {
  border-bottom: none;
}

/* Status badge */

.billing-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.billing-status-paid {
  background: #daf4ef;
  background: var(--brand-soft);
  color: #117f89;
  color: var(--brand-deep);
}

.billing-status-unpaid {
  background: #fff3cd;
  color: #8a6d00;
}

/* Invoice link */

.billing-invoice-link {
  color: #117f89;
  color: var(--brand-deep);
  text-decoration: none;
  font-weight: 500;
}

.billing-invoice-link:hover {
  text-decoration: underline;
}

/* Empty state */

.billing-empty-state {
  padding: 2rem;
  text-align: center;
  color: #5f738c;
  color: var(--ink-muted);
  font-size: 14px;
}
/* ── Page Transition ────────────────────────────────────────── */

@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-frame {
  animation: page-enter 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  will-change: opacity, transform;
}

/* ── Button Micro-Interactions ─────────────────────────────── */

.button {
  transition: transform 150ms ease-out, box-shadow 200ms ease-out;
  will-change: transform;
}

.button:hover:not(:disabled) {
  transform: scale(1.02);
  box-shadow: 0 6px 20px rgba(25, 179, 159, 0.25);
}

.button:active:not(:disabled) {
  transform: scale(0.97);
  transition: transform 80ms ease-out;
}

.mui-raised-button:not(.mui-disabled) {
  transition: transform 150ms ease-out, box-shadow 200ms ease-out !important;
  will-change: transform;
}

.mui-raised-button:not(.mui-disabled):hover {
  transform: scale(1.02);
}

.mui-raised-button:not(.mui-disabled):active {
  transform: scale(0.97);
  transition: transform 80ms ease-out;
}

.mui-flat-button:not(.mui-disabled) {
  transition: transform 150ms ease-out, opacity 150ms ease-out !important;
  will-change: transform;
}

.mui-flat-button:not(.mui-disabled):hover {
  transform: scale(1.02);
}

.mui-flat-button:not(.mui-disabled):active {
  transform: scale(0.97);
  transition: transform 80ms ease-out;
}

/* ── Card Hover Lift ───────────────────────────────────────── */

.shadow, .rounded-card {
  transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}

.shadow:hover, .rounded-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 28px 56px rgba(19, 37, 59, 0.18);
  will-change: transform;
}

/* ── Toggle Switch Animations ──────────────────────────────── */

.mui-toggle-thumb {
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.mui-toggle-track {
  transition: background-color 200ms ease-out !important;
}

/* ── Skeleton / Shimmer ───────────────────────────────────── */

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes content-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.skeleton {
  background: linear-gradient(90deg, #f5f9fc 0%, #f1f6fa 50%, #f5f9fc 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
  display: inline-block;
  min-height: 1em;
  width: 100%;
}

.skeleton--line { height: 14px; margin-bottom: 8px; }

.skeleton--circle { border-radius: 50%; height: 40px; width: 40px; }

.skeleton--card { height: 120px; border-radius: 18px; }

.content-fade-in {
  animation: content-fade-in 300ms ease-out both;
}

/* ── Stagger Animation ────────────────────────────────────── */

@keyframes stagger-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.stagger-item {
  animation: stagger-fade-in 300ms ease-out both;
}

/* ── Ripple Effect ────────────────────────────────────────── */

@keyframes ripple {
  0% { transform: scale(0); opacity: 0.35; }
  100% { transform: scale(4); opacity: 0; }
}

.button {
  position: relative;
  overflow: hidden;
}

.button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(25,179,159,0.4) 0%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
}

.button:active:not(:disabled)::after {
  animation: ripple 400ms ease-out;
}

.mui-raised-button:not(.mui-disabled), .mui-flat-button:not(.mui-disabled) {
  position: relative;
  overflow: hidden;
}

.mui-raised-button:not(.mui-disabled)::after, .mui-flat-button:not(.mui-disabled)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(25,179,159,0.3) 0%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.mui-raised-button:not(.mui-disabled):active::after, .mui-flat-button:not(.mui-disabled):active::after {
  animation: ripple 400ms ease-out;
}

/* ── prefers-reduced-motion ───────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .page-frame { animation: none !important; }
  .stagger-item { animation: none !important; opacity: 1 !important; transform: none !important; }
  .skeleton { animation: none !important; background: #f1f6fa !important; }
  .content-fade-in { animation: none !important; opacity: 1 !important; }

  .button, .mui-raised-button:not(.mui-disabled), .mui-flat-button:not(.mui-disabled) { transition: none !important; }

  .shadow, .rounded-card { transition: none !important; }

  .button::after, .mui-raised-button:not(.mui-disabled)::after, .mui-flat-button:not(.mui-disabled)::after { display: none !important; }
}
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10000;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column-reverse;
      flex-direction: column-reverse;
  gap: 8px;
  max-width: 380px;
  pointer-events: none;
}

.toast {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: start;
      align-items: flex-start;
  padding: 12px 16px;
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  pointer-events: auto;
  animation: toast-slide-in 0.3s ease-out;
}

.toast--success { background-color: #43a047; }

.toast--error   { background-color: #d85663; }

.toast--warning { background-color: #ffa000; }

.toast--info    { background-color: #2196f3; }

.toast__icon {
  margin-right: 8px;
  font-size: 16px;
  line-height: 1.4;
}

.toast__message {
  -ms-flex: 1;
      flex: 1;
}

.toast__close {
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  padding: 0 0 0 8px;
  margin: -2px 0 0 0;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.toast__close:hover {
  opacity: 1;
}

@keyframes toast-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}