:root {

  --navy: #0F172A;

  --navy-2: #111D2E;

  --red: #E11D2E;

  --green: #10B981;

  --ink: #0F172A;

  --muted: #64748B;

  --line: #DCE3EC;

  --soft: #F2F4F7;

  --white: #ffffff;

  --shadow: 0 20px 55px rgba(15, 23, 42, 0.12);

}



* {

  letter-spacing: 0;

}



body {

  background: #F2F4F7;

  color: var(--ink);

  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  min-height: 100vh;

  min-height: 100dvh;

  overflow-x: hidden;

  -webkit-font-smoothing: antialiased;

}



a {

  text-decoration: none;

}



.app-navbar {

  background: rgba(255, 255, 255, 0.9);

  border-bottom: 1px solid rgba(219, 228, 239, 0.85);

  backdrop-filter: blur(18px);

  min-height: 66px;

  padding-bottom: env(safe-area-inset-bottom, 0);

}



.brand-mark {

  align-items: center;

  color: var(--navy);

  display: inline-flex;

  font-weight: 800;

  gap: 0.6rem;

}



.brand-icon {

  align-items: center;

  background: linear-gradient(135deg, var(--red), #B91022);

  border-radius: 8px;

  color: var(--white);

  display: inline-flex;

  height: 34px;

  justify-content: center;

  width: 34px;

}



.nav-link {

  color: #64748B;

  font-weight: 600;

}



.nav-link:hover {

  color: var(--navy);

}



.btn {

  border-radius: 8px;

  font-weight: 700;

  touch-action: manipulation;

}



button,

a,

input,

select,

textarea {

  -webkit-tap-highlight-color: transparent;

}



.btn-primary {

  background: linear-gradient(135deg, #E11D2E, #B91022);

  border: 0;

  color: #FFFFFF;

  box-shadow: 0 12px 28px rgba(225, 29, 46, 0.22);

}



.btn-primary:hover {

  filter: brightness(0.96);

  color: #FFFFFF;

}



.btn-outline-primary {

  border-color: #E11D2E;

  color: #E11D2E;

}



.btn-outline-primary:hover {

  background: #FFF1F2;

  border-color: var(--red);

  color: #B91022;

}



.btn-light {

  color: var(--navy);

}



.btn-success {

  background: #10B981;

  border: 0;

}



.message-stack {

  left: 50%;

  max-width: 760px;

  position: fixed;

  top: 82px;

  transform: translateX(-50%);

  z-index: 1050;

}



.hero-section {

  background:

    radial-gradient(circle at 74% 26%, rgba(225, 29, 46, 0.28), transparent 30%),

    linear-gradient(135deg, #0A101D 0%, #111D2E 54%, #2A3648 100%);

  color: var(--white);

  overflow: hidden;

  padding: 6rem 0 5rem;

}



.hero-kicker,

.eyebrow {

  color: #E11D2E;

  font-size: 0.8rem;

  font-weight: 800;

  text-transform: uppercase;

}



.hero-section h1 {

  font-size: clamp(2.35rem, 5vw, 4.8rem);

  font-weight: 800;

  line-height: 1.02;

  margin-top: 1rem;

  max-width: 780px;

}



.hero-copy {

  color: #d5e1ef;

  font-size: 1.22rem;

  margin-top: 1.4rem;

  max-width: 560px;

}



.trust-row {

  color: #c6d6e8;

  display: flex;

  flex-wrap: wrap;

  gap: 1rem;

  margin-top: 2rem;

}



.trust-row span {

  align-items: center;

  display: inline-flex;

  gap: 0.4rem;

}



.trust-row i {

  color: var(--green);

}



.hero-visual {

  min-height: 440px;

  position: relative;

}



.hero-visual::before {

  background:

    linear-gradient(90deg, transparent 0 12%, rgba(255,255,255,0.09) 12% 13%, transparent 13% 100%),

    linear-gradient(0deg, transparent 0 18%, rgba(255,255,255,0.08) 18% 19%, transparent 19% 100%);

  background-size: 58px 58px;

  border: 1px solid rgba(255,255,255,0.12);

  border-radius: 18px;

  content: "";

  inset: 0;

  position: absolute;

}



.scan-line {

  background: linear-gradient(90deg, transparent, rgba(225, 29, 46, 0.85), transparent);

  height: 2px;

  left: 5%;

  position: absolute;

  right: 5%;

  top: 34%;

}



.car-card,

.quote-float {

  backdrop-filter: blur(16px);

  background: rgba(255, 255, 255, 0.12);

  border: 1px solid rgba(255, 255, 255, 0.18);

  box-shadow: 0 25px 60px rgba(0,0,0,0.24);

  position: absolute;

}



.car-card {

  border-radius: 18px;

  left: 9%;

  padding: 1.5rem;

  right: 9%;

  top: 25%;

}



.car-card h2 {

  font-weight: 800;

  margin: 1.1rem 0 0.25rem;

}



.car-card p {

  color: #d7e5f5;

}



.car-topline {

  display: flex;

  justify-content: space-between;

}



.car-topline strong {

  color: #10B981;

}



.metric-grid {

  display: grid;

  gap: 0.75rem;

  grid-template-columns: repeat(3, 1fr);

  margin-top: 1.3rem;

}



.metric-grid div {

  background: rgba(255,255,255,0.1);

  border-radius: 8px;

  padding: 0.75rem;

}



.metric-grid strong,

.metric-grid span {

  display: block;

}



.metric-grid span {

  color: #c5d6e8;

  font-size: 0.75rem;

}



.quote-float {

  border-radius: 999px;

  color: var(--white);

  font-weight: 700;

  padding: 0.85rem 1rem;

}



.quote-one {

  right: 2%;

  top: 12%;

}



.quote-two {

  bottom: 16%;

  left: 0;

}

.brand-showcase {

  align-items: center;

  display: grid;

  gap: 1rem;

  min-height: 440px;

  padding: clamp(0.75rem, 2vw, 1.25rem);

}



.brand-showcase::before {

  background:

    radial-gradient(circle at 32% 45%, rgba(225, 29, 46, 0.26), transparent 34%),

    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));

  border: 1px solid rgba(255, 255, 255, 0.11);

  border-radius: 26px;

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);

}



.brand-showcase-card {

  background: rgba(255, 255, 255, 0.94);

  border: 1px solid rgba(255, 255, 255, 0.72);

  border-radius: 22px;

  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28), 0 0 70px rgba(225, 29, 46, 0.18);

  overflow: hidden;

  position: relative;

  z-index: 1;

}



.brand-showcase-card img {

  aspect-ratio: 16 / 10;

  display: block;

  height: auto;

  object-fit: cover;

  object-position: center;

  width: 100%;

}



.brand-showcase-strip {

  background: rgba(15, 23, 42, 0.78);

  border: 1px solid rgba(255, 255, 255, 0.14);

  border-radius: 16px;

  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);

  display: grid;

  gap: 0.75rem;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  padding: 0.85rem;

  position: relative;

  z-index: 1;

}



.brand-showcase-strip span {

  background: rgba(255, 255, 255, 0.07);

  border-radius: 12px;

  min-width: 0;

  padding: 0.85rem;

}



.brand-showcase-strip strong,

.brand-showcase-strip small {

  display: block;

}



.brand-showcase-strip strong {

  color: var(--white);

  font-size: 1.05rem;

  font-weight: 800;

}



.brand-showcase-strip small {

  color: #CBD5E1;

  font-size: 0.72rem;

  font-weight: 700;

  margin-top: 0.15rem;

}



.section-heading {

  margin-bottom: 2rem;

  max-width: 700px;

}



.section-heading h2,

.page-header h1 {

  color: var(--navy);

  font-weight: 800;

}



.step-card,

.request-card,

.detail-panel,

.form-shell,

.quote-card,

.filter-bar,

.empty-state {

  background: var(--white);

  border: 1px solid var(--line);

  border-radius: 12px;

  box-shadow: var(--shadow);

}



.step-card {

  height: 100%;

  padding: 1.6rem;

}



.step-card h3 {

  font-size: 1.15rem;

  font-weight: 800;

  margin-top: 1rem;

}



.step-card p {

  color: var(--muted);

  margin-bottom: 0;

}



.step-icon {

  align-items: center;

  background: #FFF1F2;

  border-radius: 8px;

  color: #E11D2E;

  display: inline-flex;

  font-size: 1.4rem;

  height: 48px;

  justify-content: center;

  width: 48px;

}



.bg-soft {

  background: var(--soft);

}



.page-header {

  background:

    radial-gradient(circle at 85% 20%, rgba(225, 29, 46, 0.18), transparent 28%),

    linear-gradient(180deg, #eef7fb, #F2F4F7);

  padding: 4.25rem 0 2.5rem;

}



.page-header.compact {

  padding-bottom: 2rem;

}



.page-header p {

  color: var(--muted);

  max-width: 720px;

}



.seller-header {

  background:

    radial-gradient(circle at 80% 10%, rgba(16, 185, 129, 0.18), transparent 28%),

    linear-gradient(180deg, #f0fbf8, #F2F4F7);

}



.form-shell {

  padding: clamp(1.25rem, 3vw, 2rem);

}



.form-label {

  color: #34455a;

  font-size: 0.9rem;

  font-weight: 700;

}



.form-control,

.form-select {

  border-color: #cdd8e5;

  border-radius: 8px;

  min-height: 48px;

}



textarea.form-control {

  min-height: 120px;

}



.form-control:focus,

.form-select:focus {

  border-color: var(--red);

  box-shadow: 0 0 0 0.22rem rgba(225, 29, 46, 0.18);

}



.auth-card input:not([type="radio"]):not([type="checkbox"]),

.auth-card select {

  border: 1px solid #cdd8e5;

  border-radius: 8px;

  min-height: 48px;

  padding: 0.65rem 0.85rem;

  width: 100%;

}



.auth-card input:focus,

.auth-card select:focus {

  border-color: var(--red);

  box-shadow: 0 0 0 0.22rem rgba(225, 29, 46, 0.18);

  outline: none;

}



.auth-card #id_rol {

  display: grid;

  gap: 0.65rem;

  list-style: none;

  margin: 0;

  padding: 0;

}



.auth-card #id_rol label {

  align-items: center;

  border: 1px solid #cdd8e5;

  border-radius: 10px;

  cursor: pointer;

  display: flex;

  gap: 0.65rem;

  padding: 0.9rem 1rem;

}



.request-card {

  padding: 1.25rem;

  transition: transform 0.18s ease, box-shadow 0.18s ease;

}



.request-card:hover {

  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);

  transform: translateY(-3px);

}



.status-badge,

.quote-pill {

  align-items: center;

  border-radius: 999px;

  display: inline-flex;

  font-size: 0.78rem;

  font-weight: 800;

  line-height: 1;

  padding: 0.46rem 0.7rem;

  white-space: nowrap;

}



.quote-pill {

  background: #F2F4F7;

  color: #485a6e;

}



.badge-open,

.badge-available,

.badge-new {

  background: #dcfce7;

  color: #047857;

}



.badge-quoted,

.badge-order,

.badge-any {

  background: #e0f2fe;

  color: #075985;

}



.badge-closed,

.badge-soldout {

  background: #fee2e2;

  color: #991b1b;

}



.badge-used {

  background: #fef3c7;

  color: #92400e;

}



.detail-panel,

.quote-card {

  padding: 1.5rem;

}



.info-grid {

  display: grid;

  gap: 0.9rem;

  grid-template-columns: repeat(2, 1fr);

}



.info-grid div {

  background: #f5f8fb;

  border-radius: 8px;

  padding: 1rem;

}



.info-grid span,

.privacy-strip span {

  color: var(--muted);

  display: block;

  font-size: 0.82rem;

}



.info-grid strong,

.privacy-strip strong {

  color: var(--navy);

  display: block;

}



.leadish {

  color: #34455a;

  font-size: 1.03rem;

}



.reference-photo {

  border-radius: 12px;

  max-height: 360px;

  object-fit: cover;

  width: 100%;

}



.privacy-strip {

  align-items: center;

  background: #ECFDF5;

  border: 1px solid #A7F3D0;

  border-radius: 12px;

  display: flex;

  gap: 1rem;

  justify-content: space-between;

  padding: 1rem;

}



.privacy-strip > i {

  color: #10B981;

  flex: 0 0 auto;

  font-size: 1.35rem;

}



.privacy-note {

  align-items: flex-start;

  background: #ECFDF5;

  border: 1px solid #A7F3D0;

  border-radius: 8px;

  color: #047857;

  display: flex;

  font-size: 0.88rem;

  gap: 0.6rem;

  padding: 0.8rem;

}



.quote-card + .quote-card {

  margin-top: 1rem;

}



.quote-card h3 {

  font-size: 1.05rem;

  font-weight: 800;

}



.price-tag {

  color: var(--navy);

  font-size: 1.8rem;

  font-weight: 800;

  white-space: nowrap;

}



.quote-form {

  top: 94px;

}



.filter-bar {

  display: grid;

  gap: 1rem;

  grid-template-columns: repeat(6, minmax(0, 1fr));

  padding: 1.25rem;

}



.filter-bar > div {

  min-width: 0;

}



.empty-state {

  padding: 3rem 1.5rem;

  text-align: center;

}



.empty-state i {

  color: #E11D2E;

  font-size: 2.5rem;

}



.empty-state h2,

.empty-state h3 {

  color: var(--navy);

  font-weight: 800;

  margin-top: 1rem;

}



.empty-state p {

  color: var(--muted);

}



.small-state {

  box-shadow: none;

  padding: 2rem 1rem;

}



footer {

  background: #F2F4F7;

  border-top: 1px solid var(--line);

}



.mobile-tab-bar {

  display: none;

}



.offline-page {

  align-items: center;

  display: flex;

  min-height: calc(100dvh - 150px);

  padding: 3rem 0;

}



.offline-card {

  margin-inline: auto;

  max-width: 560px;

}



.offline-icon {

  align-items: center;

  background: #FFF1F2;

  border-radius: 18px;

  color: #E11D2E;

  display: inline-flex;

  font-size: 2rem;

  height: 72px;

  justify-content: center;

  width: 72px;

}



@media (max-width: 991.98px) {

  body {

    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));

  }



  .app-navbar {

    min-height: calc(62px + env(safe-area-inset-top, 0px));

    padding-top: env(safe-area-inset-top, 0px);

  }



  .app-navbar .navbar-toggler,

  .app-navbar .navbar-collapse {

    display: none !important;

  }



  .app-navbar .container {

    flex-wrap: nowrap;

  }



  .install-app-button:not(.mobile-tab) {

    align-items: center;

    display: inline-flex;

    min-height: 40px;

  }



  .mobile-tab-bar {

    align-items: stretch;

    background: rgba(255, 255, 255, 0.96);

    border-top: 1px solid var(--line);

    bottom: 0;

    box-shadow: 0 -8px 28px rgba(15, 23, 42, 0.1);

    display: flex;

    justify-content: space-around;

    left: 0;

    padding: 0.45rem 0.55rem calc(0.45rem + env(safe-area-inset-bottom, 0px));

    position: fixed;

    right: 0;

    z-index: 1040;

  }



  .mobile-tab {

    align-items: center;

    background: transparent;

    border: 0;

    border-radius: 12px;

    color: #64748B;

    display: flex;

    flex: 1 1 0;

    flex-direction: column;

    font-size: 0.69rem;

    font-weight: 700;

    gap: 0.15rem;

    justify-content: center;

    line-height: 1.15;

    max-width: 120px;

    min-height: 54px;

    padding: 0.35rem 0.25rem;

  }



  .mobile-tab-form {

    display: flex;

    flex: 1 1 0;

    justify-content: center;

    margin: 0;

    max-width: 120px;

  }



  .mobile-tab-form .mobile-tab {

    width: 100%;

  }



  .mobile-tab i {

    font-size: 1.25rem;

    line-height: 1;

  }



  .mobile-tab.active {

    background: #FFF1F2;

    color: #E11D2E;

  }



  .mobile-tab-primary {

    color: #E11D2E;

  }



  .mobile-tab-primary i {

    align-items: center;

    background: linear-gradient(135deg, var(--red), #B91022);

    border-radius: 999px;

    color: var(--white);

    display: flex;

    height: 32px;

    justify-content: center;

    margin-top: -0.15rem;

    width: 42px;

  }



  footer {

    margin-bottom: 0 !important;

  }



  .hero-section {

    padding-top: 4rem;

  }



  .hero-visual {

    min-height: 360px;

  }



  .filter-bar {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

}



@media (max-width: 575.98px) {

  .container,

  .container-fluid {

    padding-left: 1rem;

    padding-right: 1rem;

  }



  .brand-icon {

    height: 32px;

    width: 32px;

  }



  .hero-section {

    padding: 3.25rem 0 2.75rem;

  }



  .hero-section h1 {

    font-size: clamp(2rem, 9.5vw, 2.35rem);

    line-height: 1.06;

  }



  .hero-copy {

    font-size: 1.05rem;

  }



  .hero-visual {

    min-height: 330px;

  }



  .car-card {

    left: 0;

    right: 0;

  }



  .quote-float {

    font-size: 0.82rem;

  }



  .metric-grid,

  .info-grid,

  .filter-bar {

    grid-template-columns: 1fr;

  }



  .privacy-strip {

    align-items: stretch;

    flex-direction: column;

  }



  .message-stack {

    left: 1rem;

    right: 1rem;

    transform: none;

  }



  .page-header,

  .page-header.compact {

    padding: 2.4rem 0 1.7rem;

  }



  .page-header h1 {

    font-size: 1.75rem;

  }



  section.py-5 {

    padding-bottom: 2.5rem !important;

    padding-top: 2.5rem !important;

  }



  .step-card,

  .request-card,

  .detail-panel,

  .form-shell,

  .quote-card,

  .filter-bar,

  .empty-state,

  .request-workspace,

  .quote-form-panel {

    border-radius: 14px;

    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.09);

  }



  .request-card:hover {

    transform: none;

  }



  .request-card .btn,

  .page-header .btn {

    min-height: 44px;

  }



  .form-control,

  .form-select,

  .auth-card input:not([type="radio"]):not([type="checkbox"]),

  .auth-card select {

    font-size: 16px;

  }



  .form-shell {

    padding: 1.1rem;

  }



  .filter-bar {

    padding: 1rem;

  }

}

/* Staff dashboard · operations center redesign */
.staff-dashboard-experience {
  background: #f5f7fa;
}

.staff-dashboard-experience main {
  min-height: calc(100vh - 72px);
}

.staff-dashboard-experience > footer,
.staff-dashboard-experience .mobile-tab-bar {
  display: none;
}

.staff-dashboard-page {
  padding: 0;
}

.staff-ops-shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: calc(100vh - 72px);
}

.staff-ops-sidebar {
  align-self: start;
  background:
    radial-gradient(circle at 15% 100%, rgba(239, 29, 47, 0.12), transparent 18rem),
    linear-gradient(180deg, #111827, #0b1220);
  display: flex;
  flex-direction: column;
  height: calc(100vh - 72px);
  padding: 1.25rem 0.85rem 1rem;
  position: sticky;
  top: 72px;
}

.staff-ops-sidebar-heading {
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  gap: 0.7rem;
  margin: 0 0.35rem 1rem;
  padding: 0.2rem 0 1rem;
}

.staff-ops-sidebar-heading > span {
  align-items: center;
  background: #ef1d2f;
  border-radius: 10px;
  color: #fff;
  display: flex;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.staff-ops-sidebar-heading strong,
.staff-ops-sidebar-heading small {
  display: block;
}

.staff-ops-sidebar-heading strong {
  color: #fff;
  font-size: 0.82rem;
}

.staff-ops-sidebar-heading small {
  color: #8d99aa;
  font-size: 0.56rem;
  margin-top: 0.08rem;
}

.staff-ops-sidebar nav {
  display: grid;
  gap: 0.28rem;
}

.staff-ops-nav-group {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: grid;
  gap: 0.28rem;
  margin-top: 0.4rem;
  padding-top: 0.65rem;
}

.staff-ops-nav-group > small {
  color: #738198;
  font-size: 0.5rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  padding: 0 0.75rem 0.12rem;
}

.staff-ops-nav-group.chapi > small { color: #a78bfa; }
.staff-ops-nav-group.finance > small { color: #42d6a4; }

.staff-ops-sidebar nav a {
  align-items: center;
  border-radius: 10px;
  color: #c3cad5;
  display: grid;
  font-size: 0.7rem;
  font-weight: 700;
  gap: 0.65rem;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  min-height: 45px;
  padding: 0.6rem 0.75rem;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.staff-ops-sidebar nav a > i {
  font-size: 1rem;
  text-align: center;
}

.staff-ops-sidebar nav a em {
  align-items: center;
  background: #ef1d2f;
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-size: 0.54rem;
  font-style: normal;
  height: 20px;
  justify-content: center;
  min-width: 20px;
  padding-inline: 0.35rem;
}

.staff-ops-sidebar nav a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  transform: translateX(2px);
}

.staff-ops-sidebar nav a.active {
  background: linear-gradient(90deg, rgba(239, 29, 47, 0.2), rgba(239, 29, 47, 0.06));
  box-shadow: inset 3px 0 0 #ef1d2f;
  color: #fff;
}

.staff-ops-sidebar nav a.active > i {
  color: #ff3348;
}

.staff-ops-sidebar-help {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  margin-top: auto;
  overflow: hidden;
  padding: 1rem;
  position: relative;
}

.staff-ops-sidebar-help::after {
  border: 2px solid rgba(239, 29, 47, 0.28);
  border-radius: 45%;
  bottom: -48px;
  content: "";
  height: 105px;
  position: absolute;
  right: -35px;
  transform: rotate(-18deg);
  width: 85px;
}

.staff-ops-sidebar-help > span {
  color: #ef3347;
  display: block;
  margin-bottom: 0.55rem;
}

.staff-ops-sidebar-help strong {
  color: #fff;
  display: block;
  font-size: 0.7rem;
}

.staff-ops-sidebar-help p {
  color: #8f9bac;
  font-size: 0.55rem;
  line-height: 1.5;
  margin: 0.25rem 0 0.8rem;
  max-width: 9rem;
}

.staff-ops-sidebar-help a {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  color: #e5e7eb;
  display: flex;
  font-size: 0.56rem;
  font-weight: 750;
  gap: 0.35rem;
  justify-content: space-between;
  padding: 0.55rem 0.65rem;
  position: relative;
  text-decoration: none;
  z-index: 1;
}

.staff-ops-workspace {
  min-width: 0;
  padding: clamp(1.6rem, 3vw, 2.6rem);
}

/* Finanzas del staff */
.staff-finance-page { margin: 0 auto; max-width: 1420px; padding: clamp(1.4rem, 3vw, 3rem); }
.staff-finance-header { align-items: flex-start; display: flex; gap: 1.5rem; justify-content: space-between; margin-bottom: 1.5rem; }
.staff-finance-back { color: #64748b; display: inline-flex; font-size: .72rem; font-weight: 750; gap: .45rem; margin-bottom: .9rem; text-decoration: none; }
.staff-finance-kicker { color: #0f9f6e; display: block; font-size: .62rem; font-weight: 900; letter-spacing: .13em; margin-bottom: .45rem; }
.staff-finance-header h1 { color: #14213a; font-size: clamp(2rem, 4vw, 3.15rem); letter-spacing: -.055em; line-height: 1; margin: 0; }
.staff-finance-header > div > p { color: #718096; font-size: .86rem; margin: .55rem 0 0; }
.staff-finance-health { align-items: center; background: #fff; border: 1px solid #e4eaf2; border-radius: 18px; display: flex; gap: .8rem; max-width: 360px; padding: .9rem 1rem; }
.staff-finance-health > span { align-items: center; border-radius: 12px; display: flex; font-size: 1.15rem; height: 42px; justify-content: center; width: 42px; }
.staff-finance-health small, .staff-finance-health strong, .staff-finance-health p { display: block; }
.staff-finance-health small { color: #8491a5; font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.staff-finance-health strong { color: #17243c; font-size: .9rem; margin-top: .08rem; }
.staff-finance-health p { color: #718096; font-size: .64rem; line-height: 1.35; margin: .15rem 0 0; }
.staff-finance-health.healthy > span { background: #e7f9f0; color: #079a63; }.staff-finance-health.warning > span { background: #fff4de; color: #d77a00; }.staff-finance-health.risk > span { background: #fff0f2; color: #e3324e; }.staff-finance-health.neutral > span { background: #eef4ff; color: #377de8; }
.staff-finance-kpis { display: grid; gap: .85rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.staff-finance-kpi { align-items: flex-start; background: #fff; border: 1px solid #e5eaf2; border-radius: 17px; display: flex; gap: .7rem; min-height: 132px; padding: 1rem; }
.staff-finance-kpi > span, .staff-finance-insights > article > span { align-items: center; border-radius: 11px; display: flex; flex: 0 0 auto; height: 38px; justify-content: center; width: 38px; }
.staff-finance-kpi small, .staff-finance-kpi strong, .staff-finance-kpi p { display: block; }
.staff-finance-kpi small { color: #738198; font-size: .64rem; font-weight: 800; }.staff-finance-kpi strong { color: #14213a; font-size: 1.3rem; letter-spacing: -.04em; line-height: 1.2; margin: .2rem 0; }.staff-finance-kpi p { color: #8a97aa; font-size: .61rem; line-height: 1.35; margin: 0; }
.staff-finance-kpi.sales > span { background: #edf4ff; color: #2577dd; }.staff-finance-kpi.income > span { background: #ebf9f3; color: #0d9f71; }.staff-finance-kpi.expense > span { background: #fff5e8; color: #df8615; }.staff-finance-kpi.profit > span { background: #f3efff; color: #7655dd; }
.staff-finance-insights { display: grid; gap: .85rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: .85rem 0 1.15rem; }
.staff-finance-insights > article { align-items: center; background: #17243d; border-radius: 15px; display: flex; gap: .7rem; min-height: 86px; padding: .9rem 1rem; }.staff-finance-insights > article > span { background: rgba(255,255,255,.1); color: #78d9b4; }.staff-finance-insights small,.staff-finance-insights strong,.staff-finance-insights p { display:block; }.staff-finance-insights small { color:#9caabe; font-size:.6rem; font-weight:800; text-transform:uppercase; }.staff-finance-insights strong { color:#fff; font-size:1.05rem; margin:.1rem 0; }.staff-finance-insights p { color:#c0cad7; font-size:.6rem; line-height:1.3; margin:0; }
.staff-finance-grid { display:grid; gap:1rem; grid-template-columns: 1.2fr .8fr; margin-bottom:1rem; }.staff-finance-card { background:#fff; border:1px solid #e4eaf2; border-radius:18px; overflow:hidden; }.staff-finance-card > header { align-items:center; border-bottom:1px solid #edf0f4; display:flex; justify-content:space-between; padding:1rem 1.1rem; }.staff-finance-card > header > div { align-items:center; display:flex; gap:.7rem; }.staff-finance-card > header span { align-items:center; background:#fff0f2; border-radius:10px; color:#ed3854; display:flex; height:35px; justify-content:center; width:35px; }.staff-finance-card h2,.staff-finance-card p { margin:0; }.staff-finance-card h2 { color:#17243c; font-size:.86rem; }.staff-finance-card header p { color:#8491a5; font-size:.62rem; margin-top:.15rem; }.staff-finance-card header > b { background:#fff4df; border-radius:999px; color:#ca7700; font-size:.6rem; padding:.38rem .55rem; }.staff-finance-card header > a { color:#0c9b68; font-size:.66rem; font-weight:800; text-decoration:none; }
.staff-finance-expense-form { display:grid; gap:.65rem; grid-template-columns: 1.5fr .8fr .8fr 1fr; padding:1rem 1.1rem; }.staff-finance-expense-form label { color:#718096; display:grid; font-size:.6rem; font-weight:800; gap:.28rem; }.staff-finance-expense-form label:nth-of-type(5) { grid-column:span 2; }.staff-finance-expense-form input,.staff-finance-expense-form select,.staff-finance-expense-form textarea { border:1px solid #dce4ef; border-radius:8px; color:#1d2b42; font-size:.7rem; padding:.5rem .58rem; width:100%; }.staff-finance-expense-form button { align-self:end; background:#0b9d69; border:0; border-radius:8px; color:#fff; font-size:.66rem; font-weight:800; grid-column:span 2; justify-self:end; padding:.62rem .8rem; }
.staff-finance-pending-list,.staff-finance-ledger { padding:0 .75rem .75rem; }.staff-finance-pending-list > div,.staff-finance-ledger > div { align-items:center; border-top:1px solid #edf0f4; display:flex; gap:.55rem; justify-content:space-between; padding:.65rem .35rem; }.staff-finance-pending-list > div > span { align-items:center; background:#fff5e9; border-radius:9px; color:#dd8410; display:flex; height:30px; justify-content:center; width:30px; }.staff-finance-pending-list p { flex:1; }.staff-finance-pending-list strong,.staff-finance-pending-list small,.staff-finance-ledger strong,.staff-finance-ledger small { display:block; }.staff-finance-pending-list strong,.staff-finance-ledger strong { color:#26344b; font-size:.7rem; }.staff-finance-pending-list small,.staff-finance-ledger small { color:#8794a8; font-size:.59rem; margin-top:.08rem; }.staff-finance-pending-list b { color:#d27b00; font-size:.73rem; }.staff-finance-ledger b { color:#d94555; font-size:.72rem; }.staff-finance-empty { color:#8491a5; padding:1.45rem; text-align:center; }.staff-finance-empty i { color:#0ba36e; display:block; font-size:1.25rem; margin-bottom:.4rem; }.staff-finance-empty strong { color:#45546b; display:block; font-size:.75rem; }.staff-finance-empty p { font-size:.63rem; line-height:1.4; margin:.2rem auto 0; max-width:18rem; }.staff-finance-empty.compact { padding:2rem 1rem; }
.staff-finance-sales-table { margin-top:1rem; }.staff-finance-table-heading,.staff-finance-sale-row { align-items:center; display:grid; gap:1rem; grid-template-columns: .7fr 1.7fr .8fr .9fr .9fr; padding:.75rem 1.1rem; }.staff-finance-table-heading { background:#fbfcfe; color:#8a96a8; font-size:.57rem; font-weight:900; letter-spacing:.04em; text-transform:uppercase; }.staff-finance-sale-row { border-top:1px solid #edf0f4; color:#26344b; font-size:.7rem; }.staff-finance-sale-row strong,.staff-finance-sale-row small { display:block; }.staff-finance-sale-row strong { font-size:.7rem; }.staff-finance-sale-row small { color:#8a96a8; font-size:.58rem; margin-top:.1rem; }.staff-finance-sale-row > span:nth-child(n+3) { color:#26344b; font-weight:800; }.staff-finance-sale-row em { color:#df4656; font-style:normal; }.staff-finance-sale-row b { color:#ca7900; font-size:.62rem; }
@media (max-width: 900px) { .staff-finance-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }.staff-finance-grid { grid-template-columns:1fr; }.staff-finance-expense-form { grid-template-columns:1fr 1fr; }.staff-finance-expense-form label:nth-of-type(5),.staff-finance-expense-form button { grid-column:span 2; } .staff-finance-table-heading { display:none; }.staff-finance-sale-row { gap:.45rem; grid-template-columns:1fr 1fr; }.staff-finance-sale-row > span:nth-child(n+3)::before { color:#8a96a8; content:attr(data-label); display:block; font-size:.55rem; text-transform:uppercase; } }
@media (max-width: 620px) { .staff-finance-page { padding:1rem; }.staff-finance-header { display:grid; }.staff-finance-health { max-width:none; }.staff-finance-kpis,.staff-finance-insights { grid-template-columns:1fr; }.staff-finance-expense-form { grid-template-columns:1fr; }.staff-finance-expense-form label:nth-of-type(5),.staff-finance-expense-form button { grid-column:auto; justify-self:stretch; }.staff-finance-sale-row { grid-template-columns:1fr; padding: .8rem 1rem; } }

.staff-ops-workspace .staff-dashboard-header {
  align-items: center;
  margin-bottom: 1.55rem;
}

.staff-ops-workspace .staff-dashboard-header h1 {
  font-size: clamp(1.8rem, 3vw, 2.45rem);
  line-height: 1.08;
  margin-bottom: 0.38rem;
}

.staff-dashboard-header-actions {
  align-items: center;
  position: relative;
}

.staff-dashboard-header-actions time,
.staff-header-menu > summary {
  align-items: center;
  background: #fff;
  border: 1px solid #dfe5ed;
  border-radius: 10px;
  color: #5c697c;
  display: inline-flex;
  font-size: 0.65rem;
  font-weight: 700;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0.55rem 0.75rem;
}

.staff-header-menu {
  position: relative;
}

.staff-header-menu > summary {
  cursor: pointer;
  list-style: none;
}

.staff-header-menu > summary::-webkit-details-marker {
  display: none;
}

.staff-header-menu[open] > summary {
  border-color: #f0a1aa;
  box-shadow: 0 0 0 3px rgba(239, 29, 47, 0.06);
}

.staff-header-menu > div {
  background: #fff;
  border: 1px solid #dfe5ed;
  border-radius: 12px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.14);
  display: grid;
  gap: 0.2rem;
  min-width: 220px;
  padding: 0.5rem;
  position: absolute;
  right: 0;
  top: calc(100% + 0.45rem);
  z-index: 50;
}

.staff-dashboard-header-actions .staff-header-menu a {
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: #344054;
  font-size: 0.62rem;
  justify-content: flex-start;
  min-height: 36px;
  padding: 0.5rem 0.6rem;
}

.staff-dashboard-header-actions .staff-header-menu a:hover {
  background: #f5f7fa;
  color: #d7192e;
}

.staff-ops-section {
  margin-bottom: 1.4rem;
}

.staff-ops-section-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.staff-ops-section-heading h2 {
  color: #1d2939;
  font-size: 0.92rem;
  font-weight: 820;
  margin: 0;
}

.staff-ops-section-heading > span {
  color: #8793a5;
  font-size: 0.58rem;
}

.staff-ops-section-heading > div > p {
  color: #8793a5;
  font-size: 0.62rem;
  margin: 0.2rem 0 0;
}

.staff-attention-total {
  align-items: center;
  background: #fff0f2;
  border: 1px solid #ffd5da;
  border-radius: 999px;
  color: #d7192e !important;
  display: inline-flex;
  font-weight: 800;
  gap: 0.32rem;
  padding: 0.42rem 0.62rem;
}

.staff-dashboard-top-grid {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.staff-dashboard-top-grid > .staff-ops-section { margin-bottom: 1.1rem; }
.staff-attention-section { grid-column: 1; order: 2; }
.staff-activity-section { grid-column: 1 / -1; order: 1; }
.staff-dashboard-top-grid > .staff-recent-requests {
  grid-area: auto;
  grid-column: 2;
  height: 348px;
  margin-bottom: 1.1rem;
  min-width: 0;
  order: 2;
  overflow: hidden;
}

.staff-dashboard-top-grid > .staff-recent-requests .staff-request-row {
  gap: 0.55rem;
  grid-template-columns: minmax(125px, 1.2fr) minmax(105px, 1fr) minmax(82px, 0.7fr) 48px;
  min-height: 46px;
  padding: 0.28rem 0.15rem;
}

.staff-dashboard-top-grid > .staff-recent-requests .staff-request-row.heading {
  min-height: 25px;
}

.staff-dashboard-top-grid > .staff-recent-requests .staff-request-row strong {
  font-size: 0.63rem;
}

.staff-dashboard-top-grid > .staff-recent-requests .staff-request-row small,
.staff-dashboard-top-grid > .staff-recent-requests .staff-request-row time {
  font-size: 0.57rem;
}

.staff-activity-overview {
  background: #fff;
  border: 1px solid #e7ebf0;
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.staff-activity-row {
  --activity: #1f70d1;
  --activity-soft: #edf5ff;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid #edf0f4;
  border-right: 1px solid #edf0f4;
  color: inherit;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 0.78rem 0.9rem;
  text-decoration: none;
  transition: background 160ms ease;
}

.staff-activity-row.quotes { --activity: #8d4cc6; --activity-soft: #f6efff; }
.staff-activity-row.approved { --activity: #148553; --activity-soft: #ebf9f1; }
.staff-activity-row:last-child { border-bottom: 0; border-right: 0; }
.staff-activity-row:hover { background: #fafbfd; }
.staff-activity-row > span {
  align-items: center;
  background: var(--activity-soft);
  border-radius: 9px;
  color: var(--activity);
  display: flex;
  height: 35px;
  justify-content: center;
  width: 35px;
}
.staff-activity-row > div { min-width: 0; }
.staff-activity-row small { color: #738196; display: block; font-size: 0.58rem; font-weight: 760; }
.staff-activity-row strong { color: #1d2939; display: inline-block; font-size: 1.12rem; line-height: 1; margin-top: 0.18rem; }
.staff-activity-row p { color: #7b8798; display: inline; font-size: 0.57rem; margin: 0 0 0 0.4rem; }
.staff-activity-row > i { color: var(--activity); font-size: 0.82rem; }

.staff-priority-queue {
  background: #fff;
  border: 1px solid #e7ebf0;
  border-radius: 16px;
  display: grid;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
}

.staff-priority-queue-header {
  background: #fcfdff;
  border-bottom: 1px solid #edf0f4;
  margin: 0;
  padding: 0.72rem 0.82rem;
}

.staff-priority-queue-header > div > p { max-width: 260px; }
.staff-priority-queue-header .staff-attention-total { flex-shrink: 0; }
.staff-activity-overview-header { grid-column: 1 / -1; }

.staff-priority-card {
  --priority: #d7192e;
  --priority-soft: #fff1f3;
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #edf0f4;
  border-left: 3px solid transparent;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  display: grid;
  gap: 0.72rem;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  padding: 0.62rem 0.82rem;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease;
}

.staff-priority-card.high { --priority: #e47b13; --priority-soft: #fff5e8; }
.staff-priority-card.medium { --priority: #2563b8; --priority-soft: #edf5ff; }
.staff-priority-card:last-child { border-bottom: 0; }
.staff-priority-card:hover { background: #fafbfd; border-left-color: var(--priority); }

.staff-priority-icon {
  align-items: center;
  background: var(--priority-soft);
  border-radius: 9px;
  color: var(--priority);
  display: flex;
  font-size: 1rem;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.staff-priority-copy { min-width: 0; }
.staff-priority-copy small { color: var(--priority); display: block; font-size: 0.5rem; font-weight: 850; letter-spacing: 0.06em; }
.staff-priority-copy strong { color: #273548; display: block; font-size: 0.7rem; margin-top: 0.08rem; }
.staff-priority-copy p { color: #7b8798; font-size: 0.56rem; margin: 0.08rem 0 0; }
.staff-priority-card > b { color: #172033; font-size: 1.12rem; min-width: 1.2rem; text-align: center; }
.staff-priority-action { color: var(--priority); font-size: 0.59rem; font-weight: 800; white-space: nowrap; }
.staff-priority-action i { margin-left: 0.2rem; }

.staff-attention-section .staff-priority-card {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.staff-attention-section .staff-priority-action {
  font-size: 0.55rem;
  grid-column: 2 / -1;
  margin-top: -0.28rem;
}

.staff-attention-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.staff-attention-card {
  --attention-color: #ef1d2f;
  --attention-soft: #fff0f2;
  align-items: center;
  background: #fff;
  border: 1px solid #dfe5ed;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.035);
  color: inherit;
  display: grid;
  gap: 0.9rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 102px;
  padding: 0.95rem 1.1rem;
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.staff-attention-card.corrections {
  --attention-color: #f08a16;
  --attention-soft: #fff5e8;
}

.staff-attention-card:hover {
  border-color: color-mix(in srgb, var(--attention-color) 35%, #dfe5ed);
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.07);
  transform: translateY(-2px);
}

.staff-attention-card > span {
  align-items: center;
  background: var(--attention-soft);
  border-radius: 12px;
  color: var(--attention-color);
  display: flex;
  font-size: 1.25rem;
  height: 52px;
  justify-content: center;
  width: 52px;
}

.staff-attention-card strong,
.staff-attention-card small,
.staff-attention-card b {
  display: block;
}

.staff-attention-card strong {
  color: #283548;
  font-size: 0.72rem;
}

.staff-attention-card small {
  color: #8793a5;
  font-size: 0.56rem;
  margin-top: 0.1rem;
}

.staff-attention-card b {
  color: #101828;
  font-size: 1.25rem;
  line-height: 1;
  margin-top: 0.38rem;
}

.staff-attention-card > i {
  color: var(--attention-color);
}

.staff-ops-workspace .staff-metric-grid {
  gap: 0.9rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 0;
}

.staff-ops-workspace .staff-metric-card {
  min-height: 132px;
  padding: 1.05rem;
}

.staff-ops-workspace .staff-metric-card::after {
  background: var(--metric-color);
  border-radius: 999px;
  bottom: 0.9rem;
  content: "";
  height: 3px;
  left: 1rem;
  opacity: 0.9;
  position: absolute;
  width: 68px;
}

.staff-ops-workspace .staff-metric-card p {
  border-top: 1px solid #edf1f5;
  margin-top: 0.55rem;
  padding-top: 0.55rem;
}

.staff-ops-workspace .staff-dashboard-layout {
  grid-template-areas:
    "summary summary"
    "pending pending";
  grid-template-columns: 1fr;
  margin-bottom: 1.4rem;
}

.staff-ops-workspace .staff-dashboard-card {
  border-radius: 15px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.staff-ops-workspace .staff-pending-card {
  grid-area: pending;
}

.staff-ops-workspace .staff-platform-summary {
  grid-area: summary;
}

.staff-ops-workspace .staff-dashboard-layout .staff-recent-requests {
  grid-area: recent;
}

.staff-ops-workspace .staff-dashboard-card > header > a {
  border: 1px solid #dfe5ed;
  border-radius: 8px;
  color: #667085;
  font-size: 0.55rem;
  font-weight: 750;
  padding: 0.4rem 0.55rem;
  text-decoration: none;
  white-space: nowrap;
}

.staff-ops-workspace .staff-dashboard-card > header > a:hover {
  border-color: #f0a1aa;
  color: #d7192e;
}

.staff-ops-workspace .staff-platform-summary dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.staff-ops-workspace .staff-platform-summary dl > div {
  align-items: flex-start;
  border-bottom: 1px solid #edf1f6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 72px;
  padding: 0.55rem 0.7rem;
}

.staff-ops-workspace .staff-platform-summary dl > div:nth-child(odd) {
  border-right: 1px solid #edf1f6;
}

.staff-ops-workspace .staff-platform-summary dt {
  font-size: 0.56rem;
}

.staff-ops-workspace .staff-platform-summary dd {
  font-size: 1rem;
  margin-top: 0.18rem;
}

.staff-ops-workspace .staff-request-row {
  gap: 0.65rem;
  grid-template-columns: minmax(170px, 1.35fr) minmax(130px, 1fr) auto 72px;
  min-height: 56px;
}

.staff-ops-workspace .staff-request-row > span:first-child strong,
.staff-ops-workspace .staff-request-row > span:first-child small,
.staff-ops-workspace .staff-request-row > span:nth-child(2) strong,
.staff-ops-workspace .staff-request-row > span:nth-child(2) small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-ops-workspace .staff-request-row > span:first-child strong {
  color: #283548;
  font-size: 0.62rem;
}

.staff-ops-workspace .staff-request-row > span:first-child small,
.staff-ops-workspace .staff-request-row > span:nth-child(2) small,
.staff-ops-workspace .staff-request-row > span:nth-child(3) small {
  color: #8793a5;
  display: block;
  font-size: 0.51rem;
  margin-top: 0.12rem;
}

.staff-ops-workspace .staff-request-row > span:nth-child(3) {
  text-align: center;
}

.staff-quick-actions {
  margin-bottom: 0;
}

.staff-quick-actions > div:last-child {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.staff-quick-actions > div:last-child > a {
  align-items: center;
  background: #fff;
  border: 1px solid #dfe5ed;
  border-radius: 13px;
  color: inherit;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 82px;
  padding: 0.85rem;
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.staff-quick-actions > div:last-child > a:hover {
  border-color: #f0a1aa;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
  transform: translateY(-2px);
}

.staff-quick-actions a > span {
  align-items: center;
  background: #fff0f2;
  border-radius: 10px;
  color: #ef1d2f;
  display: flex;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.staff-quick-actions a:nth-child(2) > span {
  background: #edf4ff;
  color: #2563eb;
}

.staff-quick-actions a:nth-child(3) > span {
  background: #fff5e8;
  color: #ed8614;
}

.staff-quick-actions strong,
.staff-quick-actions small {
  display: block;
}

.staff-quick-actions strong {
  color: #283548;
  font-size: 0.66rem;
}

.staff-quick-actions small {
  color: #8793a5;
  font-size: 0.52rem;
  margin-top: 0.12rem;
}

.staff-quick-actions a > i {
  color: #ef1d2f;
  font-size: 0.72rem;
}

@media (max-width: 1199.98px) {
  .staff-ops-shell {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .staff-ops-sidebar {
    padding-inline: 0.65rem;
  }

  .staff-ops-sidebar-heading,
  .staff-ops-sidebar-help,
  .staff-ops-sidebar nav a span,
  .staff-ops-sidebar nav a em,
  .staff-ops-nav-group > small {
    display: none;
  }

  .staff-ops-nav-group { border-top: 0; margin-top: 0.1rem; padding-top: 0; }

  .staff-ops-sidebar nav a {
    display: flex;
    justify-content: center;
    padding-inline: 0;
  }
}

@media (max-width: 991.98px) {
  .staff-dashboard-top-grid {
    grid-template-columns: 1fr;
  }

  .staff-dashboard-top-grid > .staff-attention-section,
  .staff-dashboard-top-grid > .staff-recent-requests {
    grid-column: 1;
  }

  .staff-dashboard-top-grid > .staff-recent-requests {
    height: auto;
    overflow: visible;
  }

  .staff-priority-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .staff-priority-action {
    grid-column: 2 / -1;
  }

  .staff-ops-shell {
    display: block;
  }

  .staff-ops-sidebar {
    height: auto;
    overflow-x: auto;
    padding: 0.55rem 0.75rem;
    position: static;
  }

  .staff-ops-sidebar nav {
    display: flex;
    min-width: max-content;
  }

  .staff-ops-nav-group { align-items: center; display: flex; gap: 0.28rem; }

  .staff-ops-sidebar nav a {
    min-height: 40px;
    width: 44px;
  }

  .staff-ops-workspace .staff-dashboard-layout {
    grid-template-areas:
      "summary"
      "pending";
    grid-template-columns: 1fr;
  }

  .staff-ops-workspace .staff-request-row {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) auto 70px;
  }
}

@media (max-width: 575.98px) {
  .staff-activity-overview {
    grid-template-columns: 1fr;
  }

  .staff-priority-queue-header {
    padding: 0.62rem 0.65rem;
  }

  .staff-priority-queue-header > div > p {
    max-width: 190px;
  }

  .staff-activity-row {
    border-right: 0;
    gap: 0.58rem;
    padding: 0.65rem 0.7rem;
  }

  .staff-activity-row p {
    display: block;
    margin: 0.1rem 0 0;
  }

  .staff-priority-card {
    gap: 0.55rem;
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 0.58rem 0.65rem;
  }

  .staff-priority-copy p {
    font-size: 0.55rem;
  }
}

@media (max-width: 767.98px) {
  .staff-ops-workspace {
    padding: 1.1rem 0.85rem 1.5rem;
  }

  .staff-ops-workspace .staff-dashboard-header {
    align-items: flex-start;
    gap: 0.9rem;
  }

  .staff-dashboard-header-actions {
    flex-direction: row;
    width: 100%;
  }

  .staff-dashboard-header-actions time,
  .staff-header-menu,
  .staff-header-menu > summary {
    flex: 1;
    justify-content: center;
    width: 100%;
  }

  .staff-attention-grid,
  .staff-ops-workspace .staff-metric-grid,
  .staff-business-kpis,
  .staff-quick-actions > div:last-child {
    grid-template-columns: 1fr;
  }

  .staff-ops-workspace .staff-metric-card {
    min-height: 112px;
  }

  .staff-ops-workspace .staff-platform-summary dl {
    grid-template-columns: 1fr;
  }

  .staff-ops-workspace .staff-platform-summary dl > div:nth-child(odd) {
    border-right: 0;
  }

  .staff-ops-workspace .staff-request-table {
    display: grid;
    gap: 0.55rem;
  }

  .staff-ops-workspace .staff-request-row.heading {
    display: none;
  }

  .staff-ops-workspace .staff-request-row {
    background: #f8fafc;
    border: 1px solid #e7edf4;
    border-radius: 10px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0.7rem;
  }

  .staff-ops-workspace .staff-request-row > span:nth-child(2) {
    grid-column: 1;
  }

  .staff-ops-workspace .staff-request-row > span:nth-child(3),
  .staff-ops-workspace .staff-request-row time {
    grid-column: 2;
    justify-self: end;
  }

  .staff-dashboard-top-grid > .staff-recent-requests {
    padding: 0.75rem;
  }

  .staff-dashboard-top-grid > .staff-recent-requests > header {
    padding-bottom: 0.65rem;
  }

  .staff-dashboard-top-grid > .staff-recent-requests .staff-request-table {
    gap: 0.45rem;
    padding-top: 0.5rem;
  }

  .staff-dashboard-top-grid > .staff-recent-requests .staff-request-row {
    box-sizing: border-box;
    gap: 0.25rem 0.55rem;
    grid-template-areas:
      "request status"
      "entity time";
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 0;
    padding: 0.55rem 0.6rem;
    width: 100%;
  }

  .staff-dashboard-top-grid > .staff-recent-requests .staff-request-row > span:first-child {
    grid-area: request;
    min-width: 0;
  }

  .staff-dashboard-top-grid > .staff-recent-requests .staff-request-row > span:nth-child(2) {
    grid-area: entity;
    grid-column: auto;
    min-width: 0;
  }

  .staff-dashboard-top-grid > .staff-recent-requests .staff-request-row > span:nth-child(3) {
    align-self: start;
    grid-area: status;
    grid-column: auto;
    justify-self: end;
    text-align: right;
  }

  .staff-dashboard-top-grid > .staff-recent-requests .staff-request-row time {
    align-self: end;
    grid-area: time;
    grid-column: auto;
    justify-self: end;
    white-space: nowrap;
  }

  .staff-business-list > article {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .staff-business-record > .staff-business-actions { grid-column: 4; grid-row: 1 / 3; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .staff-business-record > .staff-business-actions { grid-column: 1 / -1; grid-row: auto; justify-self: stretch; }
  .staff-business-record > .staff-business-actions .staff-record-action { flex: 1; justify-content: center; }
}

@media (max-width: 479.98px) {
  .staff-dashboard-header-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .staff-attention-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding-inline: 0.8rem;
  }

  .staff-business-list > article {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .staff-business-list time {
    display: none;
  }

  .staff-document-state,
  .staff-business-review-button {
    grid-column: 2;
    justify-self: start;
  }
}

/* Focused, low-noise reservation response for merchants. */
.merchant-reservation-page {
  background: #f4f6f8;
  color: #172033;
}
.merchant-reservation-page .app-navbar,
.merchant-reservation-page > footer,
.merchant-reservation-page .mobile-tab-bar { display: none !important; }
.merchant-reservation-page main { min-height: 100vh; }
.merchant-reservation-shell { min-height: 100vh; padding: 34px 18px; }
.merchant-reservation-wrap { margin: 0 auto; max-width: 660px; }
.merchant-reservation-brand { align-items: center; display: flex; gap: 11px; margin: 0 0 18px 4px; }
.merchant-brand-symbol { align-items: center; background: #172033; border-radius: 11px; color: #fff; display: flex; font-size: 1rem; height: 38px; justify-content: center; width: 38px; }
.merchant-reservation-brand small,
.merchant-reservation-brand strong { display: block; }
.merchant-reservation-brand small { color: #7a8495; font-size: .69rem; font-weight: 650; }
.merchant-reservation-brand strong { color: #1b2639; font-size: .86rem; }
.merchant-reservation-back { align-items: center; color: #718095; display: flex; font-size: .65rem; font-weight: 700; gap: 5px; margin-left: auto; padding: 7px; text-decoration: none; }
.merchant-reservation-back:hover { color: #2767d7; }
.merchant-reservation-card { background: #fff; border: 1px solid #e5e9ef; border-radius: 22px; box-shadow: 0 18px 50px rgba(23,32,51,.08); padding: 30px; }
.merchant-reservation-intro { align-items: flex-start; display: flex; gap: 16px; }
.merchant-reservation-icon { align-items: center; background: #eef4ff; border-radius: 15px; color: #2767d7; display: flex; flex: 0 0 50px; font-size: 1.35rem; height: 50px; justify-content: center; }
.merchant-reservation-eyebrow { color: #2767d7; display: block; font-size: .69rem; font-weight: 800; letter-spacing: .04em; margin-bottom: 4px; text-transform: uppercase; }
.merchant-reservation-intro h1,
.merchant-reservation-result h1 { color: #172033; font-size: 1.55rem; font-weight: 800; letter-spacing: -.035em; margin: 0; }
.merchant-reservation-intro p,
.merchant-reservation-result p { color: #6f798b; font-size: .89rem; line-height: 1.5; margin: 5px 0 0; }
.merchant-reservation-timer { align-items: center; background: #fff8e8; border: 1px solid #f5e5b8; border-radius: 12px; color: #8b6508; display: flex; gap: 9px; margin-top: 20px; padding: 11px 13px; }
.merchant-reservation-timer span { font-size: .75rem; font-weight: 650; }
.merchant-reservation-timer strong { font-size: .88rem; margin-left: auto; }
.merchant-reservation-summary { border: 1px solid #e5e9ef; border-radius: 16px; margin-top: 22px; overflow: hidden; }
.merchant-summary-heading { align-items: flex-start; background: #f8f9fb; display: flex; gap: 12px; justify-content: space-between; padding: 16px; }
.merchant-summary-heading small { color: #8490a2; display: block; font-size: .65rem; font-weight: 700; margin-bottom: 3px; }
.merchant-summary-heading h2 { color: #1b2639; font-size: .97rem; font-weight: 750; line-height: 1.35; margin: 0; }
.merchant-summary-heading > span { background: #fff; border: 1px solid #dfe5ec; border-radius: 999px; color: #526074; flex: 0 0 auto; font-size: .65rem; font-weight: 700; padding: 5px 9px; }
.merchant-vehicle-row { align-items: center; border-top: 1px solid #e9edf2; display: flex; gap: 11px; padding: 14px 16px; }
.merchant-vehicle-row > span { align-items: center; background: #f0f3f7; border-radius: 9px; color: #526074; display: flex; height: 34px; justify-content: center; width: 34px; }
.merchant-vehicle-row small,
.merchant-vehicle-row strong { display: block; }
.merchant-vehicle-row small { color: #8994a5; font-size: .61rem; }
.merchant-vehicle-row strong { color: #253044; font-size: .78rem; }
.merchant-piece-list { border-top: 1px solid #e9edf2; padding: 5px 16px; }
.merchant-piece-list article { align-items: center; border-bottom: 1px solid #edf0f4; display: flex; gap: 10px; padding: 10px 0; }
.merchant-piece-list article:last-child { border-bottom: 0; }
.merchant-piece-list article > span { align-items: center; background: #edf4ff; border-radius: 8px; color: #2b6bdb; display: flex; flex: 0 0 30px; font-size: .62rem; font-weight: 800; height: 30px; justify-content: center; }
.merchant-piece-list strong,
.merchant-piece-list small { display: block; }
.merchant-piece-list strong { color: #283449; font-size: .75rem; }
.merchant-piece-list small { color: #818c9d; font-size: .62rem; margin-top: 1px; }
.merchant-reference-row { border-top: 1px solid #e9edf2; display: grid; gap: 12px; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 14px 16px; }
.merchant-reference-row small,
.merchant-reference-row strong { display: block; }
.merchant-reference-row small { color: #8994a5; font-size: .6rem; }
.merchant-reference-row strong { color: #283449; font-size: .72rem; margin-top: 2px; }
.merchant-detail-grid { border-top: 1px solid #e9edf2; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.merchant-detail-grid > div { align-items: center; display: flex; gap: 9px; padding: 14px 16px; }
.merchant-detail-grid > div + div { border-left: 1px solid #e9edf2; }
.merchant-detail-grid span { color: #5c6a80; }
.merchant-detail-grid p { margin: 0; }
.merchant-detail-grid small,
.merchant-detail-grid strong { display: block; }
.merchant-detail-grid small { color: #8994a5; font-size: .59rem; }
.merchant-detail-grid strong { color: #283449; font-size: .7rem; margin-top: 1px; }
.merchant-receivable { align-items: center; background: #eef9f4; border: 1px solid #d3ecdf; border-radius: 15px; display: flex; justify-content: space-between; margin-top: 16px; padding: 15px 17px; }
.merchant-receivable div small,
.merchant-receivable div strong { display: block; }
.merchant-receivable div small { color: #6c8d7c; font-size: .6rem; }
.merchant-receivable div strong { color: #206a4a; font-size: .83rem; }
.merchant-receivable > span { color: #087a50; font-size: 1.45rem; font-weight: 850; letter-spacing: -.03em; }
.merchant-receivable > span small { font-size: .65rem; letter-spacing: 0; }
.merchant-reservation-actions { display: grid; gap: 10px; margin-top: 22px; }
.merchant-reservation-actions form { margin: 0; }
.merchant-confirm-button { align-items: center; background: #087a50; border: 0; border-radius: 13px; box-shadow: 0 8px 20px rgba(8,122,80,.18); color: #fff; cursor: pointer; display: flex; gap: 12px; justify-content: center; min-height: 58px; padding: 9px 18px; transition: transform .15s ease, background .15s ease; width: 100%; }
.merchant-confirm-button:hover { background: #066a45; transform: translateY(-1px); }
.merchant-confirm-button > i { font-size: 1.2rem; }
.merchant-confirm-button strong,
.merchant-confirm-button small { display: block; text-align: left; }
.merchant-confirm-button strong { font-size: .88rem; }
.merchant-confirm-button small { color: rgba(255,255,255,.74); font-size: .61rem; font-weight: 500; }
.merchant-reject-button { background: transparent; border: 0; color: #6d7788; cursor: pointer; font-size: .72rem; font-weight: 650; padding: 7px; text-decoration: underline; text-decoration-color: #cfd5dd; text-underline-offset: 3px; width: 100%; }
.merchant-reject-button:hover { color: #b42338; }
.merchant-reservation-note { color: #8a94a4; font-size: .62rem; margin: 14px 0 0; text-align: center; }
.merchant-reservation-result { align-items: flex-start; display: flex; gap: 15px; }
.merchant-reservation-result > span { align-items: center; background: #eaf8f1; border-radius: 50%; color: #087a50; display: flex; flex: 0 0 48px; font-size: 1.3rem; height: 48px; justify-content: center; }
.merchant-reservation-result small { color: #087a50; display: block; font-size: .64rem; font-weight: 800; margin-bottom: 3px; text-transform: uppercase; }
.merchant-reservation-result.neutral > span { background: #f0f2f5; color: #687487; }
.merchant-reservation-result.neutral small { color: #687487; }
.merchant-reservation-result.expired > span { background: #fff5e5; color: #a36b08; }
.merchant-reservation-result.expired small { color: #a36b08; }
.merchant-reservation-hold { background: #f5f7f9; border-radius: 11px; color: #637084; font-size: .69rem; margin-top: 18px; padding: 11px; text-align: center; }
.merchant-reservation-footer { color: #929baa; font-size: .65rem; margin: 15px 0 0; text-align: center; }

@media (max-width: 575.98px) {
  .merchant-reservation-shell { padding: 18px 12px 28px; }
  .merchant-reservation-card { border-radius: 18px; padding: 22px 17px; }
  .merchant-reservation-intro h1,
  .merchant-reservation-result h1 { font-size: 1.3rem; }
  .merchant-reservation-icon { flex-basis: 44px; height: 44px; width: 44px; }
  .merchant-summary-heading { flex-direction: column; }
  .merchant-reference-row,
  .merchant-detail-grid { grid-template-columns: 1fr; }
  .merchant-detail-grid > div + div { border-left: 0; border-top: 1px solid #e9edf2; }
  .merchant-receivable > span { font-size: 1.3rem; }
}

/* Seller mailbox: compact activity instead of inline reservation cards. */
.seller-mailbox-nav { position: relative; }
.seller-mailbox-nav > span { align-items: center; background: #ef233c; border: 2px solid #fff; border-radius: 999px; color: #fff; display: inline-flex; font-size: .58rem; font-weight: 850; height: 18px; justify-content: center; min-width: 18px; padding: 0 4px; }
.mobile-mailbox-badge { align-items: center; background: #ef233c; border: 2px solid #fff; border-radius: 999px; color: #fff; display: flex; font-size: .5rem; font-style: normal; font-weight: 850; height: 17px; justify-content: center; min-width: 17px; position: absolute; right: calc(50% - 21px); top: 4px; }
.opportunities-heading-actions { align-items: center; display: flex; gap: 10px; }
.opportunities-mailbox-link { align-items: center; background: #fff; border: 1px solid #dde4ed; border-radius: 14px; color: #27364b; display: flex; gap: 10px; min-height: 48px; padding: 7px 11px; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.opportunities-mailbox-link:hover { border-color: #cbd5e1; box-shadow: 0 8px 22px rgba(24,37,61,.08); color: #172033; transform: translateY(-1px); }
.opportunities-mailbox-link > span { align-items: center; background: #eef4ff; border-radius: 10px; color: #2767d7; display: flex; flex: 0 0 32px; height: 32px; justify-content: center; position: relative; }
.opportunities-mailbox-link > span em { align-items: center; background: #ef233c; border: 2px solid #fff; border-radius: 50%; color: #fff; display: flex; font-size: .5rem; font-style: normal; font-weight: 850; height: 17px; justify-content: center; min-width: 17px; position: absolute; right: -6px; top: -6px; }
.opportunities-mailbox-link div small,
.opportunities-mailbox-link div strong { display: block; }
.opportunities-mailbox-link div small { color: #8994a5; font-size: .55rem; }
.opportunities-mailbox-link div strong { color: #344258; font-size: .66rem; margin-top: 1px; }
.opportunities-mailbox-link > i { color: #99a3b1; font-size: .65rem; }

.seller-mailbox-experience { background: #f5f7fa; }
.seller-mailbox-page { min-height: calc(100vh - 72px); padding: clamp(2rem,4vw,3.5rem) 0 6rem; }
.seller-mailbox-container { max-width: 980px; }
.seller-mailbox-header { align-items: flex-end; display: flex; gap: 24px; justify-content: space-between; margin-bottom: 24px; }
.seller-mailbox-kicker { color: #2767d7; display: block; font-size: .66rem; font-weight: 850; letter-spacing: .09em; margin-bottom: 5px; text-transform: uppercase; }
.seller-mailbox-header h1 { color: #172033; font-size: clamp(2rem,4vw,2.8rem); font-weight: 850; letter-spacing: -.05em; margin: 0; }
.seller-mailbox-header p { color: #738095; font-size: .86rem; margin: 5px 0 0; }
.seller-mailbox-header > a { align-items: center; color: #68758a; display: flex; font-size: .7rem; font-weight: 700; gap: 6px; padding: 7px; text-decoration: none; }
.seller-mailbox-header > a:hover { color: #2767d7; }
.seller-mailbox-tabs { background: #e9edf2; border-radius: 13px; display: grid; gap: 4px; grid-template-columns: repeat(3,minmax(0,1fr)); margin-bottom: 14px; padding: 4px; }
.seller-mailbox-tabs a { align-items: center; border-radius: 10px; color: #6d798c; display: flex; font-size: .7rem; font-weight: 720; justify-content: space-between; min-height: 43px; padding: 8px 12px; text-decoration: none; }
.seller-mailbox-tabs a span { align-items: center; display: flex; gap: 7px; }
.seller-mailbox-tabs a strong { align-items: center; background: rgba(255,255,255,.68); border-radius: 999px; display: flex; font-size: .6rem; height: 23px; justify-content: center; min-width: 23px; padding: 0 6px; }
.seller-mailbox-tabs a.active { background: #fff; box-shadow: 0 4px 13px rgba(24,37,61,.08); color: #1f2c42; }
.seller-mailbox-tabs a.active i { color: #2767d7; }
.seller-mailbox-tabs a.active strong { background: #eef4ff; color: #2767d7; }
.seller-mailbox-list { background: #fff; border: 1px solid #e1e6ed; border-radius: 18px; box-shadow: 0 14px 36px rgba(24,37,61,.055); overflow: hidden; }
.seller-mailbox-event { align-items: center; color: inherit; display: grid; gap: 14px; grid-template-columns: auto minmax(0,1fr) auto auto; min-height: 102px; padding: 16px 18px; position: relative; text-decoration: none; transition: background .15s ease; }
.seller-mailbox-event + .seller-mailbox-event { border-top: 1px solid #ebeff3; }
.seller-mailbox-event:hover { background: #fafbfd; color: inherit; }
.seller-mailbox-event.state-pendiente_comercio::before { background: #2767d7; border-radius: 0 999px 999px 0; content: ""; height: 42px; left: 0; position: absolute; top: 30px; width: 3px; }
.seller-mailbox-event-icon { align-items: center; background: #edf4ff; border-radius: 13px; color: #2767d7; display: flex; font-size: 1rem; height: 42px; justify-content: center; width: 42px; }
.state-confirmada .seller-mailbox-event-icon { background: #eaf8f1; color: #087a50; }
.state-rechazada .seller-mailbox-event-icon,
.state-vencida .seller-mailbox-event-icon { background: #f1f3f6; color: #7d8899; }
.seller-mailbox-event-title { align-items: center; display: flex; gap: 7px; }
.seller-mailbox-event-title strong { color: #26344a; font-size: .68rem; }
.seller-mailbox-event-title em { background: #eaf2ff; border-radius: 999px; color: #2767d7; font-size: .5rem; font-style: normal; font-weight: 800; padding: 3px 6px; text-transform: uppercase; }
.seller-mailbox-event-copy h2 { color: #172033; font-size: .88rem; font-weight: 780; margin: 4px 0 2px; }
.seller-mailbox-event-copy p { color: #8490a2; font-size: .63rem; margin: 0; }
.seller-mailbox-event-meta { min-width: 152px; text-align: right; }
.seller-mailbox-event-meta span,
.seller-mailbox-event-meta time { display: block; }
.seller-mailbox-event-meta span { color: #718095; font-size: .61rem; font-weight: 720; }
.seller-mailbox-event-meta span.urgent { color: #2767d7; }
.seller-mailbox-event-meta span.waiting { color: #087a50; }
.seller-mailbox-event-meta time { color: #9aa3b1; font-size: .55rem; margin-top: 4px; }
.seller-mailbox-event-chevron { color: #a4adba; font-size: .75rem; }
.seller-mailbox-empty { padding: 68px 20px; text-align: center; }
.seller-mailbox-empty > span { align-items: center; background: #eaf8f1; border-radius: 50%; color: #087a50; display: flex; font-size: 1.35rem; height: 52px; justify-content: center; margin: 0 auto 13px; width: 52px; }
.seller-mailbox-empty h2 { color: #29364b; font-size: 1rem; font-weight: 780; margin: 0; }
.seller-mailbox-empty p { color: #8792a3; font-size: .7rem; margin: 5px 0 0; }
.seller-mailbox-pagination { align-items: center; color: #8a95a5; display: flex; font-size: .64rem; justify-content: space-between; margin-top: 14px; }
.seller-mailbox-pagination a { color: #52627a; font-weight: 700; text-decoration: none; }

@media (max-width: 767.98px) {
  .opportunities-heading-actions { align-items: flex-end; flex-direction: column; }
  .opportunities-mailbox-link { border-radius: 12px; min-height: 42px; padding: 5px; }
  .opportunities-mailbox-link > span { height: 30px; width: 30px; }
  .opportunities-mailbox-link > div,
  .opportunities-mailbox-link > i { display: none; }
  .seller-mailbox-page { padding: 22px 0 calc(6rem + env(safe-area-inset-bottom,0px)); }
  .seller-mailbox-container { padding-inline: 12px; }
  .seller-mailbox-header { align-items: flex-start; margin-bottom: 18px; }
  .seller-mailbox-header > a { font-size: 0; padding: 8px; }
  .seller-mailbox-header > a i { font-size: 1rem; }
  .seller-mailbox-tabs { overflow-x: auto; }
  .seller-mailbox-tabs a { padding-inline: 9px; white-space: nowrap; }
  .seller-mailbox-event { gap: 10px; grid-template-columns: auto minmax(0,1fr) auto; min-height: 96px; padding: 14px 13px; }
  .seller-mailbox-event-icon { height: 38px; width: 38px; }
  .seller-mailbox-event-meta { grid-column: 2; min-width: 0; text-align: left; }
  .seller-mailbox-event-meta span,
  .seller-mailbox-event-meta time { display: inline; }
  .seller-mailbox-event-meta time::before { content: " · "; }
  .seller-mailbox-event-chevron { grid-column: 3; grid-row: 1 / 3; }
}

@media (max-width: 430px) {
  .seller-mailbox-tabs a span i { display: none; }
  .seller-mailbox-tabs a { font-size: .62rem; }
  .seller-mailbox-event-copy h2 { font-size: .8rem; }
}



/* Request detail workspace */

.request-detail-page {

  background: #F2F4F7;

  min-height: calc(100vh - 72px);

}



.detail-container {

  max-width: 1680px;

  padding-inline: clamp(1rem, 2vw, 2rem);

}



.request-workspace,

.quote-form-panel {

  background: #fff;

  border: 1px solid #dfe7ef;

  border-radius: 8px;

  box-shadow: 0 6px 22px rgba(21, 46, 76, 0.06);

}



.request-workspace {

  padding: clamp(1.25rem, 2.2vw, 2rem);

}



.back-link {

  align-items: center;

  color: #E11D2E;

  display: inline-flex;

  font-size: 0.85rem;

  font-weight: 700;

  gap: 0.4rem;

  margin-bottom: 1rem;

}



.request-title-row {

  align-items: center;

  display: flex;

  gap: 1rem;

  justify-content: space-between;

  margin-bottom: 1.5rem;

}



.request-title-row h1 {

  color: var(--navy);

  font-size: clamp(1.55rem, 2.3vw, 2rem);

  font-weight: 800;

  margin: 0;

}



.request-title-row p {

  color: var(--muted);

  font-size: 0.88rem;

  margin: 0.45rem 0 0;

}

.partial-fulfillment-summary {
  align-items: center;
  background: linear-gradient(135deg, #eefbf4, #f7fcfa);
  border: 1px solid #ccebd9;
  border-radius: 14px;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin: 0.85rem 0 1rem;
  padding: 0.75rem 0.9rem;
}

.partial-fulfillment-summary > span {
  align-items: center;
  background: #dff6e9;
  border-radius: 10px;
  color: #168653;
  display: flex;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.partial-fulfillment-summary small { color: #168653; display: block; font-size: 0.55rem; font-weight: 850; letter-spacing: 0.05em; }
.partial-fulfillment-summary strong { color: #183a2b; display: block; font-size: 0.76rem; margin-top: 0.12rem; }
.partial-fulfillment-summary p { color: #648274; font-size: 0.6rem; margin: 0.1rem 0 0; }
.partial-fulfillment-summary > b { color: #168653; font-size: 1.15rem; }

.piece-fulfillment-state {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.55rem;
  font-style: normal;
  font-weight: 800;
  gap: 0.25rem;
  margin-top: 0.38rem;
  padding: 0.22rem 0.42rem;
}

.piece-fulfillment-state.complete { background: #e8f8ef; color: #168653; }
.piece-fulfillment-state.pending { background: #eef4ff; color: #2563b8; }



.separator-dot {

  margin-inline: 0.35rem;

}





.part-section-title {

  align-items: center;

  color: var(--navy);

  display: flex;

  font-size: 1rem;

  font-weight: 800;

  gap: 0.65rem;

  margin-bottom: 0.85rem;

}



.part-section-title > i {

  border: 1px solid #bfcbd8;

  border-radius: 6px;

  display: grid;

  height: 30px;

  place-items: center;

  width: 30px;

}



.part-section-title span,

.part-section-title strong {

  display: block;

}



.part-section-title strong {

  color: #607085;

  font-size: 0.78rem;

  margin-top: 0.1rem;

}



.vehicle-grid {

  display: grid;

  gap: 0.75rem;

  grid-template-columns: repeat(4, minmax(0, 1fr));

}



.vehicle-stat {

  align-items: center;

  border: 1px solid #dce5ee;

  border-radius: 7px;

  display: flex;

  gap: 0.75rem;

  min-width: 0;

  padding: 0.85rem;

}



.vehicle-stat > i {

  color: #354a63;

  flex: 0 0 auto;

  font-size: 1.2rem;

}



.vehicle-stat span,

.request-description span,

.offer-details span {

  color: #64748B;

  display: block;

  font-size: 0.75rem;

}



.vehicle-stat strong {

  color: var(--navy);

  display: block;

  font-size: 0.92rem;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.request-description {

  align-items: center;

  border: 1px solid #dce5ee;

  border-radius: 7px;

  display: flex;

  gap: 1rem;

  justify-content: space-between;

  margin-top: 0.75rem;

  min-height: 76px;

  padding: 0.75rem;

}



.request-description p {

  color: #25364b;

  font-size: 0.9rem;

  margin: 0.2rem 0 0;

}



.request-description img,

.photo-placeholder {

  border-radius: 6px;

  flex: 0 0 112px;

  height: 58px;

  object-fit: cover;

  width: 112px;

}



.photo-placeholder {

  align-items: center;

  background: #edf2f6;

  color: #64748B;

  display: flex;

  font-size: 1.35rem;

  justify-content: center;

}



.identity-protection {

  align-items: center;

  background: #f1f8fa;

  border: 1px solid #cfe4e9;

  border-radius: 7px;

  display: flex;

  gap: 0.75rem;

  margin-top: 0.85rem;

  padding: 0.75rem;

}



.identity-protection > i:first-child,

.identity-protection > i:last-child {

  color: #E11D2E;

  font-size: 1.25rem;

}



.identity-protection strong,

.identity-protection span {

  display: block;

}



.identity-protection strong {

  color: #164258;

  font-size: 0.88rem;

}



.identity-protection span {

  color: #62768a;

  font-size: 0.76rem;

}



.quotes-heading {

  align-items: center;

  display: flex;

  justify-content: space-between;

  margin-top: 1.45rem;

}



.quotes-heading h2 {

  color: var(--navy);

  font-size: 1.15rem;

  font-weight: 800;

  margin: 0;

}



.quotes-heading > span {

  background: #F2F4F7;

  border-radius: 999px;

  color: #68788c;

  font-size: 0.76rem;

  font-weight: 700;

  padding: 0.35rem 0.65rem;

}



.quote-tabs {

  border-bottom: 1px solid #dfe7ef;

  display: flex;

  gap: 0.25rem;

  margin: 0.75rem 0 1rem;

  overflow-x: auto;

}



.quote-tabs a {

  border-bottom: 2px solid transparent;

  color: #657589;

  flex: 0 0 auto;

  font-size: 0.78rem;

  font-weight: 700;

  padding: 0.65rem 0.85rem;

}



.quote-tabs a.active {

  border-bottom-color: #E11D2E;

  color: #E11D2E;

}



.offer-row {

  align-items: center;

  border: 1px solid #dce5ee;

  border-radius: 7px;

  display: grid;

  gap: 0.75rem;

  grid-template-columns: 1.1fr 1fr 0.8fr 1.15fr auto;

  margin-bottom: 0.65rem;

  padding: 0.9rem;

  position: relative;

}



.offer-row.recommended {

  border-color: #E11D2E;

  box-shadow: 0 0 0 1px rgba(225, 29, 46, 0.12);

  padding-top: 1.35rem;

}



.recommendation-ribbon {

  background: #E11D2E;

  border-radius: 5px 0 5px 0;

  color: #fff;

  font-size: 0.65rem;

  font-weight: 800;

  left: -1px;

  padding: 0.28rem 0.55rem;

  position: absolute;

  text-transform: uppercase;

  top: -1px;

}



.offer-identity strong,

.offer-identity span,

.offer-trust strong,

.offer-trust span,

.offer-price strong,

.offer-delivery span,

.offer-delivery strong,

.offer-delivery small {

  display: block;

}



.offer-identity strong,

.offer-price strong {

  color: var(--navy);

  font-weight: 800;

}



.offer-identity span,

.offer-trust span,

.offer-delivery span,

.offer-delivery small {

  color: #64748B;

  font-size: 0.72rem;

  margin-top: 0.2rem;

}



.offer-identity span i {

  color: #E11D2E;

}



.offer-trust strong {

  color: #586a7d;

  font-size: 0.78rem;

}



.offer-trust strong i {

  color: #f5b51b;

}



.offer-price strong {

  font-size: 1.25rem;

  margin-bottom: 0.3rem;

}



.offer-delivery strong {

  color: #263a50;

  font-size: 0.82rem;

}



.offer-delivery strong i {

  color: #008f9b;

}



.offer-toggle {

  min-width: 94px;

}



.offer-details {

  border-top: 1px solid #e3e9ef;

  grid-column: 1 / -1;

  padding-top: 0.75rem;

}



.offer-details.show,

.offer-details.collapsing {

  display: grid;

  gap: 1rem;

  grid-template-columns: 1fr 1fr 2fr;

}



.offer-details strong {

  color: #304156;

  display: block;

  font-size: 0.82rem;

  margin-top: 0.15rem;

}



.support-band {

  align-items: center;

  background: #F2F4F7;

  border: 1px solid #dfe7ef;

  border-radius: 7px;

  display: flex;

  gap: 0.75rem;

  margin-top: 1rem;

  padding: 0.85rem;

}



.support-band > i {

  color: #E11D2E;

  font-size: 1.35rem;

}



.support-band strong,

.support-band span {

  display: block;

}



.support-band strong {

  color: #25374c;

  font-size: 0.85rem;

}



.support-band span {

  color: #64748B;

  font-size: 0.72rem;

}



.quote-form-panel {

  padding: clamp(1.25rem, 2.2vw, 2rem);

  top: 88px;

}



.quote-form-panel h2 {

  color: var(--navy);

  font-size: 1.65rem;

  font-weight: 800;

  margin-bottom: 0.5rem;

}



.quote-form-heading {

  align-items: center;

  display: flex;

  gap: 0.9rem;

  margin-bottom: 0.7rem;

}



.quote-form-heading .eyebrow,

.quote-form-heading h2 {

  margin-bottom: 0;

}



.quote-form-icon {

  align-items: center;

  background: linear-gradient(135deg, #dffbfc, #e9fff4);

  border-radius: 14px;

  color: #E11D2E;

  display: flex;

  flex: 0 0 52px;

  font-size: 1.4rem;

  height: 52px;

  justify-content: center;

}



.quote-part-summary {

  background: #f5f8fb;

  border: 1px solid #e2e9f0;

  border-radius: 10px;

  margin-bottom: 1.4rem;

  padding: 0.85rem 1rem;

}



.quote-part-summary span,

.quote-part-summary strong {

  display: block;

}



.quote-part-summary span {

  color: var(--navy);

  font-size: 0.95rem;

  font-weight: 800;

}



.quote-part-summary strong {

  color: var(--muted);

  font-size: 0.75rem;

  margin-top: 0.2rem;

}



.quote-fields {

  display: grid;

  gap: 1rem;

}



.price-input-wrap {

  align-items: center;

  display: flex;

  position: relative;

}



.price-input-wrap > span {

  color: var(--navy);

  font-size: 1.15rem;

  font-weight: 800;

  left: 1rem;

  position: absolute;

  z-index: 1;

}



.price-input-wrap .form-control {

  font-size: 1.1rem;

  font-weight: 700;

  padding-left: 2.1rem;

  padding-right: 4rem;

}



.price-input-wrap > small {

  color: var(--muted);

  font-size: 0.7rem;

  font-weight: 800;

  position: absolute;

  right: 1rem;

}

.seller-quote-breakdown {
  display: grid;
  gap: 0.85rem;
  grid-column: 1 / -1;
  width: 100%;
}

.seller-quote-breakdown-heading {
  align-items: center;
  background: linear-gradient(135deg, #f8fafc, #fff);
  border: 1px solid #e5ebf1;
  border-radius: 12px;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.75rem 0.85rem;
}

.seller-quote-breakdown-heading small,
.seller-quote-breakdown-heading strong,
.seller-quote-final-total span {
  display: block;
}

.seller-quote-breakdown-heading small,
.seller-quote-final-total span {
  color: #7b8ca1;
  font-size: 0.63rem;
  font-weight: 750;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.seller-quote-breakdown-heading > div:first-child > strong {
  color: var(--navy);
  font-size: 0.9rem;
  margin-top: 0.12rem;
}

.seller-quote-final-total {
  text-align: right;
}

.seller-quote-final-total strong {
  color: #d9162d;
  font-size: 1.05rem;
  margin-top: 0.12rem;
}

.seller-quoted-piece-list {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
}

.seller-quoted-piece-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  box-shadow: 0 5px 16px rgba(21, 46, 76, 0.045);
  padding: 0.75rem;
}

.seller-quoted-piece-card > header {
  align-items: center;
  border-bottom: 1px solid #eef2f6;
  display: grid;
  gap: 0.55rem;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  margin-bottom: 0.65rem;
  padding-bottom: 0.65rem;
}

.seller-quoted-piece-card > header > span:first-child {
  align-items: center;
  background: #fff0f2;
  border: 1px solid #ffe0e5;
  border-radius: 9px;
  color: #e11d2e;
  display: inline-flex;
  font-size: 0.64rem;
  font-weight: 850;
  height: 32px;
  justify-content: center;
}

.seller-quoted-piece-card > header small,
.seller-quoted-piece-card > header strong {
  display: block;
}

.seller-quoted-piece-card > header small {
  color: #8493a7;
  font-size: 0.6rem;
  font-weight: 750;
  text-transform: uppercase;
}

.seller-quoted-piece-card > header strong {
  color: var(--navy);
  font-size: 0.84rem;
  margin-top: 0.08rem;
}

.seller-piece-available {
  background: #ecfdf3;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  color: #07853c !important;
  font-size: 0.59rem !important;
  font-weight: 800;
  margin: 0 !important;
  padding: 0.28rem 0.42rem;
  white-space: nowrap;
}

.seller-quoted-piece-card dl {
  display: grid;
  gap: 0.55rem 0.75rem;
  grid-template-columns: 1fr 1fr;
  margin: 0;
}

.seller-quoted-piece-card dl .wide {
  grid-column: 1 / -1;
}

.seller-quoted-piece-card dt {
  color: #8998aa;
  font-size: 0.59rem;
  font-weight: 750;
  margin-bottom: 0.12rem;
  text-transform: uppercase;
}

.seller-quoted-piece-card dd {
  color: #263a50;
  font-size: 0.76rem;
  font-weight: 750;
  margin: 0;
  overflow-wrap: anywhere;
}

.seller-quote-comment {
  align-items: flex-start;
  background: #f8fafc;
  border: 1px solid #e5ebf1;
  border-radius: 11px;
  display: flex;
  gap: 0.55rem;
  padding: 0.68rem 0.75rem;
}

.seller-quote-comment > i {
  color: #e11d2e;
  margin-top: 0.08rem;
}

.seller-quote-comment span,
.seller-quote-comment strong {
  display: block;
}

.customer-tax-breakdown {
  background: linear-gradient(135deg, #f8fafc, #fffafa);
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  display: grid;
  gap: 0;
  padding: 0.75rem 0.85rem;
}

.customer-tax-breakdown > div {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.38rem 0;
}

.customer-tax-breakdown span {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 700;
}

.customer-tax-breakdown strong {
  color: #263a50;
  font-size: 0.78rem;
  white-space: nowrap;
}

.customer-tax-breakdown .customer-tax-total {
  border-top: 1px solid #e2e8f0;
  margin-top: 0.25rem;
  padding-top: 0.65rem;
}

.customer-tax-breakdown .customer-tax-total span,
.customer-tax-breakdown .customer-tax-total strong {
  color: #d9162d;
  font-size: 0.9rem;
  font-weight: 850;
}

.customer-tax-breakdown p {
  background: #fff7e6;
  border-radius: 8px;
  color: #7a5a18;
  font-size: 0.68rem;
  line-height: 1.45;
  margin: 0.55rem 0 0;
  padding: 0.55rem 0.65rem;
}

.customer-tax-breakdown p i {
  color: #d99a00;
  margin-right: 0.25rem;
}

.seller-quote-comment span {
  color: #8493a7;
  font-size: 0.61rem;
  font-weight: 750;
  text-transform: uppercase;
}

.seller-quote-comment strong {
  color: #304156;
  font-size: 0.76rem;
  margin-top: 0.12rem;
}

@media (max-width: 575.98px) {
  .seller-quote-breakdown-heading {
    align-items: flex-start;
  }

  .seller-quote-final-total strong {
    font-size: 0.92rem;
  }

  .seller-quoted-piece-list {
    grid-template-columns: 1fr;
  }

  .seller-quoted-piece-card > header {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .seller-piece-available {
    grid-column: 2;
    justify-self: start;
  }
}

.quote-calculated-total {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  margin-top: 0.45rem;
}

.quote-calculated-total strong {
  color: var(--navy);
  font-weight: 850;
}



.quote-check-card {

  align-items: center;

  border: 1px solid #dfe7ef;

  border-radius: 11px;

  cursor: pointer;

  display: grid;

  gap: 0.75rem;

  grid-template-columns: 42px 1fr auto;

  padding: 0.85rem;

  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;

}



.quote-check-card:has(.form-check-input:checked) {

  background: #f0fcfa;

  border-color: #10B981;

}



.quote-check-card:hover {

  border-color: #9fb6ca;

  transform: translateY(-1px);

}



.quote-check-icon {

  align-items: center;

  border-radius: 10px;

  display: flex;

  font-size: 1.1rem;

  height: 42px;

  justify-content: center;

  width: 42px;

}



.quote-check-icon.available {

  background: #fff5d8;

  color: #b67800;

}



.quote-check-icon.warranty {

  background: #e5f3ff;

  color: #E11D2E;

}



.quote-check-copy strong,

.quote-check-copy small {

  display: block;

}



.quote-check-copy strong {

  color: var(--navy);

  font-size: 0.88rem;

}



.quote-check-copy small {

  color: var(--muted);

  font-size: 0.7rem;

  line-height: 1.35;

  margin-top: 0.15rem;

}



.quote-check-card .form-check-input {

  height: 1.35rem;

  margin: 0;

  width: 1.35rem;

}



.warranty-duration {

  animation: warranty-reveal 0.2s ease-out;

  background: linear-gradient(145deg, #f6fbff, #f3fdf9);

  border: 1px solid #bfe5dc;

  border-radius: 12px;

  margin-top: -0.35rem;

  padding: 1rem;

}



.warranty-duration-heading {

  align-items: center;

  display: flex;

  gap: 0.65rem;

  margin-bottom: 0.85rem;

}



.warranty-duration-heading > span {

  align-items: center;

  background: #ddf7f1;

  border-radius: 9px;

  color: #10B981;

  display: flex;

  height: 34px;

  justify-content: center;

  width: 34px;

}



.warranty-duration-heading strong,

.warranty-duration-heading small {

  display: block;

}



.warranty-duration-heading strong {

  color: var(--navy);

  font-size: 0.86rem;

}



.warranty-duration-heading small {

  color: var(--muted);

  font-size: 0.7rem;

  margin-top: 0.1rem;

}



.warranty-duration-controls {

  align-items: stretch;

  display: grid;

  gap: 0.6rem;

  grid-template-columns: 82px 1fr;

}



.warranty-quantity .form-control {

  font-size: 1rem;

  font-weight: 800;

  height: 46px;

  min-height: 46px;

  padding: 0.5rem;

  text-align: center;

}



.warranty-conditions-field {

  border-top: 1px solid rgba(50, 138, 126, 0.16);

  margin-top: 0.9rem;

  padding-top: 0.85rem;

}



.warranty-conditions-field .form-label {

  align-items: center;

  display: flex;

  justify-content: space-between;

}



.warranty-conditions-field .form-label small {

  background: #e6f3f1;

  border-radius: 999px;

  color: #568079;

  font-size: 0.62rem;

  font-weight: 700;

  padding: 0.2rem 0.45rem;

}



.quote-form-panel .warranty-conditions-field textarea.form-control {

  min-height: 76px;

  resize: vertical;

}



.field-hint {

  color: var(--muted);

  display: block;

  font-size: 0.66rem;

  line-height: 1.35;

  margin-top: 0.35rem;

}



.warranty-conditions-detail {

  grid-column: 1 / -1;

}



#id_garantia_unidad {

  background: #e8eef3;

  border-radius: 9px;

  display: grid;

  gap: 3px;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  margin: 0;

  padding: 3px;

}



#id_garantia_unidad > div {

  display: flex;

  min-width: 0;

}



#id_garantia_unidad label {

  align-items: center;

  border-radius: 7px;

  color: #5f7184;

  cursor: pointer;

  display: flex;

  flex: 1;

  font-size: 0.72rem;

  font-weight: 700;

  justify-content: center;

  min-height: 40px;

  padding: 0.35rem;

  position: relative;

}



#id_garantia_unidad input {

  height: 1px;

  opacity: 0;

  position: absolute;

  width: 1px;

}



#id_garantia_unidad label:has(input:checked) {

  background: #fff;

  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);

  color: #087e73;

}



#id_garantia_unidad label:focus-within {

  outline: 2px solid rgba(225, 29, 46, 0.35);

  outline-offset: -2px;

}



@keyframes warranty-reveal {

  from {

    opacity: 0;

    transform: translateY(-5px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.quote-confirm-modal .modal-dialog {

  max-width: 560px;

}



.quote-confirm-modal .modal-content {

  border: 0;

  border-radius: 20px;

  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.25);

  overflow: hidden;

}



.quote-confirm-modal .modal-header {

  align-items: center;

  background: linear-gradient(145deg, #f4fbff, #f4fff9);

  border-bottom: 1px solid #e0e9ef;

  gap: 0.8rem;

  padding: 1.25rem 1.35rem;

}



.quote-confirm-modal .modal-header .btn-close {

  margin-left: auto;

}



.quote-confirm-modal .modal-title {

  color: var(--navy);

  font-size: 1.35rem;

  font-weight: 800;

}



.quote-confirm-modal .eyebrow {

  margin-bottom: 0.1rem;

}



.confirm-modal-icon {

  align-items: center;

  background: linear-gradient(135deg, #E11D2E, #B91022);

  border-radius: 14px;

  color: #fff;

  display: flex;

  flex: 0 0 48px;

  font-size: 1.3rem;

  height: 48px;

  justify-content: center;

}



.quote-confirm-modal .modal-body {

  padding: 1.35rem;

}



.confirm-modal-lead {

  color: #52657a;

  font-size: 0.86rem;

  margin-bottom: 1rem;

}



.quote-confirm-summary {

  display: grid;

  gap: 0.65rem;

  grid-template-columns: repeat(2, minmax(0, 1fr));

}



.quote-confirm-summary > div {

  background: #f6f8fa;

  border: 1px solid #e5ebf0;

  border-radius: 10px;

  min-width: 0;

  padding: 0.75rem;

}



.quote-confirm-summary span,

.quote-confirm-summary strong {

  display: block;

}



.quote-confirm-summary span {

  color: var(--muted);

  font-size: 0.66rem;

  font-weight: 700;

  margin-bottom: 0.2rem;

  text-transform: uppercase;

}



.quote-confirm-summary strong {

  color: var(--navy);

  font-size: 0.86rem;

  overflow-wrap: anywhere;

}



.confirm-comment-field {

  border: 1px solid #dbe5ec;

  border-radius: 11px;

  margin-top: 0.75rem;

  padding: 0.8rem;

}



.confirm-comment-field .form-label {

  align-items: center;

  display: flex;

  justify-content: space-between;

  margin-bottom: 0.5rem;

}



.confirm-comment-field .form-label > span {

  color: #5c7184;

  font-size: 0.7rem;

  font-weight: 800;

  text-transform: uppercase;

}



.confirm-comment-field .form-label i {

  color: #E11D2E;

  margin-right: 0.25rem;

}



.confirm-comment-field .form-label small {

  background: #F2F4F7;

  border-radius: 999px;

  color: #697b8d;

  font-size: 0.62rem;

  font-weight: 700;

  padding: 0.2rem 0.45rem;

}



.confirm-comment-field textarea.form-control {

  min-height: 90px;

  resize: vertical;

}



.confirm-reminder {

  align-items: flex-start;

  background: #fff8e6;

  border-radius: 10px;

  color: #715916;

  display: flex;

  font-size: 0.73rem;

  gap: 0.55rem;

  line-height: 1.4;

  margin-top: 0.75rem;

  padding: 0.75rem;

}



.confirm-reminder i {

  color: #cf9700;

}



.quote-confirm-modal .modal-footer {

  border-top: 1px solid #e6edf2;

  display: grid;

  gap: 0.65rem;

  grid-template-columns: 1fr 1.35fr;

  padding: 1rem 1.35rem 1.25rem;

}



.quote-confirm-modal .modal-footer .btn {

  margin: 0;

  min-height: 48px;

}



@media (max-width: 479.98px) {

  .quote-confirm-modal .modal-dialog {

    margin: 0.75rem;

  }



  .quote-confirm-modal .modal-footer {

    grid-template-columns: 1fr;

  }



  .quote-confirm-modal .modal-footer .btn-primary {

    grid-row: 1;

  }

}



.quote-submit {

  align-items: center;

  display: flex;

  justify-content: center;

  gap: 0.65rem;

}



.form-privacy {

  color: #52657a;

  font-size: 0.82rem;

  margin-bottom: 1.75rem;

}



.form-privacy i {

  color: var(--navy);

  margin-right: 0.35rem;

}



.quote-form-panel .form-label {

  font-size: 0.82rem;

  margin-bottom: 0.4rem;

}



.quote-form-panel .form-control,

.quote-form-panel .form-select {

  min-height: 47px;

}



.quote-form-panel textarea.form-control {

  min-height: 118px;

}



.quote-form-panel .form-text {

  font-size: 0.7rem;

}



.quote-terms {

  align-items: center;

  background: #f1f6f9;

  border-radius: 7px;

  color: #617489;

  display: flex;

  font-size: 0.72rem;

  gap: 0.6rem;

  margin: 1rem 0;

  padding: 0.75rem;

}



.quote-terms i {

  color: #E11D2E;

  font-size: 1.15rem;

}



@media (max-width: 1399.98px) {

  .offer-row {

    grid-template-columns: 1.2fr 0.9fr 0.8fr 1fr;

  }



  .offer-toggle {

    grid-column: 4;

  }

}



@media (max-width: 1199.98px) {

  .vehicle-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .quote-form-panel {

    position: static;

  }

}



@media (max-width: 767.98px) {

  .request-detail-page {

    padding-bottom: 1rem !important;

    padding-top: 1rem !important;

  }



  .request-workspace,

  .quote-form-panel {

    padding: 1rem;

  }



  .request-title-row {

    align-items: flex-start;

    flex-direction: column;

  }





  .offer-row,

  .offer-row.recommended {

    grid-template-columns: repeat(2, minmax(0, 1fr));

    padding: 1rem;

    padding-top: 1.5rem;

  }



  .offer-toggle {

    grid-column: 1 / -1;

    width: 100%;

  }



  .offer-details,

  .offer-details.show,

  .offer-details.collapsing {

    grid-column: 1 / -1;

    grid-template-columns: 1fr;

  }



  .support-band {

    align-items: flex-start;

    flex-wrap: wrap;

  }



  .support-band .btn {

    margin-left: 0 !important;

    width: 100%;

  }



  .quote-form-panel .btn-lg,

  .form-shell .btn-lg {

    min-height: 52px;

  }

}



@media (max-width: 479.98px) {

  .vehicle-grid,

  .offer-row,

  .offer-row.recommended {

    grid-template-columns: 1fr;

  }



  .request-description {

    align-items: flex-start;

    flex-direction: column;

  }



  .request-description img,

  .photo-placeholder {

    height: 150px;

    width: 100%;

  }



  .identity-protection {

    align-items: flex-start;

  }



  .quote-tabs a {

    padding-inline: 0.6rem;

  }

}



/* Conversational part search */

.piece-chat-page {

  background:

    radial-gradient(circle at 10% 0%, rgba(225, 29, 46, 0.12), transparent 28%),

    #F2F4F7;

  min-height: calc(100dvh - 66px);

  padding: clamp(1rem, 3vw, 2.25rem);

}



.piece-chat-shell {

  background: #F2F4F7;

  border: 1px solid #dce5ee;

  border-radius: 20px;

  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.14);

  display: grid;

  grid-template-rows: auto auto minmax(0, 1fr) auto auto;

  height: min(780px, calc(100dvh - 110px));

  margin: 0 auto;

  max-width: 820px;

  overflow: hidden;

}



.piece-chat-header {

  align-items: center;

  background: #fff;

  border-bottom: 1px solid #e1e8ef;

  display: flex;

  gap: 0.75rem;

  min-height: 72px;

  padding: 0.75rem 1rem;

}



.chat-back {

  align-items: center;

  border-radius: 999px;

  color: #43556a;

  display: flex;

  font-size: 1.25rem;

  height: 40px;

  justify-content: center;

  width: 40px;

}



.chat-back:hover {

  background: #F2F4F7;

}



.chat-agent-avatar,

.message-avatar {

  align-items: center;

  background: linear-gradient(135deg, var(--red), #B91022);

  color: var(--white);

  display: flex;

  flex: 0 0 auto;

  justify-content: center;

}



.chat-agent-avatar {

  border-radius: 14px;

  font-size: 1.15rem;

  height: 44px;

  width: 44px;

}



.piece-chat-header > div {

  min-width: 0;

}



.piece-chat-header strong,

.piece-chat-header span {

  display: block;

}



.piece-chat-header strong {

  color: var(--navy);

  font-size: 0.95rem;

}



.piece-chat-header strong em {

  background: #ECFDF5;

  border-radius: 999px;

  color: #10B981;

  font-size: 0.58rem;

  font-style: normal;

  margin-left: 0.25rem;

  padding: 0.2rem 0.35rem;

  vertical-align: 0.12rem;

}



.piece-chat-header > div > span {

  color: #64748B;

  font-size: 0.72rem;

}



.piece-chat-header > div > span i {

  background: var(--green);

  border-radius: 999px;

  display: inline-block;

  height: 7px;

  margin-right: 0.25rem;

  width: 7px;

}



.piece-chat-header > div > span.fallback i {

  background: #f59e0b;

}



.chat-secure {

  align-items: center;

  color: #10B981;

  display: flex !important;

  flex-direction: column;

  font-size: 1rem;

  margin-left: auto;

}



.chat-secure small {

  font-size: 0.62rem;

  font-weight: 700;

}



.chat-progress {

  background: #fff;

  display: grid;

  gap: 0.35rem;

  grid-template-columns: repeat(4, 1fr);

  padding: 0 1rem 0.65rem;

}



.chat-progress span {

  background: #dfe7ee;

  border-radius: 999px;

  height: 3px;

  transition: background 0.25s ease;

}



.chat-progress span.active {

  background: linear-gradient(90deg, var(--red), #B91022);

}



.piece-chat-messages {

  overflow-x: hidden;

  overflow-y: auto;

  overscroll-behavior: contain;

  -webkit-overflow-scrolling: touch;

  -ms-overflow-style: none;

  scrollbar-width: none;

  padding: 1.25rem clamp(1rem, 4vw, 2.25rem);

  scroll-behavior: smooth;

}

.multi-piece-confirmation {
  display: grid;
  gap: 0.75rem;
}

.multi-piece-confirmation-heading {
  align-items: center;
  background: linear-gradient(135deg, #fff7f8, #fff);
  border: 1px solid #ffe0e5;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  padding: 0.72rem 0.82rem;
}

.multi-piece-confirmation-heading span {
  color: #64748b;
  font-size: 0.74rem;
  font-weight: 750;
}

.multi-piece-confirmation-heading strong {
  color: #d9162d;
  font-size: 1rem;
}

.multi-piece-confirmation-list {
  display: grid;
  gap: 0.65rem;
  max-height: 310px;
  overflow-y: auto;
  padding-right: 0.2rem;
}

.multi-piece-confirmation-card {
  border: 1px solid #e4ebf1;
  border-radius: 12px;
  padding: 0.72rem;
}

.multi-piece-confirmation-card header {
  align-items: center;
  display: flex;
  gap: 0.55rem;
  margin-bottom: 0.65rem;
}

.multi-piece-confirmation-card header > span {
  align-items: center;
  background: #fff0f2;
  border-radius: 8px;
  color: #e11d2e;
  display: inline-flex;
  flex: 0 0 30px;
  font-size: 0.65rem;
  font-weight: 850;
  height: 30px;
  justify-content: center;
}

.multi-piece-confirmation-card header small,
.multi-piece-confirmation-card header strong {
  display: block;
}

.multi-piece-confirmation-card header small {
  color: #94a3b8;
  font-size: 0.61rem;
  font-weight: 750;
  text-transform: uppercase;
}

.multi-piece-confirmation-card header strong {
  color: var(--navy);
  font-size: 0.9rem;
}

.multi-piece-confirmation-card dl {
  display: grid;
  gap: 0.45rem 0.7rem;
  grid-template-columns: 1fr 1fr;
  margin: 0;
}

.multi-piece-confirmation-card dl div.wide {
  grid-column: 1 / -1;
}

.multi-piece-confirmation-card dt {
  color: #94a3b8;
  font-size: 0.59rem;
  font-weight: 750;
  margin-bottom: 0.08rem;
  text-transform: uppercase;
}

.multi-piece-confirmation-card dd {
  color: var(--navy);
  font-size: 0.75rem;
  font-weight: 750;
  margin: 0;
  overflow-wrap: anywhere;
}

/* Login */

.login-experience {

  background: #05080d;

}



.login-experience > .app-navbar,

.login-experience > footer,

.login-experience > .mobile-tab-bar {

  display: none !important;

}



.login-page {

  align-items: center;

  background:

    radial-gradient(circle at 12% 18%, rgba(239, 29, 47, 0.22), transparent 28%),

    radial-gradient(circle at 88% 82%, rgba(103, 16, 28, 0.28), transparent 30%),

    linear-gradient(145deg, #05070b 0%, #0d1119 52%, #07080c 100%);

  display: flex;

  justify-content: center;

  min-height: 100dvh;

  overflow: hidden;

  padding: 1rem clamp(1rem, 3vw, 2rem);

  position: relative;

}



.login-page::before {

  background-image:

    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),

    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);

  background-size: 42px 42px;

  content: "";

  inset: 0;

  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 88%);

  position: absolute;

  pointer-events: none;

}



.login-card {

  background: #fff;

  border: 1px solid rgba(255, 255, 255, 0.13);

  border-radius: 26px;

  box-shadow: 0 38px 110px rgba(0, 0, 0, 0.52);

  display: grid;

  grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);

  max-width: 1060px;

  min-height: min(680px, calc(100dvh - 2rem));

  overflow: hidden;

  padding: 0;

  position: relative;

  width: 100%;

}



.login-showcase {

  background:

    radial-gradient(circle at 50% 38%, rgba(239, 29, 47, 0.18), transparent 34%),

    linear-gradient(160deg, #121722 0%, #080b11 72%);

  color: #fff;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  min-width: 0;

  overflow: hidden;

  padding: clamp(2rem, 4vw, 3.25rem);

  position: relative;

}



.login-showcase::before {

  background: linear-gradient(120deg, transparent 35%, rgba(255, 255, 255, 0.045), transparent 65%);

  content: "";

  inset: 0;

  pointer-events: none;

  position: absolute;

  transform: translateX(-30%);

}



.login-showcase::after {

  background: #ef1d2f;

  border-radius: 999px;

  bottom: -130px;

  content: "";

  filter: blur(100px);

  height: 240px;

  opacity: 0.16;

  position: absolute;

  right: -80px;

  width: 240px;

}



.login-showcase-badge {

  align-items: center;

  align-self: flex-start;

  backdrop-filter: blur(12px);

  background: rgba(255, 255, 255, 0.07);

  border: 1px solid rgba(255, 255, 255, 0.11);

  border-radius: 999px;

  color: rgba(255, 255, 255, 0.82);

  display: inline-flex;

  font-size: 0.7rem;

  font-weight: 750;

  gap: 0.42rem;

  letter-spacing: 0.05em;

  padding: 0.55rem 0.8rem;

  position: relative;

  text-transform: uppercase;

  z-index: 2;

}



.login-showcase-badge i {

  color: #ff4a59;

}



.login-showcase-visual {

  align-items: center;

  display: flex;

  height: 280px;

  justify-content: center;

  margin: -0.5rem 0;

  position: relative;

  z-index: 1;

}



.login-showcase-visual img {

  border-radius: 50%;

  filter: drop-shadow(0 24px 38px rgba(0, 0, 0, 0.48));

  height: 250px;

  object-fit: cover;

  position: relative;

  width: 250px;

  z-index: 2;

}



.login-orbit {

  border: 1px solid rgba(239, 29, 47, 0.24);

  border-radius: 50%;

  position: absolute;

}



.login-orbit-one {

  height: 292px;

  width: 292px;

}



.login-orbit-two {

  border-color: rgba(255, 255, 255, 0.07);

  height: 350px;

  width: 350px;

}



.login-showcase-copy {

  position: relative;

  z-index: 2;

}



.login-showcase-copy > span {

  color: #ff5361;

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}



.login-showcase-copy h2 {

  font-size: clamp(2rem, 3.2vw, 3rem);

  font-weight: 850;

  letter-spacing: -0.04em;

  line-height: 0.98;

  margin: 0.7rem 0 0.9rem;

}



.login-showcase-copy p {

  color: rgba(255, 255, 255, 0.56);

  font-size: 0.82rem;

  line-height: 1.55;

  margin: 0;

  max-width: 390px;

}



.login-benefits {

  display: flex;

  flex-wrap: wrap;

  gap: 0.55rem;

  margin-top: 1.35rem;

}



.login-benefits span {

  align-items: center;

  background: rgba(255, 255, 255, 0.055);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 7px;

  color: rgba(255, 255, 255, 0.72);

  display: inline-flex;

  font-size: 0.68rem;

  font-weight: 700;

  gap: 0.35rem;

  padding: 0.52rem 0.65rem;

}



.login-benefits i {

  color: #ef3343;

}



.login-panel {

  align-self: center;

  background: #fff;

  padding: 2rem clamp(2rem, 4vw, 3.1rem);

  width: 100%;

}



.login-brand {

  background: #080c13;

  border-radius: 8px;

  display: inline-flex;

  margin-bottom: 0.9rem;

  padding: 0.55rem 0.7rem;

}



.login-brand img {

  height: auto;

  max-width: 162px;

  width: 52vw;

}



.login-heading {

  margin-bottom: 1.1rem;

}



.login-kicker {

  align-items: center;

  color: #e11d2e;

  display: inline-flex;

  font-size: 0.7rem;

  font-weight: 800;

  gap: 0.35rem;

  margin-bottom: 0.45rem;

  text-transform: uppercase;

}



.login-heading h1 {

  color: #0b1019;

  font-size: clamp(1.75rem, 5vw, 2.05rem);

  font-weight: 800;

  line-height: 1.12;

  margin: 0 0 0.4rem;

}



.login-heading p {

  color: #667181;

  font-size: 0.92rem;

  line-height: 1.45;

  margin: 0;

  max-width: 390px;

}



.login-form {

  display: grid;

  gap: 0.8rem;

}



.login-field {

  display: grid;

  gap: 0.45rem;

}



.login-field > label {

  color: #202938;

  font-size: 0.78rem;

  font-weight: 750;

}



.login-input {

  align-items: center;

  border: 1px solid #d8dee7;

  border-radius: 8px;

  display: grid;

  grid-template-columns: 44px minmax(0, 1fr) auto;

  min-height: 48px;

  overflow: hidden;

  transition: border-color 0.18s ease, box-shadow 0.18s ease;

}



.login-input:focus-within {

  border-color: #e11d2e;

  box-shadow: 0 0 0 3px rgba(225, 29, 46, 0.12);

}



.login-input > i {

  color: #4c5868;

  font-size: 1rem;

  justify-self: center;

}



.login-input input {

  background: transparent;

  border: 0;

  color: #111827;

  font-size: 16px;

  height: 46px;

  min-width: 0;

  outline: 0;

  padding: 0 0.5rem;

  width: 100%;

}



.login-input input::placeholder {

  color: #929aa6;

}



.login-password-toggle {

  align-items: center;

  background: #f1f3f6;

  border: 0;

  border-radius: 999px;

  color: #273142;

  display: flex;

  height: 34px;

  justify-content: center;

  margin-right: 0.5rem;

  width: 34px;

}



.login-options {

  align-items: center;

  display: flex;

  gap: 0.8rem;

  justify-content: space-between;

}



.login-options > a,

.login-signup a {

  color: #e11d2e;

  font-size: 0.75rem;

  font-weight: 750;

}



.login-remember {

  align-items: center;

  color: #293342;

  cursor: pointer;

  display: inline-flex;

  font-size: 0.75rem;

  gap: 0.55rem;

  min-width: 0;

}



.login-remember input {

  height: 1px;

  opacity: 0;

  position: absolute;

  width: 1px;

}



.login-switch {

  background: #c8ced7;

  border-radius: 999px;

  flex: 0 0 38px;

  height: 22px;

  position: relative;

  transition: background 0.18s ease;

}



.login-switch::after {

  background: #fff;

  border-radius: 999px;

  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.24);

  content: "";

  height: 18px;

  left: 2px;

  position: absolute;

  top: 2px;

  transition: transform 0.18s ease;

  width: 18px;

}



.login-remember input:checked + .login-switch {

  background: #ef1d2f;

}



.login-remember input:checked + .login-switch::after {

  transform: translateX(16px);

}



.login-remember input:focus-visible + .login-switch {

  outline: 3px solid rgba(225, 29, 46, 0.2);

  outline-offset: 2px;

}



.login-submit {

  align-items: center;

  background: #ed1629;

  border: 0;

  border-radius: 8px;

  box-shadow: 0 15px 34px rgba(225, 29, 46, 0.24);

  color: #fff;

  display: flex;

  font-size: 0.95rem;

  font-weight: 800;

  justify-content: center;

  min-height: 48px;

  padding: 0.75rem 1rem;

  position: relative;

  transition: background 0.18s ease, transform 0.18s ease;

  width: 100%;

}



.login-submit i {

  position: absolute;

  right: 1rem;

}



.login-submit:hover {

  background: #ce1022;

  transform: translateY(-1px);

}

.login-divider {
  align-items: center;
  color: #7b8492;
  display: flex;
  font-size: 0.72rem;
  gap: 0.8rem;
  margin: 1rem 0 0.8rem;
  text-align: center;
}

.login-divider::before,
.login-divider::after {
  background: #e1e5eb;
  content: "";
  flex: 1;
  height: 1px;
}

.login-divider span {
  white-space: nowrap;
}

.login-google {
  align-items: center;
  background: #fff;
  border: 1px solid #d8dee7;
  border-radius: 8px;
  color: #202938;
  display: grid;
  font-size: 0.9rem;
  font-weight: 750;
  grid-template-columns: 24px minmax(0, 1fr) 24px;
  min-height: 48px;
  padding: 0.7rem 1rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  width: 100%;
}

.login-google i {
  color: #4285f4;
  font-size: 1.05rem;
}

.login-google span {
  grid-column: 2;
}

.login-google:not(:disabled):hover {
  border-color: #aeb7c4;
  box-shadow: 0 8px 22px rgba(17, 24, 39, 0.08);
  transform: translateY(-1px);
}

.login-google:focus-visible {
  outline: 3px solid rgba(66, 133, 244, 0.2);
  outline-offset: 2px;
}

.login-google:disabled {
  cursor: not-allowed;
  opacity: 0.52;
}



.login-error {

  align-items: flex-start;

  background: #fff1f2;

  border: 1px solid #fecdd3;

  border-radius: 8px;

  color: #9f1239;

  display: flex;

  font-size: 0.78rem;

  gap: 0.5rem;

  padding: 0.7rem 0.8rem;

}



.login-field-error {

  color: #c5162a;

  font-size: 0.72rem;

}



.login-signup {

  color: #4f5b6b;

  font-size: 0.78rem;

  margin: 1rem 0 0;

  text-align: center;

}



.signup-card {

  grid-template-columns: minmax(0, 0.95fr) minmax(500px, 1.05fr);

  max-width: 1120px;

}



.signup-panel {

  padding: 1.55rem clamp(2rem, 3.5vw, 2.75rem);

}



.signup-heading {

  margin-bottom: 0.85rem;

}



.signup-form {

  gap: 0.7rem;

}



.signup-form-grid {

  display: grid;

  gap: 0.65rem 0.75rem;

  grid-template-columns: repeat(2, minmax(0, 1fr));

}



.signup-wide {

  grid-column: 1 / -1;

}



.signup-role {

  border: 0;

  margin: 0;

  min-width: 0;

  padding: 0;

}



.signup-role legend {

  color: #202938;

  font-size: 0.78rem;

  font-weight: 750;

  margin-bottom: 0.45rem;

}



.signup-role-options > div {

  display: grid;

  gap: 0.65rem;

  grid-template-columns: repeat(2, minmax(0, 1fr));

}



.signup-role-options > div > div {

  min-width: 0;

}



.signup-role-options label {

  align-items: center;

  background: #f7f8fa;

  border: 1px solid #dce1e8;

  border-radius: 8px;

  color: #293342;

  cursor: pointer;

  display: flex;

  font-size: 0.78rem;

  font-weight: 750;

  gap: 0.55rem;

  min-height: 48px;

  padding: 0.65rem 0.8rem;

  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;

  width: 100%;

}



.signup-role-options label:has(input:checked) {

  background: #fff2f3;

  border-color: #ef1d2f;

  box-shadow: 0 0 0 3px rgba(239, 29, 47, 0.09);

  color: #b91022;

}



.signup-role-options input {

  accent-color: #ef1d2f;

  flex: 0 0 auto;

  height: 17px;

  margin: 0;

  width: 17px;

}



@media (max-width: 899.98px) {

  .login-page {

    overflow-y: auto;

  }

  .login-card {

    grid-template-columns: 1fr;

    max-width: 520px;

    min-height: 0;

  }

  .signup-card {

    max-width: 680px;

  }

  .login-showcase {

    display: none;

  }

  .login-panel {

    padding: clamp(1.75rem, 7vw, 2.75rem);

  }

  .signup-panel {

    padding: 1.75rem clamp(1.5rem, 7vw, 2.5rem);

  }

}



@media (max-width: 575.98px) {

  .login-page {

    align-items: stretch;

    padding: 0;

  }

  .login-card {

    border: 0;

    border-radius: 0;

    display: grid;

    max-width: none;

    min-height: 100dvh;

    overflow: visible;

    padding: 0;

  }

  .login-panel {

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-height: 100dvh;

    padding: 1.5rem;

  }

  .login-brand {

    margin-bottom: 1.75rem;

  }

  .login-options {

    align-items: flex-start;

  }

  .login-remember {

    line-height: 1.25;

  }

  .signup-panel {

    justify-content: flex-start;

  }

  .signup-form-grid {

    grid-template-columns: 1fr;

  }

  .signup-wide {

    grid-column: auto;

  }

}



.piece-chat-messages::-webkit-scrollbar {

  display: none;

  height: 0;

  width: 0;

}



.chat-day-label {

  color: #64748B;

  font-size: 0.7rem;

  font-weight: 700;

  margin: 0 auto 1.2rem;

  text-align: center;

}



.chat-message-row {

  align-items: flex-end;

  display: flex;

  gap: 0.55rem;

  margin-bottom: 1rem;

}



.chat-message-row.user {

  justify-content: flex-end;

}



.message-avatar {

  border-radius: 10px;

  height: 32px;

  width: 32px;

}



.chat-bubble {

  background: #fff;

  border: 1px solid #e1e8ef;

  border-radius: 16px 16px 16px 4px;

  box-shadow: 0 5px 15px rgba(15, 23, 42, 0.05);

  color: #26384d;

  font-size: 0.9rem;

  line-height: 1.5;

  max-width: min(82%, 540px);

  padding: 0.85rem 1rem;

}



.chat-message-row.user .chat-bubble {

  background: linear-gradient(135deg, #E11D2E, #B91022);

  border: 0;

  border-radius: 16px 16px 4px 16px;

  color: #fff;

}



.chat-typing {

  align-items: center;

  display: flex;

  gap: 0.25rem;

  min-height: 40px;

  min-width: 62px;

}



.chat-typing i {

  animation: chat-bounce 1s infinite ease-in-out;

  background: #8da0b2;

  border-radius: 999px;

  height: 6px;

  width: 6px;

}



.chat-typing i:nth-child(2) {

  animation-delay: 0.14s;

}



.chat-typing i:nth-child(3) {

  animation-delay: 0.28s;

}



@keyframes chat-bounce {

  0%, 60%, 100% { transform: translateY(0); }

  30% { transform: translateY(-4px); }

}



.chat-bubble p {

  margin-bottom: 0.65rem;

}



.chat-example {

  background: #f0faf9;

  border: 1px solid #bde7df;

  border-radius: 10px;

  color: #176a62;

  font-size: 0.82rem;

  font-style: italic;

  margin-top: 0.75rem;

  padding: 0.7rem;

  text-align: left;

  width: 100%;

}



.chat-understood {

  display: grid;

  gap: 0.55rem;

  margin: 0.75rem 0;

}



.chat-understood > span {

  align-items: center;

  background: #F2F4F7;

  border-radius: 9px;

  display: grid;

  gap: 0 0.65rem;

  grid-template-columns: 28px 1fr;

  padding: 0.65rem;

}



.chat-understood i {

  color: #E11D2E;

  font-size: 1.1rem;

  grid-row: 1 / 3;

}



.chat-understood small {

  color: #7b8999;

  font-size: 0.65rem;

}



.chat-understood strong {

  color: var(--navy);

  font-size: 0.82rem;

}



.chat-final-summary {

  background: #F2F4F7;

  border-radius: 10px;

  display: grid;

  gap: 0.55rem;

  margin-top: 0.7rem;

  padding: 0.8rem;

}



.chat-final-summary > strong {

  color: var(--navy);

  font-size: 1rem;

}



.chat-final-summary span {

  align-items: center;

  color: #516377;

  display: flex;

  font-size: 0.78rem;

  gap: 0.5rem;

}



.chat-final-summary i {

  color: #E11D2E;

  width: 16px;

}



.chat-summary-row {

  align-items: flex-start;

}



.chat-summary-row .message-avatar {

  margin-top: 0.35rem;

}



.chat-bubble.chat-summary-bubble {

  background: transparent !important;

  border: 0 !important;

  box-shadow: none !important;

  max-width: min(100%, 700px);

  padding: 0;

  width: 100%;

}



.chat-review-intro {

  display: grid;

  gap: 0.18rem;

  margin-bottom: 0.8rem;

  padding: 0 0.15rem;

}



.chat-review-intro strong {

  align-items: center;

  color: #fff;

  display: flex;

  font-size: 1rem;

  gap: 0.45rem;

}



.chat-review-intro strong i {

  color: #10b981;

}



.chat-review-intro > span {

  color: rgba(255, 255, 255, 0.62);

  font-size: 0.78rem;

}



.chat-review-panel {

  background: #0c121b;

  border: 1px solid rgba(239, 29, 47, 0.72);

  border-radius: 8px;

  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);

  overflow: hidden;

}



.chat-review-header {

  align-items: center;

  border-bottom: 1px solid rgba(255, 255, 255, 0.09);

  display: grid;

  gap: 0.75rem;

  grid-template-columns: 42px minmax(0, 1fr) auto;

  padding: 0.9rem;

}



.chat-review-header-icon,

.chat-review-icon {

  align-items: center;

  background: #171e29;

  border: 1px solid rgba(255, 255, 255, 0.09);

  border-radius: 6px;

  color: #ef1d2f;

  display: flex;

  flex: 0 0 auto;

  justify-content: center;

}

/* Compact seller quote card */
.request-detail-page .quote-form-panel {
  background:
    radial-gradient(circle at 100% 0%, rgba(225, 29, 46, 0.045), transparent 32%),
    #fff;
  border: 1px solid #e1e7ee;
  border-radius: 20px;
  box-shadow: 0 20px 52px rgba(21, 46, 76, 0.09);
  overflow: hidden;
  padding: clamp(1.15rem, 1.7vw, 1.5rem);
  position: relative;
  top: auto !important;
}

.request-detail-page .quote-form-panel::before {
  background: linear-gradient(90deg, #e11d2e 0%, #f43f5e 70%, #fb7185 100%);
  content: "";
  height: 4px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.request-detail-page .quote-form-heading {
  gap: 0.8rem;
  margin-bottom: 0.5rem;
}

.request-detail-page .quote-form-panel h2 {
  font-size: 1.35rem;
}

.request-detail-page .quote-form-icon {
  border: 1px solid #d9f5ee;
  border-radius: 13px;
  flex-basis: 46px;
  font-size: 1.2rem;
  height: 46px;
  width: 46px;
}

.request-detail-page .form-privacy {
  color: #64748b;
  line-height: 1.4;
  margin-bottom: 1.1rem;
}

.request-detail-page .quote-part-summary {
  align-items: center;
  background: #f8fafc;
  border-color: #e2e8f0;
  border-radius: 15px;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: 38px minmax(0, 1fr);
  margin-bottom: 1.15rem;
  padding: 0.85rem;
}

.request-detail-page .quote-part-summary > i {
  align-items: center;
  background: #fff0f2;
  border-radius: 10px;
  color: #ef1d2f;
  display: flex;
  font-size: 1rem;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.request-detail-page .quote-part-summary div {
  min-width: 0;
}

.request-detail-page .quote-part-summary small {
  color: #94a3b8;
  display: block;
  font-size: 0.58rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  margin-bottom: 0.1rem;
  text-transform: uppercase;
}

.request-detail-page .quote-fields {
  gap: 0.85rem;
}

.request-detail-page .multi-piece-quote-list {
  display: grid;
  gap: 0.9rem;
  grid-column: 1 / -1;
}

.request-detail-page .multi-piece-carousel-hint {
  display: none;
}

.request-detail-page .multi-piece-quote-row {
  align-items: center;
  background: #fff;
  border: 1px solid #e1e7ee;
  border-radius: 16px;
  box-shadow: 0 5px 18px rgba(21, 46, 76, 0.045);
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 0.9fr);
  padding: 0.95rem;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.request-detail-page .multi-piece-quote-row:focus-within {
  border-color: #cbd8e5;
  box-shadow: 0 10px 28px rgba(21, 46, 76, 0.08);
}

.request-detail-page .multi-piece-quote-row.is-piece-selected {
  border-color: #f2c8ce;
  box-shadow: 0 8px 24px rgba(225, 29, 46, 0.065);
}

.request-detail-page .multi-piece-quote-details {
  border-top: 1px solid #eef2f6;
  display: grid;
  gap: 0.75rem;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-top: 0.9rem;
}

.request-detail-page .multi-piece-warranty {
  grid-column: 1 / -1;
}

.request-detail-page .multi-piece-quote-details .form-label {
  color: #53657a;
  font-size: 0.69rem;
  letter-spacing: 0.015em;
  margin-bottom: 0.35rem;
}

.request-detail-page .multi-piece-check {
  align-items: center;
  background: #f9fafb;
  border: 1px solid #e5eaf0;
  border-radius: 11px;
  cursor: pointer;
  display: flex;
  gap: 0.35rem;
  margin: 0;
  min-height: 48px;
  padding: 0.62rem 0.72rem;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.request-detail-page .multi-piece-check:hover {
  background: #fff;
  border-color: #d5dee8;
}

.request-detail-page .multi-piece-check:has(input:checked) {
  background: #fff5f6;
  border-color: #ffcbd2;
  box-shadow: 0 0 0 3px rgba(225, 29, 46, 0.045);
}

.request-detail-page .multi-piece-check input {
  accent-color: #ef1d2f;
}

.request-detail-page .multi-piece-check span {
  color: var(--navy);
  font-size: 0.7rem;
  font-weight: 750;
  white-space: nowrap;
}

.request-detail-page .multi-piece-check i {
  color: #ef1d2f;
  margin-right: 0.22rem;
}

.request-detail-page .multi-piece-warranty {
  background: #fffafb;
  border: 1px solid #ffe2e7;
  border-radius: 12px;
  grid-column: 1 / -1;
  padding: 0.8rem;
}

.request-detail-page .multi-piece-warranty-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: 110px minmax(0, 1fr);
  margin-bottom: 0.55rem;
}

.request-detail-page .multi-piece-quote-identity {
  align-items: center;
  display: flex;
  gap: 0.65rem;
  min-width: 0;
}

.request-detail-page .multi-piece-quote-index {
  align-items: center;
  background: #fff0f2;
  border: 1px solid #ffe1e6;
  border-radius: 10px;
  color: #ef1d2f;
  display: inline-flex;
  flex: 0 0 36px;
  font-size: 0.72rem;
  font-weight: 850;
  height: 36px;
  justify-content: center;
}

.request-detail-page .multi-piece-quote-identity small {
  color: #8291a5;
  display: block;
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  margin-bottom: 0.1rem;
  text-transform: uppercase;
}

.request-detail-page .multi-piece-quote-identity strong {
  color: var(--navy);
  display: block;
  font-size: 0.98rem;
  line-height: 1.25;
}

.request-detail-page .multi-piece-quote-price .form-label {
  color: #53657a;
  font-size: 0.72rem;
  margin-bottom: 0.35rem;
}

.request-detail-page .multi-piece-quote-price .price-input-wrap,
.request-detail-page .multi-piece-quote-details .form-control {
  background: #fbfcfe;
  border-color: #dce4ed;
  border-radius: 11px;
  transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.request-detail-page .multi-piece-quote-price .price-input-wrap:focus-within,
.request-detail-page .multi-piece-quote-details .form-control:focus {
  background: #fff;
  border-color: #ef8490;
  box-shadow: 0 0 0 3px rgba(225, 29, 46, 0.07);
}

.request-detail-page .multi-piece-quote-price .quote-calculated-total {
  align-items: center;
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  margin-top: 0.4rem;
}

.request-detail-page .multi-piece-quote-total {
  align-items: center;
  background: linear-gradient(135deg, #fff7f8, #fffafb);
  border: 1px solid #ffdbe1;
  border-radius: 14px;
  color: var(--navy);
  display: flex;
  font-size: 0.82rem;
  font-weight: 750;
  justify-content: space-between;
  margin-top: 0.1rem;
  padding: 0.85rem 0.95rem;
}

.request-detail-page .multi-piece-quote-total strong {
  color: #d9162d;
  font-size: 1.05rem;
}

.request-detail-page .quote-inventory-number {
  grid-column: 1 / -1;
}

.request-detail-page .quote-check-card {
  padding: 0.72rem;
}

.request-detail-page .quote-submit {
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(225, 29, 46, 0.17);
  margin-top: 1rem;
  transition: box-shadow 160ms ease, transform 160ms ease;
}

.request-detail-page .quote-submit:hover {
  box-shadow: 0 13px 28px rgba(225, 29, 46, 0.22);
  transform: translateY(-1px);
}

@media (min-width: 1400px) {
  .request-detail-page .quote-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .request-detail-page .quote-check-card,
  .request-detail-page .warranty-duration {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1200px) {
  .request-detail-page .quote-form-panel {
    padding: 1.2rem;
  }

  .request-detail-page .multi-piece-quote-list {
    gap: 0.75rem;
  }

  .request-detail-page .multi-piece-quote-row {
    gap: 0.8rem 1rem;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 0.82fr);
    padding: 0.85rem;
  }

  .request-detail-page .multi-piece-quote-details {
    gap: 0.65rem;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding-top: 0.75rem;
  }

  .request-detail-page .multi-piece-quote-details > .multi-piece-text-field:nth-child(1),
  .request-detail-page .multi-piece-quote-details > .multi-piece-text-field:nth-child(2) {
    grid-column: span 6;
  }

  .request-detail-page .multi-piece-quote-details > .multi-piece-text-field:nth-child(3),
  .request-detail-page .multi-piece-quote-details > .multi-piece-check {
    grid-column: span 4;
  }

  .request-detail-page .multi-piece-quote-details > .multi-piece-warranty {
    grid-column: 1 / -1;
  }

  .request-detail-page .multi-piece-check {
    min-height: 44px;
    padding: 0.55rem 0.6rem;
  }

  .request-detail-page .multi-piece-quote-details .form-control,
  .request-detail-page .multi-piece-quote-details .form-select {
    min-height: 44px;
  }
}

/* Request detail: dedicated mobile layout */
.mobile-quote-close {
  display: none;
}

.mobile-piece-previous,
.multi-piece-mobile-navigation {
  display: none;
}

.mobile-piece-previous[hidden] {
  display: none !important;
}

@media (max-width: 767.98px) {
  .request-detail-page {
    background: #f6f8fb;
    padding: 0 !important;
  }

  .request-detail-page .detail-container {
    overflow-x: hidden;
    overflow-x: clip;
    overflow-y: visible;
    padding-inline: 0;
  }

  .request-detail-page .detail-container > .row {
    --bs-gutter-x: 0;
    align-items: flex-start;
    flex-wrap: nowrap;
    margin-inline: 0;
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }

  .request-detail-page .detail-container > .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    padding-inline: 0;
    width: 100%;
  }

  .request-detail-page .detail-mobile-track.show-quote {
    transform: translateX(-100%);
  }

  .request-detail-page .request-workspace {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 1rem 0.85rem 1.25rem;
  }

  .request-detail-page .back-link {
    font-size: 0.78rem;
    margin-bottom: 0.8rem;
  }

  .request-detail-page .request-title-row {
    margin-bottom: 1rem;
  }

  .request-detail-page .request-title-row h1 {
    font-size: clamp(1.4rem, 7vw, 1.7rem);
    line-height: 1.12;
  }

  .request-detail-page .request-title-row p {
    font-size: 0.76rem;
    line-height: 1.4;
  }

  .request-detail-page .chapi-answer-map {
    border-radius: 16px;
    padding: 0.85rem;
  }

  .request-detail-page .chapi-answer-heading {
    gap: 0.65rem;
  }

  .request-detail-page .chapi-answer-avatar {
    border-radius: 12px;
    flex-basis: 42px;
    height: 42px;
    width: 42px;
  }

  .request-detail-page .chapi-answer-heading h2 {
    font-size: 1rem;
  }

  .request-detail-page .chapi-answer-heading p {
    display: none;
  }

  .request-detail-page .chapi-answer-ready {
    display: none;
  }

  .request-detail-page .chapi-answer-grid {
    gap: 0.55rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0.85rem;
  }

  .request-detail-page .chapi-answer-card {
    grid-column: auto;
    min-height: 64px;
    padding: 0.65rem;
  }

  .request-detail-page .chapi-answer-card.details {
    grid-column: 1 / -1;
  }

  .request-detail-page .chapi-answer-card > i {
    height: 32px;
    width: 32px;
  }

  .request-detail-page .chapi-answer-card small {
    font-size: 0.6rem;
  }

  .request-detail-page .chapi-answer-card strong {
    font-size: 0.8rem;
  }

  .request-detail-page .mobile-quote-jump {
    border-radius: 13px;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 12px 28px rgba(225, 29, 46, 0.22);
    margin: 0.85rem 0 0;
    min-height: 52px;
    position: sticky;
    z-index: 20;
  }

  .request-detail-page .mobile-quote-jump[aria-expanded="true"] {
    position: static;
  }

  .request-detail-page .quote-column .quote-form-panel {
    border-radius: 16px;
    box-shadow: 0 14px 34px rgba(21, 46, 76, 0.1);
    margin: 1rem 0.85rem 1.25rem;
    padding: 1rem;
  }

  .request-detail-page .mobile-quote-close {
    align-items: center;
    background: #f1f5f9;
    border: 0;
    border-radius: 10px;
    color: #e11d2e;
    display: flex !important;
    font-size: 0.78rem;
    font-weight: 750;
    gap: 0.45rem;
    height: 36px;
    justify-content: center;
    margin: 0 0 0.8rem;
    padding: 0.45rem 0.65rem;
    position: relative;
    width: auto;
    z-index: 2;
  }

  .request-detail-page .mobile-piece-previous {
    align-items: center;
    background: transparent;
    border: 0;
    color: #475569;
    display: flex;
    font-size: 0.76rem;
    font-weight: 750;
    gap: 0.28rem;
    margin: -0.4rem 0 0.7rem;
    padding: 0.2rem 0;
  }

  .request-detail-page .multi-piece-mobile-navigation {
    align-items: center;
    border-top: 1px solid #e8edf3;
    display: flex;
    gap: 0.65rem;
    justify-content: space-between;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
  }

  .request-detail-page .multi-piece-mobile-navigation > span {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 750;
    white-space: nowrap;
  }

  .request-detail-page .multi-piece-mobile-navigation .btn {
    min-height: 46px;
    padding-inline: 0.9rem;
  }

  .request-detail-page .multi-piece-desktop-submit {
    display: none;
  }

  .request-detail-page .quote-form-heading {
    margin-top: 0;
    padding-right: 0;
  }

  .request-detail-page .quote-form-panel h2 {
    font-size: 1.2rem;
  }

  .request-detail-page .quote-fields {
    grid-template-columns: 1fr;
  }

  .request-detail-page .multi-piece-quote-row {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .request-detail-page .multi-piece-quote-list {
    display: flex;
    gap: 0.8rem;
    margin: 0 -0.2rem;
    overflow-x: auto;
    padding: 0 0.2rem 0.35rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .request-detail-page .multi-piece-carousel-hint {
    color: #64748b;
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    margin: 0;
  }

  .request-detail-page .multi-piece-carousel-hint i {
    color: #ef1d2f;
    margin-right: 0.25rem;
  }

  .request-detail-page .multi-piece-quote-list::-webkit-scrollbar {
    display: none;
  }

  .request-detail-page .multi-piece-quote-row {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }

  .request-detail-page .multi-piece-quote-details {
    grid-template-columns: 1fr 1fr;
  }

  .request-detail-page .multi-piece-text-field,
  .request-detail-page .multi-piece-warranty {
    grid-column: 1 / -1;
  }

  .request-detail-page .multi-piece-check {
    margin-top: 0;
  }

  .request-detail-page .quote-form-panel .form-control,
  .request-detail-page .quote-form-panel .form-select {
    font-size: 1rem;
    min-height: 50px;
  }

  .request-detail-page .quote-check-card {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    min-height: 68px;
  }

  .request-detail-page .quote-check-icon {
    height: 38px;
    width: 38px;
  }

  .request-detail-page .quote-submit {
    min-height: 54px;
  }

  .request-detail-page .quotes-heading {
    margin-top: 1.1rem;
  }

  .request-detail-page .small-state {
    padding: 1.35rem 0.85rem;
  }

  .request-detail-page .small-state i {
    font-size: 1.65rem;
  }

  .request-detail-page .small-state h3 {
    font-size: 1.15rem;
  }

  .request-detail-page .small-state p {
    font-size: 0.76rem;
  }

  .request-detail-page .support-band {
    gap: 0.6rem;
    padding: 0.75rem;
  }

  .quote-confirm-modal .modal-dialog {
    align-items: flex-end;
    display: flex;
    margin: 0;
    min-height: 100%;
  }

  .quote-confirm-modal .modal-content {
    border-radius: 20px 20px 0 0;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px));
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .quote-confirm-modal .modal-footer .btn {
    min-height: 50px;
    width: 100%;
  }

}

@media (max-width: 359.98px) {
  .request-detail-page .chapi-answer-grid {
    grid-template-columns: 1fr;
  }

  .request-detail-page .chapi-answer-card.details {
    grid-column: auto;
  }
}

@media (max-width: 1199.98px) {
  .request-detail-page .quote-form-panel {
    top: auto !important;
  }
}

.chapi-answer-map {
  background:
    radial-gradient(circle at 100% 0%, rgba(225, 29, 46, 0.075), transparent 28%),
    linear-gradient(145deg, #fbfdff, #f6f9fc);
  border: 1px solid #dce5ee;
  border-radius: 18px;
  overflow: hidden;
  padding: clamp(1rem, 2vw, 1.4rem);
}

.chapi-answer-heading {
  align-items: center;
  display: flex;
  gap: 0.85rem;
}

.chapi-answer-avatar {
  align-items: center;
  background: #090d14;
  border: 2px solid #ef1d2f;
  border-radius: 14px;
  box-shadow: 0 7px 18px rgba(225, 29, 46, 0.18);
  display: inline-flex;
  flex: 0 0 48px;
  height: 48px;
  justify-content: center;
  overflow: hidden;
  width: 48px;
}

.chapi-answer-avatar img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.chapi-answer-heading > div {
  min-width: 0;
}

.chapi-answer-heading > div > span {
  color: #ef1d2f;
  display: block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.chapi-answer-heading h2 {
  color: #101a2c;
  font-size: 1.15rem;
  font-weight: 850;
  letter-spacing: -0.025em;
  margin: 0.12rem 0;
}

.chapi-answer-heading p {
  color: #718097;
  font-size: 0.72rem;
  margin: 0;
}

.chapi-answer-ready {
  align-items: center;
  background: #ecfdf3;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  color: #15803d;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.64rem;
  font-weight: 750;
  gap: 0.35rem;
  margin-left: auto;
  padding: 0.42rem 0.65rem;
}

.chapi-answer-grid {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 1.15rem;
  position: relative;
}

.chapi-answer-card {
  align-items: center;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.035);
  display: grid;
  gap: 0.65rem;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 82px;
  padding: 0.8rem;
  position: relative;
}

.chapi-answer-card.featured {
  background: linear-gradient(145deg, #fff, #fff4f5);
  border-color: #fecdd3;
}

.chapi-answer-card.details {
  grid-column: span 2;
}

.chapi-answer-card.empty {
  background: #f8fafc;
  box-shadow: none;
}

.chapi-answer-card > i {
  align-items: center;
  background: #fff0f2;
  border-radius: 10px;
  color: #ef1d2f;
  display: inline-flex;
  font-size: 1rem;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.chapi-answer-card > div {
  min-width: 0;
}

.chapi-answer-card small,
.chapi-answer-card strong {
  display: block;
}

.chapi-answer-card small {
  color: #7b899d;
  font-size: 0.61rem;
  line-height: 1.3;
}

.chapi-answer-card strong {
  color: #182338;
  font-size: 0.83rem;
  line-height: 1.35;
  margin-top: 0.22rem;
  overflow-wrap: anywhere;
}

.chapi-answer-card.empty strong {
  color: #94a3b8;
  font-weight: 600;
}

.chapi-answer-source {
  align-items: center;
  background: #eef6ff;
  border-radius: 999px;
  color: #315f90;
  display: inline-flex;
  font-size: 0.55rem;
  font-weight: 750;
  gap: 0.25rem;
  margin-top: 0.35rem;
  padding: 0.25rem 0.45rem;
}

.chapi-answer-card strong.chapi-answer-quote {
  border-left: 3px solid #fb7185;
  color: #25334a;
  font-style: italic;
  margin-top: 0.5rem;
  padding: 0.1rem 0 0.1rem 0.55rem;
}

.chapi-answer-card.empty strong.chapi-answer-quote {
  border-left-color: #cbd5e1;
}

.chapi-answer-step {
  color: #c5ced9;
  font-size: 0.55rem;
  font-weight: 800;
  position: absolute;
  right: 0.55rem;
  top: 0.42rem;
}

.chapi-answer-attachment {
  align-items: center;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  color: #172033;
  display: flex;
  gap: 0.7rem;
  margin-top: 0.7rem;
  padding: 0.55rem;
}

.chapi-answer-attachment:hover {
  border-color: #fda4af;
  color: #ef1d2f;
}

.chapi-answer-attachment img {
  border-radius: 8px;
  height: 44px;
  object-fit: cover;
  width: 58px;
}

.chapi-answer-attachment span {
  min-width: 0;
}

.chapi-answer-attachment small,
.chapi-answer-attachment strong {
  display: block;
}

.chapi-answer-attachment small {
  color: #8793a5;
  font-size: 0.58rem;
}

.chapi-answer-attachment strong {
  font-size: 0.75rem;
  margin-top: 0.1rem;
}

.chapi-answer-attachment > i {
  margin-left: auto;
  padding-right: 0.35rem;
}

@media (max-width: 767.98px) {
  .chapi-answer-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .chapi-answer-ready {
    margin-left: 0;
  }

  .chapi-answer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chapi-answer-card.details {
    grid-column: span 2;
  }

}

@media (max-width: 430px) {
  .chapi-answer-grid {
    grid-template-columns: 1fr;
  }

  .chapi-answer-card.details {
    grid-column: auto;
  }
}



.chat-review-header-icon {

  font-size: 1.2rem;

  height: 42px;

  width: 42px;

}



.chat-review-heading,

.chat-review-label,

.chat-review-status > span {

  display: grid;

  min-width: 0;

}



.chat-review-heading strong {

  color: #fff;

  font-size: 1rem;

}



.chat-review-heading small,

.chat-review-label small,

.chat-review-status small {

  color: rgba(255, 255, 255, 0.5);

  font-size: 0.66rem;

}



.chat-review-status {

  align-items: center;

  border: 1px solid rgba(16, 185, 129, 0.42);

  border-radius: 6px;

  color: #10b981;

  display: flex;

  gap: 0.45rem;

  padding: 0.5rem 0.65rem;

}



.chat-review-status > i {

  font-size: 1rem;

}



.chat-review-status strong {

  color: #2dd4a2;

  font-size: 0.72rem;

}



.chat-review-header-actions {

  align-items: stretch;

  display: flex;

  gap: 0.5rem;

}



.chat-review-edit {

  align-items: center;

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(255, 255, 255, 0.14);

  border-radius: 6px;

  color: rgba(255, 255, 255, 0.84);

  display: inline-flex;

  font-size: 0.72rem;

  font-weight: 700;

  gap: 0.35rem;

  min-height: 44px;

  padding: 0.5rem 0.65rem;

}



.chat-review-edit:hover,

.chat-review-edit[aria-expanded="true"] {

  background: rgba(239, 29, 47, 0.12);

  border-color: rgba(239, 29, 47, 0.58);

  color: #fff;

}

.chat-details-prompt > strong {
  display: block;
}

.chat-details-prompt ul {
  margin: 0.75rem 0;
  padding-left: 1.2rem;
}

.chat-details-prompt li + li {
  margin-top: 0.3rem;
}

.chat-details-prompt p {
  margin: 0 0 0.75rem;
}



.chat-review-panel:not(.edit-discovered) .chat-review-edit {

  animation: review-edit-pulse 1.8s ease-in-out 3;

  border-color: rgba(239, 29, 47, 0.72);

  overflow: hidden;

  position: relative;

}



.chat-review-panel:not(.edit-discovered) .chat-review-edit::after {

  animation: review-edit-scan 1.8s ease-in-out 3;

  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.38), transparent);

  content: "";

  inset: 0;

  position: absolute;

  transform: translateX(-140%);

}



.chat-review-edit-guide {

  align-items: center;

  animation: review-guide-enter 0.45s ease-out both, review-guide-glow 1.8s ease-in-out 3;

  background: rgba(239, 29, 47, 0.07);

  border-bottom: 1px solid rgba(239, 29, 47, 0.2);

  color: rgba(255, 255, 255, 0.88);

  display: grid;

  gap: 0.65rem;

  grid-template-columns: 34px minmax(0, 1fr) auto;

  padding: 0.65rem 0.9rem;

}



.chat-review-guide-signal {

  align-items: center;

  background: rgba(239, 29, 47, 0.14);

  border: 1px solid rgba(239, 29, 47, 0.42);

  border-radius: 999px;

  color: #ff5361;

  display: flex;

  height: 30px;

  justify-content: center;

  width: 30px;

}



.chat-review-edit-guide > span:nth-child(2) {

  display: grid;

  gap: 0.05rem;

}



.chat-review-edit-guide strong {

  font-size: 0.72rem;

}



.chat-review-edit-guide small {

  color: rgba(255, 255, 255, 0.56);

  font-size: 0.66rem;

}



.chat-review-edit-guide b {

  color: #ff5361;

}



.chat-review-guide-arrow {

  color: #ff5361;

  font-size: 1rem;

}



.chat-review-panel.edit-discovered .chat-review-edit-guide {

  display: none;

}



@keyframes review-edit-pulse {

  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 29, 47, 0); }

  45% { box-shadow: 0 0 0 4px rgba(239, 29, 47, 0.16), 0 0 22px rgba(239, 29, 47, 0.32); }

}



@keyframes review-edit-scan {

  0%, 18% { transform: translateX(-140%); }

  70%, 100% { transform: translateX(140%); }

}



@keyframes review-guide-enter {

  from { opacity: 0; transform: translateY(-5px); }

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

}



@keyframes review-guide-glow {

  0%, 100% { background-color: rgba(239, 29, 47, 0.06); }

  50% { background-color: rgba(239, 29, 47, 0.13); }

}



@media (prefers-reduced-motion: reduce) {

  .chat-review-panel:not(.edit-discovered) .chat-review-edit,

  .chat-review-panel:not(.edit-discovered) .chat-review-edit::after,

  .chat-review-edit-guide {

    animation: none;

  }

}



.chat-review-list {

  display: grid;

  padding: 0 0.75rem;

}



.chat-review-row {

  align-items: center;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  display: grid;

  gap: 0.75rem;

  grid-template-columns: 38px minmax(120px, 0.75fr) minmax(0, 1fr);

  min-height: 64px;

  padding: 0.65rem 0;

}



.chat-review-row:last-child {

  border-bottom: 0;

}



.chat-review-icon {

  font-size: 1rem;

  height: 38px;

  width: 38px;

}



.chat-review-icon.whatsapp,

.chat-review-value.contact i {

  color: #22c76f;

}



.chat-review-label strong {

  color: #ef3343;

  font-size: 0.75rem;

}



.chat-review-value {

  color: rgba(255, 255, 255, 0.9);

  font-size: 0.78rem;

  overflow-wrap: anywhere;

  text-align: right;

}



.chat-review-value strong {

  color: #fff;

  font-weight: 700;

}



.chat-review-value.contact {

  align-items: center;

  display: flex;

  gap: 0.4rem;

  justify-content: flex-end;

}



.chat-review-value.contact > span {

  display: grid;

  gap: 0.05rem;

}



.chat-review-value.contact small {

  color: rgba(255, 255, 255, 0.62);

  font-size: 0.7rem;

}



.chat-review-value.empty {

  color: rgba(255, 255, 255, 0.4);

  font-style: italic;

}



.chat-review-form {

  display: none;

  padding: 1rem;

}



.chat-review-panel.editing .chat-review-list {

  display: none;

}



.chat-review-panel.editing .chat-review-form {

  display: block;

}



.chat-review-form-grid {

  display: grid;

  gap: 0.8rem;

  grid-template-columns: repeat(2, minmax(0, 1fr));

}



.chat-review-form-grid > label,

.chat-review-vehicle-fields label {

  display: grid;

  gap: 0.35rem;

  margin: 0;

  min-width: 0;

}



.chat-review-form-grid label > span,

.chat-review-vehicle-fields legend {

  color: rgba(255, 255, 255, 0.66);

  font-size: 0.68rem;

  font-weight: 700;

  margin: 0;

}



.chat-review-form-grid .wide {

  grid-column: 1 / -1;

}



.chat-review-vehicle-fields {

  border: 0;

  display: grid;

  gap: 0.65rem;

  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) 90px;

  margin: 0;

  min-width: 0;

  padding: 0;

}



.chat-review-vehicle-fields legend {

  grid-column: 1 / -1;

}



.chat-review-form input,

.chat-review-form select,

.chat-review-form textarea {

  background: #151c27;

  border: 1px solid rgba(255, 255, 255, 0.13);

  border-radius: 6px;

  color: #fff;

  font: inherit;

  font-size: 16px;

  min-height: 44px;

  min-width: 0;

  outline: 0;

  padding: 0.6rem 0.7rem;

  width: 100%;

}



.chat-review-form textarea {

  min-height: 74px;

  resize: vertical;

}



.chat-review-form input:focus,

.chat-review-form select:focus,

.chat-review-form textarea:focus {

  border-color: #ef1d2f;

  box-shadow: 0 0 0 3px rgba(239, 29, 47, 0.12);

}



.chat-review-form [aria-invalid="true"] {

  border-color: #fb7185;

}



.chat-review-form-error {

  color: #fda4af;

  font-size: 0.72rem;

  margin: 0.7rem 0 0;

  min-height: 1rem;

}



.chat-review-form-actions {

  display: flex;

  gap: 0.6rem;

  justify-content: flex-end;

  margin-top: 0.35rem;

}



.chat-review-form-actions button {

  align-items: center;

  border-radius: 6px;

  display: inline-flex;

  font-size: 0.76rem;

  font-weight: 750;

  gap: 0.35rem;

  justify-content: center;

  min-height: 42px;

  padding: 0.55rem 0.85rem;

}



.chat-review-form-actions .secondary {

  background: transparent;

  border: 1px solid rgba(255, 255, 255, 0.16);

  color: rgba(255, 255, 255, 0.78);

}



.chat-review-form-actions .primary {

  background: #ef1d2f;

  border: 1px solid #ef1d2f;

  color: #fff;

}



.chat-quick-replies.review-actions.review-editing {

  display: none;

}



.chat-quick-replies.review-actions {

  display: grid;

  grid-template-columns: minmax(0, 1fr) auto;

  margin: 0 auto;

  max-width: 700px;

  padding-inline: 1rem;

  width: 100%;

}



.review-actions .chat-reply {

  align-items: center;

  border-radius: 8px;

  display: inline-flex;

  gap: 0.45rem;

  justify-content: center;

  min-height: 46px;

}



.review-actions .chat-reply.primary {

  background: #ef1d2f;

  border-color: #ef1d2f;

  color: #fff;

}



@media (max-width: 575.98px) {

  .chat-summary-row {

    gap: 0.4rem;

  }

  .chat-summary-row .message-avatar {

    display: none;

  }

  .chat-review-header {

    grid-template-columns: 38px minmax(0, 1fr);

    padding: 0.75rem;

  }

  .chat-review-header-actions {

    grid-column: 1 / -1;

  }

  .chat-review-header-icon {

    height: 38px;

    width: 38px;

  }

  .chat-review-status {

    flex: 1;

  }

  .chat-review-edit {

    flex: 0 0 auto;

  }

  .chat-review-edit-guide {

    grid-template-columns: 30px minmax(0, 1fr);

    padding-inline: 0.75rem;

  }

  .chat-review-guide-arrow {

    display: none;

  }

  .chat-review-row {

    gap: 0.6rem;

    grid-template-columns: 34px minmax(0, 1fr);

    min-height: 70px;

  }

  .chat-review-icon {

    height: 34px;

    width: 34px;

  }

  .chat-review-value {

    grid-column: 2;

    text-align: left;

  }

  .chat-review-value.contact {

    justify-content: flex-start;

  }

  .chat-quick-replies.review-actions {

    grid-template-columns: 1fr;

  }

  .chat-review-form-grid {

    grid-template-columns: 1fr;

  }

  .chat-review-form-grid .wide {

    grid-column: auto;

  }

  .chat-review-vehicle-fields {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

  .chat-review-vehicle-fields .year {

    grid-column: 1 / -1;

  }

  .chat-review-form-actions {

    display: grid;

    grid-template-columns: 0.75fr 1.25fr;

  }

}



.chat-quick-replies {

  display: flex;

  gap: 0.55rem;

  overflow-x: auto;

  padding: 0 1rem 0.65rem;

  scrollbar-width: none;

}



.chat-quick-replies:empty {

  display: none;

}



.chat-quick-replies::-webkit-scrollbar {

  display: none;

}



.chat-reply {

  background: #fff;

  border: 1px solid #b8cbd8;

  border-radius: 999px;

  color: #28606b;

  flex: 0 0 auto;

  font-size: 0.78rem;

  font-weight: 700;

  min-height: 40px;

  padding: 0.5rem 0.9rem;

}



.chat-reply.primary {

  background: #e6faf7;

  border-color: #7dd6ca;

}



.chat-composer-wrap {

  background: #fff;

  border-top: 1px solid #dfe7ee;

  padding: 0.75rem 1rem;

}



.chat-composer {

  align-items: flex-end;

  background: #f2f5f7;

  border: 1px solid #d5dfe7;

  border-radius: 18px;

  display: flex;

  gap: 0.5rem;

  padding: 0.4rem;

}



.chat-composer:focus-within {

  border-color: var(--red);

  box-shadow: 0 0 0 3px rgba(225, 29, 46, 0.12);

}



.chat-composer.disabled {

  opacity: 0.55;

}



.chat-composer textarea {

  background: transparent;

  border: 0;

  color: var(--ink);

  flex: 1;

  font-family: inherit;

  font-size: 16px;

  line-height: 1.35;

  max-height: 112px;

  min-height: 40px;

  outline: 0;

  padding: 0.55rem 0.15rem;

  resize: none;

}



.chat-attach,

.chat-send {

  align-items: center;

  border: 0;

  border-radius: 999px;

  display: flex;

  flex: 0 0 40px;

  font-size: 1.1rem;

  height: 40px;

  justify-content: center;

}



.chat-attach {

  background: transparent;

  color: #64748B;

}



.chat-send {

  background: linear-gradient(135deg, var(--red), #B91022);

  color: var(--white);

}



.chat-send:disabled {

  filter: grayscale(1);

}



.chat-composer-wrap > small {

  color: #64748B;

  display: block;

  font-size: 0.62rem;

  margin-top: 0.45rem;

  text-align: center;

}



.chat-hidden-form {

  display: none;

}



.request-success-page {

  align-items: center;

  background: #F2F4F7;

  display: flex;

  min-height: calc(100dvh - 66px);

  padding: 2rem 0;

}



.request-success-card {

  background: #fff;

  border: 1px solid var(--line);

  border-radius: 20px;

  box-shadow: var(--shadow);

  margin: 0 auto;

  max-width: 620px;

  padding: clamp(1.5rem, 5vw, 3rem);

  text-align: center;

}



.success-check {

  align-items: center;

  background: #dcfce7;

  border-radius: 999px;

  color: #047857;

  display: flex;

  font-size: 2rem;

  height: 72px;

  justify-content: center;

  margin: 0 auto 1.25rem;

  width: 72px;

}



.request-success-card h1 {

  color: var(--navy);

  font-size: clamp(1.75rem, 5vw, 2.5rem);

  font-weight: 800;

}



.request-success-card > p:not(.eyebrow) {

  color: var(--muted);

}



.success-summary {

  background: #F2F4F7;

  border-radius: 12px;

  display: grid;

  margin: 1.5rem 0;

  padding: 1rem;

}



.success-summary span,

.success-summary small {

  color: var(--muted);

}



.success-summary strong {

  color: var(--navy);

}



@media (max-width: 767.98px) {

  html.chat-viewport-active,

  html.chat-viewport-active body {

    height: 100%;

    overflow: hidden;

    overscroll-behavior: none;

  }

  body.chat-experience {

    background: #05080d;

    height: 100%;

    min-height: 0;

    overflow: hidden;

    padding-bottom: 0;

  }



  .chat-experience > main {

    height: var(--chat-viewport-height, 100dvh);

    left: 0;

    overflow: hidden;

    position: fixed;

    top: var(--chat-viewport-top, 0px);

    width: 100%;

  }



  html.chat-ios .chat-experience > main {

    top: 0;

  }



  html.chat-android .chat-experience > main {

    top: 0;

  }



  html.chat-ios .piece-chat-messages {

    scroll-behavior: auto;

  }



  html.chat-ios .chat-review-panel:not(.edit-discovered) .chat-review-edit,

  html.chat-ios .chat-review-panel:not(.edit-discovered) .chat-review-edit::after,

  html.chat-ios .chat-review-edit-guide {

    animation: none;

  }



  html.chat-ios.chat-keyboard-open .message-avatar,

  html.chat-ios.chat-keyboard-open .chat-agent-avatar {

    box-shadow: none;

  }



  html.chat-keyboard-open .chat-composer-wrap {

    padding-bottom: 0.4rem;

  }



  html.chat-keyboard-open .chat-composer-wrap > small,

  .piece-chat-shell.review-editing .chat-composer-wrap {

    display: none;

  }



  .chat-experience > .app-navbar,

  .chat-experience > footer,

  .chat-experience > .mobile-tab-bar {

    display: none !important;

  }



  .piece-chat-page {

    height: 100%;

    min-height: 0;

    padding: 0;

  }



  .piece-chat-shell {

    border: 0;

    border-radius: 0;

    height: 100%;

    max-width: none;

  }



  .piece-chat-header {

    min-height: calc(68px + env(safe-area-inset-top, 0px));

    padding-top: calc(0.65rem + env(safe-area-inset-top, 0px));

  }



  .piece-chat-messages {

    padding: 1rem;

  }



  .chat-bubble {

    font-size: 0.86rem;

    max-width: 87%;

  }



  .chat-composer-wrap {

    padding-bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px));

  }



  .request-success-page {

    min-height: calc(100dvh - 138px);

    padding: 1rem 0;

  }



  .request-success-card {

    border: 0;

    box-shadow: none;

    padding: 1.5rem 1rem;

  }



  .request-success-card .btn {

    min-height: 52px;

    width: 100%;

  }

}



/* Mobile-first experience refinements */

.mobile-quick-flow,

.mobile-form-progress,

.mobile-quote-jump {

  display: none;

}



.filter-shell > summary {

  display: none;

}



.form-section + .form-section {

  border-top: 1px solid var(--line);

  margin-top: 1.75rem;

  padding-top: 1.75rem;

}



.form-section-heading {

  align-items: flex-start;

  display: flex;

  gap: 0.85rem;

  margin-bottom: 1.25rem;

}



.form-section-heading > span {

  align-items: center;

  background: linear-gradient(135deg, var(--red), #B91022);

  border-radius: 999px;

  color: var(--navy);

  display: flex;

  flex: 0 0 32px;

  font-size: 0.82rem;

  font-weight: 800;

  height: 32px;

  justify-content: center;

}



.form-section-heading h2 {

  color: var(--navy);

  font-size: 1.05rem;

  font-weight: 800;

  margin: 0;

}



.form-section-heading p {

  color: var(--muted);

  font-size: 0.82rem;

  margin: 0.2rem 0 0;

}



.auth-container {

  max-width: 560px;

}



.signup-container {

  max-width: 620px;

}



.auth-icon {

  align-items: center;

  background: #FFF1F2;

  border-radius: 14px;

  color: #E11D2E;

  display: inline-flex;

  font-size: 1.45rem;

  height: 52px;

  justify-content: center;

  margin-bottom: 1rem;

  width: 52px;

}



@media (max-width: 767.98px) {

  .hero-section .hero-layout {

    --bs-gutter-y: 0;

  }



  .hero-content {

    text-align: left;

  }



  .hero-visual {

    display: none;

  }



  .hero-actions .btn {

    align-items: center;

    display: flex;

    justify-content: center;

    min-height: 54px;

    width: 100%;

  }



  .trust-row {

    display: grid;

    font-size: 0.84rem;

    gap: 0.6rem;

    grid-template-columns: 1fr;

    margin-top: 1.4rem;

  }



  .mobile-quick-flow {

    align-items: center;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.14);

    border-radius: 14px;

    display: flex;

    justify-content: space-between;

    margin-top: 1.5rem;

    padding: 0.75rem;

  }



  .mobile-quick-flow > div {

    align-items: center;

    display: flex;

    flex-direction: column;

    gap: 0.25rem;

    min-width: 60px;

  }



  .mobile-quick-flow strong {

    align-items: center;

    background: rgba(225, 29, 46, 0.18);

    border-radius: 999px;

    color: #FFFFFF;

    display: flex;

    height: 28px;

    justify-content: center;

    width: 28px;

  }



  .mobile-quick-flow span {

    color: #d5e1ef;

    font-size: 0.72rem;

    font-weight: 700;

  }



  .mobile-quick-flow > i {

    color: rgba(255, 255, 255, 0.35);

  }



  .section-heading {

    margin-bottom: 1.25rem;

  }



  .section-heading h2,

  .section-title-row h2 {

    font-size: 1.55rem;

  }



  .mobile-step-list {

    --bs-gutter-y: 0.8rem;

  }



  .step-card {

    align-items: flex-start;

    display: grid;

    gap: 0 0.9rem;

    grid-template-columns: 44px 1fr;

    padding: 1rem;

  }



  .step-icon {

    grid-row: 1 / 3;

    height: 44px;

    width: 44px;

  }



  .step-card h3 {

    font-size: 1rem;

    margin: 0.05rem 0 0.3rem;

  }



  .step-card p {

    font-size: 0.84rem;

  }



  .section-title-row {

    align-items: flex-start !important;

    flex-direction: column;

  }



  .section-title-row .btn {

    min-height: 44px;

    width: 100%;

  }



  .page-header-layout {

    align-items: stretch !important;

  }



  .page-header-action {

    align-items: center;

    display: flex;

    justify-content: center;

    min-height: 50px !important;

    width: 100%;

  }



  .request-grid {

    --bs-gutter-y: 0.85rem;

  }



  .request-card {

    padding: 1rem;

  }



  .request-card-head {

    margin-bottom: 0.8rem !important;

  }



  .request-card-title {

    min-width: 0;

  }



  .request-card-title h3 {

    font-size: 1.05rem;

    font-weight: 800;

  }



  .request-card-title .text-secondary {

    font-size: 0.82rem;

  }



  .request-card-tags {

    margin-bottom: 1rem !important;

  }



  .request-card-action {

    align-items: stretch !important;

    border-top: 1px solid #edf1f5;

    flex-direction: column;

    padding-top: 0.85rem;

  }



  .request-card-action .btn {

    align-items: center;

    display: flex;

    justify-content: space-between;

    width: 100%;

  }



  .filter-shell {

    background: var(--white);

    border: 1px solid var(--line);

    border-radius: 14px;

    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.09);

    overflow: hidden;

  }



  .filter-shell > summary {

    align-items: center;

    color: var(--navy);

    cursor: pointer;

    display: flex;

    font-weight: 800;

    justify-content: space-between;

    list-style: none;

    min-height: 52px;

    padding: 0.8rem 1rem;

  }



  .filter-shell > summary::-webkit-details-marker {

    display: none;

  }



  .filter-shell[open] > summary {

    border-bottom: 1px solid var(--line);

  }



  .filter-shell[open] > summary > i {

    transform: rotate(180deg);

  }



  .filter-shell > summary > i {

    transition: transform 0.2s ease;

  }



  .filter-shell .filter-bar {

    border: 0;

    border-radius: 0;

    box-shadow: none;

  }



  .filter-bar .btn {

    min-height: 50px;

  }



  .results-heading {

    margin-top: 2rem !important;

  }



  .results-heading h2 {

    font-size: 1.05rem !important;

    font-weight: 800;

  }



  .request-form-shell {

    border: 0;

    box-shadow: none;

    margin-left: -1rem;

    margin-right: -1rem;

    padding: 1rem;

  }



  .mobile-form-progress {

    align-items: center;

    display: grid;

    gap: 0.35rem;

    grid-template-columns: repeat(3, 1fr);

    margin-bottom: 1.5rem;

  }



  .mobile-form-progress span {

    background: #dce5ee;

    border-radius: 999px;

    height: 4px;

  }



  .mobile-form-progress span.active {

    background: linear-gradient(90deg, var(--red), #B91022);

  }



  .mobile-form-progress small {

    color: var(--muted);

    font-size: 0.72rem;

    grid-column: 1 / -1;

  }



  .form-section {

    background: #fff;

    border: 1px solid var(--line);

    border-radius: 14px;

    padding: 1rem;

  }



  .form-section + .form-section {

    border-top: 1px solid var(--line);

    margin-top: 0.85rem;

    padding-top: 1rem;

  }



  .form-section-heading {

    margin-bottom: 1rem;

  }



  .form-section-heading h2 {

    font-size: 1rem;

  }



  .form-submit-row {

    bottom: calc(73px + env(safe-area-inset-bottom, 0px));

    margin: 0 -1rem !important;

    padding: 0.75rem 1rem;

    position: sticky;

    z-index: 5;

  }



  .form-submit-row::before {

    backdrop-filter: blur(12px);

    background: rgba(248, 250, 252, 0.94);

    border-top: 1px solid var(--line);

    content: "";

    inset: 0;

    position: absolute;

    z-index: -1;

  }



  .form-submit-row .btn {

    min-height: 54px;

    width: 100%;

  }



  .mobile-quote-jump {

    align-items: center;

    display: flex;

    justify-content: center;

    margin-bottom: 1.25rem;

    min-height: 50px;

    width: 100%;

  }



  .vehicle-stat {

    padding: 0.75rem;

  }



  .offer-row,

  .offer-row.recommended {

    gap: 0.85rem;

  }



  .offer-identity,

  .offer-price,

  .offer-delivery,

  .offer-trust {

    background: #F2F4F7;

    border-radius: 8px;

    padding: 0.75rem;

  }



  .quote-tabs {

    margin-left: -1rem;

    margin-right: -1rem;

    padding: 0 1rem;

    scrollbar-width: none;

  }



  .quote-tabs::-webkit-scrollbar {

    display: none;

  }



  .auth-page {

    align-items: center;

    display: flex;

    min-height: calc(100dvh - 138px);

    padding: 1rem 0 !important;

  }



  .auth-card {

    border: 0;

    box-shadow: none;

    padding: 1rem;

  }



  .auth-card h1 {

    font-size: 1.65rem;

  }

}



@media (max-width: 479.98px) {

  .hero-kicker {

    font-size: 0.7rem;

  }



  .status-badge,

  .quote-pill {

    font-size: 0.7rem;

  }



  .request-card-head > .status-badge {

    max-width: 92px;

    overflow: hidden;

    text-overflow: ellipsis;

  }



  .request-title-row h1 {

    font-size: 1.35rem;

  }



  .vehicle-grid {

    gap: 0.55rem;

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .vehicle-stat {

    align-items: flex-start;

    flex-direction: column;

    gap: 0.35rem;

  }



  .vehicle-stat strong {

    white-space: normal;

  }



  .offer-price strong {

    font-size: 1.45rem;

  }

}















/* brand-showcase mobile override */

@media (max-width: 767.98px) {

  .brand-showcase.hero-visual {

    display: grid;

    min-height: auto;

    margin-top: 1.5rem;

    padding: 0;

  }



  .brand-showcase::before {

    border-radius: 18px;

  }



  .brand-showcase-card {

    border-radius: 16px;

  }



  .brand-showcase-strip {

    grid-template-columns: 1fr;

  }

}



.brand-image-link {

  align-items: center;

  display: inline-flex;

  margin: 0;

  min-width: 0;

  padding: 0;

}



.brand-header-logo {

  display: block;

  height: 58px;

  max-width: min(360px, 42vw);

  object-fit: contain;

  width: auto;

}



@media (max-width: 991.98px) {

  .brand-header-logo {

    height: 50px;

    max-width: min(330px, 68vw);

  }

}



@media (max-width: 575.98px) {

  .app-navbar {

    min-height: calc(74px + env(safe-area-inset-top, 0px));

  }



  .brand-header-logo {

    height: 46px;

    max-width: min(300px, 76vw);

  }

}



/* dark ai redesign overrides */

:root {

  --red-strong: #ef1d2f;

  --red-deep: #a90f1d;

  --dark-0: #05080d;

  --dark-1: #090e17;

  --dark-2: #111722;

  --dark-card: rgba(17, 22, 32, 0.82);

  --dark-line: rgba(255, 255, 255, 0.12);

}



.app-navbar {

  background: rgba(5, 8, 13, 0.94);

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);

  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22);

}



.app-navbar .nav-link,

.app-navbar .text-secondary {

  color: rgba(255, 255, 255, 0.78) !important;

}



.app-navbar .nav-link:hover {

  color: #fff !important;

}



.btn-primary {

  background: linear-gradient(135deg, var(--red-strong), #d41426);

  box-shadow: 0 18px 40px rgba(239, 29, 47, 0.34);

}



.btn-light {

  background: rgba(255, 255, 255, 0.1);

  border-color: rgba(255, 255, 255, 0.08);

  color: #fff;

}



.btn-light:hover {

  background: rgba(255, 255, 255, 0.16);

  color: #fff;

}



.hero-section {

  background:

    radial-gradient(circle at 82% 45%, rgba(239, 29, 47, 0.32), transparent 34%),

    radial-gradient(circle at 18% 82%, rgba(239, 29, 47, 0.12), transparent 28%),

    linear-gradient(135deg, #05080d 0%, #08111c 48%, #150912 100%);

  padding: 5.3rem 0 4.2rem;

}



.hero-section h1 {

  color: #fff;

  font-size: clamp(2.8rem, 5.9vw, 5.8rem);

  letter-spacing: 0;

}



.hero-section h1 span,

.hero-kicker,

.eyebrow {

  color: var(--red-strong);

}



.hero-copy {

  color: rgba(255, 255, 255, 0.74);

  max-width: 600px;

}



.hero-actions .btn {

  min-height: 56px;

  padding-inline: 1.45rem;

}



.trust-row {

  display: grid;

  gap: 0.8rem;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  margin-top: 2.3rem;

}



.trust-row span {

  align-items: center;

  background: rgba(255, 255, 255, 0.055);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 14px;

  color: rgba(255, 255, 255, 0.86);

  font-size: 0.82rem;

  padding: 0.75rem;

}



.trust-row i {

  align-items: center;

  background: var(--red-strong);

  border-radius: 999px;

  color: #fff;

  display: inline-flex;

  height: 22px;

  justify-content: center;

  width: 22px;

}



.ai-showcase {

  align-items: center;

  display: flex;

  justify-content: center;

  min-height: 520px;

  padding: 1rem;

}



.ai-showcase::before {

  background: radial-gradient(circle at 50% 48%, rgba(239, 29, 47, 0.24), transparent 44%);

  border: 0;

}



.ai-demo-card {

  background: linear-gradient(180deg, rgba(22, 27, 38, 0.94), rgba(10, 13, 20, 0.96));

  border: 1px solid rgba(255, 255, 255, 0.14);

  border-radius: 20px;

  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.46), 0 0 80px rgba(239, 29, 47, 0.2);

  color: #fff;

  max-width: 520px;

  padding: 1.25rem;

  position: relative;

  width: 100%;

  z-index: 1;

}



.ai-demo-head {

  align-items: center;

  display: flex;

  gap: 0.75rem;

  margin-bottom: 1rem;

}



.ai-demo-avatar {

  background: #fff;

  border-radius: 999px;

  display: grid;

  height: 42px;

  place-items: center;

  width: 42px;

}



.ai-demo-avatar img {

  height: 30px;

  width: 30px;

}



.ai-demo-head strong,

.ai-demo-head small {

  display: block;

}



.ai-demo-head small {

  color: rgba(255, 255, 255, 0.64);

  font-size: 0.78rem;

}



.ai-demo-thread {

  display: grid;

  gap: 0.7rem;

}



.ai-demo-bubble {

  background: rgba(255, 255, 255, 0.09);

  border: 1px solid rgba(255, 255, 255, 0.06);

  border-radius: 12px;

  color: rgba(255, 255, 255, 0.9);

  font-size: 0.86rem;

  padding: 0.8rem 0.95rem;

}



.ai-demo-bubble.user {

  margin-left: 3.5rem;

}



.ai-demo-bubble.bot {

  background: transparent;

  border: 0;

  margin-right: 2rem;

  padding-left: 0;

}



.ai-demo-bubble span {

  color: rgba(255, 255, 255, 0.54);

  display: block;

  font-size: 0.68rem;

  font-weight: 800;

  margin-bottom: 0.18rem;

}



.ai-demo-market,

.ai-demo-result,

.ai-demo-input {

  background: rgba(255, 255, 255, 0.065);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 12px;

  margin-top: 0.8rem;

  padding: 0.8rem;

}



.ai-demo-market div {

  color: rgba(255, 255, 255, 0.72);

  display: flex;

  justify-content: space-around;

  margin-bottom: 0.55rem;

}



.ai-demo-market span {

  background: rgba(255, 255, 255, 0.14);

  border-radius: 999px;

  display: block;

  height: 7px;

  overflow: hidden;

}



.ai-demo-market b {

  background: var(--red-strong);

  border-radius: inherit;

  display: block;

  height: 100%;

  width: 66%;

}



.ai-demo-result {

  display: grid;

  gap: 0 0.45rem;

  grid-template-columns: 18px 1fr;

}



.ai-demo-result i {

  color: #10B981;

  grid-row: 1 / 3;

  margin-top: 0.1rem;

}



.ai-demo-result strong,

.ai-demo-result small {

  display: block;

}



.ai-demo-result strong {

  font-size: 0.82rem;

}



.ai-demo-result small {

  color: rgba(255, 255, 255, 0.58);

  font-size: 0.72rem;

}



.ai-demo-input {

  align-items: center;

  color: rgba(255, 255, 255, 0.42);

  display: flex;

  justify-content: space-between;

}



.py-5:not(.request-detail-page) {

  background: #f4f5f7;

}



.step-card {

  border-radius: 16px;

}



.piece-chat-page {

  background:

    radial-gradient(circle at 80% 18%, rgba(239, 29, 47, 0.25), transparent 30%),

    linear-gradient(135deg, #05080d 0%, #08111c 52%, #150912 100%);

  min-height: calc(100dvh - 66px);

}



.piece-chat-shell {

  background: rgba(8, 12, 19, 0.9);

  border: 1px solid rgba(255, 255, 255, 0.12);

  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.48), 0 0 80px rgba(239, 29, 47, 0.14);

  max-width: 860px;

}



.piece-chat-header,

.chat-progress,

.chat-composer-wrap {

  background: rgba(10, 14, 22, 0.96);

  border-color: rgba(255, 255, 255, 0.09);

}



.chat-back,

.piece-chat-header strong {

  color: #fff;

}



.piece-chat-header > div > span,

.chat-day-label,

.chat-composer-wrap > small {

  color: rgba(255, 255, 255, 0.55);

}



.chat-agent-avatar,

.message-avatar {

  background: #fff;

  color: var(--red-strong);

}



.chat-secure {

  color: #10B981;

}



.chat-progress span {

  background: rgba(255, 255, 255, 0.12);

}



.chat-progress span.active {

  background: var(--red-strong);

}



.chat-bubble {

  background: rgba(255, 255, 255, 0.09);

  border-color: rgba(255, 255, 255, 0.08);

  box-shadow: none;

  color: rgba(255, 255, 255, 0.9);

}



.chat-message-row.user .chat-bubble {

  background: rgba(255, 255, 255, 0.13);

  border: 1px solid rgba(255, 255, 255, 0.1);

  color: #fff;

}



.chat-example,

.chat-understood > span,

.chat-final-summary {

  background: rgba(255, 255, 255, 0.08);

  border-color: rgba(255, 255, 255, 0.1);

  color: #fff;

}



.chat-understood small,

.chat-final-summary span {

  color: rgba(255, 255, 255, 0.62);

}



.chat-understood strong,

.chat-final-summary > strong {

  color: #fff;

}



.chat-reply {

  background: rgba(255, 255, 255, 0.09);

  border-color: rgba(255, 255, 255, 0.14);

  color: #fff;

}



.chat-reply.primary {

  background: var(--red-strong);

  border-color: var(--red-strong);

}



.chat-composer {

  background: rgba(255, 255, 255, 0.06);

  border-color: rgba(255, 255, 255, 0.12);

}



.chat-composer textarea {

  color: #fff;

}



.chat-composer textarea::placeholder {

  color: rgba(255, 255, 255, 0.42);

}



.chat-send {

  background: transparent;

  color: rgba(255, 255, 255, 0.72);

}



@media (max-width: 767.98px) {

  .hero-section {

    padding-bottom: 5.2rem;

  }



  .hero-section h1 {

    font-size: clamp(2.6rem, 12vw, 4rem);

  }



  .trust-row {

    grid-template-columns: 1fr;

  }



  .ai-showcase.hero-visual {

    display: flex;

    margin-top: 1.25rem;

  }



  .ai-demo-bubble.user {

    margin-left: 1.5rem;

  }



  .piece-chat-shell {

    border-radius: 0;

  }

}



/* header logo refresh */

.app-navbar {

  background: #05080d !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;

  min-height: 96px;

  padding: 0.75rem 0;

}



.app-navbar .container {

  align-items: center;

}



.brand-image-link {

  background: transparent !important;

  border: 0;

  line-height: 0;

}



.brand-header-logo {

  background: transparent !important;

  border: 0;

  display: block;

  filter: drop-shadow(0 0 20px rgba(239, 29, 47, 0.28));

  height: 78px;

  max-width: min(500px, 48vw);

  object-fit: contain;

  width: auto;

}



@media (max-width: 991.98px) {

  .app-navbar {

    min-height: calc(92px + env(safe-area-inset-top, 0px));

    padding-bottom: 0.65rem;

    padding-top: calc(0.65rem + env(safe-area-inset-top, 0px));

  }



  .brand-header-logo {

    height: 72px;

    max-width: min(430px, 82vw);

  }

}



@media (max-width: 575.98px) {

  .app-navbar {

    min-height: calc(88px + env(safe-area-inset-top, 0px));

  }



  .brand-header-logo {

    height: 68px;

    max-width: min(390px, 88vw);

  }

}



/* chapi avatar integration */

.chat-agent-avatar,

.message-avatar,

.ai-demo-avatar {

  background: #070a10 !important;

  border: 2px solid rgba(239, 29, 47, 0.85);

  box-shadow: 0 0 22px rgba(239, 29, 47, 0.28);

  overflow: hidden;

}



.chat-agent-avatar img,

.message-avatar img,

.ai-demo-avatar img {

  display: block;

  height: 100%;

  object-fit: cover;

  object-position: center;

  width: 100%;

}



.chat-agent-avatar {

  height: 62px;

  width: 62px;

}



.message-avatar {

  height: 44px;

  width: 44px;

}



.ai-demo-avatar {

  height: 50px;

  width: 50px;

}



.ai-demo-avatar img {

  height: 100%;

  width: 100%;

}



@media (max-width: 767.98px) {

  .chat-agent-avatar {

    height: 58px;

    width: 58px;

  }



  .message-avatar {

    height: 40px;

    width: 40px;

  }

}



/* chapi intro hero */

.chapi-intro {

  align-items: center;

  display: grid;

  gap: clamp(1rem, 3vw, 2rem);

  grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);

  margin: 0 auto 1.5rem;

  max-width: 820px;

  min-height: 330px;

  padding: clamp(1rem, 3vw, 1.7rem);

  position: relative;

}



.chapi-intro::before {

  background:

    radial-gradient(circle at 22% 50%, rgba(239, 29, 47, 0.32), transparent 36%),

    linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 28px;

  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);

  content: "";

  inset: 0;

  position: absolute;

}



.chapi-portrait-wrap,

.chapi-intro-copy {

  position: relative;

  z-index: 1;

}



.chapi-portrait-wrap {

  align-items: center;

  display: flex;

  justify-content: center;

}



.chapi-portrait {

  aspect-ratio: 1;

  border: 3px solid rgba(239, 29, 47, 0.95);

  border-radius: 999px;

  box-shadow: 0 0 0 8px rgba(239, 29, 47, 0.08), 0 0 60px rgba(239, 29, 47, 0.46);

  display: block;

  max-width: 260px;

  object-fit: cover;

  object-position: center;

  width: min(100%, 260px);

}



.chapi-intro-copy {

  color: #fff;

}



.chapi-kicker {

  align-items: center;

  color: var(--red-strong);

  display: inline-flex;

  font-size: 0.78rem;

  font-weight: 900;

  gap: 0.4rem;

  text-transform: uppercase;

}



.chapi-intro-copy h1 {

  font-size: clamp(2rem, 5vw, 3.5rem);

  font-weight: 900;

  line-height: 0.95;

  margin: 0.55rem 0 0.85rem;

}



.chapi-intro-copy p {

  color: rgba(255, 255, 255, 0.74);

  font-size: 1rem;

  line-height: 1.65;

  margin: 0 0 1.1rem;

}



.chapi-example {

  background: rgba(255, 255, 255, 0.08) !important;

  border-color: rgba(255, 255, 255, 0.16) !important;

  color: #fff !important;

  font-weight: 800;

}



@media (max-width: 767.98px) {

  .chapi-intro {

    grid-template-columns: 1fr;

    margin-top: 0.5rem;

    min-height: 0;

    text-align: center;

  }



  .chapi-portrait {

    max-width: 210px;

    width: min(72vw, 210px);

  }



  .chapi-intro-copy h1 {

    font-size: clamp(2.25rem, 12vw, 3.35rem);

  }

}



@media (max-width: 479.98px) {

  .chapi-intro {

    padding: 1rem;

  }



  .chapi-portrait {

    max-width: 185px;

  }

}

/* chapi profile preview */
.chat-agent-avatar,
.message-avatar {
  cursor: pointer;
  padding: 0;
}

.chat-agent-avatar:focus-visible,
.message-avatar:focus-visible,
.chapi-profile-close:focus-visible {
  outline: 3px solid rgba(239, 29, 47, 0.72);
  outline-offset: 3px;
}

body.chapi-profile-open {
  overflow: hidden;
}

.chapi-profile-modal {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 0;
  padding: clamp(1rem, 3vw, 2rem);
  pointer-events: none;
  position: fixed;
  transition: opacity 0.18s ease;
  z-index: 2000;
}

.chapi-profile-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.chapi-profile-backdrop {
  background: rgba(0, 0, 0, 0.78);
  border: 0;
  inset: 0;
  position: absolute;
}

.chapi-profile-card {
  background: #070a10;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.62), 0 0 90px rgba(239, 29, 47, 0.22);
  max-height: min(86vh, 860px);
  max-width: min(92vw, 620px);
  overflow: hidden;
  position: relative;
  transform: scale(0.96);
  transition: transform 0.18s ease;
  width: 100%;
  z-index: 1;
}

.chapi-profile-modal.open .chapi-profile-card {
  transform: scale(1);
}

.chapi-profile-card img {
  background: #05070b;
  display: block;
  max-height: min(74vh, 740px);
  object-fit: contain;
  width: 100%;
}

.chapi-profile-close {
  align-items: center;
  background: rgba(5, 7, 11, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  height: 42px;
  justify-content: center;
  position: absolute;
  right: 14px;
  top: 14px;
  width: 42px;
  z-index: 2;
}

.chapi-profile-info {
  background: linear-gradient(180deg, rgba(7, 10, 16, 0.86), #070a10);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 1rem 1.15rem 1.15rem;
}

.chapi-profile-info strong {
  font-size: 1.2rem;
  font-weight: 900;
}

.chapi-profile-info span {
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.92rem;
}

@media (max-width: 575.98px) {
  .chapi-profile-modal {
    padding: 0.75rem;
  }

  .chapi-profile-card {
    border-radius: 18px;
    max-height: 90vh;
  }
}

/* Seller business profile */
.seller-profile-experience {
  background:
    radial-gradient(circle at 12% 15%, rgba(239, 29, 47, 0.13), transparent 28rem),
    #070b12;
}

.seller-profile-page {
  min-height: calc(100dvh - 150px);
  padding: clamp(2rem, 5vw, 4.5rem) 0;
}

.seller-profile-shell {
  background: #0d131d;
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 28px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.35);
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
  margin: 0 auto;
  max-width: 1120px;
  overflow: hidden;
}

.seller-profile-intro {
  background:
    linear-gradient(155deg, rgba(239, 29, 47, 0.2), transparent 48%),
    linear-gradient(180deg, #111925, #090e16);
  border-right: 1px solid rgba(148, 163, 184, 0.14);
  padding: clamp(2rem, 4vw, 3.5rem);
  position: relative;
}

.seller-profile-intro::after {
  background: #ef1d2f;
  border-radius: 999px;
  content: "";
  filter: blur(70px);
  height: 150px;
  opacity: 0.13;
  position: absolute;
  right: -30px;
  top: 20%;
  width: 150px;
}

.seller-profile-kicker,
.seller-profile-card > header > span {
  color: #ff4354;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.seller-profile-kicker i {
  margin-right: 0.45rem;
}

.seller-profile-intro h1 {
  color: #fff;
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.04;
  margin: 1.25rem 0 1rem;
}

.seller-profile-intro > p,
.seller-profile-card > header p {
  color: #9ca7b8;
  line-height: 1.7;
  margin: 0;
}

.seller-profile-benefits {
  display: grid;
  gap: 1.35rem;
  margin-top: 3rem;
}

.seller-profile-benefits > div {
  align-items: flex-start;
  color: #aeb8c6;
  display: flex;
  gap: 0.9rem;
}

.seller-profile-benefits i {
  align-items: center;
  background: rgba(239, 29, 47, 0.13);
  border: 1px solid rgba(239, 29, 47, 0.24);
  border-radius: 12px;
  color: #ff4354;
  display: inline-flex;
  flex: 0 0 42px;
  height: 42px;
  justify-content: center;
}

.seller-profile-benefits strong {
  color: #f6f8fb;
  display: block;
  font-size: 0.92rem;
  margin-bottom: 0.15rem;
}

.seller-profile-card {
  padding: clamp(2rem, 4vw, 3.5rem);
}

.seller-profile-progress {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.seller-profile-progress span {
  border-top: 3px solid #293240;
  color: #6f7a8b;
  flex: 1;
  font-size: 0.72rem;
  padding-top: 0.65rem;
}

.seller-profile-progress span:first-child {
  border-color: #4ade80;
  color: #98a4b5;
}

.seller-profile-progress span.active {
  border-color: #ef1d2f;
  color: #f5f7fa;
}

.seller-profile-card > header h2 {
  color: #f8fafc;
  font-size: clamp(1.55rem, 2.5vw, 2.1rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  margin: 0.55rem 0 0.45rem;
}

.seller-profile-form {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 2rem;
}

.seller-profile-wide {
  grid-column: 1 / -1;
}

.seller-profile-field label {
  color: #dbe2ea;
  display: block;
  font-size: 0.84rem;
  font-weight: 650;
  margin-bottom: 0.55rem;
}

.seller-profile-field label span {
  color: #ff4354;
}

.seller-profile-field label small {
  color: #778396;
  font-size: 0.75rem;
  font-weight: 500;
}

.seller-profile-field .form-control,
.seller-profile-field .form-select {
  background-color: #111925;
  border: 1px solid #2a3544;
  border-radius: 12px;
  color: #f8fafc;
  min-height: 50px;
  padding: 0.78rem 0.95rem;
}

.seller-profile-field .form-control::placeholder {
  color: #697587;
}

.seller-profile-field .form-control:focus,
.seller-profile-field .form-select:focus {
  border-color: #ef1d2f;
  box-shadow: 0 0 0 0.22rem rgba(239, 29, 47, 0.12);
}

.seller-profile-field .form-select:disabled {
  color: #667183;
  opacity: 0.72;
}

.seller-profile-error {
  color: #ff7b86;
  display: block;
  font-size: 0.78rem;
  margin-top: 0.4rem;
}

.seller-profile-help {
  color: #778396;
  display: block;
  font-size: 0.76rem;
  line-height: 1.45;
  margin-top: 0.45rem;
}

.seller-documents {
  background: rgba(7, 11, 18, 0.44);
  border: 1px solid #253140;
  border-radius: 16px;
  padding: 1.25rem;
}

.seller-documents-heading {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.seller-documents-heading h3 {
  color: #f8fafc;
  font-size: 1rem;
  font-weight: 750;
  margin: 0.45rem 0 0.3rem;
}

.seller-documents-heading p {
  color: #8793a5;
  font-size: 0.8rem;
  line-height: 1.55;
  margin: 0;
  max-width: 36rem;
}

.seller-documents-optional {
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.16);
  border-radius: 999px;
  color: #9ca7b8;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.35rem 0.6rem;
}

.seller-documents-required {
  background: rgba(239, 29, 47, 0.1);
  border-color: rgba(239, 29, 47, 0.28);
  color: #fda4af;
}

.seller-document-upload {
  align-items: center;
  background: #111925;
  border: 1px dashed #344256;
  border-radius: 14px;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  margin-top: 1rem;
  padding: 0.9rem;
}

.seller-document-upload-icon,
.seller-document-file-icon {
  align-items: center;
  background: rgba(239, 29, 47, 0.12);
  border: 1px solid rgba(239, 29, 47, 0.2);
  border-radius: 11px;
  color: #ff4354;
  display: inline-flex;
  flex: 0 0 40px;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.seller-document-upload-copy {
  min-width: 0;
}

.seller-document-upload-copy strong,
.seller-document-upload-copy span {
  display: block;
}

.seller-document-upload-copy strong {
  color: #edf2f7;
  font-size: 0.83rem;
}

.seller-document-upload-copy span {
  color: #778396;
  font-size: 0.72rem;
  margin-top: 0.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seller-document-upload .btn {
  border-radius: 10px;
  font-size: 0.76rem;
  font-weight: 700;
  min-height: 40px;
  padding: 0.55rem 0.8rem;
}

.seller-document-feedback {
  color: #9ca7b8;
  font-size: 0.76rem;
  min-height: 1.2rem;
  margin: 0.55rem 0 0;
}

.seller-document-feedback[data-state="loading"] {
  color: #93c5fd;
}

.seller-document-feedback[data-state="success"] {
  color: #86efac;
}

.seller-document-feedback[data-state="error"] {
  color: #fda4af;
}

.seller-document-list {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.35rem;
}

.seller-document-item {
  align-items: center;
  background: rgba(17, 25, 37, 0.76);
  border: 1px solid #263243;
  border-radius: 12px;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  padding: 0.75rem;
}

.seller-document-details {
  min-width: 0;
}

.seller-document-details strong,
.seller-document-details span,
.seller-document-details small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seller-document-details strong {
  color: #e8edf4;
  font-size: 0.78rem;
}

.seller-document-details span,
.seller-document-details small {
  color: #778396;
  font-size: 0.68rem;
  margin-top: 0.15rem;
}

.seller-document-download,
.seller-document-delete {
  align-items: center;
  background: transparent;
  border: 1px solid #344256;
  border-radius: 9px;
  color: #aab4c2;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.seller-document-download:hover,
.seller-document-delete:hover {
  border-color: #ef1d2f;
  color: #ff4354;
}

.seller-document-delete {
  cursor: pointer;
}

.seller-document-delete:disabled {
  cursor: wait;
  opacity: 0.55;
}

.seller-document-empty {
  color: #667183;
  font-size: 0.74rem;
  margin: 0.25rem 0 0;
}

div.seller-profile-error {
  background: rgba(239, 29, 47, 0.1);
  border: 1px solid rgba(239, 29, 47, 0.26);
  border-radius: 12px;
  padding: 0.8rem 1rem;
}

.seller-profile-actions {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 0.5rem;
}

.seller-profile-actions .btn {
  border-radius: 12px;
  font-weight: 700;
  min-height: 48px;
  padding-inline: 1.25rem;
}

@media (max-width: 991.98px) {
  .seller-profile-shell {
    grid-template-columns: 1fr;
  }

  .seller-profile-intro {
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    border-right: 0;
  }

  .seller-profile-benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 2rem;
  }
}

@media (max-width: 767.98px) {
  .seller-profile-page {
    padding: 1rem 0 5.5rem;
  }

  .seller-profile-shell {
    border-radius: 20px;
  }

  .seller-profile-intro {
    padding: 1.7rem;
  }

  .seller-profile-benefits {
    grid-template-columns: 1fr;
  }

  .seller-profile-card {
    padding: 1.7rem;
  }

  .seller-profile-form {
    grid-template-columns: 1fr;
  }

  .seller-profile-wide {
    grid-column: auto;
  }

  .seller-document-upload {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .seller-document-upload .btn {
    width: 100%;
  }

  .seller-document-upload label.btn {
    grid-column: 1 / 2;
  }

  .seller-document-upload button.btn {
    grid-column: 2 / 3;
  }

}

@media (max-width: 420px) {
  .seller-profile-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .seller-profile-actions .btn {
    width: 100%;
  }
}

/* seller approval status */
.seller-review-experience {
  background:
    radial-gradient(circle at 15% 18%, rgba(239, 29, 47, 0.1), transparent 28rem),
    radial-gradient(circle at 85% 30%, rgba(59, 130, 246, 0.06), transparent 30rem),
    #070b12;
}

.business-review-page {
  min-height: calc(100vh - 78px);
  padding: clamp(2rem, 5vw, 4.5rem) 0 6rem;
}

.business-review-shell {
  background: rgba(11, 17, 27, 0.94);
  border: 1px solid #253140;
  border-radius: 26px;
  box-shadow: 0 28px 75px rgba(0, 0, 0, 0.28);
  margin: 0 auto;
  max-width: 1120px;
  overflow: hidden;
  padding: clamp(1.4rem, 4vw, 3.5rem);
  position: relative;
}

.business-review-shell::before {
  background: linear-gradient(90deg, #ef1d2f, rgba(239, 29, 47, 0));
  content: "";
  height: 3px;
  left: 0;
  position: absolute;
  right: 55%;
  top: 0;
}

.business-review-hero {
  align-items: flex-start;
  display: flex;
  gap: 2rem;
  justify-content: space-between;
}

.business-review-hero h1 {
  color: #f8fafc;
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1.04;
  margin: 1rem 0 0.8rem;
}

.business-review-hero p {
  color: #9ca7b8;
  line-height: 1.7;
  margin: 0;
  max-width: 650px;
}

.business-review-badge {
  align-items: center;
  background: rgba(245, 158, 11, 0.09);
  border: 1px solid rgba(245, 158, 11, 0.28);
  border-radius: 999px;
  color: #fbbf24;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-weight: 750;
  gap: 0.5rem;
  margin-top: 0.15rem;
  padding: 0.65rem 0.9rem;
}

.business-review-badge[data-state="approved"] {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.28);
  color: #86efac;
}

.business-review-badge[data-state="rejected"],
.business-review-badge[data-state="paused"] {
  background: rgba(239, 29, 47, 0.1);
  border-color: rgba(239, 29, 47, 0.3);
  color: #fda4af;
}

.business-review-progress {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  margin: clamp(2rem, 5vw, 3.5rem) 0;
  padding: 0;
}

.business-review-progress li {
  align-items: center;
  border-top: 2px solid #283444;
  display: flex;
  gap: 0.75rem;
  min-width: 0;
  padding: 1rem 1rem 0 0;
  position: relative;
}

.business-review-progress li > i {
  align-items: center;
  background: #192230;
  border: 1px solid #314055;
  border-radius: 999px;
  color: #8995a6;
  display: inline-flex;
  flex: 0 0 34px;
  height: 34px;
  justify-content: center;
  margin-top: -2.05rem;
  width: 34px;
}

.business-review-progress li.complete {
  border-color: #22c55e;
}

.business-review-progress li.complete > i {
  background: #22c55e;
  border-color: #22c55e;
  color: #07120b;
}

.business-review-progress li.current {
  border-color: #f59e0b;
}

.business-review-progress li.current > i {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.4);
  color: #fbbf24;
}

.business-review-progress li.attention {
  border-color: #ef1d2f;
}

.business-review-progress li.attention > i {
  background: rgba(239, 29, 47, 0.14);
  border-color: rgba(239, 29, 47, 0.4);
  color: #ff6673;
}

.business-review-progress span,
.business-review-progress strong,
.business-review-progress small {
  display: block;
  min-width: 0;
}

.business-review-progress strong {
  color: #e7edf5;
  font-size: 0.8rem;
}

.business-review-progress small {
  color: #6f7c8e;
  font-size: 0.69rem;
  margin-top: 0.15rem;
}

.business-review-notice {
  align-items: flex-start;
  background: rgba(239, 29, 47, 0.08);
  border: 1px solid rgba(239, 29, 47, 0.24);
  border-radius: 15px;
  color: #fda4af;
  display: flex;
  gap: 0.9rem;
  margin: -1.25rem 0 2rem;
  padding: 1rem 1.1rem;
}

.business-review-notice > i {
  font-size: 1.15rem;
}

.business-review-notice strong,
.business-review-notice p {
  display: block;
  margin: 0;
}

.business-review-notice strong {
  color: #fecdd3;
  font-size: 0.82rem;
}

.business-review-notice p {
  color: #c9a1a7;
  font-size: 0.8rem;
  line-height: 1.55;
  margin-top: 0.3rem;
}

.business-review-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1.65fr) minmax(270px, 0.85fr);
}

.business-review-card {
  background: rgba(16, 24, 36, 0.78);
  border: 1px solid #263344;
  border-radius: 18px;
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

.business-review-card-heading {
  align-items: flex-start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.business-review-card-heading span {
  color: #ff4354;
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.business-review-card-heading h2 {
  color: #f4f7fa;
  font-size: 1.15rem;
  font-weight: 750;
  margin: 0.35rem 0 0;
}

.business-review-card-heading > i {
  align-items: center;
  background: rgba(239, 29, 47, 0.1);
  border: 1px solid rgba(239, 29, 47, 0.2);
  border-radius: 12px;
  color: #ff4354;
  display: inline-flex;
  flex: 0 0 42px;
  height: 42px;
  justify-content: center;
}

.business-review-summary {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 1.6rem 0 0;
}

.business-review-summary > div {
  border-top: 1px solid #253140;
  min-width: 0;
  padding-top: 0.8rem;
}

.business-review-summary > div.wide {
  grid-column: 1 / -1;
}

.business-review-summary dt {
  color: #748196;
  font-size: 0.69rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.business-review-summary dd {
  color: #e6ebf1;
  font-size: 0.84rem;
  margin: 0;
  overflow-wrap: anywhere;
}

.business-review-next {
  display: flex;
  flex-direction: column;
}

.business-review-next > p {
  color: #8d99aa;
  font-size: 0.84rem;
  line-height: 1.7;
  margin: 1.5rem 0;
}

.business-review-next .btn {
  border-radius: 12px;
  font-weight: 750;
  margin-top: auto;
  padding: 0.8rem 1rem;
  width: 100%;
}

.business-review-wait {
  align-items: center;
  background: rgba(245, 158, 11, 0.07);
  border: 1px solid rgba(245, 158, 11, 0.18);
  border-radius: 12px;
  color: #c7ad78;
  display: flex;
  font-size: 0.76rem;
  gap: 0.65rem;
  margin-top: auto;
  padding: 0.8rem;
}

.business-review-documents {
  margin-top: 1.25rem;
}

.seller-document-csrf {
  display: none;
}

@media (max-width: 850px) {
  .business-review-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 650px) {
  .business-review-page {
    padding: 1rem 0 5.5rem;
  }

  .business-review-shell {
    border-radius: 20px;
  }

  .business-review-hero {
    display: block;
  }

  .business-review-badge {
    margin-top: 1.25rem;
  }

  .business-review-progress {
    gap: 1rem;
    grid-template-columns: 1fr;
  }

  .business-review-progress li {
    border-left: 2px solid #283444;
    border-top: 0;
    padding: 0 0 0 1rem;
  }

  .business-review-progress li.complete {
    border-color: #22c55e;
  }

  .business-review-progress li.current {
    border-color: #f59e0b;
  }

  .business-review-progress li.attention {
    border-color: #ef1d2f;
  }

  .business-review-progress li > i {
    margin: 0;
  }

  .business-review-summary {
    grid-template-columns: 1fr;
  }

  .business-review-summary > div.wide {
    grid-column: auto;
  }
}

/* approved business dashboard */
.approved-business-experience {
  background:
    radial-gradient(circle at 16% 8%, rgba(31, 71, 120, 0.13), transparent 28rem),
    radial-gradient(circle at 88% 16%, rgba(239, 29, 47, 0.07), transparent 25rem),
    #070c14;
}

.approved-business-page {
  min-height: calc(100vh - 76px);
  overflow-x: clip;
  padding: clamp(1.5rem, 4vw, 3.25rem) 0 6rem;
}

.approved-business-header {
  align-items: center;
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  margin-bottom: 1.4rem;
}

.approved-business-kicker {
  color: #ff5261;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.approved-business-header h1 {
  color: #f8fafc;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  margin: 0.45rem 0 0.35rem;
}

.approved-business-header > div:first-child > p {
  color: #8d99aa;
  margin: 0;
}

.approved-business-status {
  align-items: center;
  background:
    linear-gradient(105deg, rgba(239, 29, 47, 0.19), rgba(16, 24, 36, 0.86) 48%),
    #101824;
  border: 1px solid #283546;
  border-radius: 14px;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: auto minmax(150px, 1fr) auto;
  min-width: min(100%, 440px);
  padding: 0.9rem 1rem;
}

.approved-business-status-icon {
  align-items: center;
  background: rgba(239, 29, 47, 0.14);
  border-radius: 11px;
  color: #ff5261;
  display: inline-flex;
  font-size: 1.35rem;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.approved-business-status strong,
.approved-business-status small {
  display: block;
}

.approved-business-status strong {
  color: #ff6673;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
}

.approved-business-status small {
  color: #a5afbd;
  font-size: 0.75rem;
  margin-top: 0.2rem;
}

.approved-business-status .btn {
  border-color: #344154;
  border-radius: 9px;
  color: #d8dee7;
  font-size: 0.72rem;
  font-weight: 700;
}

.approved-business-layout {
  align-items: start;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.95fr);
  max-width: 100%;
  min-width: 0;
}

.approved-business-main,
.approved-business-sidebar {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

.approved-dashboard-card {
  background: linear-gradient(145deg, rgba(17, 26, 39, 0.97), rgba(10, 17, 27, 0.97));
  border: 1px solid #263344;
  border-radius: 16px;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.16);
  min-width: 0;
  overflow: hidden;
  padding: clamp(1.15rem, 2.5vw, 1.6rem);
}

.approved-card-heading {
  align-items: flex-start;
  display: flex;
  gap: 0.85rem;
}

.approved-card-heading > span:first-child {
  align-items: center;
  background: rgba(239, 29, 47, 0.11);
  border-radius: 10px;
  color: #ff5261;
  display: inline-flex;
  flex: 0 0 38px;
  font-size: 1.05rem;
  height: 38px;
  justify-content: center;
}

.approved-card-heading > span.whatsapp {
  background: rgba(34, 197, 94, 0.1);
  color: #4ade80;
}

.approved-card-heading h2 {
  color: #f0f4f8;
  font-size: 1rem;
  font-weight: 750;
  margin: 0.1rem 0 0.25rem;
}

.approved-card-heading p {
  color: #7f8b9d;
  font-size: 0.73rem;
  line-height: 1.45;
  margin: 0;
}

.approved-card-tag {
  align-items: center;
  background: rgba(34, 197, 94, 0.09) !important;
  border-radius: 999px !important;
  color: #4ade80 !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  font-size: 0.68rem !important;
  gap: 0.3rem;
  height: auto !important;
  margin-left: auto;
  padding: 0.42rem 0.6rem;
  width: auto !important;
}

.approved-business-form {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.5rem;
}

.approved-business-form .wide {
  grid-column: 1 / -1;
}

.approved-form-field label,
.approved-channel-card > label {
  color: #cbd3df;
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  margin-bottom: 0.45rem;
}

.approved-form-field label span {
  color: #ff5261;
}

.approved-form-field label small {
  color: #7f8b9d;
  font-weight: 500;
}

.approved-form-field .form-control,
.approved-form-field .form-select {
  background: linear-gradient(180deg, #182232, #141e2c);
  border: 1px solid #2b384a;
  border-radius: 9px;
  color: #edf2f7;
  font-size: 0.8rem;
  min-height: 44px;
  padding: 0.65rem 0.8rem;
}

.approved-form-field .form-control:focus,
.approved-form-field .form-select:focus {
  border-color: #ef1d2f;
  box-shadow: 0 0 0 0.18rem rgba(239, 29, 47, 0.1);
}

.approved-form-error {
  color: #fda4af;
  display: block;
  font-size: 0.69rem;
  margin-top: 0.3rem;
}

div.approved-form-error {
  background: rgba(239, 29, 47, 0.08);
  border: 1px solid rgba(239, 29, 47, 0.22);
  border-radius: 9px;
  padding: 0.7rem;
}

.approved-form-actions {
  display: flex;
  justify-content: flex-end;
}

.approved-form-actions .btn {
  border-radius: 9px;
  font-size: 0.76rem;
  font-weight: 750;
  min-width: 155px;
  padding: 0.7rem 1rem;
}

.approved-profile-content {
  align-items: center;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 120px minmax(0, 1fr);
  margin-top: 1.3rem;
}

.approved-profile-ring {
  align-items: center;
  aspect-ratio: 1;
  background:
    radial-gradient(circle, #101824 57%, transparent 59%),
    conic-gradient(#ff5261 calc(var(--profile-score) * 1%), #293546 0);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.approved-profile-ring strong {
  color: #fff;
  font-size: 1.65rem;
  line-height: 1;
}

.approved-profile-ring small {
  color: #8894a5;
  font-size: 0.67rem;
  margin-top: 0.35rem;
}

.approved-profile-content ul {
  background: rgba(25, 35, 51, 0.62);
  border-radius: 10px;
  list-style: none;
  margin: 0;
  padding: 0.75rem;
}

.approved-profile-content li {
  align-items: center;
  color: #8e9aab;
  display: grid;
  font-size: 0.72rem;
  gap: 0.45rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 0.35rem;
}

.approved-profile-content li.complete > i {
  color: #4ade80;
}

.approved-profile-content li small {
  background: rgba(148, 163, 184, 0.09);
  border-radius: 999px;
  color: #9aa6b6;
  font-size: 0.62rem;
  padding: 0.25rem 0.45rem;
}

.approved-profile-content li.complete small {
  background: rgba(34, 197, 94, 0.1);
  color: #4ade80;
}

.approved-channel-card > label {
  margin-top: 1.4rem;
}

.approved-whatsapp-form {
  display: grid;
  gap: 0.7rem;
  margin-top: 1.4rem;
  max-width: 100%;
  min-width: 0;
}

.approved-whatsapp-form .approved-whatsapp-label {
  color: #dce4ef !important;
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  margin: 0;
  opacity: 1 !important;
}

.approved-whatsapp-number {
  align-items: center;
  background: #172130;
  border: 1px solid rgba(239, 29, 47, 0.55);
  border-radius: 9px;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 0.7rem 0.8rem;
  width: 100%;
}

.approved-whatsapp-number > i {
  color: #4ade80;
  font-size: 1.1rem;
}

.approved-whatsapp-number .approved-whatsapp-input {
  appearance: none;
  -webkit-appearance: none;
  background: #172130 !important;
  background-color: #172130 !important;
  border: 0 !important;
  border-radius: 0;
  box-shadow: 0 0 0 1000px #172130 inset !important;
  color-scheme: dark;
  color: #f4f7fb !important;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 750;
  line-height: 1.3;
  min-width: 0;
  outline: 0 !important;
  overflow: hidden;
  padding: 0 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

.approved-whatsapp-number .approved-whatsapp-input:focus {
  color: #fff !important;
}

.approved-whatsapp-number .approved-whatsapp-input:-webkit-autofill,
.approved-whatsapp-number .approved-whatsapp-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f4f7fb;
  box-shadow: 0 0 0 1000px #172130 inset !important;
  caret-color: #f4f7fb;
}

.approved-whatsapp-number span {
  background: rgba(34, 197, 94, 0.1);
  border-radius: 999px;
  color: #4ade80;
  font-size: 0.63rem;
  padding: 0.28rem 0.55rem;
}

.approved-whatsapp-save {
  align-items: center;
  background: transparent;
  border: 1px solid rgba(239, 29, 47, 0.62);
  border-radius: 9px;
  color: #f1c2c7;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 700;
  gap: 0.45rem;
  justify-self: start;
  padding: 0.5rem 0.75rem;
}

.approved-whatsapp-save:hover,
.approved-whatsapp-save:focus-visible {
  background: rgba(239, 29, 47, 0.12);
  border-color: #ef1d2f;
  color: #fff;
}

.approved-channel-note {
  align-items: flex-start;
  background: rgba(30, 41, 58, 0.72);
  border-radius: 9px;
  color: #8c98a9;
  display: flex;
  font-size: 0.71rem;
  gap: 0.65rem;
  margin-top: 1rem;
  padding: 0.85rem;
}

.approved-channel-note i {
  color: #aab4c2;
}

.approved-channel-note p {
  line-height: 1.55;
  margin: 0;
}

.approved-stats-grid {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.3rem;
}

.approved-stats-grid > div {
  background: rgba(25, 35, 51, 0.65);
  border: 1px solid #283648;
  border-radius: 9px;
  padding: 0.8rem;
}

.approved-stats-grid small,
.approved-stats-grid strong {
  display: block;
}

.approved-stats-grid small {
  color: #7e8a9c;
  font-size: 0.64rem;
}

.approved-stats-grid strong {
  color: #f5f7fa;
  font-size: 1.35rem;
  margin-top: 0.3rem;
}

.approved-documents-card {
  margin-top: 1.25rem;
}

.approved-documents-card .seller-document-upload {
  margin-top: 1.25rem;
}

@media (max-width: 1050px) {
  .approved-business-header {
    align-items: stretch;
    flex-direction: column;
  }

  .approved-business-layout {
    grid-template-columns: 1fr;
  }

  .approved-business-status {
    min-width: 0;
  }
}

@media (max-width: 680px) {
  .approved-business-page {
    padding: 1rem 0 5.5rem;
  }

  .approved-business-status {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .approved-business-status .btn {
    grid-column: 1 / -1;
  }

  .approved-business-form {
    grid-template-columns: 1fr;
  }

  .approved-business-form .wide {
    grid-column: auto;
  }

  .approved-business-layout {
    gap: 1rem;
  }

  .approved-channel-card,
  .approved-whatsapp-form {
    max-width: 100%;
  }

  .approved-profile-content {
    grid-template-columns: 1fr;
  }

  .approved-profile-ring {
    justify-self: center;
    width: 120px;
  }
}

@media (max-width: 430px) {
  .approved-dashboard-card {
    border-radius: 13px;
    padding: 1rem;
  }

  .approved-card-tag {
    display: none !important;
  }

  .approved-whatsapp-number {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .approved-whatsapp-number span {
    grid-column: 2;
    justify-self: start;
  }
}

/* seller opportunities */
.seller-opportunities-experience {
  background:
    radial-gradient(circle at 80% 3%, rgba(239, 29, 47, 0.035), transparent 26rem),
    #f7f9fc;
}

.seller-opportunities-page {
  color: #111827;
  min-height: calc(100vh - 76px);
  padding: clamp(2rem, 4vw, 3.8rem) 0 6rem;
}

.opportunities-heading {
  align-items: flex-end;
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.opportunities-kicker {
  color: #ef1d2f;
  display: block;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  margin-bottom: 0.45rem;
  text-transform: uppercase;
}

.opportunities-heading h1 {
  color: #111827;
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  margin: 0;
}

.opportunities-heading p {
  color: #68758a;
  margin: 0.45rem 0 0;
}

.opportunities-count {
  align-items: baseline;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  color: #64748b;
  display: inline-flex;
  font-size: 0.72rem;
  gap: 0.35rem;
  padding: 0.55rem 0.8rem;
  white-space: nowrap;
}

.opportunities-count strong {
  color: #ef1d2f;
  font-size: 0.9rem;
}

.opportunities-toolbar {
  align-items: center;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.055);
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding: 0.85rem;
  position: relative;
  z-index: 3;
}

.opportunities-filters {
  align-items: center;
  display: flex;
  flex: 1;
  gap: 0.65rem;
  min-width: 0;
}

.opportunities-filters select,
.opportunities-filters input,
.opportunities-more-filters summary {
  background: #fff;
  border: 1px solid #dfe6ef;
  border-radius: 10px;
  color: #465469;
  font-size: 0.74rem;
  font-weight: 650;
  min-height: 44px;
  outline: 0;
}

.opportunities-filters select {
  appearance: auto;
  min-width: 145px;
  padding: 0.6rem 0.75rem;
}

.opportunities-filters select:focus,
.opportunities-filters input:focus,
.opportunities-more-filters[open] summary {
  border-color: rgba(239, 29, 47, 0.55);
  box-shadow: 0 0 0 0.18rem rgba(239, 29, 47, 0.08);
}

.opportunities-more-filters {
  position: relative;
}

.opportunities-more-filters summary {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  gap: 0.5rem;
  list-style: none;
  padding: 0.65rem 0.85rem;
  white-space: nowrap;
}

.opportunities-more-filters summary::-webkit-details-marker {
  display: none;
}

.opportunities-more-filters > div {
  background: #fff;
  border: 1px solid #dfe6ef;
  border-radius: 12px;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
  display: grid;
  gap: 0.75rem;
  left: 0;
  min-width: 300px;
  padding: 1rem;
  position: absolute;
  top: calc(100% + 0.55rem);
}

.opportunities-more-filters > div label span {
  color: #64748b;
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}

.opportunities-more-filters > div input,
.opportunities-more-filters > div select {
  min-width: 100%;
  width: 100%;
}

.opportunities-sort {
  align-items: center;
  border-left: 1px solid #e5eaf1;
  display: flex;
  gap: 0.35rem;
  margin-left: auto;
  padding-left: 0.75rem;
}

.opportunities-sort > span {
  color: #8a96a8;
  font-size: 0.66rem;
  white-space: nowrap;
}

.opportunities-sort select {
  font-weight: 750;
  min-width: 130px;
}

.opportunities-apply,
.opportunities-clear {
  align-items: center;
  border: 0;
  border-radius: 10px;
  display: inline-flex;
  height: 44px;
  justify-content: center;
}

.opportunities-apply {
  background: #ef1d2f;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 750;
  gap: 0.4rem;
  padding: 0 0.9rem;
}

.opportunities-apply:hover {
  background: #d31325;
}

.opportunities-clear {
  background: #f1f5f9;
  color: #64748b;
  width: 44px;
}

.opportunities-view-toggle {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  display: flex;
  flex: 0 0 auto;
  overflow: hidden;
}

.opportunities-view-toggle button {
  background: #fff;
  border: 0;
  color: #738095;
  height: 44px;
  width: 44px;
}

.opportunities-view-toggle button + button {
  border-left: 1px solid #e2e8f0;
}

.opportunities-view-toggle button.active {
  background: #fff0f2;
  color: #ef1d2f;
}

.opportunities-grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.opportunities-grid[data-view="list"] {
  grid-template-columns: 1fr;
}

.opportunities-grid[data-view="list"] .opportunity-card-body {
  grid-template-columns: auto minmax(0, 1fr);
}

.opportunities-grid[data-view="list"] .opportunity-description {
  max-width: 56rem;
}

.opportunity-card {
  background: #fff;
  border: 1px solid #e1e7ef;
  border-radius: 22px;
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.065);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  padding: 1.35rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.opportunity-card:hover {
  border-color: rgba(239, 29, 47, 0.32);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.09);
  transform: translateY(-2px);
}

.opportunity-card-top {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.opportunity-card-top time {
  color: #8793a5;
  font-size: 0.72rem;
}

.opportunity-state {
  align-items: center;
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  font-size: 0.66rem;
  font-weight: 850;
  gap: 0.35rem;
  letter-spacing: 0.025em;
  padding: 0.45rem 0.65rem;
  text-transform: uppercase;
}

.opportunity-state.new {
  background: #ef1d2f;
}

.opportunity-state.quoted {
  background: #2563eb;
}

.opportunity-state.won {
  background: #16a34a;
}

.opportunity-state.closed {
  background: #64748b;
}

.opportunity-card-body {
  align-items: center;
  display: grid;
  gap: 1rem;
  grid-template-columns: auto minmax(0, 1fr);
  margin-top: 1.35rem;
  min-height: 112px;
}

.opportunity-card-copy {
  min-width: 0;
}

.opportunity-card-copy h2 {
  color: #172033;
  font-size: clamp(1.08rem, 1.8vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin: 0;
}

.opportunity-card-copy h3 {
  background: #fff0f2;
  border-radius: 8px;
  color: #ef1d2f;
  display: inline-block;
  font-size: 0.86rem;
  font-weight: 750;
  margin: 0.55rem 0 0;
  padding: 0.34rem 0.58rem;
}

.opportunity-card-context {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.55rem;
}

.opportunity-pieces-total {
  align-items: center;
  background: var(--card-soft, #fff0f2);
  border: 1px solid color-mix(in srgb, var(--card-accent, #ef1d2f) 17%, transparent);
  border-radius: 999px;
  color: var(--card-accent, #ef1d2f);
  display: inline-flex;
  font-size: 0.62rem;
  font-weight: 850;
  gap: 0.3rem;
  padding: 0.3rem 0.55rem;
}

.opportunity-pieces {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.55rem;
  min-width: 0;
}

.opportunity-piece {
  align-items: center;
  background: linear-gradient(145deg, #fff, #f8fafc);
  border: 1px solid #e5ebf2;
  border-radius: 12px;
  display: grid;
  flex: 1 1 170px;
  gap: 0.5rem;
  grid-template-columns: 27px minmax(0, 1fr);
  max-width: 280px;
  min-width: 0;
  padding: 0.42rem 0.62rem 0.42rem 0.42rem;
}

.opportunity-piece-number {
  align-items: center;
  background: var(--card-soft, #fff0f2);
  border-radius: 8px;
  color: var(--card-accent, #ef1d2f);
  display: inline-flex;
  font-size: 0.56rem;
  font-weight: 900;
  height: 27px;
  justify-content: center;
  width: 27px;
}

.opportunity-piece-copy {
  display: block;
  min-width: 0;
}

.opportunity-piece-copy strong,
.opportunity-piece-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opportunity-piece-copy strong {
  color: #253047;
  display: -webkit-box;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.opportunity-piece-copy small {
  color: #7b889a;
  font-size: 0.58rem;
  line-height: 1.25;
  margin-top: 0.15rem;
}

.opportunity-pieces-more {
  align-items: center;
  align-self: stretch;
  background: #f3f6fa;
  border: 1px dashed #d8e0ea;
  border-radius: 12px;
  color: #66758a;
  display: inline-flex;
  font-size: 0.62rem;
  font-weight: 800;
  justify-content: center;
  padding: 0.5rem 0.7rem;
}

.opportunity-origin {
  align-items: center;
  background: #f3f6fa;
  border: 1px solid #e3e9f0;
  border-radius: 999px;
  color: #536177;
  display: inline-flex;
  font-size: 0.62rem;
  font-weight: 750;
  gap: 0.3rem;
  margin: 0;
  padding: 0.3rem 0.5rem;
  vertical-align: middle;
}

.opportunity-origin.origin-americano {
  background: #eef5ff;
  color: #255fae;
}

.opportunity-origin.origin-coreano {
  background: #f4efff;
  color: #6c42b5;
}

.opportunity-origin.origin-europeo {
  background: #edf8ff;
  color: #27759f;
}

.opportunity-origin.origin-chino {
  background: #fff0f1;
  color: #c52b3a;
}

.opportunity-origin.origin-japones {
  background: #f0f2ff;
  color: #4859b8;
}

.opportunity-description {
  color: #69778b;
  display: -webkit-box;
  font-size: 0.72rem;
  line-height: 1.45;
  margin: 0.65rem 0 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.opportunity-part-mark {
  align-items: center;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.8), transparent 30%),
    linear-gradient(145deg, #fff2f3, #ffe3e7);
  border: 0;
  border-radius: 50%;
  color: #ef1d2f;
  display: inline-flex;
  flex: 0 0 74px;
  font-size: 1.75rem;
  height: 74px;
  justify-content: center;
  width: 74px;
}

.opportunity-card-meta {
  border-top: 1px solid #edf1f5;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: auto;
  padding-top: 1rem;
}

.opportunity-card-meta > div {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #f0f3f7;
  border-radius: 12px;
  display: flex;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.65rem;
}

.opportunity-card-meta > div > span {
  align-items: center;
  background: #ffecef;
  border-radius: 50%;
  color: #ef1d2f;
  display: inline-flex;
  flex: 0 0 34px;
  font-size: 0.95rem;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.opportunity-card-meta p {
  margin: 0;
  min-width: 0;
}

.opportunity-card-meta small,
.opportunity-card-meta strong {
  display: block;
}

.opportunity-card-meta small {
  color: #8995a6;
  font-size: 0.58rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opportunity-card-meta strong {
  color: #172033;
  font-size: 0.72rem;
  margin-top: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opportunity-card footer {
  border-top: 1px solid #edf1f5;
  margin-top: 1rem;
  padding-top: 1rem;
}

.opportunity-card footer a {
  align-items: center;
  background: linear-gradient(135deg, #f31d31, #df0e23);
  border: 0;
  border-radius: 11px;
  color: #fff;
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 750;
  gap: 0.45rem;
  justify-content: center;
  min-height: 48px;
  padding: 0.7rem 1rem;
  width: 100%;
}

.opportunity-card footer a:hover {
  background: linear-gradient(135deg, #df0e23, #c70c1e);
  color: #fff;
}

.opportunities-empty {
  align-items: center;
  background: #fff;
  border: 1px dashed #d8e0ea;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  padding: 4rem 1.5rem;
  text-align: center;
}

.opportunities-empty > span {
  align-items: center;
  background: #fff0f2;
  border-radius: 50%;
  color: #ef1d2f;
  display: inline-flex;
  font-size: 1.35rem;
  height: 54px;
  justify-content: center;
  width: 54px;
}

.opportunities-empty h2 {
  color: #172033;
  font-size: 1.1rem;
  margin: 1rem 0 0.35rem;
}

.opportunities-empty p {
  color: #7c899c;
  margin: 0 0 1rem;
}

@media (max-width: 1199.98px) {
  .opportunities-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .opportunities-filters {
    flex-wrap: wrap;
  }

  .opportunities-sort {
    border-left: 0;
    margin-left: 0;
    padding-left: 0;
  }
}

@media (max-width: 767.98px) {
  .seller-opportunities-page {
    padding: 1.25rem 0 5.5rem;
  }

  .opportunities-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .opportunities-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .opportunities-filters,
  .opportunities-filters > label,
  .opportunities-filters select,
  .opportunities-sort {
    width: 100%;
  }

  .opportunities-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .opportunities-more-filters {
    position: static;
  }

  .opportunities-more-filters summary {
    justify-content: center;
    width: 100%;
  }

  .opportunities-more-filters > div {
    left: 0.85rem;
    min-width: 0;
    right: 0.85rem;
    top: auto;
  }

  .opportunities-sort {
    grid-column: 1 / -1;
  }

  .opportunities-apply {
    min-width: 0;
  }

  .opportunities-view-toggle {
    align-self: flex-end;
  }

  .opportunities-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  .opportunities-filters {
    gap: 0.55rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .opportunities-sort {
    grid-column: 1 / -1;
  }

  .opportunities-apply {
    grid-column: 1 / -1;
    width: 100%;
  }

  .opportunities-toolbar {
    padding: 0.7rem;
  }

  .opportunities-filters select,
  .opportunities-more-filters summary {
    font-size: 0.66rem;
    padding-inline: 0.65rem;
  }

  .opportunity-card {
    padding: 1rem;
  }

  .opportunity-card-meta > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.55rem;
  }

  .opportunity-card-meta > div > span {
    flex-basis: 28px;
    font-size: 0.78rem;
    height: 28px;
    width: 28px;
  }

  .opportunity-card-meta small,
  .opportunity-card-meta strong {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .opportunity-card-meta small {
    font-size: 0.52rem;
    line-height: 1.2;
  }

  .opportunity-card-meta strong {
    font-size: 0.68rem;
  }
}

/* Seller opportunities: dedicated mobile layout */
.opportunities-mobile-filter-toggle {
  display: none;
}

@media (max-width: 767.98px) {
  .seller-opportunities-experience {
    background: #f5f7fa;
  }

  .seller-opportunities-page {
    padding: 1rem 0 calc(5.75rem + env(safe-area-inset-bottom, 0px));
  }

  .seller-opportunities-page > .container {
    padding-inline: 0.8rem;
  }

  .seller-opportunities-page .opportunities-heading {
    align-items: end;
    display: grid;
    gap: 0.6rem;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 1rem;
  }

  .seller-opportunities-page .opportunities-heading > div {
    min-width: 0;
  }

  .seller-opportunities-page .opportunities-kicker {
    font-size: 0.62rem;
    margin-bottom: 0.35rem;
  }

  .seller-opportunities-page .opportunities-heading h1 {
    font-size: clamp(1.55rem, 8vw, 1.9rem);
    line-height: 1.05;
  }

  .seller-opportunities-page .opportunities-heading p {
    font-size: 0.78rem;
    line-height: 1.4;
  }

  .seller-opportunities-page .opportunities-count {
    font-size: 0.64rem;
    padding: 0.45rem 0.65rem;
  }

  .seller-opportunities-page .opportunities-count strong {
    font-size: 0.8rem;
  }

  .seller-opportunities-page .opportunities-mobile-filter-toggle {
    align-items: center;
    background: #fff;
    border: 1px solid #dce4ed;
    border-radius: 13px;
    color: #25344a;
    display: flex !important;
    font-size: 0.8rem;
    font-weight: 750;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    min-height: 50px;
    padding: 0.75rem 0.9rem;
    width: 100%;
  }

  .seller-opportunities-page .opportunities-mobile-filter-toggle span {
    align-items: center;
    display: flex;
    gap: 0.5rem;
  }

  .seller-opportunities-page .opportunities-mobile-filter-toggle span i {
    color: #ef1d2f;
  }

  .seller-opportunities-page .opportunities-mobile-filter-toggle > i {
    transition: transform 0.2s ease;
  }

  .seller-opportunities-page .opportunities-mobile-filter-toggle[aria-expanded="true"] > i {
    transform: rotate(180deg);
  }

  .seller-opportunities-page .opportunities-toolbar {
    display: none;
    margin-bottom: 0.9rem;
    padding: 0.75rem;
  }

  .seller-opportunities-page .opportunities-toolbar.is-open {
    animation: opportunities-filter-reveal 0.2s ease-out;
    display: block;
  }

  .seller-opportunities-page .opportunities-filters {
    display: grid;
    gap: 0.6rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .seller-opportunities-page .opportunities-filters > label,
  .seller-opportunities-page .opportunities-filters select,
  .seller-opportunities-page .opportunities-filters input {
    min-width: 0;
    width: 100%;
  }

  .seller-opportunities-page .opportunities-more-filters,
  .seller-opportunities-page .opportunities-sort {
    grid-column: 1 / -1;
  }

  .seller-opportunities-page .opportunities-more-filters > div {
    box-shadow: none;
    margin-top: 0.5rem;
    position: static;
  }

  .seller-opportunities-page .opportunities-sort {
    align-items: stretch;
    display: grid;
    gap: 0.35rem;
  }

  .seller-opportunities-page .opportunities-sort > span {
    padding-left: 0.1rem;
  }

  .seller-opportunities-page .opportunities-apply {
    grid-column: 1 / -1;
    min-height: 48px;
    width: 100%;
  }

  .seller-opportunities-page .opportunities-clear {
    grid-column: 1 / -1;
    height: 42px;
    width: 100%;
  }

  .seller-opportunities-page .opportunities-view-toggle {
    display: none;
  }

  .seller-opportunities-page .opportunities-grid,
  .seller-opportunities-page .opportunities-grid[data-view="list"] {
    gap: 0.8rem;
    grid-template-columns: 1fr;
  }

  .seller-opportunities-page .opportunity-card {
    border-radius: 17px;
    box-shadow: 0 9px 24px rgba(15, 23, 42, 0.055);
    padding: 0.9rem;
  }

  .seller-opportunities-page .opportunity-card:hover {
    transform: none;
  }

  .seller-opportunities-page .opportunity-state {
    border-radius: 7px;
    font-size: 0.6rem;
    padding: 0.38rem 0.52rem;
  }

  .seller-opportunities-page .opportunity-card-top time {
    font-size: 0.64rem;
  }

  .seller-opportunities-page .opportunity-card-body,
  .seller-opportunities-page .opportunities-grid[data-view="list"] .opportunity-card-body {
    gap: 0.7rem;
    grid-template-columns: 48px minmax(0, 1fr);
    margin-top: 0.85rem;
    min-height: 0;
  }

  .seller-opportunities-page .opportunity-part-mark {
    flex-basis: 48px;
    font-size: 1.2rem;
    height: 48px;
    width: 48px;
  }

  .seller-opportunities-page .opportunity-card-copy h2 {
    font-size: 1rem;
    line-height: 1.2;
  }

  .seller-opportunities-page .opportunity-card-copy h3 {
    font-size: 0.72rem;
    margin-top: 0.4rem;
    padding: 0.28rem 0.45rem;
  }

  .seller-opportunities-page .opportunity-card-context {
    gap: 0.3rem;
    margin-top: 0.4rem;
  }

  .seller-opportunities-page .opportunity-pieces-total {
    font-size: 0.56rem;
    padding: 0.25rem 0.42rem;
  }

  .seller-opportunities-page .opportunity-pieces {
    gap: 0.35rem;
    margin-top: 0.4rem;
  }

  .seller-opportunities-page .opportunity-piece {
    border-radius: 10px;
    flex-basis: 100%;
    max-width: none;
    padding: 0.38rem 0.5rem 0.38rem 0.38rem;
  }

  .seller-opportunities-page .opportunity-piece-copy strong {
    font-size: 0.66rem;
  }

  .seller-opportunities-page .opportunity-piece-copy small {
    font-size: 0.55rem;
  }

  .seller-opportunities-page .opportunity-pieces-more {
    min-height: 34px;
    width: 100%;
  }

  .seller-opportunities-page .opportunity-origin {
    font-size: 0.57rem;
    padding: 0.25rem 0.4rem;
  }

  .seller-opportunities-page .opportunity-description {
    font-size: 0.66rem;
    margin-top: 0.45rem;
  }

  .seller-opportunities-page .opportunity-card-meta {
    gap: 0.35rem;
    margin-top: 0.8rem;
    padding-top: 0.75rem;
  }

  .seller-opportunities-page .opportunity-card-meta > div {
    background: #f7f9fc;
    border-radius: 9px;
    display: block;
    padding: 0.5rem;
  }

  .seller-opportunities-page .opportunity-card-meta > div > span {
    display: none;
  }

  .seller-opportunities-page .opportunity-card-meta small {
    font-size: 0.5rem;
    line-height: 1.2;
  }

  .seller-opportunities-page .opportunity-card-meta strong {
    font-size: 0.67rem;
    line-height: 1.25;
    margin-top: 0.2rem;
  }

  .seller-opportunities-page .opportunity-card footer {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
  }

  .seller-opportunities-page .opportunity-card footer a {
    min-height: 50px;
  }

  .seller-opportunities-page .opportunities-empty {
    border-radius: 16px;
    padding: 2.5rem 1rem;
  }
}

@media (max-width: 359.98px) {
  .seller-opportunities-page .opportunities-heading {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .seller-opportunities-page .opportunities-count {
    justify-self: start;
  }

  .seller-opportunities-page .opportunities-filters {
    grid-template-columns: 1fr;
  }

  .seller-opportunities-page .opportunities-filters > *,
  .seller-opportunities-page .opportunities-more-filters,
  .seller-opportunities-page .opportunities-sort,
  .seller-opportunities-page .opportunities-apply {
    grid-column: auto;
  }
}

@keyframes opportunities-filter-reveal {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Seller opportunities: status dashboard */
.opportunities-overview {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(320px, 1.55fr) minmax(620px, 2.45fr);
  margin-bottom: 0.8rem;
}

.opportunities-search {
  align-items: center;
  background: #fff;
  border: 1px solid #dce3ec;
  border-radius: 17px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.035);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 82px;
  padding: 0 1.2rem;
}

.opportunities-search > i {
  color: #64748b;
  font-size: 1.2rem;
}

.opportunities-search input {
  background: transparent;
  border: 0;
  color: #172033;
  font-size: 0.9rem;
  min-width: 0;
  outline: 0;
  width: 100%;
}

.opportunities-search input::placeholder {
  color: #758298;
  opacity: 1;
}

.opportunities-search button {
  align-items: center;
  background: #fff0f2;
  border: 0;
  border-radius: 50%;
  color: #ef1d2f;
  display: inline-flex;
  height: 38px;
  justify-content: center;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  width: 38px;
}

.opportunities-search:focus-within {
  border-color: rgba(239, 29, 47, 0.42);
  box-shadow: 0 0 0 0.2rem rgba(239, 29, 47, 0.07);
}

.opportunities-search:focus-within button,
.opportunities-search input:not(:placeholder-shown) + button {
  opacity: 1;
  transform: none;
}

.opportunities-status-tabs {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.opportunities-status-tab {
  --status-color: #ef1d2f;
  --status-soft: #fff1f3;
  --status-border: #ffd2d7;
  --status-active-border: #f49ca6;
  --status-shadow: rgba(239, 29, 47, 0.1);
  align-items: center;
  background: linear-gradient(145deg, #fff, var(--status-soft));
  border: 1px solid var(--status-border);
  border-radius: 17px;
  color: var(--status-color);
  display: grid;
  gap: 0.65rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 82px;
  padding: 0.8rem 0.9rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.opportunities-status-tab.quoted {
  --status-color: #1f5bd7;
  --status-soft: #eff5ff;
  --status-border: #cddcff;
  --status-active-border: #9db9f6;
  --status-shadow: rgba(31, 91, 215, 0.1);
}

.opportunities-status-tab.won {
  --status-color: #13954a;
  --status-soft: #effbf4;
  --status-border: #c8ecd6;
  --status-active-border: #91d8ad;
  --status-shadow: rgba(19, 149, 74, 0.1);
}

.opportunities-status-tab:hover,
.opportunities-status-tab.active {
  border-color: var(--status-active-border);
  box-shadow: 0 12px 28px var(--status-shadow);
  color: var(--status-color);
  transform: translateY(-1px);
}

.opportunities-status-tab.active {
  box-shadow:
    inset 0 0 0 1px var(--status-border),
    0 12px 28px var(--status-shadow);
}

.opportunities-status-icon {
  align-items: center;
  background: var(--status-color);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-size: 0.86rem;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.opportunities-status-tab strong {
  font-size: 0.9rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opportunities-status-number {
  align-items: center;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--status-border);
  border-radius: 10px;
  color: var(--status-color);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 850;
  height: 34px;
  justify-content: center;
  min-width: 34px;
  padding-inline: 0.35rem;
}

.opportunities-origin-filter {
  align-items: center;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid #dfe6ef;
  border-radius: 17px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.035);
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(210px, 0.65fr) minmax(0, 2fr);
  margin-bottom: 0.75rem;
  padding: 0.8rem 0.9rem;
}

.opportunities-origin-heading {
  align-items: center;
  display: flex;
  gap: 0.65rem;
  min-width: 0;
}

.opportunities-origin-heading > span {
  align-items: center;
  background: #fff0f2;
  border-radius: 11px;
  color: #ef1d2f;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1rem;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.opportunities-origin-heading h2 {
  color: #172033;
  font-size: 0.78rem;
  font-weight: 850;
  margin: 0 0 0.12rem;
}

.opportunities-origin-heading p {
  color: #8290a5;
  font-size: 0.62rem;
  line-height: 1.35;
  margin: 0;
}

.opportunities-origin-options {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: repeat(6, minmax(84px, 1fr));
}

.opportunities-origin-option {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e1e7ef;
  border-radius: 12px;
  color: #5f6d82;
  cursor: pointer;
  display: flex;
  gap: 0.42rem;
  justify-content: center;
  min-height: 44px;
  padding: 0.4rem 0.48rem;
  position: relative;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.opportunities-origin-option input {
  height: 1px;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  width: 1px;
}

.opportunities-origin-option:hover {
  background: #fff;
  border-color: #f3a5ad;
  color: #d81729;
  transform: translateY(-1px);
}

.opportunities-origin-option:focus-within {
  box-shadow: 0 0 0 0.2rem rgba(239, 29, 47, 0.12);
}

.opportunities-origin-option.active {
  background: linear-gradient(145deg, #fff, #fff0f2);
  border-color: #ef8994;
  box-shadow:
    inset 0 0 0 1px rgba(239, 29, 47, 0.08),
    0 7px 18px rgba(239, 29, 47, 0.08);
  color: #d81729;
}

.opportunities-origin-flag {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  line-height: 1;
}

.opportunities-origin-flag img {
  display: block;
  height: 30px;
  object-fit: contain;
  width: 30px;
}

.opportunities-origin-flag.all {
  background: #e9eef5;
  border-radius: 50%;
  color: #64748b;
  font-size: 0.66rem;
  height: 22px;
  width: 22px;
}

.opportunities-origin-option.active .opportunities-origin-flag.all {
  background: #ef1d2f;
  color: #fff;
}

.opportunities-origin-option strong {
  font-size: 0.64rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.opportunities-controls-row {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-bottom: 1rem;
  min-height: 36px;
  position: relative;
  z-index: 4;
}

.opportunities-private-note {
  align-items: center;
  color: #758298;
  display: flex;
  font-size: 0.72rem;
  gap: 0.5rem;
  margin: 0;
}

.opportunities-advanced {
  position: relative;
}

.opportunities-advanced summary {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 9px;
  color: #64748b;
  cursor: pointer;
  display: inline-flex;
  font-size: 0.7rem;
  font-weight: 750;
  gap: 0.45rem;
  list-style: none;
  min-height: 36px;
  padding: 0.4rem 0.7rem;
}

.opportunities-advanced summary::-webkit-details-marker {
  display: none;
}

.opportunities-advanced[open] summary,
.opportunities-advanced summary:hover {
  background: #fff;
  color: #ef1d2f;
}

.opportunities-advanced form {
  align-items: end;
  background: #fff;
  border: 1px solid #dfe6ef;
  border-radius: 14px;
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.14);
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(4, minmax(140px, 1fr)) auto auto;
  padding: 0.9rem;
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  width: min(1040px, calc(100vw - 2rem));
}

.opportunities-advanced label span {
  color: #7d899b;
  display: block;
  font-size: 0.6rem;
  font-weight: 700;
  margin: 0 0 0.3rem 0.1rem;
}

.opportunities-advanced select,
.opportunities-advanced input,
.opportunities-advanced button,
.opportunities-advanced form > a {
  border: 1px solid #dfe6ef;
  border-radius: 9px;
  font-size: 0.68rem;
  min-height: 40px;
}

.opportunities-advanced select,
.opportunities-advanced input {
  background: #fff;
  color: #465469;
  min-width: 0;
  padding: 0.5rem 0.6rem;
  width: 100%;
}

.opportunities-advanced button,
.opportunities-advanced form > a {
  align-items: center;
  display: inline-flex;
  font-weight: 750;
  gap: 0.35rem;
  justify-content: center;
  padding: 0 0.8rem;
  white-space: nowrap;
}

.opportunities-advanced button {
  background: #ef1d2f;
  border-color: #ef1d2f;
  color: #fff;
}

.opportunities-advanced form > a {
  background: #f8fafc;
  color: #64748b;
}

.opportunity-card {
  --card-accent: #ef1d2f;
  --card-soft: #fff0f2;
}

.opportunity-card.is-quoted {
  --card-accent: #1f5bd7;
  --card-soft: #edf4ff;
}

.opportunity-card.is-won {
  --card-accent: #13954a;
  --card-soft: #ecfaf2;
}

.opportunity-card.is-closed {
  --card-accent: #64748b;
  --card-soft: #f1f5f9;
}

.opportunity-card .opportunity-part-mark {
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.82), transparent 30%),
    var(--card-soft);
  color: var(--card-accent);
}

.opportunity-card .opportunity-card-copy h3 {
  background: var(--card-soft);
  color: var(--card-accent);
}

.opportunity-card .opportunity-card-meta > div > span {
  background: var(--card-soft);
  color: var(--card-accent);
}

.opportunities-pagination {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  justify-content: center;
  padding: 1.1rem 0 0.2rem;
}

.opportunities-pagination > p {
  color: #7a879a;
  font-size: 0.68rem;
  margin: 0;
}

.opportunities-pagination > p strong {
  color: #273449;
  font-weight: 850;
}

.opportunities-load-more {
  align-items: center;
  background: #fff;
  border: 1px solid #ef1d2f;
  border-radius: 11px;
  color: #e7192b;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 800;
  gap: 0.5rem;
  justify-content: center;
  min-height: 44px;
  min-width: 210px;
  padding: 0.55rem 1rem;
  transition:
    background-color 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.opportunities-load-more:hover {
  background: #ef1d2f;
  box-shadow: 0 10px 24px rgba(239, 29, 47, 0.16);
  color: #fff;
  transform: translateY(-1px);
}

.opportunities-load-more.is-loading {
  opacity: 0.62;
  pointer-events: none;
}

.opportunities-load-more.is-loading i {
  animation: opportunities-load-spin 0.8s linear infinite;
}

.opportunities-load-feedback {
  color: #6f7d91;
  font-size: 0.64rem;
  min-height: 1em;
  text-align: center;
}

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

@media (max-width: 1199.98px) {
  .opportunities-overview {
    grid-template-columns: 1fr;
  }

  .opportunities-search {
    min-height: 66px;
  }

  .opportunities-status-tab {
    min-height: 72px;
  }

  .opportunities-origin-filter {
    grid-template-columns: 1fr;
  }

  .opportunities-advanced form {
    grid-template-columns: repeat(3, minmax(140px, 1fr));
    width: min(720px, calc(100vw - 2rem));
  }
}

@media (max-width: 767.98px) {
  .seller-opportunities-page .opportunities-heading {
    margin-bottom: 0.9rem;
  }

  .opportunities-overview {
    gap: 0.7rem;
    margin-bottom: 0.7rem;
  }

  .opportunities-search {
    border-radius: 14px;
    min-height: 54px;
    padding-inline: 0.9rem;
  }

  .opportunities-search input {
    font-size: 0.76rem;
  }

  .opportunities-search button {
    height: 34px;
    opacity: 1;
    transform: none;
    width: 34px;
  }

  .opportunities-status-tabs {
    gap: 0.45rem;
  }

  .opportunities-status-tab {
    align-content: center;
    border-radius: 13px;
    gap: 0.2rem;
    grid-template-columns: auto 1fr;
    min-height: 68px;
    padding: 0.55rem;
    position: relative;
  }

  .opportunities-status-icon {
    font-size: 0.68rem;
    height: 30px;
    width: 30px;
  }

  .opportunities-status-tab strong {
    font-size: 0.66rem;
  }

  .opportunities-status-number {
    border-radius: 7px;
    font-size: 0.62rem;
    height: 22px;
    min-width: 22px;
    padding-inline: 0.25rem;
    position: absolute;
    right: 0.35rem;
    top: 0.3rem;
  }

  .opportunities-origin-filter {
    border-radius: 14px;
    gap: 0.65rem;
    padding: 0.7rem;
  }

  .opportunities-origin-heading > span {
    height: 34px;
    width: 34px;
  }

  .opportunities-origin-heading h2 {
    font-size: 0.72rem;
  }

  .opportunities-origin-heading p {
    font-size: 0.58rem;
  }

  .opportunities-origin-options {
    display: grid;
    gap: 0.32rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin: 0;
    overflow: visible;
    padding: 0;
  }

  .opportunities-origin-option {
    aspect-ratio: 1;
    border-radius: 12px;
    min-height: 0;
    min-width: 0;
    padding: 0.22rem;
    width: 100%;
  }

  .opportunities-origin-option strong {
    display: none;
  }

  .opportunities-origin-flag img {
    height: min(34px, 8vw);
    width: min(34px, 8vw);
  }

  .opportunities-origin-flag.all {
    font-size: 0.72rem;
    height: min(32px, 7.6vw);
    width: min(32px, 7.6vw);
  }

  .opportunities-load-more {
    min-height: 46px;
    width: 100%;
  }

  .opportunities-controls-row {
    align-items: stretch;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
  }

  .opportunities-private-note {
    font-size: 0.62rem;
    line-height: 1.35;
  }

  .opportunities-advanced summary {
    background: #fff;
    border: 1px solid #e1e7ef;
    justify-content: center;
    width: 100%;
  }

  .opportunities-advanced form {
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 0.4rem;
    position: static;
    width: 100%;
  }

  .opportunities-advanced form > button,
  .opportunities-advanced form > a {
    width: 100%;
  }
}

@media (max-width: 389.98px) {
  .opportunities-status-tab {
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 76px;
    text-align: center;
  }

  .opportunities-status-tab strong {
    max-width: 100%;
  }

  .opportunities-advanced form {
    grid-template-columns: 1fr;
  }
}

/* staff operations dashboard */
.staff-dashboard-experience {
  background:
    radial-gradient(circle at 88% 4%, rgba(239, 29, 47, 0.065), transparent 25rem),
    #f4f7fb;
  color: #142036;
}

.staff-dashboard-experience main {
  min-height: calc(100vh - 150px);
}

.staff-dashboard-page {
  padding: clamp(1.6rem, 3vw, 3rem) 0;
}

.staff-dashboard-header {
  align-items: end;
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
  margin-bottom: 1.4rem;
}

.staff-dashboard-kicker {
  color: #ef1d2f;
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 850;
  gap: 0.4rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.55rem;
  text-transform: uppercase;
}

.staff-dashboard-header h1 {
  color: #111b2d;
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 850;
  letter-spacing: -0.045em;
  line-height: 1;
  margin: 0 0 0.55rem;
}

.staff-dashboard-header p {
  color: #718096;
  font-size: 0.9rem;
  margin: 0;
}

.staff-dashboard-header-actions {
  align-items: center;
  display: flex;
  gap: 0.65rem;
}

.staff-dashboard-header-actions time,
.staff-dashboard-header-actions a {
  align-items: center;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid #dce4ee;
  border-radius: 10px;
  color: #55637a;
  display: inline-flex;
  font-size: 0.68rem;
  gap: 0.42rem;
  min-height: 40px;
  padding: 0.5rem 0.75rem;
}

.staff-metric-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 1rem;
}

.staff-metric-card {
  --metric-color: #ef1d2f;
  --metric-soft: #fff0f2;
  align-items: center;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #dfe6ef;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.045);
  display: grid;
  gap: 0.8rem;
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 132px;
  padding: 1rem;
  position: relative;
  text-decoration: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.staff-metric-card:hover {
  border-color: color-mix(in srgb, var(--metric-color) 38%, #dfe6ef);
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.09);
  transform: translateY(-3px);
}

.staff-metric-card.approved {
  --metric-color: #13954a;
  --metric-soft: #eaf9f1;
}

.staff-metric-card.requests {
  --metric-color: #1f5bd7;
  --metric-soft: #edf4ff;
}

.staff-metric-card.quotes {
  --metric-color: #7c3aed;
  --metric-soft: #f3efff;
}

.staff-metric-card > span {
  align-items: center;
  background: var(--metric-soft);
  border-radius: 13px;
  color: var(--metric-color);
  display: inline-flex;
  font-size: 1.15rem;
  height: 48px;
  justify-content: center;
  width: 48px;
}

.staff-metric-card small {
  color: #718096;
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
}

.staff-metric-card strong {
  color: #172033;
  display: block;
  font-size: 1.65rem;
  font-weight: 850;
  line-height: 1.15;
  margin: 0.12rem 0;
}

.staff-metric-card p {
  color: #92a0b2;
  font-size: 0.56rem;
  line-height: 1.35;
  margin: 0;
}

.staff-metric-card-arrow {
  color: var(--metric-color);
  font-size: 0.8rem;
  opacity: 0;
  position: absolute;
  right: 0.85rem;
  top: 0.75rem;
  transform: translate(-4px, 4px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.staff-metric-card:hover .staff-metric-card-arrow,
.staff-metric-card:focus-visible .staff-metric-card-arrow {
  opacity: 1;
  transform: translate(0, 0);
}

.staff-metric-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--metric-color) 28%, transparent);
  outline-offset: 3px;
}

.staff-attention-banner {
  align-items: center;
  background: linear-gradient(100deg, #fff3f4, #fff);
  border: 1px solid #ffd2d7;
  border-radius: 13px;
  display: flex;
  gap: 0.8rem;
  margin-bottom: 1rem;
  padding: 0.75rem 0.9rem;
}

.staff-records-page {
  background:
    radial-gradient(circle at 88% 4%, rgba(239, 29, 47, 0.055), transparent 30%),
    #f4f7fb;
  min-height: calc(100vh - 70px);
  padding: 2rem 0 3.5rem;
}

.staff-records-back {
  align-items: center;
  color: #e71931;
  display: inline-flex;
  font-size: 0.68rem;
  font-weight: 780;
  gap: 0.4rem;
  margin-bottom: 0.8rem;
  text-decoration: none;
}

.staff-records-back:hover {
  color: #bd1326;
}

.staff-records-hero {
  --records-color: #e71931;
  --records-soft: #fff0f2;
  align-items: center;
  background: #fff;
  border: 1px solid #dfe6ef;
  border-radius: 18px;
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.055);
  display: grid;
  gap: 1rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  overflow: hidden;
  padding: 1.35rem 1.45rem;
  position: relative;
}

.staff-records-hero::after {
  background: radial-gradient(circle, var(--records-soft), transparent 68%);
  content: "";
  height: 220px;
  pointer-events: none;
  position: absolute;
  right: -45px;
  top: -90px;
  width: 220px;
}

.staff-records-hero.approved {
  --records-color: #12944a;
  --records-soft: #e7f8ee;
}

.staff-records-hero.requests {
  --records-color: #1f5bd7;
  --records-soft: #eaf2ff;
}

.staff-records-hero.quotes {
  --records-color: #7c3aed;
  --records-soft: #f2ecff;
}

.staff-records-hero-icon {
  align-items: center;
  background: var(--records-soft);
  border-radius: 15px;
  color: var(--records-color);
  display: inline-flex;
  font-size: 1.25rem;
  height: 56px;
  justify-content: center;
  width: 56px;
}

.staff-records-hero small {
  color: var(--records-color);
  font-size: 0.6rem;
  font-weight: 850;
  letter-spacing: 0.09em;
}

.staff-records-hero h1 {
  color: #111b2e;
  font-size: clamp(1.55rem, 3vw, 2.35rem);
  font-weight: 850;
  letter-spacing: -0.04em;
  margin: 0.08rem 0;
}

.staff-records-hero p {
  color: #718096;
  font-size: 0.72rem;
  margin: 0;
}

.staff-records-count {
  align-items: center;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  display: flex;
  gap: 0.42rem;
  padding: 0.58rem 0.78rem;
  position: relative;
  z-index: 1;
}

.staff-records-count strong {
  color: var(--records-color);
  font-size: 1.05rem;
}

.staff-records-count span {
  color: #718096;
  font-size: 0.62rem;
}

.staff-records-search {
  align-items: center;
  background: #fff;
  border: 1px solid #dfe6ef;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
  display: flex;
  gap: 0.65rem;
  margin: 0.9rem 0;
  padding: 0.55rem 0.65rem 0.55rem 0.9rem;
}

.staff-business-kpis {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 1rem 0;
}

.staff-business-kpis article,
.staff-business-kpis > a {
  align-items: center;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  display: flex;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.85rem 0.9rem;
}

.staff-business-kpis > a {
  color: inherit;
  text-decoration: none;
}

.staff-business-kpis > a:hover,
.staff-business-kpis > a.is-active {
  border-color: currentColor;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.staff-business-kpis > a.active { color: #118346; }
.staff-business-kpis > a.pending { color: #1f5bd7; }
.staff-business-kpis > a.inactive { color: #d51b2d; }
.staff-business-kpis > a strong,
.staff-business-kpis > a small,
.staff-business-kpis > a p { color: inherit; }
.staff-business-kpis > a p { opacity: 0.72; }

.staff-business-kpis article > span,
.staff-business-kpis > a > span {
  align-items: center;
  border-radius: 10px;
  display: inline-flex;
  flex: 0 0 auto;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.staff-business-kpis article.active > span, .staff-business-kpis > a.active > span { background: #e7f8ee; color: #118346; }
.staff-business-kpis article.pending > span, .staff-business-kpis > a.pending > span { background: #eaf2ff; color: #1f5bd7; }
.staff-business-kpis article.inactive > span, .staff-business-kpis > a.inactive > span { background: #fff1f2; color: #d51b2d; }
.staff-business-kpis article div, .staff-business-kpis > a div { min-width: 0; }
.staff-business-kpis small { color: #7f8da0; display: block; font-size: 0.58rem; font-weight: 750; }
.staff-business-kpis strong { color: #1d2939; display: inline-block; font-size: 1.15rem; line-height: 1; margin: 0.14rem 0; }
.staff-business-kpis p { color: #7f8da0; font-size: 0.54rem; line-height: 1.35; margin: 0; }

.staff-records-search label {
  color: #8794a6;
}

.staff-records-search input {
  background: transparent;
  border: 0;
  color: #273449;
  flex: 1;
  font-size: 0.72rem;
  min-height: 38px;
  min-width: 0;
  outline: 0;
}

.staff-records-search input::placeholder {
  color: #9aa7b8;
}

.staff-records-search button,
.staff-records-search > a {
  align-items: center;
  border-radius: 9px;
  display: inline-flex;
  font-size: 0.64rem;
  font-weight: 800;
  justify-content: center;
  min-height: 38px;
}

.staff-records-search button {
  background: #ef233c;
  border: 0;
  color: #fff;
  padding: 0.5rem 0.95rem;
}

.staff-records-search > a {
  background: #f1f4f8;
  color: #607087;
  text-decoration: none;
  width: 38px;
}

.staff-records-panel {
  background: #fff;
  border: 1px solid #dfe6ef;
  border-radius: 18px;
  box-shadow: 0 15px 36px rgba(15, 23, 42, 0.05);
  overflow: hidden;
}

.staff-records-panel > header {
  align-items: center;
  border-bottom: 1px solid #e7edf4;
  display: flex;
  justify-content: space-between;
  padding: 0.95rem 1.1rem;
}

.staff-records-panel > header h2 {
  color: #243047;
  font-size: 0.82rem;
  font-weight: 820;
  margin: 0;
}

.staff-records-panel > header p {
  color: #8996a8;
  font-size: 0.59rem;
  margin: 0.16rem 0 0;
}

.staff-records-panel > header > span {
  background: #f1f4f8;
  border-radius: 999px;
  color: #718096;
  font-size: 0.56rem;
  font-weight: 750;
  padding: 0.35rem 0.55rem;
}

.staff-records-list {
  --records-color: #e71931;
  --records-soft: #fff0f2;
  padding: 0 1.1rem;
}

.staff-records-list.approved {
  --records-color: #12944a;
  --records-soft: #e7f8ee;
}

.staff-records-list.requests {
  --records-color: #1f5bd7;
  --records-soft: #eaf2ff;
}

.staff-records-list.quotes {
  --records-color: #7c3aed;
  --records-soft: #f2ecff;
}

.staff-record-row {
  align-items: center;
  border-bottom: 1px solid #e9eef4;
  display: grid;
  gap: 0.8rem;
  grid-template-columns: auto minmax(260px, 460px) minmax(210px, 280px) minmax(0, 1fr) auto auto;
  min-height: 94px;
  padding: 0.8rem 0;
}

.staff-record-row.request {
  grid-template-columns: auto minmax(220px, 1.5fr) minmax(165px, 0.9fr) auto auto auto auto;
}

.staff-record-row:last-child {
  border-bottom: 0;
}

.staff-record-avatar {
  align-items: center;
  background: var(--records-soft);
  border-radius: 12px;
  color: var(--records-color);
  display: inline-flex;
  font-size: 0.85rem;
  font-weight: 850;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.staff-record-primary,
.staff-record-detail {
  min-width: 0;
}

.staff-record-primary small,
.staff-record-detail small {
  color: #8a97a9;
  display: block;
  font-size: 0.52rem;
  font-weight: 760;
  letter-spacing: 0.035em;
}

.staff-record-primary strong,
.staff-record-detail strong {
  color: #243047;
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  margin: 0.15rem 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-record-primary p,
.staff-record-detail p {
  color: #7f8da0;
  font-size: 0.57rem;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-record-status {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.55rem;
  font-weight: 800;
  gap: 0.3rem;
  justify-content: center;
  padding: 0.38rem 0.52rem;
  justify-self: end;
  white-space: nowrap;
}

.staff-record-status.complete {
  background: #e7f8ee;
  color: #118346;
}

.staff-record-status.warning {
  background: #fff1f2;
  color: #d51b2d;
}

.staff-record-status.active {
  background: #eaf2ff;
  color: #1e56c5;
}

.staff-record-status.quoted {
  background: #f2ecff;
  color: #7134d3;
}

.staff-record-row time,
.staff-record-approved-by {
  color: #8a97a9;
  font-size: 0.56rem;
  white-space: nowrap;
}

.staff-record-approved-by {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.staff-record-quote-count {
  text-align: center;
}

.staff-record-quote-count strong,
.staff-record-quote-count small {
  display: block;
}

.staff-record-quote-count strong {
  color: #243047;
  font-size: 0.75rem;
}

.staff-record-quote-count small {
  color: #8996a8;
  font-size: 0.5rem;
}

.staff-record-action {
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--records-color) 45%, #dfe6ef);
  border-radius: 9px;
  color: var(--records-color);
  display: inline-flex;
  font-size: 0.58rem;
  font-weight: 800;
  gap: 0.35rem;
  justify-content: center;
  min-height: 34px;
  padding: 0.45rem 0.65rem;
  text-decoration: none;
  white-space: nowrap;
}

.staff-record-action:hover {
  background: var(--records-color);
  color: #fff;
}

button.staff-record-action {
  background: #fff;
  cursor: pointer;
}

.staff-business-notification-modal {
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 55px rgba(15, 23, 42, 0.18);
  overflow: hidden;
}

.staff-business-notification-modal .modal-header {
  align-items: flex-start;
  border-bottom: 1px solid #e9eef4;
  padding: 1.15rem 1.2rem;
}

.staff-business-notification-modal .modal-header small {
  color: #8a97a9;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.staff-business-notification-modal .modal-header h2 {
  color: #1d2939;
  font-size: 1rem;
  font-weight: 850;
  margin: 0.25rem 0 0;
}

.staff-business-notification-modal .modal-body {
  display: grid;
  gap: 0.8rem;
  padding: 1.2rem;
}

.staff-notification-channel {
  align-items: flex-start;
  background: #f8fafc;
  border: 1px solid #e8edf4;
  border-radius: 12px;
  display: flex;
  gap: 0.7rem;
  padding: 0.8rem;
}

.staff-notification-channel > span {
  align-items: center;
  border-radius: 9px;
  display: inline-flex;
  flex: 0 0 auto;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.staff-notification-channel.email > span { background: #eaf2ff; color: #1f5bd7; }
.staff-notification-channel.whatsapp > span { background: #e7f8ee; color: #118346; }
.staff-notification-channel div { min-width: 0; }
.staff-notification-channel small,
.staff-notification-channel label,
.staff-notification-channel strong,
.staff-notification-channel p { display: block; }
.staff-notification-channel small,
.staff-notification-channel label { color: #8794a6; font-size: 0.55rem; font-weight: 750; }
.staff-notification-channel strong { color: #27364a; font-size: 0.72rem; margin-top: 0.15rem; overflow-wrap: anywhere; }
.staff-notification-channel p { color: #718096; font-size: 0.58rem; line-height: 1.4; margin: 0.22rem 0 0; }

.staff-notification-edit > div { flex: 1 1 auto; }

.staff-notification-edit input {
  background: #fff;
  border: 1px solid #d7e0eb;
  border-radius: 8px;
  color: #27364a;
  display: block;
  font-size: 0.72rem;
  font-weight: 750;
  margin-top: 0.18rem;
  outline: none;
  padding: 0.42rem 0.55rem;
  width: 100%;
}

.staff-notification-edit input:focus { border-color: #16844a; box-shadow: 0 0 0 3px rgba(22, 132, 74, 0.12); }

.staff-notification-edit button {
  align-self: center;
  background: #118346;
  border: 0;
  border-radius: 8px;
  color: #fff;
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 800;
  padding: 0.48rem 0.65rem;
}

.staff-notification-edit button:hover { background: #0b6937; }

.staff-business-actions { align-items: center; display: flex; gap: 0.45rem; justify-self: end; }
.staff-business-record > .staff-business-actions { grid-column: 5 / -1; grid-row: 1; }
.staff-record-action.performance { --records-color: #6b3bd2; }

.staff-performance-page { padding: 2.2rem 0 4rem; }
.staff-performance-hero { align-items: center; background: linear-gradient(135deg, #111d37, #273e71); border: 1px solid #354f86; border-radius: 20px; color: #fff; display: grid; gap: 1rem; grid-template-columns: auto minmax(0, 1fr) auto; margin-top: 1rem; overflow: hidden; padding: 1.5rem; position: relative; }
.staff-performance-hero > span { align-items: center; background: rgba(96, 165, 250, 0.18); border: 1px solid rgba(191, 219, 254, 0.28); border-radius: 14px; display: inline-flex; font-size: 1.5rem; height: 52px; justify-content: center; width: 52px; }
.staff-performance-hero small, .staff-performance-sales > header small { color: #a5c7ff; font-size: 0.57rem; font-weight: 850; letter-spacing: 0.09em; }
.staff-performance-hero h1 { font-size: 1.25rem; font-weight: 850; margin: 0.28rem 0; }
.staff-performance-hero p { color: #c9d9f4; font-size: 0.72rem; margin: 0; }
.staff-performance-hero mark { background: rgba(34, 197, 94, 0.16); border: 1px solid rgba(134, 239, 172, 0.35); border-radius: 999px; color: #bbf7d0; font-size: 0.65rem; font-weight: 800; padding: 0.48rem 0.65rem; }
.staff-performance-kpis { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1rem; }
.staff-performance-kpis article { align-items: center; background: #fff; border: 1px solid #e4eaf2; border-radius: 16px; box-shadow: 0 10px 28px rgba(28, 45, 77, 0.06); display: flex; gap: 0.85rem; min-height: 120px; padding: 1rem; }
.staff-performance-kpis article > span { align-items: center; border-radius: 12px; display: inline-flex; flex: 0 0 auto; font-size: 1.1rem; height: 42px; justify-content: center; width: 42px; }
.staff-performance-kpis .quotes > span { background: #f0eafe; color: #7638d1; }.staff-performance-kpis .pieces > span { background: #fff3df; color: #d97706; }.staff-performance-kpis .sales > span { background: #e5f8ef; color: #0d8a4a; }
.staff-performance-kpis small { color: #7d8ba1; display: block; font-size: 0.59rem; font-weight: 800; }.staff-performance-kpis strong { color: #17243a; display: block; font-size: 1.45rem; font-weight: 850; line-height: 1.12; margin-top: 0.14rem; }.staff-performance-kpis p { color: #8b98aa; font-size: 0.59rem; line-height: 1.35; margin: 0.25rem 0 0; }
.staff-performance-sales { background: #fff; border: 1px solid #e4eaf2; border-radius: 16px; box-shadow: 0 10px 28px rgba(28, 45, 77, 0.06); margin-top: 1rem; overflow: hidden; }.staff-performance-sales > header { align-items: center; border-bottom: 1px solid #edf1f6; display: flex; justify-content: space-between; padding: 1rem 1.15rem; }.staff-performance-sales > header h2 { color: #1d2939; font-size: 0.9rem; font-weight: 850; margin: 0.22rem 0 0; }.staff-performance-sales > header > span { background: #edf8f1; border-radius: 999px; color: #128047; font-size: 0.6rem; font-weight: 800; padding: 0.35rem 0.55rem; }.staff-performance-sales article { align-items: center; border-bottom: 1px solid #edf1f6; display: grid; gap: 0.7rem; grid-template-columns: auto minmax(0, 1fr) auto; padding: 0.85rem 1.15rem; }.staff-performance-sales article:last-child { border-bottom: 0; }.staff-performance-sales article > span { align-items: center; background: #e7f8ee; border-radius: 50%; color: #0c8548; display: inline-flex; height: 30px; justify-content: center; width: 30px; }.staff-performance-sales article small { color: #8290a4; display: block; font-size: 0.55rem; font-weight: 750; }.staff-performance-sales article strong { color: #2b3a50; display: block; font-size: 0.7rem; margin-top: 0.16rem; }.staff-performance-sales article p { color: #92a0b1; font-size: 0.57rem; margin: 0.16rem 0 0; }.staff-performance-sales article b { color: #13814a; font-size: 0.78rem; }.staff-performance-sales article b small { display: inline; font-size: 0.48rem; }.staff-performance-empty { align-items: center; color: #8b98aa; display: flex; flex-direction: column; padding: 2.8rem 1rem; text-align: center; }.staff-performance-empty i { color: #a9b6c8; font-size: 1.5rem; }.staff-performance-empty strong { color: #536278; font-size: 0.72rem; margin-top: 0.5rem; }.staff-performance-empty p { font-size: 0.6rem; margin: 0.22rem 0 0; }

.staff-notification-state {
  align-items: center;
  border-radius: 9px;
  display: flex;
  font-size: 0.62rem;
  font-weight: 800;
  gap: 0.4rem;
  padding: 0.7rem 0.8rem;
}

.staff-notification-state.enabled { background: #e7f8ee; color: #118346; }
.staff-notification-state.disabled { background: #fff1f2; color: #d51b2d; }

.staff-records-empty {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 3.5rem 1rem;
  text-align: center;
}

.staff-records-empty > span {
  align-items: center;
  background: #f1f4f8;
  border-radius: 50%;
  color: #7e8ca0;
  display: inline-flex;
  font-size: 1.35rem;
  height: 54px;
  justify-content: center;
  width: 54px;
}

.staff-records-empty h2 {
  color: #243047;
  font-size: 0.9rem;
  margin: 0.7rem 0 0.2rem;
}

.staff-records-empty p {
  color: #8996a8;
  font-size: 0.65rem;
  margin: 0;
}

.staff-records-pagination {
  align-items: center;
  display: flex;
  gap: 0.65rem;
  justify-content: center;
  margin-top: 1rem;
}

.staff-records-pagination a,
.staff-records-pagination span,
.staff-records-pagination strong {
  border-radius: 9px;
  font-size: 0.61rem;
  font-weight: 750;
  padding: 0.52rem 0.7rem;
  text-decoration: none;
}

.staff-records-pagination a {
  background: #fff;
  border: 1px solid #dfe6ef;
  color: #344054;
}

.staff-records-pagination span {
  color: #a2adbc;
}

.staff-records-pagination strong {
  background: #182334;
  color: #fff;
}

.staff-attention-banner > span {
  align-items: center;
  background: #ef1d2f;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.staff-attention-banner strong {
  color: #b71324;
  display: block;
  font-size: 0.72rem;
}

.staff-attention-banner p {
  color: #8d6670;
  font-size: 0.62rem;
  margin: 0.1rem 0 0;
}

.staff-dashboard-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.8fr);
}

.staff-dashboard-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #dfe6ef;
  border-radius: 17px;
  box-shadow: 0 14px 38px rgba(15, 23, 42, 0.045);
  min-width: 0;
  padding: 1rem;
}

.staff-dashboard-card > header {
  align-items: center;
  border-bottom: 1px solid #e9eef4;
  display: flex;
  gap: 0.8rem;
  justify-content: space-between;
  padding-bottom: 0.85rem;
}

.staff-dashboard-card > header > div {
  align-items: center;
  display: flex;
  gap: 0.65rem;
}

.staff-dashboard-card > header > div > span {
  align-items: center;
  background: #fff0f2;
  border-radius: 10px;
  color: #ef1d2f;
  display: inline-flex;
  flex: 0 0 auto;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.staff-dashboard-card h2 {
  color: #172033;
  font-size: 0.82rem;
  font-weight: 850;
  margin: 0;
}

.staff-dashboard-card header p {
  color: #8794a6;
  font-size: 0.59rem;
  margin: 0.12rem 0 0;
}

.staff-dashboard-card header > small {
  background: #f3f6fa;
  border-radius: 999px;
  color: #718096;
  font-size: 0.58rem;
  font-weight: 750;
  padding: 0.32rem 0.55rem;
  white-space: nowrap;
}

.staff-business-list > article {
  align-items: center;
  border-bottom: 1px solid #edf1f6;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  min-height: 64px;
  padding: 0.65rem 0.15rem;
}

.staff-business-list > article:last-child {
  border-bottom: 0;
}

.staff-business-avatar {
  align-items: center;
  background: #182334;
  border-radius: 10px;
  color: #fff;
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 850;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.staff-business-copy {
  min-width: 0;
}

.staff-business-copy strong,
.staff-business-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-business-copy strong {
  color: #273449;
  font-size: 0.7rem;
}

.staff-business-copy small,
.staff-business-list time {
  color: #8996a8;
  font-size: 0.57rem;
}

.staff-document-state {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: 0.56rem;
  font-weight: 750;
  gap: 0.3rem;
  padding: 0.32rem 0.48rem;
}

.staff-document-state.ready {
  background: #eaf9f1;
  color: #138045;
}

.staff-document-state.missing {
  background: #fff1f2;
  color: #d51b2d;
}

.staff-business-review-button {
  align-items: center;
  background: #fff;
  border: 1px solid #ef233c;
  border-radius: 8px;
  color: #e71931;
  display: inline-flex;
  font-size: 0.59rem;
  font-weight: 800;
  gap: 0.35rem;
  justify-content: center;
  min-height: 32px;
  padding: 0.45rem 0.7rem;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
  white-space: nowrap;
}

.staff-business-review-button:hover {
  background: #ef233c;
  color: #fff;
  transform: translateY(-1px);
}

.staff-business-review-modal {
  --bs-modal-width: 920px;
}

.staff-business-review-modal .modal-dialog {
  padding: 0.75rem;
}

.staff-business-review-modal .modal-content {
  background: #f8fafc;
  border: 0;
  border-radius: 22px;
  box-shadow: 0 24px 80px rgb(15 23 42 / 24%);
  overflow: hidden;
}

.staff-review-modal-header {
  align-items: flex-start;
  background:
    radial-gradient(circle at 92% 5%, rgb(239 35 60 / 12%), transparent 34%),
    #fff;
  border-bottom: 1px solid #e7edf4;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 1.35rem 1.5rem 1.2rem;
}

.staff-review-modal-title {
  align-items: flex-start;
  display: flex;
  gap: 0.85rem;
}

.staff-review-modal-title > span,
.staff-review-section-heading > span {
  align-items: center;
  background: #fff0f2;
  border: 1px solid #ffd7dd;
  border-radius: 13px;
  color: #ef233c;
  display: inline-flex;
  flex: 0 0 auto;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.staff-review-modal-title small {
  color: #ef233c;
  display: block;
  font-size: 0.62rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  margin-bottom: 0.16rem;
}

.staff-review-modal-title h2 {
  color: #101828;
  font-size: 1.35rem;
  font-weight: 850;
  letter-spacing: -0.025em;
  margin: 0;
}

.staff-review-modal-title p,
.staff-review-section-heading p,
.staff-review-modal-footer p {
  color: #718096;
  font-size: 0.72rem;
  margin: 0.18rem 0 0;
}

.staff-review-modal-heading-actions {
  align-items: center;
  display: flex;
  gap: 0.75rem;
}

.staff-review-pending-badge {
  align-items: center;
  background: #fff7e6;
  border: 1px solid #ffe1a6;
  border-radius: 999px;
  color: #a65d00;
  display: inline-flex;
  font-size: 0.64rem;
  font-weight: 800;
  gap: 0.32rem;
  padding: 0.4rem 0.65rem;
  white-space: nowrap;
}

.staff-review-modal-body {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.85fr);
  padding: 1rem;
}

.staff-review-information,
.staff-review-requirements {
  background: #fff;
  border: 1px solid #e3eaf2;
  border-radius: 16px;
  padding: 1.05rem;
}

.staff-review-section-heading {
  align-items: center;
  display: flex;
  gap: 0.7rem;
  margin-bottom: 0.9rem;
}

.staff-review-section-heading > span {
  border-radius: 10px;
  height: 36px;
  width: 36px;
}

.staff-review-section-heading h3 {
  color: #1d2939;
  font-size: 0.85rem;
  font-weight: 820;
  margin: 0;
}

.staff-review-data-grid {
  display: grid;
  gap: 0.58rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.staff-review-data-grid > div {
  background: #f8fafc;
  border: 1px solid #e7edf4;
  border-radius: 10px;
  min-width: 0;
  padding: 0.65rem 0.72rem;
}

.staff-review-data-grid .staff-review-address {
  grid-column: 1 / -1;
}

.staff-review-data-grid dt {
  color: #718096;
  font-size: 0.59rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.staff-review-data-grid dt span {
  background: #e9eef5;
  border-radius: 999px;
  color: #718096;
  font-size: 0.5rem;
  margin-left: 0.2rem;
  padding: 0.12rem 0.3rem;
}

.staff-review-data-grid dd {
  color: #1d2939;
  font-size: 0.7rem;
  font-weight: 760;
  margin: 0;
  overflow-wrap: anywhere;
}

.staff-review-document-card {
  align-items: center;
  border: 1px solid;
  border-radius: 12px;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin-top: 0.8rem;
  padding: 0.75rem;
}

.staff-review-document-card.ready {
  background: #f1fcf6;
  border-color: #bcebd0;
}

.staff-review-document-card.missing {
  background: #fff5f6;
  border-color: #ffcbd2;
}

.staff-review-document-card > span {
  align-items: center;
  background: #fff;
  border-radius: 9px;
  color: #16a05d;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  width: 34px;
}

.staff-review-document-card.missing > span {
  color: #e71931;
}

.staff-review-document-card small,
.staff-review-document-card strong,
.staff-review-document-card p {
  display: block;
  margin: 0;
}

.staff-review-document-card small {
  color: #718096;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.staff-review-document-card strong {
  color: #1d2939;
  font-size: 0.68rem;
  margin-top: 0.12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-review-document-card p {
  color: #718096;
  font-size: 0.54rem;
  margin-top: 0.12rem;
}

.staff-review-document-card a {
  align-items: center;
  background: #fff;
  border: 1px solid #bed7c9;
  border-radius: 8px;
  color: #147a48;
  display: inline-flex;
  font-size: 0.57rem;
  font-weight: 800;
  gap: 0.28rem;
  padding: 0.45rem 0.58rem;
  text-decoration: none;
  white-space: nowrap;
}

.staff-review-requirements ul {
  display: grid;
  gap: 0.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.staff-review-requirements li {
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e7edf4;
  border-radius: 9px;
  display: grid;
  gap: 0.48rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 0.52rem;
}

.staff-review-requirements li > span {
  align-items: center;
  border-radius: 50%;
  display: inline-flex;
  font-size: 0.55rem;
  height: 22px;
  justify-content: center;
  width: 22px;
}

.staff-review-requirements li.complete > span {
  background: #dff8e9;
  color: #0d8b4b;
}

.staff-review-requirements li.missing > span {
  background: #ffe7ea;
  color: #d51b2d;
}

.staff-review-requirements li strong {
  color: #344054;
  font-size: 0.61rem;
  font-weight: 730;
}

.staff-review-requirements li small {
  font-size: 0.52rem;
  font-weight: 760;
}

.staff-review-requirements li.complete small {
  color: #0d8b4b;
}

.staff-review-requirements li.missing small {
  color: #d51b2d;
}

.staff-review-result {
  align-items: flex-start;
  border-radius: 11px;
  display: flex;
  gap: 0.6rem;
  margin-top: 0.75rem;
  padding: 0.7rem;
}

.staff-review-result.ready {
  background: #e9faf1;
  color: #0b7a42;
}

.staff-review-result.missing {
  background: #fff1f2;
  color: #bc182a;
}

.staff-review-result > span {
  font-size: 1rem;
}

.staff-review-result strong {
  display: block;
  font-size: 0.67rem;
}

.staff-review-result p {
  color: currentColor;
  font-size: 0.55rem;
  margin: 0.12rem 0 0;
  opacity: 0.8;
}

.staff-review-modal-footer {
  align-items: center;
  background: #fff;
  border-top: 1px solid #e3eaf2;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0.85rem 1.25rem;
}

.staff-review-modal-footer small {
  color: #344054;
  font-size: 0.61rem;
  font-weight: 740;
}

.staff-review-modal-actions {
  align-items: center;
  display: flex;
  gap: 0.55rem;
}

.staff-review-modal-actions form {
  margin: 0;
}

.staff-review-modal-actions .btn {
  border-radius: 9px;
  font-size: 0.65rem;
  font-weight: 800;
  min-height: 38px;
  padding: 0.55rem 0.85rem;
}

.staff-approve-business-button {
  background: #ef233c;
  box-shadow: 0 8px 22px rgb(239 35 60 / 22%);
  color: #fff;
}

.staff-approve-business-button:hover:not(:disabled) {
  background: #d9162e;
  color: #fff;
}

.staff-approve-business-button:disabled {
  background: #d7dee7;
  box-shadow: none;
  color: #8895a7;
  cursor: not-allowed;
}

.staff-platform-summary dl {
  margin: 0;
}

.staff-platform-summary dl > div {
  align-items: center;
  border-bottom: 1px solid #edf1f6;
  display: flex;
  justify-content: space-between;
  min-height: 49px;
}

.staff-platform-summary dl > div:last-child {
  border: 0;
}

.staff-platform-summary dt {
  color: #718096;
  font-size: 0.63rem;
  font-weight: 650;
}

.staff-platform-summary dd {
  color: #172033;
  font-size: 0.78rem;
  font-weight: 850;
  margin: 0;
}

.staff-recent-requests {
  grid-column: 1 / -1;
}

.staff-request-row {
  align-items: center;
  border-bottom: 1px solid #edf1f6;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: minmax(190px, 1.35fr) minmax(150px, 1fr) 0.55fr 0.5fr 0.55fr;
  min-height: 60px;
  padding: 0.55rem 0.2rem;
}

.staff-request-row.heading {
  color: #96a2b2;
  font-size: 0.55rem;
  font-weight: 750;
  min-height: 38px;
  text-transform: uppercase;
}

.staff-request-link {
  color: inherit;
  text-decoration: none;
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.staff-request-link:hover,
.staff-request-link:focus-visible {
  background: #f8fbff;
  box-shadow: inset 3px 0 0 #ef233c;
  outline: none;
}

.staff-request-link:active {
  transform: translateY(1px);
}

.staff-quote-review-link {
  align-items: center;
  display: inline-flex;
  gap: 0.42rem;
  justify-content: center;
  text-decoration: none;
  white-space: nowrap;
}

.staff-quote-review-page {
  min-height: calc(100vh - 150px);
  padding: clamp(1.4rem, 3vw, 2.8rem) 0;
}

.staff-quote-review-page > .container {
  max-width: 1220px;
}

.staff-quote-review-header {
  align-items: flex-end;
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
  margin: 1rem 0 1.25rem;
}

.staff-quote-review-header h1 {
  color: #111b2d;
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
  font-weight: 850;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 0 0 0.35rem;
}

.staff-quote-review-header p {
  color: #718096;
  font-size: 0.75rem;
  margin: 0;
}

.staff-readonly-badge {
  align-items: center;
  background: #edf4ff;
  border: 1px solid #d6e4ff;
  border-radius: 999px;
  color: #2459bd;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 800;
  gap: 0.38rem;
  padding: 0.48rem 0.72rem;
}

.staff-quote-review-grid {
  align-items: start;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.7fr);
}

.staff-quote-review-card {
  background: #fff;
  border: 1px solid #dfe6ef;
  border-radius: 18px;
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.055);
  min-width: 0;
  overflow: hidden;
  padding: 1.1rem;
}

.staff-quote-review-card > header {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.staff-quote-review-icon {
  align-items: center;
  background: #e8fbf6;
  border-radius: 12px;
  color: #0e9f78;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1rem;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.staff-quote-review-icon.business {
  background: #fff0f2;
  color: #ef1d2f;
}

.staff-quote-review-card > header small {
  color: #ef1d2f;
  display: block;
  font-size: 0.56rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.staff-quote-review-card > header h2 {
  color: #172033;
  font-size: 1rem;
  font-weight: 850;
  margin: 0.08rem 0;
}

.staff-quote-review-card > header p {
  color: #8290a4;
  font-size: 0.62rem;
  margin: 0;
}

.staff-quote-request-summary {
  align-items: center;
  background: linear-gradient(135deg, #f3f7fc, #f8fafc);
  border: 1px solid #dce5f0;
  border-radius: 14px;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin-bottom: 1rem;
  padding: 0.8rem;
}

.staff-quote-request-summary > span {
  align-items: center;
  background: #fff0f2;
  border-radius: 11px;
  color: #ef1d2f;
  display: inline-flex;
  height: 40px;
  justify-content: center;
  width: 40px;
}

.staff-quote-request-summary small,
.staff-quote-request-summary strong,
.staff-quote-request-summary p {
  display: block;
}

.staff-quote-request-summary small {
  color: #8b98aa;
  font-size: 0.54rem;
  font-weight: 750;
  text-transform: uppercase;
}

.staff-quote-request-summary strong {
  color: #172033;
  font-size: 0.8rem;
}

.staff-quote-request-summary p {
  color: #68778c;
  font-size: 0.6rem;
  margin: 0.1rem 0 0;
}

.staff-quote-request-summary a {
  color: #ef1d2f;
  font-size: 0.6rem;
  font-weight: 800;
  text-decoration: none;
}

.staff-quote-readonly-grid,
.staff-quote-secondary-grid {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.staff-readonly-field,
.staff-quote-secondary-grid > div {
  background: #f8fafc;
  border: 1px solid #dfe6ef;
  border-radius: 11px;
  min-height: 66px;
  padding: 0.65rem 0.75rem;
}

.staff-readonly-field.full,
.staff-quote-secondary-grid > div.full {
  grid-column: 1 / -1;
}

.staff-readonly-field small,
.staff-quote-secondary-grid small {
  color: #7e8ca0;
  display: block;
  font-size: 0.57rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.staff-readonly-field strong,
.staff-quote-secondary-grid strong {
  color: #172033;
  display: block;
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}

.staff-readonly-field.price strong {
  font-size: 1.05rem;
}

.staff-readonly-field.price strong span {
  color: #7d8a9d;
  font-size: 0.55rem;
  margin-left: 0.2rem;
}

.staff-readonly-field.tax {
  background: linear-gradient(135deg, #fffaf0, #fffdf8);
  border-color: #f2dca8;
}

.staff-readonly-field.tax small {
  color: #8a681e;
}

.staff-readonly-field.tax strong {
  color: #b06d00;
  font-size: 0.9rem;
}

.staff-readonly-field.tax strong span {
  color: #9a845d;
  font-size: 0.55rem;
  margin-left: 0.2rem;
}

.staff-quote-status-grid {
  display: grid;
  gap: 0.7rem;
  margin: 0.7rem 0;
}

.staff-quote-status-card {
  align-items: center;
  border: 1px solid #dfe6ef;
  border-radius: 12px;
  display: grid;
  gap: 0.65rem;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 76px;
  padding: 0.65rem 0.75rem;
}

.staff-quote-status-card > span {
  align-items: center;
  border-radius: 10px;
  display: inline-flex;
  font-size: 0.85rem;
  height: 38px;
  justify-content: center;
  width: 38px;
}

.staff-quote-status-card > span.available {
  background: #fff4d7;
  color: #d99500;
}

.staff-quote-status-card > span.warranty {
  background: #eaf7ff;
  color: #0d86c8;
}

.staff-quote-status-card small {
  color: #8794a6;
  display: block;
  font-size: 0.54rem;
}

.staff-quote-status-card strong {
  color: #172033;
  display: block;
  font-size: 0.7rem;
}

.staff-quote-status-card p {
  color: #76859a;
  font-size: 0.57rem;
  margin: 0.08rem 0 0;
}

.staff-quote-status-card > .state {
  color: #a6b1c0;
  font-size: 0.8rem;
}

.staff-quote-status-card.enabled > .state {
  color: #18a95c;
}

.staff-business-review-name {
  align-items: center;
  background: linear-gradient(135deg, #fff4f5, #fff);
  border: 1px solid #ffd9dd;
  border-radius: 13px;
  display: flex;
  gap: 0.7rem;
  margin-bottom: 0.8rem;
  padding: 0.75rem;
}

.staff-business-review-name > span {
  align-items: center;
  background: #172033;
  border-radius: 11px;
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.9rem;
  font-weight: 850;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.staff-business-review-name small {
  color: #8996a8;
  display: block;
  font-size: 0.54rem;
}

.staff-business-review-name strong {
  color: #172033;
  display: block;
  font-size: 0.75rem;
  margin: 0.06rem 0 0.2rem;
}

.staff-business-review-name mark {
  background: #eaf9f1;
  border-radius: 999px;
  color: #138045;
  font-size: 0.52rem;
  font-weight: 750;
  padding: 0.23rem 0.42rem;
}

.staff-business-review-name mark.state-pendiente {
  background: #fff4d7;
  color: #9b6900;
}

.staff-business-review-name mark.state-rechazado {
  background: #fff0f2;
  color: #c91c2e;
}

.staff-business-private-list {
  margin: 0;
}

.staff-business-private-list > div {
  border-bottom: 1px solid #edf1f6;
  padding: 0.75rem 0.2rem;
}

.staff-business-private-list > div:last-child {
  border-bottom: 0;
}

.staff-business-private-list dt {
  color: #7d8a9d;
  font-size: 0.56rem;
  font-weight: 700;
  margin-bottom: 0.18rem;
}

.staff-business-private-list dt i {
  color: #ef1d2f;
  margin-right: 0.25rem;
}

.staff-business-private-list dd {
  color: #172033;
  font-size: 0.7rem;
  font-weight: 750;
  margin: 0;
  overflow-wrap: anywhere;
}

.staff-business-private-list dd small {
  background: #f1f5f9;
  border-radius: 999px;
  color: #607086;
  display: inline-block;
  font-size: 0.52rem;
  margin-left: 0.3rem;
  padding: 0.2rem 0.38rem;
}

.staff-private-data-notice {
  align-items: flex-start;
  background: #edf4ff;
  border-radius: 11px;
  color: #2459bd;
  display: flex;
  gap: 0.55rem;
  margin-top: 0.8rem;
  padding: 0.7rem;
}

.staff-private-data-notice > i {
  flex: 0 0 auto;
  margin-top: 0.08rem;
}

.staff-private-data-notice p {
  margin: 0;
}

.staff-private-data-notice strong,
.staff-private-data-notice span {
  display: block;
}

.staff-private-data-notice strong {
  font-size: 0.61rem;
}

.staff-private-data-notice span {
  color: #6380b2;
  font-size: 0.55rem;
  line-height: 1.4;
  margin-top: 0.1rem;
}

.staff-conversation-log {
  background: #fff;
  border: 1px solid #dfe6ef;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(23, 32, 51, 0.045);
  margin-top: 1rem;
  overflow: hidden;
  position: relative;
}

.staff-conversation-log::before {
  background: linear-gradient(180deg, #ef1d2f, #ff5a69);
  content: "";
  inset: 0 auto 0 0;
  position: absolute;
  width: 4px;
}

.staff-conversation-log > summary {
  align-items: center;
  background:
    radial-gradient(circle at 8% 0%, rgba(239, 29, 47, 0.055), transparent 16rem),
    #fff;
  border-bottom: 1px solid #e8edf4;
  cursor: pointer;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  list-style: none;
  min-height: 70px;
  padding: 0.72rem 1rem 0.72rem 1.2rem;
  transition: background-color 160ms ease;
  user-select: none;
}

.staff-conversation-log:not([open]) > summary {
  border-bottom-color: transparent;
}

.staff-conversation-log > summary:hover {
  background-color: #fbfcfe;
}

.staff-conversation-log > summary::-webkit-details-marker {
  display: none;
}

.staff-conversation-log > summary:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(36, 89, 189, 0.22);
  outline: none;
}

.staff-conversation-controls {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 0.6rem;
}

.staff-conversation-title {
  align-items: center;
  display: flex;
  gap: 0.75rem;
}

.staff-conversation-title > span {
  align-items: center;
  background: linear-gradient(145deg, #ef1d2f, #ff4e60);
  border-radius: 13px;
  box-shadow: 0 8px 18px rgba(239, 29, 47, 0.2);
  color: #fff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 1rem;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.staff-conversation-title small {
  color: #ef1d2f;
  display: block;
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.staff-conversation-title h2 {
  color: #172033;
  font-size: 0.94rem;
  font-weight: 850;
  letter-spacing: -0.015em;
  margin: 0.08rem 0 0.15rem;
}

.staff-conversation-title p {
  color: #8290a4;
  font-size: 0.61rem;
  margin: 0;
}

.staff-conversation-available {
  color: #16854a;
  font-weight: 750;
}

.staff-conversation-available i {
  font-size: 0.52rem;
  margin-right: 0.18rem;
}

.staff-conversation-separator {
  color: #c1cad6;
  margin: 0 0.3rem;
}

.staff-only-badge {
  align-items: center;
  background: #eef4ff;
  border-radius: 999px;
  color: #2459bd;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.58rem;
  font-weight: 800;
  gap: 0.35rem;
  padding: 0.4rem 0.65rem;
}

.staff-conversation-toggle {
  align-items: center;
  background: #fff1f3;
  border: 1px solid #ffd4d9;
  border-radius: 10px;
  color: #d81d30;
  display: inline-flex;
  font-size: 0.6rem;
  font-weight: 800;
  gap: 0.38rem;
  min-height: 38px;
  padding: 0.48rem 0.65rem;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.staff-conversation-log > summary:hover .staff-conversation-toggle {
  background: #ef1d2f;
  border-color: #ef1d2f;
  color: #fff;
}

.staff-conversation-toggle .when-open {
  display: none;
}

.staff-conversation-chevron {
  margin-left: 0.12rem;
  transition: transform 180ms ease;
}

.staff-conversation-log[open] .staff-conversation-toggle .when-closed {
  display: none;
}

.staff-conversation-log[open] .staff-conversation-toggle .when-open {
  display: inline;
}

.staff-conversation-log[open] .staff-conversation-chevron {
  transform: rotate(180deg);
}

.staff-conversation-messages {
  background:
    linear-gradient(rgba(248, 250, 253, 0.94), rgba(248, 250, 253, 0.94)),
    radial-gradient(circle at 10% 10%, #fff, #edf3f9);
  display: grid;
  gap: 0.75rem;
  max-height: 520px;
  overflow-y: auto;
  padding: 1rem;
  scrollbar-color: #cbd5e1 transparent;
  scrollbar-width: thin;
}

.staff-chat-message {
  align-items: end;
  display: flex;
  gap: 0.5rem;
  max-width: min(78%, 680px);
}

.staff-chat-message.from-customer {
  justify-self: end;
}

.staff-chat-avatar {
  align-items: center;
  background: #eaf0f7;
  border-radius: 50%;
  color: #5c6d83;
  display: inline-flex;
  flex: 0 0 auto;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.staff-chat-message.from-customer .staff-chat-avatar {
  order: 2;
}

.staff-chat-message.from-chapi .staff-chat-avatar {
  background: #fff0f2;
  color: #ef1d2f;
}

.staff-chat-bubble {
  background: #fff;
  border: 1px solid #dfe6ef;
  border-radius: 14px 14px 14px 4px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.035);
  padding: 0.65rem 0.75rem;
}

.staff-chat-message.from-customer .staff-chat-bubble {
  background: #172033;
  border-color: #172033;
  border-radius: 14px 14px 4px;
  color: #fff;
}

.staff-chat-bubble small {
  color: #ef1d2f;
  display: block;
  font-size: 0.55rem;
  font-weight: 800;
  margin-bottom: 0.18rem;
}

.staff-chat-message.from-customer .staff-chat-bubble small {
  color: #a9c5ff;
}

.staff-chat-bubble p {
  font-size: 0.68rem;
  line-height: 1.5;
  margin: 0;
  overflow-wrap: anywhere;
}

.staff-conversation-empty {
  align-items: center;
  color: #8190a4;
  display: flex;
  gap: 0.7rem;
  justify-content: center;
  min-height: 130px;
  padding: 1rem;
  text-align: left;
}

.staff-conversation-empty > i {
  color: #a9b5c5;
  font-size: 1.4rem;
}

.staff-conversation-empty strong {
  color: #526176;
  display: block;
  font-size: 0.72rem;
}

.staff-conversation-empty p {
  font-size: 0.62rem;
  margin: 0.1rem 0 0;
}

.staff-request-row > span {
  color: #5d6b7f;
  font-size: 0.62rem;
  min-width: 0;
}

.staff-request-row > span:first-child strong,
.staff-request-row > span:first-child small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.staff-request-row > span:first-child strong {
  color: #273449;
  font-size: 0.67rem;
}

.staff-request-row > span:first-child small,
.staff-request-row time {
  color: #8b98aa;
  font-size: 0.55rem;
}

.staff-request-row mark {
  background: #eef3f8;
  border-radius: 999px;
  color: #607086;
  font-size: 0.55rem;
  font-weight: 750;
  padding: 0.3rem 0.48rem;
}

.staff-request-row mark.state-abierta {
  background: #eaf9f1;
  color: #138045;
}

.staff-request-row mark.state-cotizada {
  background: #edf4ff;
  color: #1f5bd7;
}

.staff-empty-state {
  align-items: center;
  color: #8090a5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 170px;
  text-align: center;
}

.staff-empty-state i {
  color: #22a65c;
  font-size: 1.8rem;
}

.staff-empty-state strong {
  color: #273449;
  font-size: 0.76rem;
  margin-top: 0.35rem;
}

.staff-empty-state p {
  font-size: 0.6rem;
  margin: 0.15rem 0 0;
}

@media (max-width: 1199.98px) {
  .staff-record-row,
  .staff-record-row.request {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }

  .staff-record-detail {
    grid-column: 2;
  }

  .staff-record-status {
    grid-column: 3;
    grid-row: 1;
  }

  .staff-record-quote-count {
    grid-column: 3;
    grid-row: 2;
  }

  .staff-record-row time {
    grid-column: 4;
    grid-row: 1;
  }

  .staff-record-action,
  .staff-record-approved-by {
    grid-column: 4;
    grid-row: 2;
    justify-self: end;
  }
}

@media (max-width: 991.98px) {
  .staff-record-row,
  .staff-record-row.request {
    gap: 0.6rem;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 0.9rem 0;
  }

  .staff-record-primary,
  .staff-record-detail {
    grid-column: 2;
  }

  .staff-record-status,
  .staff-record-quote-count,
  .staff-record-row time,
  .staff-record-action,
  .staff-record-approved-by {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-self: stretch;
  }

  .staff-record-status {
    justify-self: start;
  }

  .staff-record-quote-count {
    align-items: baseline;
    background: #f6f8fb;
    border-radius: 8px;
    display: flex;
    gap: 0.3rem;
    justify-content: center;
    padding: 0.42rem;
  }

  .staff-record-row time,
  .staff-record-approved-by {
    text-align: left;
  }

  .staff-record-action {
    width: 100%;
  }

  .staff-dashboard-header {
    align-items: start;
    flex-direction: column;
  }

  .staff-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .staff-dashboard-layout {
    grid-template-columns: 1fr;
  }

  .staff-review-modal-body {
    grid-template-columns: 1fr;
  }

  .staff-recent-requests {
    grid-column: auto;
  }

  .staff-quote-review-grid {
    grid-template-columns: 1fr;
  }

  .staff-request-table {
    display: grid;
    gap: 0.65rem;
    padding-top: 0.75rem;
  }

  .staff-request-row.heading {
    display: none;
  }

  .staff-request-row {
    background: #f8fafc;
    border: 1px solid #e7edf4;
    border-radius: 11px;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0.75rem;
  }

  .staff-request-row > span:nth-child(2) {
    grid-column: 1;
  }

  .staff-request-row > span:nth-child(3),
  .staff-request-row > span:nth-child(4),
  .staff-request-row time {
    justify-self: end;
  }
}

@media (max-width: 575.98px) {
  .staff-records-page {
    padding-top: 1.2rem;
  }

  .staff-records-hero {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 1rem;
  }

  .staff-records-count {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .staff-records-search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .staff-records-search button {
    grid-column: 1 / -1;
  }

  .staff-records-panel > header {
    align-items: flex-start;
  }

  .staff-records-list {
    padding: 0 0.85rem;
  }

  .staff-dashboard-page {
    padding-top: 1.2rem;
  }

  .staff-dashboard-header-actions {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .staff-dashboard-header-actions time,
  .staff-dashboard-header-actions a {
    justify-content: center;
    width: 100%;
  }

  .staff-metric-grid {
    grid-template-columns: 1fr;
  }

  .staff-metric-card {
    min-height: 104px;
  }

  .staff-attention-banner {
    align-items: start;
  }

  .staff-business-list > article {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .staff-document-state {
    grid-column: 2;
    justify-self: start;
  }

  .staff-business-list time {
    grid-column: 3;
    grid-row: 1;
  }

  .staff-business-review-button {
    grid-column: 2 / -1;
    justify-self: stretch;
  }

  .staff-business-review-modal .modal-dialog {
    margin: 0;
    padding: 0.5rem;
  }

  .staff-business-review-modal .modal-content {
    border-radius: 16px;
  }

  .staff-review-modal-header,
  .staff-review-modal-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .staff-review-modal-heading-actions {
    justify-content: space-between;
  }

  .staff-review-data-grid {
    grid-template-columns: 1fr;
  }

  .staff-review-data-grid .staff-review-address {
    grid-column: auto;
  }

  .staff-review-document-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .staff-review-document-card a {
    grid-column: 1 / -1;
    justify-content: center;
  }

  .staff-review-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .staff-review-modal-actions form,
  .staff-review-modal-actions .btn {
    width: 100%;
  }

  .staff-request-row {
    grid-template-columns: 1fr;
  }

  .staff-quote-review-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.75rem;
  }

  .staff-readonly-badge {
    align-self: flex-start;
  }

  .staff-quote-review-card {
    border-radius: 14px;
    padding: 0.8rem;
  }

  .staff-quote-request-summary {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .staff-quote-request-summary > a {
    grid-column: 2;
  }

  .staff-quote-readonly-grid,
  .staff-quote-secondary-grid {
    grid-template-columns: 1fr;
  }

  .staff-readonly-field.full,
  .staff-quote-secondary-grid > div.full {
    grid-column: 1;
  }

  .staff-request-row > span:nth-child(2),
  .staff-request-row > span:nth-child(3),
  .staff-request-row > span:nth-child(4),
  .staff-request-row time {
    grid-column: 1;
    justify-self: start;
  }

  .staff-conversation-log > summary {
    align-items: center;
    min-height: 66px;
    padding: 0.75rem 0.75rem 0.75rem 1rem;
  }

  .staff-conversation-title > span {
    height: 40px;
    width: 40px;
  }

  .staff-conversation-title p {
    font-size: 0.54rem;
  }

  .staff-only-badge {
    font-size: 0;
    height: 30px;
    justify-content: center;
    padding: 0;
    width: 30px;
  }

  .staff-only-badge i {
    font-size: 0.7rem;
  }

  .staff-conversation-toggle > span {
    display: none !important;
  }

  .staff-conversation-toggle {
    align-items: center;
    border: 1px solid #dce5f0;
    background: #fff1f3;
    border-color: #ffd4d9;
    border-radius: 10px;
    color: #d81d30;
    height: 30px;
    justify-content: center;
    width: 30px;
  }

  .staff-chat-message {
    max-width: 92%;
  }
}

/* chapi hero artwork */
.hero-section {
  overflow: hidden;
  padding-bottom: 3.6rem;
  position: relative;
}

.hero-section::after {
  background:
    radial-gradient(circle at 82% 42%, rgba(239, 29, 47, 0.30), transparent 30%),
    radial-gradient(circle at 92% 64%, rgba(255, 255, 255, 0.045), transparent 20%),
    linear-gradient(90deg, rgba(5, 8, 13, 0) 0 58%, rgba(239, 29, 47, 0.06) 76%, rgba(239, 29, 47, 0.12) 100%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.hero-section .container,
.hero-layout {
  position: relative;
  z-index: 1;
}

.hero-layout {
  min-height: min(690px, calc(100vh - 118px));
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-section h1 {
  font-size: clamp(3rem, 5vw, 5rem);
  line-height: 1;
  max-width: 720px;
}

.hero-copy {
  max-width: 620px;
}

.hero-art-column {
  padding-left: clamp(2rem, 4.5vw, 5.25rem);
  position: relative;
}

.chapi-hero-art {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-left: 0;
  margin-right: clamp(-5rem, -6vw, -2rem);
  min-height: 590px;
  padding: 0;
  position: relative;
}

.chapi-hero-art::before {
  background:
    radial-gradient(circle at 62% 46%, rgba(239, 29, 47, 0.28), transparent 40%),
    radial-gradient(circle at 78% 52%, rgba(255, 255, 255, 0.07), transparent 26%);
  content: "";
  filter: blur(10px);
  inset: -12% -14% -12% 4%;
  position: absolute;
}

.chapi-hero-art::after {
  display: none;
}

.chapi-hero-art img {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: block;
  filter: drop-shadow(0 34px 72px rgba(0, 0, 0, 0.48)) drop-shadow(0 0 54px rgba(239, 29, 47, 0.18));
  max-height: 670px;
  object-fit: contain;
  object-position: center right;
  position: relative;
  transform: translateX(5%) scale(1.02);
  width: min(112%, 850px);
  z-index: 1;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 100%);
}

@media (max-width: 1199.98px) {
  .hero-section h1 {
    font-size: clamp(2.8rem, 5.2vw, 4.45rem);
  }

  .chapi-hero-art {
    margin-right: -3.4rem;
    min-height: 540px;
  }

  .chapi-hero-art img {
    max-height: 600px;
    transform: translateX(4%) scale(0.98);
  }
}

@media (max-width: 991.98px) {
  .hero-art-column {
    padding-left: 0;
  }

  .hero-layout {
    min-height: 0;
  }

  .hero-section h1 {
    max-width: 680px;
  }

  .chapi-hero-art {
    justify-content: center;
    margin: 1.5rem -1rem 0;
    padding-left: 0;
    min-height: 0;
  }

  .chapi-hero-art::after {
    display: none;
  }

  .chapi-hero-art img {
    max-height: none;
    transform: none;
    width: min(108%, 780px);
  }
}

@media (max-width: 575.98px) {
  .hero-section {
    padding-bottom: 2.2rem;
  }

  .hero-section h1 {
    font-size: clamp(2.45rem, 11vw, 3.45rem);
  }

  .chapi-hero-art {
    margin-inline: -1rem;
  }

  .chapi-hero-art img {
    min-height: 290px;
    object-fit: contain;
    object-position: center;
    width: 118%;
  }
}
.staff-service-fees-page {
  min-height: 100vh;
  padding: 3rem 0 5rem;
  background: #f5f7fb;
}

.staff-service-fees-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.staff-service-fees-header h1 { margin: .45rem 0 .25rem; font-weight: 800; }
.staff-service-fees-header p { margin: 0; color: #667085; }
.staff-service-fees-back { display: inline-flex; gap: .4rem; align-items: center; margin-bottom: 1rem; color: #475467; text-decoration: none; font-weight: 700; }
.staff-service-fees-default { min-width: 130px; padding: 1rem 1.25rem; border: 1px solid #d9e0ea; border-radius: 16px; background: #fff; text-align: center; }
.staff-service-fees-default small { display: block; color: #667085; }
.staff-service-fees-default strong { font-size: 1.8rem; color: #0b8f55; }

.staff-service-fees-note {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  padding: 1rem 1.2rem;
  border: 1px solid #b8dcff;
  border-radius: 14px;
  background: #eff8ff;
  color: #175cd3;
}
.staff-service-fees-note div { display: grid; gap: .2rem; }
.staff-service-fees-note span { color: #475467; }

.staff-service-fees-search { display: flex; align-items: center; gap: .65rem; margin-bottom: 1rem; padding: .65rem .8rem; border: 1px solid #d0d5dd; border-radius: 14px; background: #fff; }
.staff-service-fees-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; }
.staff-service-fees-search button, .staff-service-fees-row button { border: 0; border-radius: 10px; background: #101828; color: #fff; font-weight: 700; padding: .65rem 1rem; }
.staff-service-fees-search a { color: #475467; font-weight: 700; text-decoration: none; }

.staff-service-fees-card { overflow: hidden; border: 1px solid #d9e0ea; border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(16, 24, 40, .06); }
.staff-service-fees-table-heading, .staff-service-fees-row { display: grid; grid-template-columns: minmax(210px, 1.5fr) minmax(120px, .75fr) minmax(125px, .7fr) minmax(140px, .8fr) minmax(125px, .7fr) minmax(110px, .6fr); align-items: center; gap: .8rem; padding: 1rem 1.25rem; }
.staff-service-fees-table-heading { background: #f9fafb; color: #667085; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.staff-service-fees-row { border-top: 1px solid #eaecf0; }
.staff-service-fees-business { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.staff-service-fees-business > span { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 12px; background: #e8f7ef; color: #087443; font-weight: 800; }
.staff-service-fees-business div { min-width: 0; display: grid; }
.staff-service-fees-business small { overflow: hidden; color: #667085; text-overflow: ellipsis; white-space: nowrap; }
.staff-service-fees-status { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .7rem; border-radius: 999px; background: #f2f4f7; color: #667085; font-size: .82rem; font-weight: 700; }
.staff-service-fees-status.active { background: #ecfdf3; color: #067647; }
.staff-service-fees-input { display: flex; align-items: center; width: 125px; border: 1px solid #d0d5dd; border-radius: 10px; background: #fff; }
.staff-service-fees-input input { width: 100%; min-width: 0; padding: .65rem .25rem .65rem .75rem; border: 0; outline: 0; background: transparent; font-weight: 800; }
.staff-service-fees-input b { padding-right: .75rem; color: #667085; }
.staff-service-fees-input.money b { padding: 0 0 0 .75rem; }
.staff-service-fees-input.money input { padding-left: .3rem; }
.staff-readonly-field.logistics { background: #f1f8ff; border-color: #cfe4fb; }
.staff-readonly-field.logistics small { color: #2875b8; }
.staff-service-fees-empty { display: grid; place-items: center; gap: .35rem; padding: 4rem 1rem; color: #667085; }
.staff-service-fees-empty i { font-size: 2rem; }

@media (max-width: 800px) {
  .staff-service-fees-header { align-items: flex-start; flex-direction: column; }
  .staff-service-fees-table-heading { display: none; }
  .staff-service-fees-row { grid-template-columns: 1fr 1fr; }
  .staff-service-fees-business { grid-column: 1 / -1; }
}

/* Staff · Conocimiento de Chapi */
.staff-part-intelligence-experience {
  background:
    radial-gradient(circle at 8% 7%, rgba(239, 35, 60, .075), transparent 24rem),
    radial-gradient(circle at 92% 2%, rgba(15, 118, 110, .07), transparent 22rem),
    #f5f7fb;
}

.part-intelligence-page {
  min-height: 100vh;
  padding: 2rem 0 4rem;
}

.part-intelligence-back {
  align-items: center;
  color: #526176;
  display: inline-flex;
  font-size: .82rem;
  font-weight: 750;
  gap: .42rem;
  margin-bottom: 1.2rem;
  text-decoration: none;
}

.part-intelligence-back:hover { color: #e11d2e; }

.part-intelligence-hero {
  align-items: center;
  background: linear-gradient(130deg, #fff 0%, #fff 65%, #fff3f5 100%);
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(20, 33, 55, .065);
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  overflow: hidden;
  padding: 1.65rem 1.8rem;
  position: relative;
}

.part-intelligence-hero::after {
  background: #ef233c;
  border-radius: 999px;
  content: "";
  height: 4px;
  left: 1.8rem;
  position: absolute;
  right: 1.8rem;
  top: 0;
}

.part-intelligence-kicker {
  align-items: center;
  color: #e11d2e;
  display: inline-flex;
  font-size: .68rem;
  font-weight: 850;
  gap: .38rem;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.part-intelligence-hero h1 {
  color: #101828;
  font-size: clamp(1.65rem, 3vw, 2.5rem);
  font-weight: 850;
  letter-spacing: -.045em;
  line-height: 1.05;
  margin: .5rem 0 .55rem;
}

.part-intelligence-hero p {
  color: #667085;
  font-size: .9rem;
  margin: 0;
  max-width: 680px;
}

.part-intelligence-metrics {
  display: grid;
  flex: 0 0 auto;
  gap: .7rem;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
}

.part-intelligence-metrics > div {
  background: rgba(255,255,255,.88);
  border: 1px solid #e5eaf1;
  border-radius: 16px;
  min-width: 130px;
  padding: .8rem 1rem;
}

.part-intelligence-metrics strong,
.part-intelligence-metrics span { display: block; }
.part-intelligence-metrics strong { color: #101828; font-size: 1.35rem; font-weight: 850; line-height: 1; }
.part-intelligence-metrics span { color: #7b8798; font-size: .64rem; font-weight: 750; margin-top: .3rem; }

.part-intelligence-flow {
  align-items: center;
  background: #102036;
  border-radius: 20px;
  box-shadow: 0 16px 34px rgba(16, 32, 54, .12);
  color: #fff;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(180px, .65fr) minmax(0, 2fr);
  margin: 1rem 0 1.35rem;
  padding: 1rem 1.15rem;
}

.part-intelligence-flow-heading { align-items: center; display: flex; gap: .7rem; }
.part-intelligence-flow-heading > span { align-items: center; background: rgba(255,255,255,.1); border-radius: 12px; color: #ff6376; display: inline-flex; height: 42px; justify-content: center; width: 42px; }
.part-intelligence-flow-heading small { color: #9fb0c4; display: block; font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.part-intelligence-flow-heading h2 { font-size: .9rem; font-weight: 800; margin: .12rem 0 0; }
.part-intelligence-flow ol { display: grid; gap: .65rem; grid-template-columns: repeat(3, 1fr); list-style: none; margin: 0; padding: 0; }
.part-intelligence-flow li { align-items: flex-start; border-left: 1px solid rgba(255,255,255,.13); display: flex; gap: .6rem; min-width: 0; padding-left: .8rem; }
.part-intelligence-flow li > span { align-items: center; background: #ef233c; border-radius: 9px; display: inline-flex; flex: 0 0 28px; font-size: .68rem; font-weight: 850; height: 28px; justify-content: center; }
.part-intelligence-flow li strong { display: block; font-size: .72rem; }
.part-intelligence-flow li p { color: #aebdcd; font-size: .6rem; line-height: 1.45; margin: .16rem 0 0; }

.part-intelligence-workspace {
  align-items: start;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(0, 1.45fr) minmax(340px, .8fr);
}

.part-family-catalog,
.part-knowledge-editor {
  background: #fff;
  border: 1px solid #e1e7ef;
  border-radius: 22px;
  box-shadow: 0 16px 38px rgba(20, 33, 55, .055);
}

.part-family-catalog { padding: 1.25rem; }
.part-family-catalog-header { align-items: center; display: flex; gap: 1rem; justify-content: space-between; }
.part-family-catalog-header small,
.part-knowledge-editor > header small { color: #e11d2e; display: block; font-size: .58rem; font-weight: 850; letter-spacing: .065em; text-transform: uppercase; }
.part-family-catalog-header h2,
.part-knowledge-editor > header h2 { color: #172033; font-size: 1.1rem; font-weight: 850; margin: .15rem 0; }
.part-family-catalog-header p,
.part-knowledge-editor > header p { color: #7b8798; font-size: .68rem; margin: 0; }
.part-family-catalog-header .btn { border-radius: 12px; flex: 0 0 auto; font-size: .72rem; font-weight: 800; padding: .65rem .85rem; }

.part-family-toolbar { align-items: center; display: flex; gap: .7rem; justify-content: space-between; margin: 1rem 0; }
.part-family-search { align-items: center; background: #f8fafc; border: 1px solid #dfe6ef; border-radius: 12px; color: #8794a6; display: flex; flex: 1 1 auto; gap: .55rem; min-width: 0; padding: .62rem .75rem; }
.part-family-search:focus-within { background: #fff; border-color: #ef8794; box-shadow: 0 0 0 3px rgba(239,35,60,.08); }
.part-family-search input { background: transparent; border: 0; color: #253248; font-size: .72rem; min-width: 0; outline: 0; width: 100%; }
.part-family-filters { background: #f3f5f8; border-radius: 11px; display: inline-flex; padding: .22rem; }
.part-family-filters button { background: transparent; border: 0; border-radius: 8px; color: #718096; font-size: .62rem; font-weight: 750; padding: .42rem .62rem; }
.part-family-filters button.active { background: #fff; box-shadow: 0 2px 7px rgba(20,33,55,.09); color: #172033; }

.part-family-list { display: grid; gap: .85rem; }
.part-family-card[hidden] { display: none !important; }
.part-family-card { border: 1px solid #e0e6ee; border-radius: 17px; overflow: hidden; padding: .95rem; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.part-family-card:hover { border-color: #f2b0b8; box-shadow: 0 12px 26px rgba(20,33,55,.07); transform: translateY(-1px); }
.part-family-card.inactive { background: #fbfcfd; opacity: .78; }
.part-family-card > header { align-items: flex-start; display: flex; gap: .8rem; justify-content: space-between; }
.part-family-card-identity { align-items: center; display: flex; gap: .7rem; min-width: 0; }
.part-family-card-icon { align-items: center; background: #fff0f2; border: 1px solid #ffe0e5; border-radius: 12px; color: #e11d2e; display: inline-flex; flex: 0 0 42px; font-size: 1rem; height: 42px; justify-content: center; }
.part-family-state { align-items: center; color: #07853c; display: inline-flex; font-size: .55rem; font-weight: 800; gap: .3rem; text-transform: uppercase; }
.part-family-state i { font-size: .36rem; }
.part-family-state.inactive { color: #8794a6; }
.part-family-card h3 { color: #182235; font-size: .94rem; font-weight: 850; margin: .1rem 0; }
.part-family-card-identity small { color: #8a96a8; display: block; font-size: .57rem; }
.part-family-edit { align-items: center; border: 1px solid #dce3ec; border-radius: 9px; color: #526176; display: inline-flex; flex: 0 0 auto; font-size: .6rem; font-weight: 750; gap: .3rem; padding: .4rem .5rem; text-decoration: none; }
.part-family-edit:hover { border-color: #ef8794; color: #e11d2e; }

.part-family-recognition { background: #f8fafc; border-radius: 11px; margin: .75rem 0; padding: .65rem .72rem; }
.part-family-recognition > span { color: #718096; display: block; font-size: .59rem; font-weight: 750; margin-bottom: .4rem; }
.part-family-recognition > div { display: flex; flex-wrap: wrap; gap: .32rem; }
.part-family-recognition mark { background: #eef4ff; border: 1px solid #dbe7ff; border-radius: 999px; color: #315ea8; font-size: .57rem; font-weight: 700; padding: .23rem .43rem; }

.part-family-requirements { display: grid; gap: .5rem; }
.part-family-requirements-heading { align-items: center; display: flex; justify-content: space-between; }
.part-family-requirements-heading span { color: #657287; font-size: .6rem; font-weight: 800; text-transform: uppercase; }
.part-family-requirements-heading strong { background: #f2f4f7; border-radius: 999px; color: #667085; font-size: .55rem; padding: .28rem .45rem; }
.part-requirement-row { align-items: center; border: 1px solid #e7ebf1; border-radius: 11px; display: grid; gap: .55rem; grid-template-columns: auto minmax(0,1fr) auto; padding: .55rem .62rem; }
.part-requirement-row.inactive { background: #fafafa; opacity: .66; }
.part-requirement-order { align-items: center; background: #fff0f2; border-radius: 8px; color: #e11d2e; display: inline-flex; font-size: .58rem; font-weight: 850; height: 29px; justify-content: center; width: 29px; }
.part-requirement-row > div > div { align-items: center; display: flex; gap: .4rem; }
.part-requirement-row strong { color: #263248; font-size: .67rem; }
.part-requirement-row > div > div span { background: #eef0f3; border-radius: 999px; color: #7b8798; font-size: .48rem; font-weight: 800; padding: .15rem .35rem; text-transform: uppercase; }
.part-requirement-row p { color: #7b8798; font-size: .58rem; line-height: 1.4; margin: .12rem 0 0; }
.part-requirement-row > a { align-items: center; border-radius: 8px; color: #69778b; display: inline-flex; height: 29px; justify-content: center; text-decoration: none; width: 29px; }
.part-requirement-row > a:hover { background: #fff0f2; color: #e11d2e; }
.part-add-requirement { align-items: center; background: transparent; border: 1px dashed #d6dee8; border-radius: 10px; color: #506078; display: flex; font-size: .61rem; font-weight: 750; gap: .4rem; justify-content: center; padding: .52rem; width: 100%; }
.part-add-requirement:hover { background: #fff7f8; border-color: #ef8794; color: #e11d2e; }
.part-requirement-empty { align-items: center; background: #fafbfc; border: 1px dashed #dce3eb; border-radius: 11px; color: #8390a2; display: flex; gap: .6rem; padding: .7rem; }
.part-requirement-empty strong { color: #4c5a6e; display: block; font-size: .65rem; }
.part-requirement-empty p { font-size: .56rem; margin: .1rem 0 0; }

.part-family-no-results,
.part-family-empty { color: #7b8798; display: grid; justify-items: center; padding: 3rem 1rem; text-align: center; }
.part-family-no-results[hidden] { display: none; }
.part-family-no-results i,
.part-family-empty > i { color: #b3bdca; font-size: 1.8rem; }
.part-family-no-results strong,
.part-family-empty h3 { color: #344054; font-size: .85rem; margin: .5rem 0 .12rem; }
.part-family-no-results p,
.part-family-empty p { font-size: .65rem; margin: 0 0 .7rem; }

.part-knowledge-editor { overflow: hidden; position: sticky; top: 88px; }
.part-knowledge-editor > header { align-items: flex-start; background: linear-gradient(135deg, #fff, #fff7f8); display: flex; gap: .7rem; padding: 1rem; }
.part-knowledge-editor > header > span { align-items: center; background: #e8faf6; border-radius: 11px; color: #087b6d; display: inline-flex; flex: 0 0 40px; height: 40px; justify-content: center; }
.part-editor-switch { background: #f1f4f7; display: grid; gap: .35rem; grid-template-columns: 1fr 1fr; margin: 0 1rem; padding: .3rem; border-radius: 12px; }
.part-editor-switch button { align-items: center; background: transparent; border: 0; border-radius: 9px; color: #718096; display: flex; gap: .5rem; padding: .55rem .62rem; text-align: left; }
.part-editor-switch button.active { background: #fff; box-shadow: 0 3px 10px rgba(20,33,55,.09); color: #172033; }
.part-editor-switch button > i { font-size: .8rem; }
.part-editor-switch button > span { font-size: .64rem; font-weight: 800; }
.part-editor-switch button small { color: #8a96a8; display: block; font-size: .49rem; font-weight: 600; margin-top: .05rem; }

.part-editor-panel { padding: 1rem; }
.part-editor-panel-heading { align-items: center; border-bottom: 1px solid #edf0f4; display: flex; gap: .6rem; margin-bottom: .8rem; padding-bottom: .7rem; }
.part-editor-panel-heading > span { align-items: center; background: #ef233c; border-radius: 9px; color: #fff; display: inline-flex; flex: 0 0 30px; font-size: .65rem; font-weight: 850; height: 30px; justify-content: center; }
.part-editor-panel-heading h3 { color: #172033; font-size: .82rem; font-weight: 850; margin: 0; }
.part-editor-panel-heading p { color: #8490a2; font-size: .56rem; margin: .12rem 0 0; }
.part-editor-tip { align-items: flex-start; background: #eef8ff; border: 1px solid #cce8ff; border-radius: 11px; color: #286493; display: flex; gap: .5rem; margin-bottom: .75rem; padding: .6rem .65rem; }
.part-editor-tip p { font-size: .56rem; line-height: 1.45; margin: 0; }
.part-editor-form { display: grid; gap: .72rem; }
.part-form-row { align-items: end; display: grid; gap: .65rem; grid-template-columns: 1fr 1fr; }
.part-form-field { min-width: 0; }
.part-form-field > label { color: #344054; display: block; font-size: .59rem; font-weight: 800; margin-bottom: .3rem; }
.part-form-field > label span { color: #98a2b3; font-size: .5rem; font-weight: 650; margin-left: .2rem; }
.part-form-field input:not([type="checkbox"]),
.part-form-field select,
.part-form-field textarea { background: #fbfcfe; border: 1px solid #dce3ec; border-radius: 10px; color: #263248; font-size: .66rem; min-height: 40px; padding: .58rem .65rem; resize: vertical; width: 100%; }
.part-form-field textarea { min-height: 76px; }
.part-form-field input:focus,
.part-form-field select:focus,
.part-form-field textarea:focus { background: #fff; border-color: #ee7181; box-shadow: 0 0 0 3px rgba(239,35,60,.08); outline: 0; }
.part-form-field.featured { background: #fff8f9; border: 1px solid #ffe0e5; border-radius: 12px; padding: .65rem; }
.part-form-field.featured textarea { background: #fff; }
.part-form-field > small { color: #8a96a8; display: block; font-size: .5rem; line-height: 1.35; margin-top: .25rem; }
.part-form-field .errorlist,
.part-form-errors .errorlist { color: #d92d20; font-size: .54rem; list-style: none; margin: .25rem 0 0; padding: 0; }
.part-form-toggle { align-items: center; background: #f8fafc; border: 1px solid #e1e7ef; border-radius: 11px; cursor: pointer; display: flex; gap: .55rem; min-height: 64px; padding: .55rem .65rem; }
.part-form-toggle input { accent-color: #e11d2e; appearance: auto; flex: 0 0 auto; height: 18px; margin: 0; min-height: 0; padding: 0; width: 18px; }
.part-form-toggle strong { color: #344054; display: block; font-size: .6rem; }
.part-form-toggle small { color: #8a96a8; display: block; font-size: .49rem; margin-top: .08rem; }
.part-editor-actions { align-items: center; border-top: 1px solid #edf0f4; display: flex; gap: .65rem; justify-content: flex-end; margin-top: .2rem; padding-top: .75rem; }
.part-editor-actions > a { color: #69778b; font-size: .57rem; font-weight: 750; margin-right: auto; text-decoration: none; }
.part-editor-actions .btn { border-radius: 10px; font-size: .66rem; font-weight: 800; padding: .58rem .8rem; }

@media (max-width: 1199.98px) {
  .part-intelligence-workspace { grid-template-columns: 1fr; }
  .part-knowledge-editor { position: static; }
}

@media (max-width: 767.98px) {
  .part-intelligence-page { padding-top: 1.2rem; }
  .part-intelligence-hero { align-items: stretch; flex-direction: column; padding: 1.3rem; }
  .part-intelligence-metrics { grid-template-columns: 1fr 1fr; }
  .part-intelligence-metrics > div { min-width: 0; }
  .part-intelligence-flow { grid-template-columns: 1fr; }
  .part-intelligence-flow ol { grid-template-columns: 1fr; }
  .part-intelligence-flow li { border-left: 0; border-top: 1px solid rgba(255,255,255,.12); padding: .6rem 0 0; }
  .part-family-catalog { padding: .9rem; }
  .part-family-catalog-header { align-items: stretch; flex-direction: column; }
  .part-family-toolbar { align-items: stretch; flex-direction: column; }
  .part-family-filters { align-self: flex-start; }
  .part-family-card > header { gap: .6rem; }
  .part-family-edit { font-size: 0; height: 34px; justify-content: center; padding: 0; width: 34px; }
  .part-family-edit i { font-size: .72rem; }
  .part-form-row { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .part-intelligence-metrics { grid-template-columns: 1fr; }
  .part-family-filters { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
  .part-family-card-identity { align-items: flex-start; }
  .part-family-card-icon { flex-basis: 36px; height: 36px; }
  .part-editor-switch button small { display: none; }
}
/* Staff · Centro de operaciones Chapi */
.chapi-ops-experience { background: #f3f6fb; color: #111827; }
body.chapi-ops-experience > footer { display: none; }
.chapi-ops-page { padding: 32px 0 64px; min-height: 100vh; background: radial-gradient(circle at 50% -10%, rgba(35, 102, 255, .08), transparent 28%), linear-gradient(180deg, #f8faff 0, #f2f5fa 100%); }
.chapi-ops-container { max-width: 1880px; padding-inline: clamp(20px, 2.6vw, 48px); }
.chapi-ops-header { display: flex; justify-content: space-between; gap: 32px; align-items: flex-end; margin-bottom: 22px; }
.chapi-ops-heading > a { display: inline-flex; align-items: center; gap: 7px; color: #62708a; font-weight: 700; font-size: .82rem; text-decoration: none; margin-bottom: 15px; }
.chapi-ops-heading > span { display: flex; align-items: center; gap: 8px; color: #f21d36; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .72rem; }
.chapi-ops-heading h1 { font-size: clamp(2rem, 3.3vw, 3.65rem); letter-spacing: -.055em; line-height: 1; margin: 8px 0 10px; font-weight: 850; color: #101828; }
.chapi-ops-heading p { margin: 0; color: #68758e; font-size: 1rem; }
.chapi-ops-header-side { width: min(680px, 48%); display: grid; gap: 10px; }
.chapi-ops-controls { display: flex; justify-content: flex-end; gap: 9px; align-items: center; }
.chapi-ops-date, .chapi-ops-export, .chapi-ops-period { background: rgba(255,255,255,.92); border: 1px solid #dde4ef; box-shadow: 0 7px 20px rgba(20,34,66,.05); border-radius: 12px; min-height: 42px; }
.chapi-ops-date, .chapi-ops-export { display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; color: #53617a; font-size: .78rem; font-weight: 750; white-space: nowrap; }
.chapi-ops-export { text-decoration: none; color: #29364d; }
.chapi-ops-period { display: flex; align-items: center; padding: 4px; }
.chapi-ops-period a { padding: 8px 11px; color: #69758c; text-decoration: none; border-radius: 9px; font-size: .72rem; font-weight: 750; white-space: nowrap; }
.chapi-ops-period a.active { color: #e71933; background: #fff0f2; }
.chapi-health-card { background: rgba(255,255,255,.95); border: 1px solid #dfe6f1; box-shadow: 0 14px 34px rgba(18,34,68,.07); border-radius: 16px; padding: 14px 17px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; }
.chapi-health-icon { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 14px; color: #ed1b35; background: #fff0f2; font-size: 1.25rem; }
.chapi-health-card div { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; }
.chapi-health-card small { grid-column: 1 / -1; color: #586781; font-weight: 700; }
.chapi-health-card strong { font-size: 1.75rem; letter-spacing: -.04em; }
.chapi-health-card div span { color: #8994a7; font-size: .68rem; }
.chapi-health-card em { font-style: normal; color: #078a57; background: #e9fbf3; border: 1px solid #bcf0d9; border-radius: 999px; padding: 7px 10px; font-size: .68rem; font-weight: 800; white-space: nowrap; }
.chapi-ops-primary-grid { display: grid; grid-template-columns: minmax(250px, .75fr) minmax(610px, 2fr) minmax(270px, .8fr); gap: 16px; align-items: stretch; }
.chapi-ops-card, .chapi-model-section { background: rgba(255,255,255,.96); border: 1px solid #dfe5ef; border-radius: 18px; box-shadow: 0 12px 34px rgba(20,34,66,.06); }
.chapi-ops-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chapi-ops-card > header small, .chapi-model-section header small { color: #ef233c; text-transform: uppercase; letter-spacing: .08em; font-size: .64rem; font-weight: 850; }
.chapi-ops-card h2, .chapi-model-section h2 { margin: 2px 0 0; font-size: 1rem; font-weight: 820; letter-spacing: -.02em; }
.chapi-knowledge-card { padding: 18px; display: flex; flex-direction: column; min-height: 390px; }
.chapi-knowledge-card header > a { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #e2e7ef; border-radius: 9px; color: #60708b; }
.chapi-knowledge-map { position: relative; min-height: 225px; margin: 12px 0 5px; overflow: hidden; }
.map-core { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 90px; height: 90px; display: grid; place-items: center; align-content: center; color: #172238; background: #fff; border: 1px solid #ffc1c9; border-radius: 50%; box-shadow: 0 0 0 10px rgba(244,35,58,.06), 0 10px 24px rgba(244,35,58,.17); }
.map-core i { color: #f31e39; font-size: 1.4rem; }.map-core strong { font-size: .68rem; }
.map-node { position: absolute; z-index: 2; padding: 5px 8px; border: 1px solid #dfe6f0; background: #fff; border-radius: 999px; color: #4d5b73; font-size: .56rem; max-width: 108px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 5px 13px rgba(20,34,66,.06); }
.node-1 { left: 5%; top: 13%; }.node-2 { right: 2%; top: 13%; }.node-3 { left: 0; top: 48%; }.node-4 { right: 0; top: 50%; }.node-5 { left: 8%; bottom: 7%; }.node-6 { right: 4%; bottom: 8%; }.node-7 { left: 37%; top: 2%; }.node-8 { left: 36%; bottom: 0; }
.map-line { position: absolute; left: 50%; top: 50%; width: 160px; height: 1px; background: #dce4ef; transform-origin: left; }.line-one { transform: rotate(25deg); }.line-two { transform: rotate(150deg); }.line-three { transform: rotate(205deg); }.line-four { transform: rotate(330deg); }
.chapi-knowledge-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.chapi-knowledge-stats div { padding: 10px; border-radius: 11px; background: #f6f8fc; border: 1px solid #e8edf4; display: flex; gap: 8px; align-items: center; }
.chapi-knowledge-stats strong { font-size: 1rem; color: #ef1e39; }.chapi-knowledge-stats span { color: #6d7990; font-size: .6rem; line-height: 1.2; }
.chapi-card-link { color: #ef1d38; text-transform: uppercase; letter-spacing: .05em; font-size: .62rem; font-weight: 850; text-decoration: none; display: flex; justify-content: center; gap: 7px; margin-top: 15px; }
.chapi-core-card { position: relative; min-height: 390px; overflow: hidden; background: #071426; border-color: #152b45; color: #fff; display: grid; grid-template-columns: 1fr 245px 1fr; grid-template-rows: repeat(3, 1fr) auto; padding: 20px 22px 0; gap: 10px 28px; }
.chapi-core-backdrop { position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, rgba(0,144,255,.27), transparent 28%), radial-gradient(circle at 65% 30%, rgba(92,45,255,.13), transparent 22%), linear-gradient(rgba(36,84,130,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(36,84,130,.1) 1px, transparent 1px); background-size: auto, auto, 35px 35px, 35px 35px; opacity: .95; }
.chapi-core-metric { position: relative; z-index: 2; border: 1px solid #2a5577; background: linear-gradient(135deg, rgba(15,38,62,.94), rgba(8,24,43,.9)); border-radius: 12px; padding: 11px 12px; display: flex; align-items: center; gap: 10px; box-shadow: inset 0 1px rgba(255,255,255,.06); }
.chapi-core-metric > i { width: 34px; height: 34px; border: 1px solid #169fe8; border-radius: 10px; display: grid; place-items: center; color: #24bcff; }
.chapi-core-metric div { display: grid; grid-template-columns: 1fr auto; align-items: end; flex: 1; }
.chapi-core-metric span { grid-column: 1 / -1; color: #bcd2e5; font-size: .67rem; }.chapi-core-metric strong { font-size: 1.25rem; }.chapi-core-metric small { font-size: .55rem; color: #718ba4; text-align: right; }
.metric-one { grid-column: 1; grid-row: 1; }.metric-two { grid-column: 1; grid-row: 2; }.metric-three { grid-column: 1; grid-row: 3; }.metric-four { grid-column: 3; grid-row: 1; }.metric-five { grid-column: 3; grid-row: 2; }.metric-six { grid-column: 3; grid-row: 3; }
.chapi-neural-orb { position: relative; z-index: 2; grid-column: 2; grid-row: 1 / 4; align-self: center; justify-self: center; width: 215px; height: 215px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, #10294a 0 33%, #08253f 34% 46%, rgba(5,25,47,.4) 47%); border: 1px solid #178fe3; box-shadow: 0 0 22px rgba(0,166,255,.5), inset 0 0 35px rgba(0,168,255,.34); }
.chapi-neural-orb::before, .chapi-neural-orb::after { content: ""; position: absolute; inset: 11%; border: 1px dashed rgba(64,195,255,.58); border-radius: 50%; animation: chapi-orbit 14s linear infinite; }.chapi-neural-orb::after { inset: 25%; animation-direction: reverse; animation-duration: 9s; }
.chapi-neural-orb > div { text-align: center; z-index: 3; }.chapi-neural-orb > div > i { display: block; color: #2bc1ff; font-size: 1.5rem; }.chapi-neural-orb strong { display: block; font-size: 2rem; letter-spacing: .08em; text-shadow: 0 0 18px #13aaff; }.chapi-neural-orb div span { color: #61f4c0; font-size: .59rem; text-transform: uppercase; font-weight: 800; }.chapi-neural-orb div span b { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #25e3a3; box-shadow: 0 0 8px #25e3a3; }
.orb-ring { position: absolute; border: 1px solid rgba(35,174,255,.4); border-radius: 50%; }.ring-one { inset: -8px; }.ring-two { inset: 18px -17px; transform: rotate(45deg); }.ring-three { inset: -15px 27px; transform: rotate(-32deg); }
.orb-node { position: absolute; width: 7px; height: 7px; background: #43c8ff; border-radius: 50%; box-shadow: 0 0 10px #36bfff; }.orb-node-one { top: 12%; left: 28%; }.orb-node-two { top: 42%; right: -2%; }.orb-node-three { bottom: 10%; right: 29%; }.orb-node-four { top: 52%; left: -2%; }
@keyframes chapi-orbit { to { transform: rotate(360deg); } }
.chapi-core-card footer { position: relative; z-index: 2; grid-column: 1 / -1; margin: 3px -22px 0; background: rgba(4,15,29,.92); border-top: 1px solid #173c5b; padding: 10px 18px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: .62rem; }.chapi-core-card footer span { color: #6f8aa5; }.chapi-core-card footer strong { color: #2bbcff; font-size: .72rem; }.chapi-core-card footer small { color: #49647d; }
.chapi-live-card { min-height: 390px; padding: 18px; display: flex; flex-direction: column; }
.live-dot { font-style: normal; color: #068858; background: #eafbf4; border-radius: 999px; padding: 5px 8px; font-size: .58rem; font-weight: 800; }.live-dot i { width: 5px; height: 5px; display: inline-block; border-radius: 50%; background: #0bb779; box-shadow: 0 0 7px #0bb779; }
.chapi-activity-chart { height: 165px; margin: 18px 0 12px; display: flex; gap: 4px; align-items: end; border-bottom: 1px solid #dfe6f0; background: repeating-linear-gradient(to top, transparent 0 39px, #eef2f7 40px); padding: 8px 3px 0; }
.activity-column { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }.activity-column > span { width: 72%; min-height: 5px; border-radius: 4px 4px 1px 1px; background: linear-gradient(180deg,#2eaef7,#2761e9); box-shadow: 0 4px 10px rgba(39,97,233,.22); position: relative; }.activity-column:nth-child(3n) > span { background: linear-gradient(180deg,#8158ef,#4d55dd); }.activity-column > span em { opacity: 0; position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-style: normal; font-size: .55rem; color: #46536a; }.activity-column:hover > span em { opacity: 1; }.activity-column small { min-height: 16px; white-space: nowrap; font-size: .45rem; color: #8893a5; }
.chapi-live-legend { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-top: auto; }.chapi-live-legend div { border-radius: 9px; padding: 8px; background: #f6f8fb; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 5px; }.chapi-live-legend i { width: 6px; height: 6px; border-radius: 50%; background: #0cbcf1; }.chapi-live-legend i.processing { background:#7857e9; }.chapi-live-legend i.waiting { background:#f12343; }.chapi-live-legend span { grid-column: 1 / -1; color: #7c879a; font-size: .49rem; }.chapi-live-legend strong { font-size: .95rem; }
.chapi-channel-split { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }.chapi-channel-split div { display:flex; justify-content:space-between; padding:8px 9px; border:1px solid #e4e9f1; border-radius:9px; font-size:.61rem; color:#68758a; }.chapi-channel-split strong { color:#1d293d; }
.chapi-model-section { margin-top: 16px; padding: 20px; }
.chapi-model-section > header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; padding-bottom: 16px; border-bottom: 1px solid #e8edf4; }.chapi-model-section header p { margin: 3px 0 0; color: #748096; font-size: .75rem; }.chapi-model-heading-icon { width: 46px; height: 46px; display:grid; place-items:center; border-radius:14px; color:#f01e38; background:#fff0f2; font-size:1.3rem; }
.chapi-current-model { padding: 9px 12px; background:#edf9f4; border:1px solid #c5eddd; color:#38715c; border-radius:999px; font-size:.65rem; }.chapi-current-model i { display:inline-block; width:6px; height:6px; background:#00aa70; border-radius:50%; margin-right:4px; box-shadow:0 0 7px #00aa70; }.chapi-current-model strong { color:#08724d; }
.chapi-model-options { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:16px; }.chapi-model-option { position:relative; min-height:132px; border:1px solid #dfe6ef; background:#f9fafc; border-radius:14px; padding:15px 13px 13px 42px; cursor:pointer; transition:.2s ease; }.chapi-model-option:hover { transform:translateY(-2px); border-color:#bac8db; box-shadow:0 10px 22px rgba(20,34,66,.06); }.chapi-model-option.active { border-color:#ff6e80; background:linear-gradient(135deg,#fff7f8,#fff); box-shadow:0 9px 24px rgba(240,30,56,.08); }.chapi-model-option input { position:absolute; opacity:0; }.model-radio { position:absolute; left:14px; top:16px; width:17px; height:17px; border-radius:50%; border:2px solid #b9c3d2; background:#fff; }.chapi-model-option input:checked + .model-radio { border:5px solid #f01f3a; }.model-copy { display:flex; flex-direction:column; align-items:flex-start; }.model-copy > span { color:#e82039; background:#ffecef; padding:3px 6px; border-radius:999px; font-size:.48rem; font-weight:850; text-transform:uppercase; }.model-copy strong { margin-top:8px; font-size:.96rem; }.model-copy small { color:#738098; font-size:.58rem; }.model-copy p { color:#657188; margin:7px 0 0; font-size:.67rem; line-height:1.35; }.chapi-model-option > em { position:absolute; right:12px; top:12px; font-style:normal; color:#098459; font-size:.55rem; font-weight:800; }.chapi-model-actions { margin-top:13px; display:flex; justify-content:space-between; align-items:center; gap:15px; }.chapi-model-actions p { margin:0; color:#6e7b91; font-size:.67rem; }.chapi-model-actions p i { color:#2871db; }.chapi-model-actions .btn { border-radius:11px; padding:10px 16px; font-size:.72rem; font-weight:800; }.chapi-model-error { color:#b91c1c; font-size:.7rem; margin-top:8px; }
.chapi-ops-secondary-grid { margin-top:16px; display:grid; grid-template-columns:1.45fr .9fr 1fr; gap:16px; }.chapi-recent-card,.chapi-insights-card,.chapi-summary-card { padding:18px; min-height:315px; }.chapi-recent-card header > span { font-size:.59rem; color:#778399; background:#f3f5f9; border-radius:999px; padding:5px 8px; }.chapi-activity-list { margin-top:12px; }.chapi-activity-item { display:grid; grid-template-columns:42px 82px 1fr auto; align-items:center; gap:8px; padding:9px 0; border-bottom:1px solid #edf0f5; }.chapi-activity-item time { color:#718097; font-size:.58rem; }.activity-kind { padding:5px 7px; border-radius:7px; background:#edf4ff; color:#2767d8; font-size:.5rem; font-weight:800; }.chapi-activity-item > div { min-width:0; }.chapi-activity-item div strong,.chapi-activity-item div small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.chapi-activity-item div strong { font-size:.66rem; }.chapi-activity-item div small { color:#8490a3; font-size:.54rem; margin-top:2px; }.chapi-activity-item > em { font-style:normal; font-size:.5rem; font-weight:750; border-radius:999px; padding:5px 7px; background:#eaf9f2; color:#087a52; }.chapi-activity-item > em.danger { background:#fff0f2; color:#c81e35; }.chapi-activity-item > em.info { background:#edf3ff; color:#2d63bd; }.chapi-activity-item > em i { display:inline-block; width:5px; height:5px; border-radius:50%; background:currentColor; margin-right:4px; }
.chapi-empty-state { display:flex; min-height:210px; flex-direction:column; align-items:center; justify-content:center; color:#8792a5; text-align:center; }.chapi-empty-state i { font-size:1.5rem; }.chapi-empty-state strong { color:#546176; font-size:.75rem; margin-top:7px; }.chapi-empty-state span { font-size:.62rem; }
.chapi-insights-card header > i,.chapi-summary-card header > i { color:#f01f3a; font-size:1.2rem; }.chapi-insights-card > div { margin-top:11px; }.chapi-insights-card article { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #edf0f5; }.chapi-insights-card article > span { width:31px; height:31px; flex:0 0 31px; border-radius:10px; display:grid; place-items:center; background:#f1f5fb; color:#35445c; }.chapi-insights-card strong { display:block; font-size:.65rem; }.chapi-insights-card p { margin:2px 0 0; color:#7d899c; font-size:.55rem; line-height:1.35; }.chapi-summary-card dl { margin:12px 0 0; }.chapi-summary-card dl div { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #edf0f5; }.chapi-summary-card dt { color:#637088; font-size:.62rem; font-weight:600; }.chapi-summary-card dd { margin:0; color:#131d30; font-size:.78rem; font-weight:850; }
@media (max-width: 1450px) { .chapi-ops-primary-grid { grid-template-columns: 270px minmax(580px,1.7fr); }.chapi-live-card { grid-column:1 / -1; min-height:300px; }.chapi-activity-chart { height:115px; }.chapi-ops-secondary-grid { grid-template-columns:1.25fr 1fr; }.chapi-summary-card { grid-column:1 / -1; min-height:auto; }.chapi-summary-card dl { display:grid; grid-template-columns:repeat(3,1fr); gap:0 18px; } }
@media (max-width: 1080px) { .chapi-ops-header { align-items:flex-start; }.chapi-ops-header-side { width:50%; }.chapi-ops-controls { flex-wrap:wrap; }.chapi-ops-primary-grid { grid-template-columns:1fr; }.chapi-core-card { grid-column:auto; min-height:440px; }.chapi-knowledge-card { min-height:350px; }.chapi-model-options { grid-template-columns:1fr; }.chapi-model-option { min-height:auto; }.chapi-ops-secondary-grid { grid-template-columns:1fr; }.chapi-summary-card { grid-column:auto; }.chapi-recent-card,.chapi-insights-card,.chapi-summary-card { min-height:auto; } }
@media (max-width: 768px) { .chapi-ops-page { padding-top:18px; }.chapi-ops-container { padding-inline:14px; }.chapi-ops-header { display:block; }.chapi-ops-heading h1 { font-size:2.25rem; }.chapi-ops-header-side { width:100%; margin-top:18px; }.chapi-ops-controls { justify-content:flex-start; }.chapi-ops-date { display:none; }.chapi-ops-period { width:100%; order:3; }.chapi-ops-period a { flex:1; text-align:center; }.chapi-ops-export { flex:1; justify-content:center; }.chapi-health-card { grid-template-columns:auto 1fr; }.chapi-health-card > em { grid-column:1 / -1; justify-self:stretch; text-align:center; }.chapi-core-card { display:flex; flex-direction:column; padding:18px 16px 0; }.chapi-neural-orb { order:-1; width:170px; height:170px; flex:0 0 170px; margin:0 auto 8px; }.chapi-core-metric { min-height:65px; }.chapi-core-card footer { margin:4px -16px 0; flex-wrap:wrap; }.chapi-model-section > header { grid-template-columns:auto 1fr; }.chapi-current-model { grid-column:1 / -1; text-align:center; }.chapi-model-actions { flex-direction:column; align-items:stretch; }.chapi-model-actions .btn { width:100%; }.chapi-activity-item { grid-template-columns:38px 1fr auto; }.activity-kind { display:none; }.chapi-summary-card dl { display:block; } }
@media (max-width: 430px) { .chapi-ops-heading h1 { font-size:1.9rem; }.chapi-ops-heading p { font-size:.8rem; }.chapi-ops-export { font-size:.68rem; }.chapi-health-card div { grid-template-columns:1fr; }.chapi-health-card div strong { grid-row:2; }.chapi-live-legend { grid-template-columns:1fr; }.chapi-model-section { padding:15px; }.chapi-model-section > header { grid-template-columns:1fr; text-align:left; }.chapi-model-heading-icon { width:40px; height:40px; }.chapi-activity-item { grid-template-columns:34px 1fr; }.chapi-activity-item > em { grid-column:2; justify-self:start; }.chapi-knowledge-card,.chapi-live-card,.chapi-recent-card,.chapi-insights-card,.chapi-summary-card { padding:15px; } }

/* Private customer identity on staff-only request screens. */
.staff-request-row {
  grid-template-columns: minmax(185px, 1.25fr) minmax(150px, .95fr) minmax(145px, .9fr) .5fr .42fr .5fr;
}
.staff-request-customer strong,
.staff-request-customer small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.staff-request-customer strong { color: #26344a; font-size: .63rem; }
.staff-request-customer small { color: #128254; margin-top: 2px; }
.staff-customer-contact {
  align-items: center;
  background: linear-gradient(135deg, #f3f8ff, #fff 72%);
  border: 1px solid #d7e3f2;
  border-radius: 16px;
  box-shadow: 0 10px 26px rgba(23, 49, 86, .05);
  display: grid;
  gap: 13px;
  grid-template-columns: auto 1fr auto;
  margin: 14px 0;
  padding: 14px 16px;
}
.staff-customer-contact-icon {
  align-items: center;
  background: #e8f1ff;
  border-radius: 12px;
  color: #2969d7;
  display: flex;
  font-size: 1.15rem;
  height: 44px;
  justify-content: center;
  width: 44px;
}
.staff-customer-contact div small { color: #62738d; display: block; font-size: .66rem; font-weight: 800; text-transform: uppercase; }
.staff-customer-contact div small i { color: #2d6edb; }
.staff-customer-contact div strong { color: #172238; display: block; font-size: .92rem; margin-top: 2px; }
.staff-customer-contact div p { color: #7a879a; font-size: .67rem; margin: 1px 0 0; }
.staff-customer-contact > a,
.staff-customer-contact-missing {
  align-items: center;
  background: #e9faf2;
  border: 1px solid #bfead5;
  border-radius: 999px;
  color: #087b50;
  display: inline-flex;
  font-size: .72rem;
  font-weight: 800;
  gap: 6px;
  padding: 9px 12px;
  text-decoration: none;
}
.staff-customer-contact-missing { background: #f4f6f9; border-color: #e0e5ec; color: #758197; }

/* Unified view of web and WhatsApp conversations that did not create a request. */
.chapi-incomplete-section {
  background: rgba(255,255,255,.97);
  border: 1px solid #dfe5ef;
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(20,34,66,.06);
  margin-top: 16px;
  padding: 20px;
}
.chapi-incomplete-section > header { align-items: center; display: flex; gap: 18px; justify-content: space-between; }
.chapi-incomplete-heading { align-items: center; display: flex; gap: 12px; }
.chapi-incomplete-heading > span { align-items: center; background: #fff0f2; border-radius: 13px; color: #ef233c; display: flex; font-size: 1.25rem; height: 46px; justify-content: center; width: 46px; }
.chapi-incomplete-heading small { color: #ef233c; font-size: .62rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.chapi-incomplete-heading h2 { color: #172238; font-size: 1.05rem; font-weight: 850; letter-spacing: -.02em; margin: 1px 0 0; }
.chapi-incomplete-heading p { color: #758197; font-size: .7rem; margin: 2px 0 0; }
.chapi-incomplete-tools { align-items: flex-end; display: flex; flex-direction: column; gap: 7px; }
.chapi-incomplete-count { color: #778399; font-size: .61rem; }
.chapi-incomplete-count strong { color: #172238; }
.chapi-conversation-filters { background: #f3f5f8; border: 1px solid #e4e9f0; border-radius: 10px; display: flex; padding: 3px; }
.chapi-conversation-filters button { background: transparent; border: 0; border-radius: 7px; color: #6d788b; cursor: pointer; font-size: .62rem; font-weight: 750; padding: 7px 10px; }
.chapi-conversation-filters button.active { background: #fff; box-shadow: 0 3px 9px rgba(25,38,66,.09); color: #1e2d44; }
.chapi-incomplete-list { border-top: 1px solid #e9edf3; margin-top: 16px; }
.chapi-incomplete-row { border-bottom: 1px solid #e9edf3; }
.chapi-incomplete-row[hidden] { display: none; }
.chapi-incomplete-row > summary { align-items: center; border-radius: 10px; cursor: pointer; display: grid; gap: 12px; grid-template-columns: auto minmax(175px,1.2fr) minmax(165px,1fr) 145px 112px auto; list-style: none; min-height: 82px; outline: none; padding: 11px 4px; }
.chapi-incomplete-row > summary::-webkit-details-marker { display: none; }
.chapi-incomplete-row > summary:hover { background: #fbfcfe; }
.chapi-incomplete-row > summary:focus-visible { box-shadow: inset 0 0 0 2px #7aa9f5; }
.chapi-conversation-channel { align-items: center; background: #eaf2ff; border-radius: 11px; color: #2766d7; display: flex; font-size: 1rem; height: 39px; justify-content: center; width: 39px; }
.chapi-conversation-channel.whatsapp { background: #e9faf2; color: #078351; }
.chapi-conversation-main,
.chapi-conversation-customer { min-width: 0; }
.chapi-conversation-main small { color: #8a96a9; display: block; font-size: .53rem; font-weight: 750; letter-spacing: .05em; }
.chapi-conversation-main strong { color: #1c293e; display: block; font-size: .72rem; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chapi-conversation-main span { color: #758197; display: block; font-size: .59rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chapi-conversation-customer > small { color: #5074aa; display: block; font-size: .52rem; font-weight: 750; }
.chapi-conversation-customer > strong { color: #25344b; display: block; font-size: .67rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chapi-conversation-customer > a,
.chapi-conversation-customer > span { color: #078351; display: block; font-size: .57rem; overflow: hidden; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.chapi-conversation-progress > div { align-items: center; color: #788599; display: flex; font-size: .54rem; justify-content: space-between; }
.chapi-conversation-progress > div strong { color: #27364c; }
.progress-track { background: #e7ebf1; border-radius: 999px; display: block; height: 5px; margin-top: 6px; overflow: hidden; }
.progress-track i { background: linear-gradient(90deg,#2b6fe5,#24b47e); border-radius: inherit; display: block; height: 100%; }
.chapi-conversation-meta { text-align: right; }
.chapi-conversation-meta em { background: #eaf9f2; border-radius: 999px; color: #087c53; display: inline-block; font-size: .52rem; font-style: normal; font-weight: 800; padding: 5px 7px; }
.chapi-conversation-meta em.stale { background: #fff7e7; color: #9b6a08; }
.chapi-conversation-meta em.danger { background: #fff0f2; color: #c71d35; }
.chapi-conversation-meta em i { background: currentColor; border-radius: 50%; display: inline-block; height: 5px; margin-right: 3px; width: 5px; }
.chapi-conversation-meta time { color: #8c97a8; display: block; font-size: .51rem; margin-top: 4px; }
.chapi-conversation-chevron { color: #8793a5; font-size: .72rem; transition: transform .2s ease; }
.chapi-incomplete-row[open] .chapi-conversation-chevron { transform: rotate(180deg); }
.chapi-incomplete-detail { background: #f8fafc; border-radius: 13px; display: grid; gap: 14px; grid-template-columns: 260px 1fr; margin: 0 3px 13px 54px; padding: 14px; }
.chapi-captured-context { display: grid; gap: 7px; }
.chapi-captured-context > div { align-items: center; background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; display: grid; gap: 0 8px; grid-template-columns: auto 1fr; padding: 9px; }
.chapi-captured-context > div > span { align-items: center; background: #eef4ff; border-radius: 8px; color: #2f6bd0; display: flex; grid-row: 1 / 3; height: 31px; justify-content: center; width: 31px; }
.chapi-captured-context small { color: #8792a4; font-size: .5rem; }
.chapi-captured-context strong { color: #26354b; font-size: .61rem; }
.chapi-incomplete-transcript { background: #fff; border: 1px solid #e2e8f0; border-radius: 11px; max-height: 330px; overflow: auto; padding: 11px; }
.chapi-incomplete-transcript > header { align-items: center; border-bottom: 1px solid #edf1f5; display: flex; justify-content: space-between; padding: 0 2px 9px; }
.chapi-incomplete-transcript > header strong { color: #26354b; font-size: .63rem; }
.chapi-incomplete-transcript > header span { color: #8692a5; font-size: .5rem; }
.chapi-incomplete-transcript article { align-items: flex-start; display: flex; gap: 7px; margin-top: 9px; }
.chapi-incomplete-transcript article > span { align-items: center; background: #fff0f2; border-radius: 7px; color: #ef233c; display: flex; flex: 0 0 26px; height: 26px; justify-content: center; }
.chapi-incomplete-transcript article.from-customer > span { background: #eaf2ff; color: #2867d5; }
.chapi-incomplete-transcript article > div { background: #f5f7fa; border-radius: 2px 9px 9px 9px; max-width: 88%; padding: 7px 9px; }
.chapi-incomplete-transcript article.from-customer > div { background: #edf4ff; }
.chapi-incomplete-transcript article small { color: #758198; display: block; font-size: .48rem; font-weight: 800; }
.chapi-incomplete-transcript article p { color: #344158; font-size: .59rem; line-height: 1.45; margin: 1px 0 0; }
.chapi-transcript-empty,
.chapi-filter-empty { color: #8793a5; font-size: .62rem; padding: 28px; text-align: center; }
.chapi-filter-empty strong { display: block; margin-top: 4px; }
.chapi-incomplete-empty { align-items: center; display: flex; gap: 12px; justify-content: center; min-height: 130px; text-align: left; }
.chapi-incomplete-empty > span { align-items: center; background: #eaf9f2; border-radius: 50%; color: #078351; display: flex; font-size: 1.1rem; height: 42px; justify-content: center; width: 42px; }
.chapi-incomplete-empty strong { color: #39475d; display: block; font-size: .76rem; }
.chapi-incomplete-empty p { color: #8692a4; font-size: .62rem; margin: 1px 0 0; }
.staff-conversations-page { padding-top: 24px; }
.staff-conversations-back { align-items: center; color: #62708a; display: inline-flex; font-size: .78rem; font-weight: 750; gap: 7px; margin-bottom: 14px; text-decoration: none; }
.staff-conversations-back:hover { color: #e71933; }
.staff-conversations-page .chapi-incomplete-section { margin-top: 0; }
.staff-conversations-page .chapi-incomplete-heading h1 { color: #172238; font-size: 1.05rem; font-weight: 850; letter-spacing: -.02em; margin: 1px 0 0; }

/* Staff reservation monitoring and manual payment validation. */
.staff-reservations-experience { background: #f4f7fb; color: #152238; }
body.staff-reservations-experience > footer { display: none; }
.staff-reservations-page { background: radial-gradient(circle at 90% 0, rgba(239,29,47,.06), transparent 28%), #f4f7fb; min-height: 100vh; padding: 28px 0 60px; }
.staff-reservations-container { max-width: 1780px; padding-inline: clamp(18px, 3vw, 48px); }
.staff-reservations-header { align-items: flex-end; display: flex; gap: 30px; justify-content: space-between; }
.staff-reservations-header > div > a { align-items: center; color: #66758c; display: inline-flex; font-size: .72rem; font-weight: 750; gap: 7px; margin-bottom: 14px; text-decoration: none; }
.staff-reservations-header > div > span { align-items: center; color: #ed1b32; display: flex; font-size: .64rem; font-weight: 850; gap: 7px; letter-spacing: .08em; text-transform: uppercase; }
.staff-reservations-header h1 { color: #101828; font-size: clamp(2rem, 3vw, 3.15rem); font-weight: 850; letter-spacing: -.05em; line-height: 1; margin: 7px 0 9px; }
.staff-reservations-header p { color: #69778e; font-size: .92rem; margin: 0; }
.staff-reservations-header > aside { align-items: center; background: #fff; border: 1px solid #dfe6ef; border-radius: 14px; box-shadow: 0 10px 30px rgba(25,38,65,.05); display: flex; gap: 11px; max-width: 360px; padding: 13px 15px; }
.staff-reservations-header > aside > i { align-items: center; background: #eef4ff; border-radius: 10px; color: #2e68cf; display: flex; flex: 0 0 38px; height: 38px; justify-content: center; }
.staff-reservations-header aside strong,.staff-reservations-header aside small { display: block; }
.staff-reservations-header aside strong { color: #24334a; font-size: .68rem; }
.staff-reservations-header aside small { color: #7c899c; font-size: .58rem; margin-top: 2px; }
.staff-reservation-kpis { display: grid; gap: 13px; grid-template-columns: repeat(5,minmax(0,1fr)); margin-top: 24px; }
.staff-reservation-kpis > a { align-items: center; background: #fff; border: 1px solid #e0e6ef; border-radius: 16px; box-shadow: 0 9px 28px rgba(24,39,69,.045); color: inherit; display: grid; gap: 12px; grid-template-columns: auto 1fr auto; min-height: 112px; padding: 16px; text-decoration: none; transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.staff-reservation-kpis > a:hover,.staff-reservation-kpis > a.active { border-color: #f0a2ab; box-shadow: 0 13px 32px rgba(25,39,68,.08); transform: translateY(-2px); }
.staff-reservation-kpis > a > span { align-items: center; background: #fff5e7; border-radius: 13px; color: #d8860c; display: flex; font-size: 1.05rem; height: 48px; justify-content: center; width: 48px; }
.staff-reservation-kpis > a.payment > span { background: #eef3ff; color: #5b65dc; }
.staff-reservation-kpis > a.customer > span { background: #fff6df; color: #b97808; }
.staff-reservation-kpis > a.paid > span { background: #eaf9f2; color: #078354; }
.staff-reservation-kpis > a.expired > span { background: #f1f3f6; color: #69768a; }
.staff-reservation-kpis small,.staff-reservation-kpis strong,.staff-reservation-kpis p { display: block; }
.staff-reservation-kpis small { color: #65738a; font-size: .64rem; font-weight: 800; }
.staff-reservation-kpis strong { color: #152238; font-size: 1.55rem; line-height: 1; margin-top: 3px; }
.staff-reservation-kpis p { color: #8a96a7; font-size: .54rem; margin: 5px 0 0; }
.staff-reservation-kpis > a > i { color: #a0aabb; font-size: .68rem; }
.staff-reservation-inbox { background: rgba(255,255,255,.97); border: 1px solid #dfe6ef; border-radius: 18px; box-shadow: 0 14px 38px rgba(23,38,66,.055); margin-top: 16px; overflow: hidden; }
.staff-reservation-inbox > header { align-items: center; border-bottom: 1px solid #e7ebf1; display: flex; gap: 20px; justify-content: space-between; padding: 13px 17px; }
.staff-reservation-inbox > header nav { background: #f3f5f8; border-radius: 11px; display: flex; padding: 3px; }
.staff-reservation-inbox > header nav { scrollbar-width: none; }
.staff-reservation-inbox > header nav::-webkit-scrollbar { display: none; }
.staff-reservation-inbox > header nav a { border-radius: 8px; color: #6d798c; font-size: .62rem; font-weight: 800; padding: 8px 11px; text-decoration: none; }
.staff-reservation-inbox > header nav a.active { background: #fff; box-shadow: 0 3px 9px rgba(25,38,66,.09); color: #18263d; }
.staff-reservation-inbox > header nav strong { background: #e8edf4; border-radius: 999px; font-size: .5rem; margin-left: 3px; padding: 2px 5px; }
.staff-reservation-inbox > header form { align-items: center; background: #f8fafc; border: 1px solid #e0e6ee; border-radius: 11px; display: flex; min-width: min(390px,38vw); padding: 0 10px; }
.staff-reservation-inbox > header form label { color: #8995a7; }
.staff-reservation-inbox > header form input { background: transparent; border: 0; color: #26354b; font-size: .65rem; min-height: 38px; outline: 0; padding: 0 9px; width: 100%; }
.staff-reservation-inbox > header form > a { color: #8995a7; }
.staff-reservation-list { display: grid; gap: 11px; padding: 15px; }
.staff-reservation-item { border: 1px solid #e1e7ef; border-radius: 15px; box-shadow: 0 5px 18px rgba(24,40,68,.035); overflow: hidden; }
.staff-reservation-item.state-confirmada { border-color: #cfd9f8; box-shadow: 0 8px 24px rgba(61,83,180,.08); }
.staff-reservation-item.state-pago_reportado { border-color: #bfe5d2; box-shadow: 0 8px 24px rgba(8,124,83,.08); }
.staff-reservation-item.state-pagada { border-color: #c7e9d8; }
.staff-reservation-item > header { align-items: center; background: #fbfcfe; border-bottom: 1px solid #edf0f4; display: flex; justify-content: space-between; padding: 11px 14px; }
.staff-reservation-identity { align-items: center; display: flex; gap: 10px; }
.staff-reservation-identity > span { align-items: center; background: #fff0f2; border-radius: 10px; color: #ee1d35; display: flex; height: 36px; justify-content: center; width: 36px; }
.staff-reservation-identity small,.staff-reservation-identity strong { display: block; }
.staff-reservation-identity small { color: #8793a5; font-size: .48rem; font-weight: 850; letter-spacing: .06em; }
.staff-reservation-identity strong { color: #26354a; font-size: .67rem; margin-top: 2px; }
.staff-reservation-state { text-align: right; }
.staff-reservation-state em { border-radius: 999px; display: inline-flex; font-size: .52rem; font-style: normal; font-weight: 850; gap: 5px; padding: 5px 8px; }
.staff-reservation-state em i { background: currentColor; border-radius: 50%; height: 5px; margin-top: 4px; width: 5px; }
.staff-reservation-state .state-pendiente_comercio { background: #fff5e6; color: #a86907; }
.staff-reservation-state .state-confirmada { background: #eef2ff; color: #4d5dc6; }
.staff-reservation-state .state-pago_reportado { background: #e9f9f1; color: #087c53; }
.staff-reservation-state .state-pagada { background: #e9f9f1; color: #087c53; }
.staff-reservation-state .state-vencida,.staff-reservation-state .state-rechazada { background: #f0f2f5; color: #707c8e; }
.staff-reservation-state time { color: #8995a6; display: block; font-size: .51rem; margin-top: 4px; }
.staff-reservation-body { align-items: center; display: grid; gap: 20px; grid-template-columns: minmax(240px,1.25fr) minmax(280px,1fr) minmax(220px,.75fr); padding: 15px; }
.staff-reservation-product { align-items: center; display: flex; gap: 10px; min-width: 0; }
.staff-reservation-product > span { align-items: center; background: #fff0f2; border-radius: 11px; color: #ee1c34; display: flex; flex: 0 0 40px; height: 40px; justify-content: center; }
.staff-reservation-product small,.staff-reservation-product strong,.staff-reservation-product p { display: block; }
.staff-reservation-product small { color: #8b97a8; font-size: .48rem; font-weight: 800; }
.staff-reservation-product strong { color: #1e2d43; font-size: .7rem; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-reservation-product p { color: #78869a; font-size: .58rem; margin: 2px 0 0; }
.staff-reservation-parties,.staff-reservation-money { display: grid; gap: 7px; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0; }
.staff-reservation-parties > div,.staff-reservation-money > div { background: #f8fafc; border: 1px solid #e8ecf2; border-radius: 10px; min-width: 0; padding: 8px 9px; }
.staff-reservation-parties dt,.staff-reservation-money dt { color: #8995a7; font-size: .49rem; font-weight: 750; }
.staff-reservation-parties dd,.staff-reservation-money dd { color: #27364b; font-size: .62rem; font-weight: 800; margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-reservation-parties small { color: #75849a; display: block; font-size: .51rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staff-reservation-money > div:last-child dd { color: #087d53; }
.staff-reservation-progress { align-items: center; background: #fbfcfe; border-block: 1px solid #edf0f4; display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto; padding: 9px 20px; }
.staff-reservation-progress span { align-items: center; color: #9aa5b5; display: flex; gap: 5px; }
.staff-reservation-progress span > i { align-items: center; background: #e9edf2; border-radius: 50%; display: flex; font-size: .55rem; height: 20px; justify-content: center; width: 20px; }
.staff-reservation-progress span small { font-size: .49rem; font-weight: 750; }
.staff-reservation-progress span.done { color: #087c53; }.staff-reservation-progress span.done > i { background: #dff5ea; }
.staff-reservation-progress span.current { color: #4e5fc8; }.staff-reservation-progress span.current > i { background: #e9edff; }
.staff-reservation-progress b { background: #e5e9ef; height: 2px; margin-inline: 8px; }.staff-reservation-progress b.done { background: #8ed6b5; }
.staff-payment-confirmation > summary { align-items: center; cursor: pointer; display: grid; gap: 10px; grid-template-columns: auto 1fr auto; list-style: none; padding: 12px 15px; }
.staff-payment-confirmation > summary::-webkit-details-marker { display: none; }
.staff-payment-confirmation > summary > span { align-items: center; background: #e9f9f1; border-radius: 9px; color: #087c53; display: flex; height: 34px; justify-content: center; width: 34px; }
.staff-payment-confirmation summary strong,.staff-payment-confirmation summary small { display: block; }.staff-payment-confirmation summary strong { color: #203047; font-size: .65rem; }.staff-payment-confirmation summary small { color: #8491a3; font-size: .53rem; margin-top: 1px; }
.staff-payment-confirmation summary > i { color: #8995a7; transition: transform .18s ease; }.staff-payment-confirmation[open] summary > i { transform: rotate(180deg); }
.staff-payment-confirmation form { align-items: end; background: #f5f8fc; border-top: 1px solid #e4e9f0; display: grid; gap: 10px; grid-template-columns: minmax(150px,.65fr) minmax(170px,.75fr) minmax(210px,1fr) minmax(230px,1.05fr) auto; padding: 13px 15px; }
.staff-payment-confirmation form label { color: #596980; display: block; font-size: .52rem; font-weight: 800; margin-bottom: 5px; }.staff-payment-confirmation form label span { color: #ed1c34; }.staff-payment-confirmation form label small { color: #929dac; font-weight: 600; }
.staff-payment-confirmation form input { background: #fff; border: 1px solid #d9e0ea; border-radius: 9px; color: #25344a; font-size: .62rem; min-height: 38px; outline: 0; padding: 0 10px; width: 100%; }.staff-payment-confirmation form input:focus { border-color: #7288dd; box-shadow: 0 0 0 3px rgba(82,104,204,.1); }
.staff-payment-confirmation form aside { align-items: center; background: #fff; border: 1px solid #dfe6ef; border-radius: 10px; display: flex; gap: 9px; min-height: 38px; padding: 7px 9px; }.staff-payment-confirmation form aside > i { color: #087c53; }.staff-payment-confirmation form aside p { margin: 0; }.staff-payment-confirmation form aside strong,.staff-payment-confirmation form aside span { display: block; }.staff-payment-confirmation form aside strong { color: #334258; font-size: .52rem; }.staff-payment-confirmation form aside span { color: #8793a4; font-size: .46rem; }
.staff-payment-confirmation form button { background: #078252; border: 0; border-radius: 9px; color: #fff; font-size: .6rem; font-weight: 850; min-height: 38px; padding: 0 14px; white-space: nowrap; }
.staff-payment-audit,.staff-reservation-footer { align-items: center; display: flex; gap: 10px; padding: 11px 15px; }.staff-payment-audit > span { align-items: center; background: #e9f9f1; border-radius: 9px; color: #078252; display: flex; height: 34px; justify-content: center; width: 34px; }.staff-payment-audit > div { flex: 1; }.staff-payment-audit small,.staff-payment-audit strong,.staff-payment-audit p { display: block; }.staff-payment-audit small { color: #087d53; font-size: .47rem; font-weight: 850; letter-spacing: .06em; }.staff-payment-audit strong { color: #26364b; font-size: .64rem; }.staff-payment-audit p { color: #7f8ca0; font-size: .52rem; margin: 1px 0 0; }
.staff-payment-audit a,.staff-reservation-footer a { color: #e71d35; font-size: .56rem; font-weight: 800; text-decoration: none; }.staff-reservation-footer { justify-content: space-between; }.staff-reservation-footer span { color: #8995a7; font-size: .52rem; }
.staff-reservations-empty { color: #8491a4; padding: 70px 20px; text-align: center; }.staff-reservations-empty > span { align-items: center; background: #eef3fa; border-radius: 50%; color: #607089; display: flex; font-size: 1.2rem; height: 48px; justify-content: center; margin: 0 auto 10px; width: 48px; }.staff-reservations-empty h2 { color: #35445a; font-size: .85rem; margin: 0; }.staff-reservations-empty p { font-size: .62rem; margin: 4px 0 0; }
.staff-reservation-pagination { align-items: center; border-top: 1px solid #e7ebf1; display: flex; justify-content: space-between; padding: 13px 16px; }.staff-reservation-pagination a,.staff-reservation-pagination span,.staff-reservation-pagination strong { color: #6f7c90; font-size: .58rem; text-decoration: none; }.staff-reservation-pagination strong { color: #29384d; }
@media (max-width: 1100px) { .staff-reservation-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }.staff-reservation-body { grid-template-columns: 1fr 1fr; }.staff-reservation-money { grid-column: 1 / -1; }.staff-payment-confirmation form { grid-template-columns: 1fr 1fr; }.staff-payment-confirmation form aside { grid-column: 1; }.staff-payment-confirmation form button { grid-column: 2; } }
@media (max-width: 768px) { .staff-reservations-page { padding-top: 18px; }.staff-reservations-container { padding-inline: 13px; }.staff-reservations-header { align-items: stretch; flex-direction: column; gap: 15px; }.staff-reservations-header > aside { max-width: none; }.staff-reservation-inbox > header { align-items: stretch; flex-direction: column; }.staff-reservation-inbox > header nav { overflow-x: auto; }.staff-reservation-inbox > header nav a { flex: 0 0 auto; }.staff-reservation-inbox > header form { min-width: 0; }.staff-reservation-item > header { align-items: flex-start; gap: 10px; }.staff-reservation-state time { max-width: 150px; }.staff-reservation-body { grid-template-columns: 1fr; }.staff-reservation-money { grid-column: auto; }.staff-reservation-progress { grid-template-columns: repeat(4,1fr); }.staff-reservation-progress b { display: none; }.staff-reservation-progress span { flex-direction: column; text-align: center; }.staff-payment-confirmation form { grid-template-columns: 1fr; }.staff-payment-confirmation form aside,.staff-payment-confirmation form button { grid-column: 1; }.staff-payment-confirmation form button { width: 100%; } }
@media (max-width: 500px) { .staff-reservation-kpis { grid-template-columns: 1fr; }.staff-reservation-kpis > a { min-height: 88px; }.staff-reservation-item > header { flex-direction: column; }.staff-reservation-state { display: flex; justify-content: space-between; text-align: left; width: 100%; }.staff-reservation-parties,.staff-reservation-money { grid-template-columns: 1fr; }.staff-payment-audit { align-items: flex-start; flex-wrap: wrap; }.staff-payment-audit a { margin-left: 44px; } }

/* Staff · payment configuration */
.staff-payment-settings-experience { background: #f5f7fb; }
.staff-payment-settings-experience > footer,.staff-payment-settings-experience .mobile-tab-bar { display: none; }
.staff-payment-settings-page { min-height: calc(100vh - 72px); padding: 34px 0 60px; }
.staff-payment-settings-container { max-width: 1320px; }
.staff-payment-settings-header { align-items: flex-end; display: flex; gap: 24px; justify-content: space-between; margin-bottom: 24px; }
.staff-payment-settings-header > div > a { color: #6f7b8e; display: inline-flex; font-size: .68rem; font-weight: 750; gap: 6px; margin-bottom: 14px; text-decoration: none; }
.staff-payment-settings-header > div > span { color: #ee1c35; display: block; font-size: .58rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.staff-payment-settings-header h1 { color: #111c2f; font-size: clamp(2rem,3.4vw,3.1rem); font-weight: 900; letter-spacing: -.045em; margin: 5px 0 4px; }
.staff-payment-settings-header p { color: #68768b; font-size: .82rem; margin: 0; }
.staff-payment-settings-header > aside { align-items: center; background: #fff; border: 1px solid #e0e6ef; border-radius: 15px; box-shadow: 0 8px 25px rgba(23,37,65,.05); display: flex; gap: 11px; min-width: 245px; padding: 13px 15px; }
.staff-payment-settings-header > aside > i { align-items: center; background: #edf3ff; border-radius: 10px; color: #5269ce; display: flex; height: 38px; justify-content: center; width: 38px; }
.staff-payment-settings-header aside small,.staff-payment-settings-header aside strong,.staff-payment-settings-header aside span { display: block; }
.staff-payment-settings-header aside small { color: #98a2b1; font-size: .46rem; font-weight: 850; letter-spacing: .06em; }
.staff-payment-settings-header aside strong { color: #26354a; font-size: .64rem; margin-top: 2px; }.staff-payment-settings-header aside span { color: #7e8a9c; font-size: .52rem; }
.staff-payment-settings-alert { align-items: center; background: #fff1f2; border: 1px solid #ffcbd1; border-radius: 12px; color: #a41427; display: flex; gap: 10px; margin-bottom: 16px; padding: 12px 14px; }
.staff-payment-settings-form { align-items: start; display: grid; gap: 20px; grid-template-columns: minmax(0,1fr) 300px; }
.staff-payment-settings-main { display: grid; gap: 15px; }
.staff-payment-settings-card { background: #fff; border: 1px solid #e0e6ee; border-radius: 17px; box-shadow: 0 8px 28px rgba(20,37,66,.045); overflow: hidden; }
.staff-payment-settings-card > header { align-items: center; border-bottom: 1px solid #edf0f4; display: grid; gap: 12px; grid-template-columns: auto 1fr auto; padding: 16px 18px; }
.staff-payment-settings-card > header > span { align-items: center; background: #fff0f2; border-radius: 11px; color: #ed1c35; display: flex; font-size: 1rem; height: 42px; justify-content: center; width: 42px; }
.staff-payment-settings-card > header > span.bank { background: #ecf3ff; color: #3467c8; }.staff-payment-settings-card > header > span.yappy { background: #eaf9f2; color: #078152; }
.staff-payment-settings-card header small,.staff-payment-settings-card header h2,.staff-payment-settings-card header p { display: block; }
.staff-payment-settings-card header small { color: #929dad; font-size: .47rem; font-weight: 850; letter-spacing: .07em; }.staff-payment-settings-card header h2 { color: #19283e; font-size: .82rem; font-weight: 850; margin: 1px 0; }.staff-payment-settings-card header p { color: #7f8b9d; font-size: .57rem; margin: 0; }
.staff-payment-settings-grid { display: grid; gap: 14px; padding: 18px; }.staff-payment-settings-grid.two { grid-template-columns: repeat(2,minmax(0,1fr)); }.staff-payment-settings-grid .wide { grid-column: 1 / -1; }
.staff-payment-settings-grid label > span { color: #526176; display: block; font-size: .55rem; font-weight: 800; margin-bottom: 6px; }
.staff-payment-settings-grid input:not([type="checkbox"]),.staff-payment-settings-grid select,.staff-payment-instructions textarea { background: #f9fbfd; border: 1px solid #dce3ec; border-radius: 10px; color: #22324a; font-size: .68rem; min-height: 43px; outline: 0; padding: 9px 11px; width: 100%; }
.staff-payment-settings-grid input:focus,.staff-payment-settings-grid select:focus,.staff-payment-instructions textarea:focus { background: #fff; border-color: #6f83d9; box-shadow: 0 0 0 3px rgba(82,103,202,.1); }
.staff-payment-settings-grid label > small,.staff-payment-qr-field small,.staff-payment-instructions > small { color: #8c98a9; display: block; font-size: .5rem; margin-top: 5px; }
.staff-payment-settings-grid .errorlist,.staff-payment-instructions .errorlist { color: #cf1730; font-size: .52rem; list-style: none; margin: 5px 0 0; padding: 0; }
.staff-payment-input-suffix { display: flex; }.staff-payment-input-suffix input { border-radius: 10px 0 0 10px !important; }.staff-payment-input-suffix b { align-items: center; background: #eef2f7; border: 1px solid #dce3ec; border-left: 0; border-radius: 0 10px 10px 0; color: #647287; display: flex; font-size: .58rem; padding: 0 12px; }
.staff-payment-switch { align-items: center; cursor: pointer; display: flex; gap: 7px; }.staff-payment-switch input { height: 0; opacity: 0; position: absolute; width: 0; }.staff-payment-switch > span { background: #cdd4de; border-radius: 999px; height: 24px; padding: 3px; transition: background .2s; width: 42px; }.staff-payment-switch > span::after { background: #fff; border-radius: 50%; box-shadow: 0 2px 5px rgba(0,0,0,.18); content: ""; display: block; height: 18px; transition: transform .2s; width: 18px; }.staff-payment-switch input:checked + span { background: #087f54; }.staff-payment-switch input:checked + span::after { transform: translateX(18px); }.staff-payment-switch em { color: #617086; font-size: .55rem; font-style: normal; font-weight: 800; }
.payment-method-card.method-disabled .staff-payment-settings-grid { opacity: .52; }.payment-method-card .staff-payment-settings-grid { transition: opacity .2s; }
.staff-bank-accounts { display: grid; gap: 13px; padding: 16px; }
.staff-bank-accounts > [data-bank-forms] { display: grid; gap: 12px; }
.staff-bank-account-form { background: #f8fafc; border: 1px solid #dfe5ed; border-radius: 14px; overflow: hidden; transition: border-color .18s,box-shadow .18s; }
.staff-bank-account-form:focus-within { border-color: #9aabe5; box-shadow: 0 0 0 3px rgba(82,103,202,.07); }
.staff-bank-account-form > header { align-items: center; background: #fff; border-bottom: 1px solid #e6ebf1; display: grid; gap: 10px; grid-template-columns: auto 1fr auto; padding: 11px 13px; }
.staff-bank-account-form > header > span { align-items: center; background: #edf3ff; border-radius: 9px; color: #3864bd; display: flex; height: 34px; justify-content: center; width: 34px; }
.staff-bank-account-form > header small,.staff-bank-account-form > header strong { display: block; }.staff-bank-account-form > header small { color: #9aa4b3; font-size: .43rem; font-weight: 850; letter-spacing: .07em; }.staff-bank-account-form > header strong { color: #24344b; font-size: .62rem; margin-top: 1px; }
.staff-bank-account-form .staff-payment-settings-grid { padding: 14px; }
.staff-bank-active { align-items: center; color: #547067; display: flex; font-size: .52rem; font-weight: 800; gap: 6px; }.staff-bank-active input { accent-color: #087f54; }
.staff-bank-delete { align-items: center; align-self: end; background: #fff3f4; border: 1px solid #ffd7dc; border-radius: 10px; color: #c3162c; display: flex; gap: 7px; min-height: 43px; padding: 0 11px; }.staff-bank-delete input { accent-color: #dc1730; }.staff-bank-delete > span { color: inherit !important; display: inline !important; margin: 0 !important; }
.staff-bank-accounts-empty { align-items: center; background: #f8fafc; border: 1px dashed #cfd8e5; border-radius: 13px; color: #8794a7; display: flex; flex-direction: column; min-height: 145px; justify-content: center; padding: 20px; text-align: center; }.staff-bank-accounts-empty i { color: #5b75bf; font-size: 1.25rem; margin-bottom: 5px; }.staff-bank-accounts-empty strong { color: #415169; font-size: .64rem; }.staff-bank-accounts-empty span { font-size: .52rem; margin-top: 3px; }
.staff-add-bank-account { align-items: center; background: #eef3ff; border: 1px solid #cfdbf5; border-radius: 10px; color: #315cad; display: flex; font-size: .61rem; font-weight: 850; gap: 7px; justify-content: center; min-height: 43px; transition: background .18s,border-color .18s; width: 100%; }.staff-add-bank-account:hover { background: #e3ebff; border-color: #b9c9ee; }
.staff-bank-form-errors { background: #fff0f2; border: 1px solid #ffcbd2; border-radius: 10px; color: #a41427; font-size: .55rem; padding: 10px 12px; }.staff-bank-form-errors ul { margin: 0; padding-left: 17px; }
.payment-method-card.method-disabled .staff-bank-accounts { opacity: .55; }.payment-method-card .staff-bank-accounts { transition: opacity .2s; }
.staff-payment-qr-field > div { align-items: center; background: #f8fafc; border: 1px dashed #cfd7e3; border-radius: 11px; display: flex; gap: 14px; padding: 11px; }.staff-payment-qr-field img { border-radius: 9px; height: 70px; object-fit: cover; width: 70px; }.staff-payment-qr-field > div > i { align-items: center; background: #fff; border: 1px solid #e1e6ed; border-radius: 9px; color: #8290a4; display: flex; font-size: 1.4rem; height: 58px; justify-content: center; width: 58px; }.staff-payment-qr-field > div > div { flex: 1; }
.staff-payment-instructions { display: block; padding: 18px; }.staff-payment-instructions textarea { min-height: 105px; resize: vertical; }
.staff-payment-settings-preview { display: grid; gap: 12px; position: sticky; top: 92px; }.staff-payment-preview-card { background: linear-gradient(155deg,#111a2a,#18253b); border-radius: 17px; box-shadow: 0 18px 40px rgba(16,27,47,.18); color: #fff; overflow: hidden; padding: 17px; }.staff-payment-preview-card > header { align-items: center; border-bottom: 1px solid rgba(255,255,255,.09); display: flex; gap: 9px; padding-bottom: 13px; }.staff-payment-preview-card > header > span { align-items: center; background: rgba(255,255,255,.09); border-radius: 9px; color: #ff4356; display: flex; height: 34px; justify-content: center; width: 34px; }.staff-payment-preview-card header small,.staff-payment-preview-card header strong { display: block; }.staff-payment-preview-card header small { color: #8d9aae; font-size: .44rem; font-weight: 850; letter-spacing: .07em; }.staff-payment-preview-card header strong { font-size: .68rem; }
.staff-payment-preview-time { align-items: center; background: rgba(255,255,255,.06); border-radius: 11px; display: flex; gap: 10px; margin: 14px 0; padding: 11px; }.staff-payment-preview-time > i { color: #ff4054; font-size: 1.15rem; }.staff-payment-preview-time small,.staff-payment-preview-time strong { display: block; }.staff-payment-preview-time small { color: #929eb0; font-size: .48rem; }.staff-payment-preview-time strong { font-size: .7rem; }
.staff-payment-preview-methods { display: grid; gap: 7px; }.staff-payment-preview-methods > div { align-items: center; background: #fff; border-radius: 10px; color: #233149; display: flex; gap: 9px; padding: 10px; }.staff-payment-preview-methods > div.inactive { opacity: .42; }.staff-payment-preview-methods i { align-items: center; background: #edf3ff; border-radius: 8px; color: #3d66bd; display: flex; height: 30px; justify-content: center; width: 30px; }.staff-payment-preview-methods strong,.staff-payment-preview-methods small { display: block; }.staff-payment-preview-methods strong { font-size: .58rem; }.staff-payment-preview-methods small { color: #7f8b9d; font-size: .47rem; }
.staff-payment-preview-card > p { align-items: flex-start; color: #a9b3c1; display: flex; font-size: .49rem; gap: 7px; line-height: 1.5; margin: 14px 1px 0; }.staff-payment-preview-card > p i { color: #5ed3a0; }
.staff-payment-settings-tip { align-items: flex-start; background: #fff9e9; border: 1px solid #f5e1a8; border-radius: 12px; color: #8a6713; display: flex; gap: 9px; padding: 11px; }.staff-payment-settings-tip p { margin: 0; }.staff-payment-settings-tip strong,.staff-payment-settings-tip span { display: block; }.staff-payment-settings-tip strong { font-size: .58rem; }.staff-payment-settings-tip span { font-size: .49rem; margin-top: 2px; }
.staff-payment-settings-preview > button { background: #ed1c35; border: 0; border-radius: 11px; box-shadow: 0 10px 22px rgba(237,28,53,.22); color: #fff; font-size: .68rem; font-weight: 850; min-height: 47px; }.staff-payment-settings-preview > button:hover { background: #d9152c; }
@media (max-width: 980px) { .staff-payment-settings-form { grid-template-columns: 1fr; }.staff-payment-settings-preview { position: static; }.staff-payment-preview-card,.staff-payment-settings-tip { display: none; } }
@media (max-width: 680px) { .staff-payment-settings-page { padding-top: 20px; }.staff-payment-settings-header { align-items: stretch; flex-direction: column; }.staff-payment-settings-header > aside { min-width: 0; }.staff-payment-settings-grid.two { grid-template-columns: 1fr; }.staff-payment-settings-grid .wide { grid-column: auto; }.staff-payment-settings-card > header { align-items: start; grid-template-columns: auto 1fr; }.staff-payment-switch { grid-column: 1 / -1; justify-content: flex-end; }.staff-payment-qr-field > div { align-items: stretch; flex-direction: column; }.staff-bank-account-form > header { grid-template-columns: auto 1fr; }.staff-bank-active { grid-column: 1 / -1; justify-content: flex-end; } }

@media (max-width: 1080px) {
  .chapi-incomplete-row > summary { grid-template-columns: auto minmax(170px,1fr) minmax(160px,1fr) 130px auto; }
  .chapi-conversation-meta { display: none; }
}
@media (max-width: 991.98px) {
  .staff-request-row { grid-template-columns: minmax(0,1fr) auto; }
  .staff-request-row > span:nth-child(2),
  .staff-request-row > span:nth-child(3) { grid-column: 1; justify-self: start; }
  .staff-request-row > span:nth-child(4),
  .staff-request-row > span:nth-child(5),
  .staff-request-row time { grid-column: 2; justify-self: end; }
  .chapi-incomplete-row > summary { grid-template-columns: auto 1fr auto; }
  .chapi-conversation-chevron { grid-column: 3; grid-row: 1; }
  .chapi-conversation-customer { grid-column: 2; }
  .chapi-conversation-progress { grid-column: 2 / 4; }
  .chapi-incomplete-detail { grid-template-columns: 1fr; margin-left: 0; }
}
@media (max-width: 768px) {
  .staff-customer-contact { align-items: start; grid-template-columns: auto 1fr; }
  .staff-customer-contact > a,
  .staff-customer-contact-missing { grid-column: 1 / -1; justify-content: center; }
  .chapi-incomplete-section { padding: 15px; }
  .chapi-incomplete-section > header { align-items: stretch; flex-direction: column; }
  .chapi-incomplete-tools { align-items: stretch; }
  .chapi-conversation-filters button { flex: 1; }
}
@media (max-width: 575.98px) {
  .staff-request-row { grid-template-columns: 1fr; }
  .staff-request-row > span:nth-child(2),
  .staff-request-row > span:nth-child(3),
  .staff-request-row > span:nth-child(4),
  .staff-request-row > span:nth-child(5),
  .staff-request-row time { grid-column: 1; justify-self: start; }
  .chapi-incomplete-heading { align-items: flex-start; }
  .chapi-incomplete-heading > span { flex: 0 0 40px; height: 40px; width: 40px; }
  .chapi-incomplete-row > summary { grid-template-columns: auto 1fr auto; padding-block: 13px; }
  .chapi-conversation-customer { grid-column: 1 / 4; padding-left: 51px; }
  .chapi-conversation-meta { align-items: center; display: flex; grid-column: 1 / 4; justify-content: space-between; padding-left: 51px; text-align: left; }
  .chapi-conversation-meta time { margin-top: 0; }
  .chapi-conversation-progress { grid-column: 1 / 4; }
  .chapi-incomplete-detail { padding: 10px; }
  .chapi-incomplete-transcript article > div { max-width: calc(100% - 34px); }
}

/* Keep the operations shell authoritative over earlier dashboard styles. */
.staff-dashboard-experience { background: #f5f7fa; }
.staff-dashboard-experience main { min-height: calc(100vh - 72px); }
.staff-dashboard-experience > footer,
.staff-dashboard-experience .mobile-tab-bar { display: none; }
.staff-dashboard-experience .staff-dashboard-page { padding: 0; }
.staff-ops-workspace .staff-dashboard-header { align-items: center; margin-bottom: 1.55rem; }
.staff-ops-workspace .staff-dashboard-header-actions { align-items: center; flex-direction: row; width: auto; }
.staff-ops-workspace .staff-dashboard-header-actions time,
.staff-ops-workspace .staff-header-menu > summary { justify-content: center; width: auto; }

@media (max-width: 767.98px) {
  .staff-ops-workspace .staff-dashboard-header { align-items: flex-start; }
  .staff-ops-workspace .staff-dashboard-header-actions { width: 100%; }
  .staff-ops-workspace .staff-dashboard-header-actions time,
  .staff-ops-workspace .staff-header-menu,
  .staff-ops-workspace .staff-header-menu > summary { flex: 1; width: 100%; }
}

@media (max-width: 479.98px) {
  .staff-ops-workspace .staff-dashboard-header-actions { align-items: stretch; flex-direction: column; }
}

/* Public quote reservation and secure payment */
.quote-reservation-page { background: #f4f7fb; color: #142033; }
.quote-reservation-page > .app-navbar,
.quote-reservation-page > footer,
.quote-reservation-page > .mobile-tab-bar { display: none !important; }
.quote-reservation-page > main { min-height: 100vh; }
.quote-reservation-page > .message-stack { margin-bottom: -4px; margin-top: 14px; max-width: 1120px; position: relative; z-index: 4; }
.payment-public-shell { background: radial-gradient(circle at 90% 4%,rgba(52,103,200,.1),transparent 25%),linear-gradient(180deg,#f8faff 0,#f3f6fa 100%); min-height: 100vh; }
.payment-public-container { margin: 0 auto; max-width: 1120px; padding-left: 20px; padding-right: 20px; width: 100%; }
.payment-public-header { background: #080d16; border-bottom: 1px solid rgba(255,255,255,.08); }
.payment-public-header .payment-public-container { align-items: center; display: flex; height: 70px; justify-content: space-between; }
.payment-public-header img { height: 42px; object-fit: contain; width: auto; }
.payment-public-header span { align-items: center; background: rgba(23,165,111,.11); border: 1px solid rgba(87,211,159,.23); border-radius: 999px; color: #a8ead0; display: flex; font-size: .7rem; font-weight: 750; gap: 7px; padding: 8px 12px; }
.payment-public-main { padding: 24px 0 36px; }
.payment-public-messages { display: grid; gap: 8px; margin-bottom: 14px; }.payment-public-messages .alert { border: 0; border-radius: 12px; box-shadow: 0 8px 22px rgba(18,35,62,.06); font-size: .68rem; margin: 0; padding: 11px 13px; }
.payment-security-strip { align-items: center; background: #edf9f4; border: 1px solid #c8ebdc; border-radius: 14px; display: grid; gap: 11px; grid-template-columns: auto 1fr auto; margin-bottom: 18px; padding: 13px 15px; }
.payment-security-strip > span { align-items: center; background: #fff; border-radius: 10px; color: #087e54; display: flex; height: 38px; justify-content: center; width: 38px; }
.payment-security-strip strong,.payment-security-strip small { display: block; }.payment-security-strip strong { color: #174b39; font-size: .69rem; }.payment-security-strip small { color: #638276; font-size: .55rem; margin-top: 2px; }
.payment-security-strip em { color: #087e54; font-size: .57rem; font-style: normal; font-weight: 800; white-space: nowrap; }.payment-security-strip em i { margin-right: 4px; }
.payment-public-grid { align-items: start; display: grid; gap: 18px; grid-template-columns: minmax(300px,360px) minmax(0,1fr); }
.payment-quote-summary,.payment-action-panel { background: #fff; border: 1px solid #dfe6ef; border-radius: 20px; box-shadow: 0 16px 42px rgba(18,35,62,.07); }
.payment-quote-summary { overflow: hidden; position: sticky; top: 18px; }
.payment-quote-reference { align-items: center; background: linear-gradient(135deg,#101a2b,#192944); color: #fff; display: grid; gap: 4px 10px; grid-template-columns: 1fr auto; padding: 18px 20px; }
.payment-quote-reference span { color: #99a8bd; font-size: .48rem; font-weight: 850; grid-column: 1; letter-spacing: .1em; }.payment-quote-reference strong { font-size: 1rem; grid-column: 1; letter-spacing: .02em; }.payment-quote-reference button { align-items: center; align-self: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.13); border-radius: 9px; color: #fff; display: flex; grid-column: 2; grid-row: 1 / 3; height: 36px; justify-content: center; min-width: 36px; padding: 0 9px; }
.payment-quote-product { align-items: flex-start; display: flex; gap: 12px; padding: 19px 20px 15px; }.payment-quote-product > span { align-items: center; background: #fff0f2; border-radius: 12px; color: #ed1c35; display: flex; flex: 0 0 42px; font-size: 1rem; height: 42px; justify-content: center; }.payment-quote-product > div { min-width: 0; }.payment-quote-product small,.payment-quote-product strong,.payment-quote-product p { display: block; }.payment-quote-product small { color: #96a1b2; font-size: .46rem; font-weight: 850; letter-spacing: .07em; }.payment-quote-product strong { color: #19283e; font-size: .69rem; line-height: 1.4; margin-top: 3px; }.payment-quote-product p { color: #7b8799; font-size: .56rem; margin: 4px 0 0; }
.payment-quote-facts { border-bottom: 1px solid #e8edf3; border-top: 1px solid #e8edf3; display: grid; gap: 0; grid-template-columns: repeat(3,1fr); margin: 0 20px; padding: 13px 0; }.payment-quote-facts > div { border-right: 1px solid #e8edf3; min-width: 0; padding: 0 9px; }.payment-quote-facts > div:first-child { padding-left: 0; }.payment-quote-facts > div:last-child { border: 0; padding-right: 0; }.payment-quote-facts dt { color: #96a1b1; font-size: .46rem; font-weight: 650; }.payment-quote-facts dd { color: #36455b; font-size: .55rem; font-weight: 800; margin: 3px 0 0; overflow-wrap: anywhere; }
.payment-quote-total { padding: 17px 20px; }.payment-quote-total > span { color: #69768a; display: block; font-size: .57rem; font-weight: 700; }.payment-quote-total > strong { color: #111d30; display: block; font-size: 1.65rem; letter-spacing: -.035em; margin-top: 2px; }.payment-quote-total > strong small { color: #657389; font-size: .58rem; letter-spacing: 0; }.payment-quote-total p { color: #9aa4b3; font-size: .5rem; margin: 1px 0 0; }
.payment-security-note { align-items: flex-start; background: #f7f9fc; border-top: 1px solid #e8edf3; display: flex; gap: 9px; padding: 13px 20px; }.payment-security-note > i { color: #087f54; margin-top: 2px; }.payment-security-note p { margin: 0; }.payment-security-note strong,.payment-security-note span { display: block; }.payment-security-note strong { color: #46556a; font-size: .55rem; }.payment-security-note span { color: #8793a4; font-size: .49rem; line-height: 1.45; margin-top: 2px; }
.payment-action-panel { overflow: hidden; padding: 22px; }
.payment-action-heading { align-items: flex-start; display: flex; gap: 12px; margin-bottom: 17px; }.payment-action-heading > span { align-items: center; background: #e9f9f1; border-radius: 12px; color: #078152; display: flex; flex: 0 0 44px; font-size: 1.2rem; height: 44px; justify-content: center; }.payment-action-heading small,.payment-action-heading h1,.payment-action-heading p { display: block; }.payment-action-heading small { color: #078152; font-size: .48rem; font-weight: 900; letter-spacing: .08em; }.payment-action-heading h1 { color: #122036; font-size: 1.45rem; font-weight: 900; letter-spacing: -.03em; margin: 3px 0; }.payment-action-heading p { color: #778498; font-size: .62rem; line-height: 1.5; margin: 0; }
.payment-deadline-card { align-items: center; background: linear-gradient(135deg,#fff7eb,#fffaf3); border: 1px solid #f4dcba; border-radius: 13px; display: flex; justify-content: space-between; margin-bottom: 11px; padding: 12px 14px; }.payment-deadline-card > div { align-items: center; display: flex; gap: 10px; }.payment-deadline-card > div > i { color: #d07709; font-size: 1.1rem; }.payment-deadline-card small,.payment-deadline-card strong { display: block; }.payment-deadline-card small { color: #a07135; font-size: .43rem; font-weight: 850; letter-spacing: .07em; }.payment-deadline-card strong { color: #9a5200; font-size: 1.15rem; letter-spacing: .04em; }.payment-deadline-card p { color: #9a7444; font-size: .51rem; margin: 0; text-align: right; }
.payment-reference-instruction { align-items: center; background: #eef3ff; border: 1px solid #cfdbf4; border-radius: 13px; display: grid; gap: 10px; grid-template-columns: auto 1fr auto; margin-bottom: 19px; padding: 12px; }.payment-reference-instruction > span { align-items: center; background: #fff; border-radius: 9px; color: #345eb4; display: flex; height: 36px; justify-content: center; width: 36px; }.payment-reference-instruction small,.payment-reference-instruction strong,.payment-reference-instruction p { display: block; }.payment-reference-instruction small { color: #6e83af; font-size: .43rem; font-weight: 900; letter-spacing: .07em; }.payment-reference-instruction strong { color: #243c70; font-size: .65rem; }.payment-reference-instruction p { color: #7283a5; font-size: .49rem; margin: 2px 0 0; }.payment-reference-instruction button { background: #fff; border: 1px solid #c8d5ee; border-radius: 9px; color: #315aad; font-size: .54rem; font-weight: 800; min-height: 35px; padding: 0 10px; }.payment-reference-instruction button.copied { background: #e8f8f0; border-color: #b9e3cf; color: #087f54; }
.payment-method-section > header,.payment-receipt-form > header { align-items: center; display: flex; justify-content: space-between; margin-bottom: 11px; }.payment-method-section header small,.payment-method-section header h2,.payment-receipt-form header small,.payment-receipt-form header h2,.payment-receipt-form header p { display: block; }.payment-method-section header small,.payment-receipt-form header small { color: #ed1c35; font-size: .44rem; font-weight: 900; letter-spacing: .08em; }.payment-method-section header h2,.payment-receipt-form header h2 { color: #26364c; font-size: .78rem; font-weight: 850; margin: 2px 0 0; }.payment-receipt-form header p { color: #8a95a5; font-size: .5rem; margin: 2px 0 0; }.payment-receipt-form > header > i { color: #70809a; font-size: 1.1rem; }
.payment-method-list { display: grid; gap: 10px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.payment-method-secure-card { border: 1px solid #dfe5ed; border-radius: 13px; overflow: hidden; }.payment-method-secure-card > header { align-items: center; background: #fafbfd; border-bottom: 1px solid #e7ebf1; display: grid; gap: 9px; grid-template-columns: auto 1fr auto; margin: 0; padding: 11px; }.payment-method-secure-card > header > span { align-items: center; border-radius: 9px; display: flex; height: 34px; justify-content: center; width: 34px; }.payment-method-secure-card > header > span.bank { background: #eaf1ff; color: #3864bd; }.payment-method-secure-card > header > span.yappy { background: #e8f9f1; color: #078152; }.payment-method-secure-card > header > i { color: #159164; }.payment-method-secure-card header small,.payment-method-secure-card header strong { display: block; }.payment-method-secure-card header small { color: #9aa4b3; font-size: .4rem; font-weight: 850; letter-spacing: .06em; }.payment-method-secure-card header strong { color: #2b3a50; font-size: .61rem; margin-top: 1px; }
.payment-method-secure-card dl { display: grid; gap: 8px; margin: 0; padding: 11px; }.payment-method-secure-card dl > div { min-width: 0; }.payment-method-secure-card dt { color: #99a3b2; font-size: .44rem; font-weight: 650; }.payment-method-secure-card dd { color: #3c4b60; font-size: .55rem; font-weight: 750; margin: 2px 0 0; overflow-wrap: anywhere; }.payment-method-secure-card .account-number dd { align-items: center; background: #f5f7fa; border-radius: 8px; display: flex; justify-content: space-between; padding: 7px 8px; }.payment-method-secure-card .account-number button { background: #fff; border: 1px solid #dbe2eb; border-radius: 7px; color: #4467a9; min-height: 27px; min-width: 29px; padding: 0 7px; }.payment-method-secure-card .account-number button.copied { background: #e8f8f0; color: #087f54; }
.payment-yappy-details { align-items: center; display: flex; gap: 11px; padding: 11px; }.payment-yappy-details img { border: 1px solid #dfe5ed; border-radius: 9px; height: 64px; object-fit: cover; width: 64px; }.payment-yappy-details > div { min-width: 0; }.payment-yappy-details small,.payment-yappy-details strong { display: block; }.payment-yappy-details small { color: #8d98a8; font-size: .45rem; }.payment-yappy-details strong { color: #334258; font-size: .68rem; margin: 2px 0 5px; }.payment-yappy-details button { background: #edf8f3; border: 1px solid #c9e9da; border-radius: 7px; color: #087e54; font-size: .47rem; font-weight: 800; padding: 5px 8px; }
.payment-method-warning,.payment-extra-instructions { align-items: flex-start; border-radius: 10px; display: flex; font-size: .53rem; gap: 8px; line-height: 1.5; margin-top: 10px; padding: 10px 11px; }.payment-method-warning { background: #fff5e9; border: 1px solid #f4d7ad; color: #925b14; }.payment-extra-instructions { background: #f6f8fb; border: 1px solid #e0e6ee; color: #6e7b8e; }.payment-extra-instructions p { margin: 0; }
.payment-receipt-form { border-top: 1px solid #e6ebf1; margin-top: 19px; padding-top: 18px; }
.payment-file-drop { align-items: center; background: #fafbfd; border: 1.5px dashed #c8d2e0; border-radius: 13px; cursor: pointer; display: flex; flex-direction: column; justify-content: center; min-height: 135px; padding: 17px; text-align: center; transition: .18s ease; }.payment-file-drop:hover { background: #f3f7ff; border-color: #748bd7; }.payment-file-drop.has-file { background: #eef9f4; border-color: #64b993; }.payment-file-drop input { height: 1px; opacity: 0; position: absolute; width: 1px; }.payment-file-drop > span { align-items: center; background: #edf2ff; border-radius: 11px; color: #4266be; display: flex; font-size: 1.1rem; height: 42px; justify-content: center; margin-bottom: 8px; width: 42px; }.payment-file-drop.has-file > span { background: #dff4e9; color: #087e54; }.payment-file-drop strong { color: #34445a; font-size: .63rem; max-width: 100%; overflow-wrap: anywhere; }.payment-file-drop small { color: #929dac; font-size: .49rem; margin-top: 3px; }
.payment-submit-trust { align-items: center; color: #7e8a9c; display: flex; font-size: .49rem; gap: 6px; justify-content: center; padding: 10px 0; }.payment-submit-trust i { color: #087e54; }
.payment-payment-confirmation { margin: 0 0 11px; }.payment-payment-confirmation-check { align-items: flex-start; background: #f8fafc; border: 1px solid #dce4ee; border-radius: 10px; color: #526276; cursor: pointer; display: flex; font-size: .52rem; gap: 8px; line-height: 1.45; margin-top: 10px; padding: 10px 11px; }.payment-payment-confirmation-check input { accent-color: #0b8358; flex: 0 0 auto; margin-top: 2px; }.payment-payment-confirmation-check:has(input:checked) { background: #eff9f4; border-color: #a9ddc5; color: #16734f; }
.payment-submit-button,.payment-state-card.reserve form button { align-items: center; background: linear-gradient(135deg,#ed1c35,#d9152d); border: 0; border-radius: 11px; box-shadow: 0 10px 24px rgba(237,28,53,.2); color: #fff; display: flex; font-size: .68rem; font-weight: 850; gap: 8px; justify-content: center; min-height: 49px; padding: 0 16px; width: 100%; }.payment-submit-button:hover,.payment-state-card.reserve form button:hover { background: linear-gradient(135deg,#dd142d,#c91027); }
.payment-submit-button:disabled { cursor: wait; opacity: .72; }
.payment-support-link { align-items: center; border: 1px solid #dfe6ed; border-radius: 11px; color: #34445a; display: grid; gap: 9px; grid-template-columns: auto 1fr auto; margin-top: 12px; padding: 10px 12px; text-decoration: none; }.payment-support-link > i:first-child { align-items: center; background: #e8f8f1; border-radius: 8px; color: #078152; display: flex; height: 32px; justify-content: center; width: 32px; }.payment-support-link span strong,.payment-support-link span small { display: block; }.payment-support-link span strong { font-size: .56rem; }.payment-support-link span small { color: #8b96a6; font-size: .47rem; }.payment-support-link > i:last-child { color: #9aa4b2; }
.payment-state-card { align-items: center; display: flex; flex-direction: column; min-height: 460px; justify-content: center; padding: 30px; text-align: center; }.payment-state-card > span { align-items: center; border-radius: 50%; display: flex; font-size: 1.65rem; height: 70px; justify-content: center; margin-bottom: 14px; width: 70px; }.payment-state-card > small { font-size: .48rem; font-weight: 900; letter-spacing: .09em; }.payment-state-card h1 { color: #17253a; font-size: 1.55rem; font-weight: 900; letter-spacing: -.035em; margin: 5px 0; }.payment-state-card > p { color: #758297; font-size: .65rem; line-height: 1.6; margin: 0; max-width: 430px; }.payment-state-card > div { align-items: center; border-radius: 11px; display: flex; gap: 9px; margin-top: 20px; padding: 10px 13px; text-align: left; }.payment-state-card > div small,.payment-state-card > div strong { display: block; }.payment-state-card > div small { font-size: .44rem; }.payment-state-card > div strong { font-size: .55rem; }.payment-state-card.success > span { background: #e5f8ef; color: #078152; }.payment-state-card.success > small { color: #078152; }.payment-state-card.success > div { background: #edf9f4; color: #177354; }.payment-state-card.waiting > span { background: #edf3ff; color: #3c65bd; }.payment-state-card.waiting > small { color: #3c65bd; }.payment-state-card.waiting > div { background: #fff5e8; color: #97601b; }.payment-state-card.reserve > span { background: #fff0f2; color: #ed1c35; }.payment-state-card.reserve > small { color: #ed1c35; }.payment-state-card.reserve form { margin-top: 22px; max-width: 350px; width: 100%; }.payment-state-card.reserve > div { background: #eef4ff; color: #496597; }.payment-state-card.neutral > span { background: #f0f3f7; color: #68778c; }
.payment-public-footer { align-items: center; color: #8a96a7; display: flex; font-size: .5rem; justify-content: space-between; padding: 20px 4px 0; }.payment-public-footer i { color: #087e54; margin-right: 4px; }.payment-public-footer a { color: #66758a; }
/* Readability floor for critical payment information. */
.payment-security-strip strong { font-size: .76rem; }.payment-security-strip small { font-size: .63rem; }
.payment-quote-product small { font-size: .52rem; }.payment-quote-product strong { font-size: .76rem; }.payment-quote-product p { font-size: .63rem; }
.payment-quote-facts dt { font-size: .54rem; }.payment-quote-facts dd { font-size: .64rem; }
.payment-quote-total > span { font-size: .64rem; }.payment-quote-total p { font-size: .57rem; }
.payment-security-note strong { font-size: .62rem; }.payment-security-note span { font-size: .56rem; }
.payment-action-heading small { font-size: .52rem; }.payment-action-heading p { font-size: .69rem; }
.payment-deadline-card small { font-size: .48rem; }.payment-deadline-card p { font-size: .58rem; }
.payment-reference-instruction small { font-size: .48rem; }.payment-reference-instruction strong { font-size: .73rem; }.payment-reference-instruction p { font-size: .56rem; }.payment-reference-instruction button { font-size: .61rem; }
.payment-method-section header small,.payment-receipt-form header small { font-size: .5rem; }.payment-method-section header h2,.payment-receipt-form header h2 { font-size: .88rem; }.payment-receipt-form header p { font-size: .59rem; }
.payment-method-secure-card header small { font-size: .47rem; }.payment-method-secure-card header strong { font-size: .72rem; }.payment-method-secure-card dt { font-size: .52rem; }.payment-method-secure-card dd { font-size: .64rem; }
.payment-yappy-details small { font-size: .52rem; }.payment-yappy-details strong { font-size: .75rem; }.payment-yappy-details button { font-size: .54rem; }
.payment-method-warning,.payment-extra-instructions { font-size: .6rem; }
.payment-file-drop strong { font-size: .71rem; }.payment-file-drop small { font-size: .56rem; }.payment-submit-trust { font-size: .56rem; }
.payment-support-link span strong { font-size: .64rem; }.payment-support-link span small { font-size: .55rem; }
.payment-public-footer { font-size: .56rem; }
@media (max-width: 850px) { .payment-public-grid { grid-template-columns: 1fr; }.payment-quote-summary { position: static; }.payment-quote-summary { display: grid; grid-template-columns: 1fr 1fr; }.payment-quote-reference { grid-column: 1 / -1; }.payment-quote-product { border-right: 1px solid #e8edf3; }.payment-quote-facts { grid-column: 1; grid-row: 3; }.payment-quote-total { grid-column: 2; grid-row: 2 / 4; padding-top: 25px; }.payment-security-note { grid-column: 1 / -1; }.payment-method-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .payment-public-container { padding-left: 12px; padding-right: 12px; }.payment-public-header .payment-public-container { height: 60px; }.payment-public-header img { height: 34px; }.payment-public-header span { font-size: .56rem; padding: 7px 9px; }.payment-public-main { padding-top: 12px; }.payment-security-strip { grid-template-columns: auto 1fr; padding: 10px; }.payment-security-strip em { display: none; }.payment-security-strip strong { font-size: .59rem; }.payment-security-strip small { font-size: .49rem; }.payment-public-grid { gap: 12px; }.payment-quote-summary { display: block; border-radius: 16px; }.payment-quote-product { border-right: 0; }.payment-quote-facts { margin: 0 14px; }.payment-quote-total { padding: 14px; }.payment-security-note { padding: 11px 14px; }.payment-action-panel { border-radius: 16px; padding: 15px; }.payment-action-heading h1 { font-size: 1.25rem; }.payment-deadline-card { align-items: flex-start; }.payment-deadline-card p { font-size: .45rem; max-width: 140px; }.payment-reference-instruction { align-items: start; grid-template-columns: auto 1fr; }.payment-reference-instruction > button { grid-column: 1 / -1; width: 100%; }.payment-method-list { grid-template-columns: 1fr; }.payment-method-secure-card header strong { font-size: .65rem; }.payment-file-drop { min-height: 125px; }.payment-submit-button { font-size: .63rem; min-height: 52px; }.payment-public-footer { align-items: center; flex-direction: column; gap: 5px; text-align: center; }.payment-state-card { min-height: 390px; padding: 18px 5px; }.payment-state-card h1 { font-size: 1.35rem; } }
@media (max-width: 380px) { .payment-public-header span { font-size: 0; gap: 0; }.payment-public-header span i { font-size: .85rem; }.payment-quote-facts { grid-template-columns: 1fr 1fr; row-gap: 10px; }.payment-quote-facts > div:nth-child(2) { border: 0; }.payment-quote-facts > div:last-child { border-top: 1px solid #e8edf3; grid-column: 1 / -1; padding-top: 10px; }.payment-deadline-card { display: block; }.payment-deadline-card p { margin-top: 7px; max-width: none; text-align: left; } }
/* Public request extension */
.request-extension-page { min-height: 100vh; background: radial-gradient(circle at 80% 0, #fff1f3 0, transparent 30%), #f5f7fb; }
.request-extension-shell { width: min(100% - 32px, 720px); margin: 0 auto; padding: 32px 0 64px; }
.request-extension-shell > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.request-extension-shell > header img { width: 210px; max-width: 58%; }
.request-extension-shell > header span { display: inline-flex; align-items: center; gap: 7px; color: #087a55; background: #e9fbf3; border: 1px solid #bdeed9; border-radius: 999px; padding: 8px 12px; font-weight: 700; font-size: .78rem; }
.request-extension-card { background: #fff; border: 1px solid #e3e8f1; border-radius: 28px; box-shadow: 0 24px 70px rgba(15, 23, 42, .10); padding: 44px; text-align: center; }
.request-extension-icon { width: 72px; height: 72px; margin: 0 auto 20px; display: grid; place-items: center; border-radius: 22px; background: #fff0f2; color: #ef233c; font-size: 2rem; }
.request-extension-icon.success { background: #eafaf3; color: #07865c; }
.request-extension-card > small { color: #ef233c; font-weight: 800; letter-spacing: .11em; }
.request-extension-card h1 { color: #101828; font-size: clamp(1.65rem, 5vw, 2.35rem); line-height: 1.12; font-weight: 800; margin: 10px auto 14px; max-width: 560px; }
.request-extension-card > p { color: #667085; max-width: 560px; margin: 0 auto 24px; }
.request-extension-summary { display: flex; gap: 14px; text-align: left; align-items: center; background: #f8fafc; border: 1px solid #e4e9f1; border-radius: 18px; padding: 18px; margin: 28px 0; }
.request-extension-summary > span { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border-radius: 14px; background: #fff0f2; color: #ef233c; font-size: 1.25rem; }
.request-extension-summary small, .request-extension-deadline span { display: block; color: #8a94a6; font-size: .7rem; font-weight: 800; letter-spacing: .08em; }
.request-extension-summary strong { display: block; color: #172033; font-size: 1rem; margin: 2px 0; }
.request-extension-summary p { margin: 0; color: #667085; font-size: .86rem; }
.request-extension-card form button { border: 0; width: 100%; border-radius: 14px; padding: 15px 18px; color: #fff; background: #ef233c; box-shadow: 0 10px 24px rgba(239, 35, 60, .22); font-weight: 800; }
.request-extension-card form button:hover { background: #d91931; }
.request-extension-note { margin-top: 18px !important; margin-bottom: 0 !important; font-size: .8rem; }
.request-extension-deadline { max-width: 430px; margin: 28px auto 0; padding: 18px; border-radius: 16px; background: #f0fbf6; border: 1px solid #c9efdc; }
.request-extension-deadline strong { display: block; color: #087a55; font-size: 1.15rem; margin-top: 4px; }
@media (max-width: 575.98px) {
  .request-extension-shell { width: min(100% - 20px, 720px); padding-top: 18px; }
  .request-extension-shell > header { margin-bottom: 18px; }
  .request-extension-shell > header span { font-size: .68rem; padding: 7px 9px; }
  .request-extension-card { border-radius: 22px; padding: 30px 20px; }
  .request-extension-icon { width: 62px; height: 62px; border-radius: 18px; }
}

@media (max-width: 767.98px) {
  .staff-business-actions { grid-column: 1 / -1; justify-self: stretch; }
  .staff-business-actions .staff-record-action { flex: 1; justify-content: center; }
  .staff-performance-page { padding: 1.15rem 0 5rem; }
  .staff-performance-hero { align-items: start; grid-template-columns: auto minmax(0, 1fr); padding: 1rem; }
  .staff-performance-hero mark { grid-column: 1 / -1; justify-self: start; }
  .staff-performance-kpis { grid-template-columns: 1fr; gap: 0.65rem; }
  .staff-performance-kpis article { min-height: 96px; }
  .staff-performance-sales > header { align-items: start; flex-direction: column; gap: 0.55rem; }
  .staff-performance-sales article { padding: 0.8rem; }
}