:root{
  --paper:#F3F5F9;
  --ink:#16243B;
  --muted:#54627A;
  --blue:#1E5BB8;
  --blue-dark:#16498F;
  --green:#157347;
  --green-soft:#E4F3EA;
  --red:#C2362F;
  --red-soft:#FBE8E6;
  --card:#FFFFFF;
  --border:#DCE3EE;
  --shadow:0 10px 30px rgba(22,36,59,.10);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--paper);
  color:var(--ink);
  font-size:19px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding:24px 16px 60px;
}
.wrap{max-width:680px;margin:0 auto;}

/* Header */
.masthead{text-align:center;margin:8px 0 22px;}
.masthead .kicker{
  display:inline-block;letter-spacing:.14em;text-transform:uppercase;
  font-size:.72rem;font-weight:700;color:var(--blue);
  background:#E7EFFA;padding:5px 12px;border-radius:999px;
}
.masthead h1{
  font-size:2.2rem;line-height:1.1;margin:14px 0 6px;font-weight:800;letter-spacing:-.01em;
}
.masthead h1 .real{color:var(--green);}
.masthead h1 .scam{color:var(--red);}
.masthead p{color:var(--muted);margin:0 auto;max-width:32em;font-size:1.02rem;}

.panel{
  background:var(--card);border:1px solid var(--border);border-radius:20px;
  box-shadow:var(--shadow);padding:30px 26px;
}

/* Buttons */
.btn{
  display:block;width:100%;border:none;border-radius:14px;cursor:pointer;
  font-family:inherit;font-size:1.15rem;font-weight:700;padding:18px 20px;
  transition:transform .08s ease, background .15s ease, box-shadow .15s ease;
}
.btn:active{transform:translateY(1px);}
.btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px;}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(30,91,184,.30);}
.btn-primary:hover{background:var(--blue-dark);}
.btn-ghost{background:#EEF2F8;color:var(--ink);border:1px solid var(--border);}
.btn-ghost:hover{background:#E4EAF3;}

/* Start screen */
.start .lead{font-size:1.1rem;margin-top:0;}
.start .how{margin-bottom:6px;font-weight:700;}
.start ul{padding-left:1.1em;color:var(--muted);}
.start li{margin:6px 0;}
.start .note{
  font-size:.92rem;color:var(--muted);background:#EEF2F8;border-radius:12px;
  padding:12px 16px;margin:22px 0 26px;
}

/* Progress */
.progress-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.qcount{font-weight:700;font-size:.95rem;color:var(--muted);letter-spacing:.02em;}
.bar{height:9px;background:#E4EAF3;border-radius:999px;flex:1;margin-left:16px;overflow:hidden;}
.bar span{display:block;height:100%;background:var(--blue);border-radius:999px;transition:width .35s ease;}

/* Message image */
.channel{
  display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--muted);margin-bottom:12px;
}
.channel .dot{width:9px;height:9px;border-radius:50%;background:var(--blue);}
.msg-frame{
  display:flex;justify-content:center;
  background:#EDF0F5;border:1px solid var(--border);border-radius:16px;padding:14px;
}
.msg-frame img{
  display:block;max-width:100%;width:auto;height:auto;max-height:560px;
  border-radius:10px;box-shadow:0 4px 14px rgba(22,36,59,.12);
}

/* Answer buttons */
.question-prompt{font-weight:700;font-size:1.12rem;text-align:center;margin:22px 0 14px;}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.ans{
  border:2px solid var(--border);background:#fff;border-radius:14px;cursor:pointer;
  font-family:inherit;font-size:1.12rem;font-weight:800;padding:20px 12px;color:var(--ink);
  transition:border-color .12s, background .12s, transform .08s;
}
.ans:hover{border-color:var(--blue);background:#F5F8FD;}
.ans:active{transform:translateY(1px);}
.ans:focus-visible{outline:3px solid var(--blue);outline-offset:3px;}
.ans .label{display:block;}
.ans .sub{display:block;font-size:.82rem;font-weight:600;color:var(--muted);margin-top:4px;}
.ans.is-scam:hover{border-color:var(--red);background:var(--red-soft);}
.ans.is-real:hover{border-color:var(--green);background:var(--green-soft);}

/* Feedback */
.feedback{margin-top:20px;border-radius:16px;padding:20px 20px 22px;border:1px solid;}
.feedback.correct{background:var(--green-soft);border-color:#BCE0CA;}
.feedback.wrong{background:var(--red-soft);border-color:#F1C9C5;}
.fb-head{display:flex;align-items:center;gap:12px;margin-bottom:6px;}
.fb-mark{
  width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;color:#fff;font-weight:900;font-size:1.1rem;
}
.feedback.correct .fb-mark{background:var(--green);}
.feedback.wrong .fb-mark{background:var(--red);}
.fb-result{font-weight:800;font-size:1.15rem;}
.verdict{font-weight:800;font-size:1.05rem;margin:6px 0 2px;}
.verdict .tag{
  display:inline-block;padding:2px 12px;border-radius:999px;color:#fff;font-size:.85rem;
  margin-left:6px;vertical-align:middle;letter-spacing:.04em;
}
.verdict .tag.scam{background:var(--red);}
.verdict .tag.real{background:var(--green);}
.summary-line{margin:8px 0 12px;color:var(--ink);}
.tells{margin:0;padding-left:1.15em;}
.tells li{margin:8px 0;line-height:1.5;}
.tells li::marker{color:var(--blue);}
.next-row{margin-top:22px;}

/* Results */
.results h2{font-size:1.7rem;margin:0 0 4px;text-align:center;}
.score-big{text-align:center;font-size:3.4rem;font-weight:800;color:var(--blue);line-height:1;margin:14px 0 4px;}
.score-sub{text-align:center;color:var(--muted);margin:0 0 6px;}
.score-msg{text-align:center;font-weight:700;font-size:1.1rem;margin:10px 0 26px;}
.rules{background:#EEF2F8;border-radius:14px;padding:20px 22px;margin-bottom:20px;}
.rules h3{margin:0 0 12px;font-size:1.15rem;}
.rules .rule{margin:14px 0;}
.rules .rule b{color:var(--ink);}
.rules .rule span{display:block;color:var(--green);font-weight:700;margin-top:2px;}
.golden{
  background:var(--ink);color:#fff;border-radius:14px;padding:18px 22px;margin-bottom:20px;
  font-size:1.06rem;line-height:1.5;
}
.golden b{color:#FFD86B;}
.resources{border:1px solid var(--border);border-radius:14px;padding:18px 22px;margin-bottom:24px;}
.resources h3{margin:0 0 10px;font-size:1.1rem;}
.resources p{margin:8px 0;color:var(--muted);}
.resources b{color:var(--ink);}

.hidden{display:none;}

@media (max-width:480px){
  body{font-size:18px;padding:18px 12px 50px;}
  .masthead h1{font-size:1.85rem;}
  .panel{padding:22px 18px;}
  .answers{grid-template-columns:1fr;}
  .msg-frame img{max-height:none;}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;}
}

/* ============================================================
   Rendered message mockups (for messages drawn from text,
   i.e. entries that use "render" instead of "image")
   ============================================================ */
.lnk{color:#1a73e8;text-decoration:underline;word-break:break-all;}

/* --- Text message --- */
.mock{width:100%;}
.mock-sms{
  width:100%;max-width:420px;margin:0 auto;background:#fff;
  border:1px solid var(--border);border-radius:22px;overflow:hidden;
  box-shadow:0 6px 18px rgba(22,36,59,.12);
}
.sms-status{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 18px 2px;font-weight:800;font-size:.95rem;color:var(--ink);
}
.sms-status .sigbat{display:flex;align-items:center;gap:7px;}
.sms-status .bars{display:inline-flex;align-items:flex-end;gap:2px;height:13px;}
.sms-status .bars i{width:3px;background:#F0A23A;border-radius:1px;}
.sms-status .bars i:nth-child(1){height:5px;}
.sms-status .bars i:nth-child(2){height:8px;}
.sms-status .bars i:nth-child(3){height:11px;}
.sms-status .bars i:nth-child(4){height:13px;}
.sms-status .batt{
  width:23px;height:13px;border:2px solid #5BBF5B;border-radius:3px;position:relative;
}
.sms-status .batt::before{
  content:"";position:absolute;left:1px;top:1px;bottom:1px;width:72%;
  background:#5BBF5B;border-radius:1px;
}
.sms-status .batt::after{
  content:"";position:absolute;right:-4px;top:3px;width:2px;height:5px;
  background:#5BBF5B;border-radius:0 1px 1px 0;
}
.sms-head{text-align:center;padding:8px 16px 14px;border-bottom:1px solid #E7EBF1;}
.sms-avatar{
  width:74px;height:74px;border-radius:50%;margin:4px auto 8px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:1.7rem;
}
.sms-name{font-weight:800;font-size:1.15rem;}
.sms-meta{color:var(--muted);font-size:.9rem;margin-top:2px;}
.sms-body{padding:16px 16px 24px;}
.sms-day{text-align:center;color:#8C97A8;font-size:.85rem;font-weight:700;margin-bottom:12px;}
.sms-day span{font-weight:500;}
.sms-bubble{
  background:#E9EAEE;border-radius:6px 18px 18px 18px;padding:14px 16px;
  font-size:1.06rem;line-height:1.5;white-space:pre-line;display:inline-block;max-width:90%;
}

/* --- Email --- */
.mock-email{
  width:100%;max-width:560px;margin:0 auto;background:#fff;
  border:1px solid var(--border);border-radius:12px;overflow:hidden;
  box-shadow:0 6px 18px rgba(22,36,59,.12);text-align:left;
}
.eml-bar{
  display:flex;align-items:center;gap:8px;padding:11px 14px;
  background:#EEF1F5;border-bottom:1px solid #E2E7EE;
}
.eml-bar .dots{display:flex;gap:7px;}
.eml-bar .dots i{width:12px;height:12px;border-radius:50%;display:block;}
.eml-bar .dots i:nth-child(1){background:#F2655B;}
.eml-bar .dots i:nth-child(2){background:#F4BE4F;}
.eml-bar .dots i:nth-child(3){background:#61C554;}
.eml-bar .inbox{color:var(--muted);font-weight:600;font-size:.95rem;margin-left:6px;}
.eml-subject{font-weight:800;font-size:1.3rem;padding:18px 20px 12px;line-height:1.2;}
.eml-from{display:flex;align-items:center;gap:12px;padding:0 20px 14px;border-bottom:1px solid #EAEEF3;}
.eml-avatar{
  width:44px;height:44px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:1.2rem;
}
.eml-who{min-width:0;}
.eml-sender{font-weight:800;line-height:1.2;}
.eml-email{color:var(--muted);font-size:.9rem;word-break:break-all;}
.eml-time{margin-left:auto;color:var(--muted);font-size:.9rem;white-space:nowrap;}
.eml-body{padding:18px 20px 22px;font-size:1.05rem;line-height:1.55;white-space:pre-line;}
.eml-btn{
  display:inline-block;margin-top:14px;padding:12px 24px;border-radius:8px;
  color:#fff;font-weight:800;font-size:1rem;
}

/* --- Pop-up --- */
.mock-popup{
  width:100%;max-width:470px;margin:0 auto;background:#fff;
  border:1px solid var(--border);border-radius:12px;overflow:hidden;
  box-shadow:0 12px 30px rgba(22,36,59,.22);text-align:left;
}
.pop-bar{
  background:#37618E;color:#fff;padding:11px 16px;font-weight:700;font-size:.98rem;
  display:flex;align-items:center;justify-content:space-between;
}
.pop-bar .x{opacity:.85;}
.pop-body{padding:18px 18px 22px;font-size:1.04rem;line-height:1.5;white-space:pre-line;}