.ocr-state {
  margin-top: 12px;
  font-weight: 800;
}

.camera-button {
  border: 0;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
}

.camera-button:active {
  transform: scale(.97);
}

.file-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

.receipt-name {
  margin-top: 8px;
  color: #1d4ed8;
  font-weight: 900;
}

.fields-card[hidden] {
  display: none !important;
}

.preview img {
  display: block;
  border-radius: 18px;
}

.empty-preview {
  color: #667085;
}

@media (max-width: 760px) {
  [data-ticket-form] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .ticket-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .ticket-fields input,
  .ticket-fields select,
  .ticket-fields textarea {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  .ticket-fields input[type="date"] {
    min-height: 48px;
    line-height: 1.2;
    appearance: auto;
    -webkit-appearance: none;
  }

  .fields-card .actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .fields-card .actions .btn {
    width: 100%;
  }
}

.pricing-hero {
  max-width: 760px;
}

.pricing-hero h1 {
  font-size: 48px;
  line-height: 1.08;
  margin: 18px 0 12px;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: stretch;
}

.plan {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.plan.featured {
  border-color: #2563eb;
  box-shadow: 0 20px 48px rgba(37, 99, 235, .14);
}

.plan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.plan-head h2 {
  margin: 0;
}

.plan-price {
  font-size: 38px;
  line-height: 1;
}

.plan-price span {
  color: #667085;
  font-size: 15px;
  margin-left: 4px;
}

.plan ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
  color: #344054;
}

.admin-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  margin-bottom: 18px;
}

.invite-form {
  display: grid;
  gap: 12px;
}

.team-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.team-stats div {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 16px;
}

.team-stats b {
  display: block;
  font-size: 26px;
}

.team-stats span {
  color: #667085;
  font-size: 13px;
  font-weight: 800;
}

.team-list {
  display: grid;
  gap: 12px;
}

.team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid #eef2f7;
  border-radius: 16px;
  padding: 14px;
  background: #fff;
}

.team-row p {
  margin: 4px 0 0;
}

.invite-row {
  align-items: flex-start;
}

.invite-row input {
  margin-top: 8px;
  font-size: 13px;
  background: #f8fafc;
}

.status-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}

.status-tabs a {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  color: #344054;
  font-weight: 900;
  padding: 10px 14px;
}

.status-tabs a.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.bar-list {
  display: grid;
  gap: 14px;
}

.bar-row {
  display: grid;
  gap: 8px;
}

.bar-row div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.bar-row span {
  color: #667085;
  font-weight: 900;
}

.bar-row i {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #22c55e);
}

.legal-page {
  max-width: 820px;
}

.legal-page h1 {
  font-size: 44px;
  margin: 0 0 14px;
}

.status-guide {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 12px;
  align-items: center;
}

@media (max-width: 900px) {
  .pricing-grid,
  .admin-grid,
  .team-stats {
    grid-template-columns: 1fr;
  }

  .pricing-hero h1 {
    font-size: 34px;
  }

  .team-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .status-guide {
    grid-template-columns: 1fr;
  }
}