.scam-hero .slots-hero-art {
  background-image: url('assets/scam-hero.webp');
  background-position: right center
}

.scam-hero .slots-hero-copy {
  max-width: 1100px
}

.scam-content h3 {
  font-size: 16px;
  line-height: 1.5
}

.scam-content h4 {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 8px
}

.scam-content>.panel>p {
  margin: 0 0 16px;
  color: #e9dcef
}

.scam-content p {
  line-height: 1.65
}

.scam-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.scam-card,
.message-card,
.report-step {
  min-width: 0;
  padding: 17px;
  border: 1px solid #c17de4;
  border-radius: 13px;
  background: linear-gradient(135deg, #54236c, #26113c 70%);
  box-shadow: inset 0 1px 0 #f1c8ff42, 0 0 12px #c546e529
}

.scam-card-heading,
.message-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 15px
}

.scam-card-heading .ui-icon,
.message-heading .ui-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  padding: 6px;
  border: 1px solid #cc89e4;
  border-radius: 10px;
  background: linear-gradient(#a04cbe, #58217d);
  filter: drop-shadow(0 0 6px #cc67ed35)
}

.scam-card h3,
.message-card h3 {
  margin: 0;
  color: #f8e4ff
}

.scam-card>h4 {
  color: #e8b9fb
}

.scam-card>p {
  margin: 9px 0;
  color: #eadff0
}

.scam-details {
  margin-top: 15px;
  border-top: 1px solid #9e61b866;
  padding-top: 11px
}

.scam-details>summary {
  cursor: pointer;
  color: #f1b0ff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5
}

.scam-details[open]>summary {
  display: none
}

.warning-surface {
  padding: 14px;
  border: 1px solid #e5b6ef;
  border-radius: 11px;
  background: linear-gradient(120deg, #f6e7fb, #d1b5ea);
  color: #2b143c
}

.warning-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px
}

.warning-list li {
  position: relative;
  padding-left: 21px
}

.warning-list li:before {
  content: '!';
  position: absolute;
  left: 0;
  top: 3px;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #9b2160;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1
}

.action-surface {
  padding: 14px 0 3px
}

.action-surface h4 {
  color: #f6d8ff
}

.action-surface p {
  margin: 9px 0;
  color: #ede1f2
}

.scam-details .hide-details {
  margin-top: 8px
}

.agent-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 18px;
  align-items: stretch
}

.agent-layout>div {
  min-width: 0
}

.agent-checklist {
  display: flex;
  flex-direction: column
}

.agent-checklist h3 {
  margin: 0 0 10px
}

.agent-progress-text {
  font-size: 14px;
  margin-bottom: 9px
}

.agent-checklist progress {
  appearance: none;
  width: 100%;
  height: 11px;
  border: 1px solid #dcb8ee;
  border-radius: 10px;
  overflow: hidden;
  background: #352047;
  margin-bottom: 15px
}

.agent-checklist progress::-webkit-progress-bar {
  background: #352047
}

.agent-checklist progress::-webkit-progress-value {
  background: linear-gradient(90deg, #f267ef, #9d7bfa)
}

.agent-checklist progress::-moz-progress-bar {
  background: linear-gradient(90deg, #f267ef, #9d7bfa)
}

.agent-checks {
  padding: 5px 13px;
  border: 1px solid #e5beef;
  border-radius: 12px;
  background: linear-gradient(120deg, #f2e9ff, #cdb4e8);
  color: #29153c
}

.agent-checks label {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 0;
  border-bottom: 1px solid #b38ac56b;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer
}

.agent-checks label:last-child {
  border: 0
}

.agent-checks input {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  accent-color: #9b20bc;
  cursor: pointer
}

.agent-outcome {
  margin-top: 13px;
  padding: 11px 13px;
  border: 1px solid #e2bc87;
  border-radius: 10px;
  background: linear-gradient(120deg, #fff0cf, #ecc4e9);
  color: #2b1739;
  font-weight: 600
}

.contact-art {
  display: block;
  flex: 1;
  width: 100%;
  height: 170px;
  min-height: 140px;
  max-height: 230px;
  object-fit: contain;
  margin-top: 15px;
  filter: drop-shadow(0 0 10px #b74ed528)
}

.agent-guidance {
  display: grid;
  gap: 12px
}

.agent-guidance article {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px;
  border: 1px solid #c186e2;
  border-radius: 12px;
  background: linear-gradient(120deg, #54236e, #29113d)
}

.agent-guidance article>.ui-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  filter: drop-shadow(0 0 5px #d080ee40)
}

.agent-guidance h3 {
  margin: 0 0 8px
}

.agent-guidance p {
  margin: 8px 0;
  color: #eadff2
}

.verdict,
.priority {
  margin-top: 16px;
  padding: 13px 15px;
  border: 1px solid #efc190;
  border-radius: 11px;
  background: linear-gradient(120deg, #fff0cf, #edc5eb);
  color: #2c1338
}

.verdict p,
.priority p {
  margin: 0
}

.message-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px
}

.message-card blockquote {
  margin: 0 0 14px;
  padding: 16px;
  border: 1px solid #e6b4f3;
  border-radius: 12px 12px 12px 3px;
  background: linear-gradient(120deg, #f1e6fb, #cfb7e9);
  color: #2d173e;
  line-height: 1.7;
  font-weight: 600
}

.message-assessment {
  padding: 12px 14px;
  border: 1px solid #ed85b5;
  border-radius: 10px;
  background: linear-gradient(130deg, #672448, #331139)
}

.message-assessment h4 {
  color: #ffc0d5
}

.message-assessment p {
  margin: 0;
  color: #f5e3ed
}

.message-assessment.unverified {
  border-color: #e9bc6a;
  background: linear-gradient(120deg, #62411f, #3c2138)
}

.message-assessment.unverified h4 {
  color: #ffe4a7
}

.message-action {
  padding: 13px 0 0
}

.message-action p {
  margin: 0;
  color: #ede0f4
}

.proper-request {
  margin-top: 17px;
  padding: 16px;
  border: 1px solid #a76ac6;
  border-radius: 12px;
  background: linear-gradient(120deg, #472057, #251237)
}

.proper-request h3 {
  margin: 0 0 9px
}

.proper-request p {
  margin: 9px 0;
  color: #eaddf2
}

.response-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 2px 13px;
  margin-bottom: 10px
}

.response-tabs::-webkit-scrollbar {
  display: none
}

.response-tabs button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1 0 155px;
  min-height: 67px;
  padding: 10px;
  border: 1px solid #b47bd1;
  border-radius: 13px;
  background: linear-gradient(#694080, #321445);
  color: #fff;
  font: 700 14px/1.4 Inter, Arial, sans-serif;
  cursor: pointer
}

.response-tabs .ui-icon {
  width: 29px;
  height: 29px;
  flex: 0 0 29px
}

.response-tabs button[aria-selected=true] {
  border-color: #ffe4ff;
  background: linear-gradient(#ef58ff, #c700ec 34%, #9600d3 72%, #d93cfc);
  box-shadow: inset 0 0 8px #ffb7ff80, 0 0 5px #fff0ff, 0 0 16px #e52dff80
}

.response-panel [hidden] {
  display: none !important
}

.situation-title {
  font-size: 18px !important;
  margin: 0 0 10px;
  color: #f5d0ff
}

.response-panel [role=tabpanel]>p {
  margin-bottom: 14px;
  color: #eaddf0
}

.response-steps {
  counter-reset: response;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
  padding: 0;
  margin: 0
}

.response-steps li {
  position: relative;
  padding: 13px 13px 13px 48px;
  min-width: 0;
  border: 1px solid #bb7ad2;
  border-radius: 11px;
  background: linear-gradient(120deg, #522367, #28133b);
  color: #f0e2f6
}

.response-steps li:before {
  counter-increment: response;
  content: counter(response);
  position: absolute;
  top: 13px;
  left: 12px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid #efb1fc;
  border-radius: 50%;
  background: linear-gradient(#d77bea, #8a24ad);
  font-size: 14px;
  font-weight: 800
}

.recovery-note {
  margin-top: 12px;
  color: #edd5ed
}

.recovery-note p {
  margin: 0
}

.report-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}

.report-heading {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px
}

.report-heading h3 {
  margin: 0
}

.report-heading>.ui-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px
}

.report-heading .step-number {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  font-size: 16px;
  margin: 0
}

.report-step>p {
  margin: 9px 0;
  color: #eadff0
}

.official-channels {
  grid-column: 1/-1
}

.official-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px
}

.official-grid>div {
  min-width: 0;
  padding: 15px;
  border: 1px solid #e5b3f2;
  border-radius: 11px;
  background: linear-gradient(120deg, #f6eafe, #d3b8ec);
  color: #291438
}

.official-grid p {
  margin: 0 0 10px
}

.official-grid p:first-child {
  font-weight: 700
}

.official-grid p:last-child {
  margin: 0
}

.official-grid .inline-link {
  color: #74148c
}

.scam-content :is(button, input, summary, a, [role=tabpanel]):focus-visible {
  outline: 2px solid #eea7ff;
  outline-offset: 3px
}

@media(max-width:1350px) {
  .agent-layout {
    grid-template-columns: 1fr
  }

  .contact-art {
    height: 180px;
    flex: none
  }

  .response-tabs button {
    flex-basis: 170px
  }

  .official-grid {
    grid-template-columns: 1fr
  }

  .response-steps {
    grid-template-columns: 1fr 1fr
  }
}

@media(min-width:681px) and (max-width:1000px) {

  .scam-grid,
  .message-grid,
  .scam-content .faq-grid {
    grid-template-columns: 1fr
  }
}

@media(min-width:681px) and (max-width:1250px) {
  .scam-content .faq-grid {
    grid-template-columns: 1fr
  }
}

.agent-checks input {
  color-scheme: light
}

.response-steps>li:last-child:nth-child(odd) {
  grid-column: 1/-1
}

@media(max-width:680px) {
  .scam-hero .slots-hero-art {
    background-position: 70% center
  }

  .scam-grid,
  .message-grid,
  .response-steps,
  .report-grid {
    grid-template-columns: 1fr
  }

  .scam-card,
  .message-card,
  .report-step {
    padding: 15px
  }

  .scam-card-heading,
  .message-heading {
    gap: 10px
  }

  .agent-guidance article {
    padding: 14px
  }

  .official-channels {
    grid-column: auto
  }

  .response-tabs button {
    flex: 0 0 175px;
    min-height: 64px
  }

  .situation-title {
    font-size: 16px !important
  }

  .report-heading {
    gap: 8px;
    align-items: flex-start
  }

  .report-heading>.ui-icon {
    width: 27px;
    height: 27px;
    flex-basis: 27px
  }

  .report-heading h3 {
    font-size: 14px
  }

  .contact-art {
    height: 170px
  }

  .official-grid>div {
    padding: 14px
  }

  .agent-checks {
    padding: 5px 11px
  }
}