:root{--ink:#19251f;--muted:#718078;--line:#dce3de;--cream:#f6f5f0;--mint:#e7f5ec;--green:#207e4e;--orange:#ffbd44;--red:#ed5b4c}*{box-sizing:border-box}body{margin:0;background:var(--cream);font-family:Manrope,Arial,sans-serif;color:var(--ink)}main{max-width:1160px;margin:auto;padding:0 28px 70px}nav{height:82px;display:flex;align-items:center;justify-content:space-between}.brand{font-size:20px;font-weight:800;letter-spacing:-1px;text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:9px}.brand-mark{background:var(--green);color:white;border-radius:7px;width:28px;height:28px;display:grid;place-items:center;font-size:15px}.nav-actions{display:flex;align-items:center;gap:20px}.text-button,.new-scan{border:0;background:none;font:600 13px Manrope;color:var(--ink);cursor:pointer}.avatar{border:0;width:34px;height:34px;border-radius:50%;background:#d0d7ff;color:#45517f;font:700 11px Manrope}.hero{text-align:center;padding:72px 0 55px}.eyebrow{font:500 11px 'DM Mono',monospace;color:#518063;letter-spacing:1.1px;display:flex;justify-content:center;align-items:center;gap:8px}.eyebrow span{width:6px;height:6px;background:#59a575;border-radius:50%}.hero h1{margin:15px 0 16px;font-size:54px;letter-spacing:-3.2px;line-height:1.1}.hero h1 em{font-style:normal;color:var(--green)}.hero p{max-width:540px;margin:auto;color:var(--muted);font-size:16px;line-height:1.65}.workspace{background:white;border:1px solid var(--line);border-radius:18px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;box-shadow:0 14px 40px #2b3e3210}.input-panel{padding:31px 32px 26px}.reference-panel{border-left:1px solid var(--line)}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:23px}.panel-heading>div{display:flex;gap:11px;align-items:center}.step{font:500 10px 'DM Mono';color:var(--green);background:var(--mint);padding:5px 6px;border-radius:4px}.panel-heading h2{font-size:16px;margin:0;letter-spacing:-.45px}.required,.optional{font:500 9px 'DM Mono';letter-spacing:.7px;border-radius:4px;padding:5px 6px}.required{color:#cf6c20;background:#fff0df}.optional{color:#839087;background:#f0f2f0}.upload-zone{height:238px;border:1.5px dashed #b8c6be;border-radius:12px;background:#fbfcfa;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;cursor:pointer;transition:.2s}.upload-zone:hover,.upload-zone.dragging{background:#f2faf4;border-color:var(--green)}.upload-zone input{display:none}.upload-icon{width:37px;height:37px;border-radius:10px;background:var(--mint);display:grid;place-items:center;color:var(--green);font-size:22px;margin-bottom:4px}.upload-zone strong{font-size:14px}.upload-zone span{font-size:12px;color:var(--muted)}.upload-zone small{font:10px 'DM Mono';color:#9da8a1;margin-top:11px}.preview{height:238px;border-radius:12px;overflow:hidden;position:relative}.preview img{width:100%;height:100%;object-fit:cover}.preview button{position:absolute;right:10px;top:10px;width:27px;height:27px;border:0;border-radius:50%;background:#ffffffd9;color:var(--ink);font-size:20px;cursor:pointer}.hidden{display:none!important}.upload-status{margin:14px 2px 0;font-size:11px;line-height:1.5;color:var(--green)}.upload-status.error{color:var(--red)}.analyze:disabled{opacity:.55;cursor:not-allowed;transform:none}.analyze:disabled:hover{background:var(--green);transform:none}.photo-tip{display:flex;gap:10px;margin:18px 2px 0;color:var(--muted);font-size:11px;line-height:1.5}.photo-tip span{color:var(--green);font-size:16px}.photo-tip p{margin:0}.photo-tip b{color:#4f6056}.reference-card{height:112px;border-radius:10px;border:1px solid var(--line);display:flex;overflow:hidden}.reference-image{width:145px;background:#e5e2dc;position:relative;overflow:hidden}.reference-card>div+div{padding:18px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}.reference-card b{font-size:12px}.reference-card span{font-size:10px;color:var(--muted)}.change-ref{border:0;background:none;color:var(--green);font:700 10px Manrope;padding:5px 0;cursor:pointer}.brick{position:absolute;border-radius:3px;box-shadow:inset -3px -3px #0002}.brick:before{content:"";position:absolute;width:8px;height:4px;border-radius:5px 5px 0 0;background:#ffffff55;top:-3px;left:6px}.b1{width:47px;height:23px;background:#e8d855;bottom:21px;left:39px}.b2{width:58px;height:18px;background:#317fb5;bottom:38px;left:29px}.b3{width:29px;height:27px;background:#e65448;bottom:54px;left:51px}.b4{width:35px;height:16px;background:#5e6870;bottom:80px;left:47px}.b5{width:17px;height:17px;background:#f0f2ef;bottom:42px;left:89px}.b6{width:14px;height:14px;background:#252c2d;bottom:7px;left:29px}.b7{width:14px;height:14px;background:#252c2d;bottom:7px;left:87px}.b8{width:21px;height:12px;background:#e65448;bottom:71px;left:35px}.b9{width:18px;height:12px;background:#e8d855;bottom:22px;left:86px}.b10{width:20px;height:10px;background:#39454a;bottom:19px;left:20px}.or{display:flex;align-items:center;gap:8px;color:#a0aaa4;font:10px 'DM Mono';margin:18px 0}.or:before,.or:after{content:"";height:1px;background:var(--line);flex:1}.instruction-button{width:100%;height:58px;background:#fff;border:1px solid var(--line);border-radius:9px;display:flex;align-items:center;justify-content:space-between;padding:0 15px;color:var(--ink);cursor:pointer}.instruction-button>span:first-child{color:var(--green);font-size:19px}.instruction-button>span:nth-child(2){text-align:left;flex:1;padding-left:12px}.instruction-button b,.instruction-button small{display:block}.instruction-button b{font:600 12px Manrope}.instruction-button small{font:10px Manrope;color:var(--muted);margin-top:2px}.instruction-button>span:last-child{color:var(--green);font-size:20px}.analyze{margin-top:23px;width:100%;height:51px;border:0;border-radius:9px;color:white;background:var(--green);font:700 14px Manrope;cursor:pointer;transition:.2s}.analyze:hover{background:#17663d;transform:translateY(-1px)}.sparkle{margin-right:8px}.arrow{margin-left:10px}.privacy{text-align:center;font-size:10px;color:#98a39c;margin:14px 0 0}.results{margin-top:44px}.results-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px}.results .eyebrow{justify-content:flex-start}.results h2{font-size:31px;letter-spacing:-1.5px;margin:8px 0 3px}.results-heading p{font-size:13px;color:var(--muted);margin:0}.align-note{display:block;margin-top:3px;font-size:11px;color:#8e9991}.new-scan{border:1px solid var(--line);padding:10px 13px;border-radius:7px}.result-layout{display:grid;grid-template-columns:.88fr 1.12fr;gap:18px}.build-map,.issues article,.success-card{border:1px solid var(--line);background:#fff;border-radius:13px}.map-top,.map-footer{height:47px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;font-size:11px}.map-top span,.map-footer{color:var(--muted);font-size:10px}.map-top i{width:7px;height:7px;display:inline-block;border-radius:50%;background:var(--red);margin-right:4px}.map-image{height:305px;background:#e2e4df;position:relative;overflow:hidden}.map-photo{width:100%;height:100%;object-fit:contain;background:#d8dbd6}.pin.active-pin{background:#c73f31}.map-footer{border-top:1px solid var(--line)}.map-rover{position:absolute;left:50%;top:50%;width:260px;height:175px;transform:translate(-50%,-45%) rotate(-6deg)}.wheel{position:absolute;width:54px;height:54px;border:10px solid #2e3837;background:#5e6865;border-radius:50%;bottom:3px}.w1{left:12px}.w2{right:12px}.w3{left:60px;bottom:-12px;transform:scale(.7)}.w4{right:60px;bottom:-12px;transform:scale(.7)}.body-part{position:absolute;border-radius:5px;box-shadow:inset -5px -5px #0002}.p1{background:#2f7aac;width:164px;height:47px;left:48px;bottom:43px}.p2{background:#e9d94d;width:96px;height:37px;left:78px;bottom:83px}.p3{background:#df5248;width:42px;height:48px;left:104px;bottom:111px}.p4{background:#aeb7b5;width:65px;height:22px;left:91px;bottom:57px}.p5{background:#2e3939;width:25px;height:20px;left:151px;bottom:89px}.pin{position:absolute;width:29px;height:29px;border:3px solid white;border-radius:50%;background:var(--red);color:#fff;font:700 12px Manrope;box-shadow:0 2px 7px #0004;cursor:pointer}.pin1{left:58%;top:26%}.pin2{left:39%;top:57%}.pin3{left:66%;top:58%}.issues{display:flex;flex-direction:column;gap:9px}.issues article{padding:18px;display:grid;grid-template-columns:31px 1fr 18px;gap:12px;cursor:pointer;transition:.2s}.issues article.active{border-color:#7ebf98;box-shadow:0 4px 16px #1a7b4720}.issue-number{background:#f0f3f0;border-radius:50%;width:29px;height:29px;display:grid;place-items:center;font:500 11px 'DM Mono';color:#3d5445}.severity{font:500 9px 'DM Mono';letter-spacing:.7px;color:#db5c4f}.severity.amber{color:#b77c19}.severity.purple{color:#7965b8}.issue h3{margin:4px 0 3px;font-size:15px;letter-spacing:-.4px}.issue p{margin:0;color:var(--muted);font-size:11px;line-height:1.55}.chevron{border:0;background:none;color:#8e9991;font-size:16px}.fix-visual{display:none;align-items:center;gap:12px;margin-top:12px;color:#577060;font-size:10px}.active .fix-visual{display:flex}.mini-brick{display:inline-block;width:34px;height:19px;border-radius:3px;box-shadow:inset -3px -3px #0002}.mini-brick:before{content:"";display:block;width:8px;height:5px;background:#ffffff66;border-radius:4px 4px 0 0;margin: -3px 6px}.blue{background:#327db0}.red{background:#df5248}.grey{background:#aeb7b5}.yellow{background:#e9d94d}.green{background:#207e4e}.black{background:#2e3939}.white{background:#f0f2ef}.rotate{transform:rotate(180deg)}.success-card{margin-top:18px;padding:16px 19px;display:flex;align-items:center;gap:11px;font-size:12px}.success-card b{margin-right:5px}.success-icon{width:26px;height:26px;border-radius:50%;background:var(--mint);color:var(--green);display:grid;place-items:center;font-weight:bold}.success-card button{margin-left:auto;border:0;background:none;color:var(--green);font:700 11px Manrope;cursor:pointer}.loading{position:fixed;inset:0;background:#f6f5f0f2;z-index:3;display:flex;align-items:center;justify-content:center;flex-direction:column}.loading h2{font-size:23px;margin:23px 0 5px}.loading p{color:var(--muted);font-size:13px}.loader-brick{display:grid;grid-template-columns:repeat(2,25px);gap:5px;animation:float 1s ease-in-out infinite}.loader-brick i{height:25px;background:var(--green);border-radius:4px}.loader-brick i:nth-child(2){background:var(--orange)}.loader-brick i:nth-child(3){background:#e85e51}.loader-brick i:nth-child(4){background:#3785bb}@keyframes float{50%{transform:translateY(-10px)}}@media(max-width:720px){main{padding:0 16px 45px}.hero{padding:43px 5px 35px}.hero h1{font-size:38px;letter-spacing:-2.3px}.workspace,.result-layout{grid-template-columns:1fr}.reference-panel{border-left:0;border-top:1px solid var(--line)}.input-panel{padding:23px 20px}.results-heading{align-items:flex-start;gap:12px}.results h2{font-size:25px}.success-card{align-items:flex-start}.success-card button{white-space:nowrap}.nav-actions .text-button{display:none}}

/* Issue-card zoom crops: "your build" vs "should look like" */
.compare { display: flex; gap: 12px; margin: 12px 0 2px; }
.compare figure { margin: 0; }
.compare canvas.crop { width: 150px; height: 150px; max-width: 100%; display: block; border-radius: 10px; border: 1px solid rgba(15, 30, 20, 0.14); background: #f2f1ec; }
.compare figcaption { font-size: 12px; color: #6b7568; margin-top: 5px; font-weight: 600; letter-spacing: 0.02em; }
@media (max-width: 560px) { .compare canvas.crop { width: 120px; height: 120px; } }

/* Issue pins mark a percentage position on the build photo, so the photo's
   rendered box must BE the coordinate space: let the image define the
   container's height rather than letterboxing it inside a fixed 305px
   (which left percentage pins offset by the empty bars). */
.map-image { height: auto; }
.map-photo { width: 100%; height: auto; display: block; object-fit: initial; }
/* Centre each pin on its point instead of hanging it down-and-right. */
.pin { transform: translate(-50%, -50%); }
.pin.active-pin { transform: translate(-50%, -50%) scale(1.24); }

/* ============================================================
   Playful pass. Appended rather than woven in, so the original
   layout stays readable and this can be lifted out wholesale.
   The motif is the stud: the mark, the buttons and the panel
   tops all carry it, and anything clickable depresses like a
   brick being pressed rather than just changing colour.
   ============================================================ */

:root {
  --brick-red: #d01012;
  --brick-blue: #0057a6;
  --brick-yellow: #f5c518;
  --brick-green: #237841;
  --stud: radial-gradient(circle at 50% 50%, #ffffff70 38%, transparent 39%);
}

/* Faint stud grid, so the page reads as a baseplate without
   competing with the content sitting on it. */
body {
  background-color: var(--cream);
  background-image: radial-gradient(circle at 10px 10px, #0000000a 3px, transparent 4px);
  background-size: 34px 34px;
}

/* Brand mark: a stud on top of a brick. */
.brand-mark {
  background: var(--brick-red);
  border-radius: 6px;
  box-shadow: inset 0 -3px #0003, 0 2px 0 #0002;
  position: relative;
}
.brand-mark::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 6px;
  border-radius: 4px 4px 2px 2px;
  background: var(--brick-red);
  box-shadow: inset 0 2px #ffffff55;
}

.hero h1 em {
  color: var(--brick-red);
  font-style: normal;
  position: relative;
}
/* Hand-drawn-ish underline, so the emphasis feels drawn rather than styled. */
.hero h1 em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 8px;
  background: var(--brick-yellow);
  opacity: .55;
  border-radius: 6px;
  z-index: -1;
}

/* Panels get a row of studs along the top edge. These sit on a white
   surface, so they need a dark tint — the white --stud used elsewhere is
   invisible here. */
.input-panel, .build-map, .issues article, .success-card {
  position: relative;
  border-radius: 14px;
}
.input-panel::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 22px;
  right: 22px;
  height: 8px;
  background-image: radial-gradient(circle at 50% 120%, #19251f14 46%, transparent 47%);
  background-size: 26px 16px;
  background-repeat: repeat-x;
  pointer-events: none;
}

.step {
  background: var(--brick-blue);
  color: #fff;
  border-radius: 6px;
}

/* Primary action: a chunky brick you press. */
.analyze {
  background: var(--brick-red);
  border-radius: 11px;
  font-size: 15px;
  letter-spacing: -.1px;
  box-shadow: 0 4px 0 #8d0b0d, 0 6px 14px #d0101233;
  transform: translateY(0);
  transition: transform .08s ease, box-shadow .08s ease, background .2s;
}
.analyze:hover:not(:disabled) { background: #e01416; }
.analyze:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: 0 0 0 #8d0b0d, 0 2px 6px #d0101233;
}
.analyze:disabled {
  background: #c9cdc9;
  box-shadow: 0 4px 0 #adb2ad;
  cursor: not-allowed;
}
.analyze .sparkle { animation: nudge 2.4s ease-in-out infinite; display: inline-block; }
@keyframes nudge {
  0%, 88%, 100% { transform: rotate(0) scale(1); }
  92% { transform: rotate(-14deg) scale(1.18); }
  96% { transform: rotate(14deg) scale(1.18); }
}

/* Drop zone: lifts and turns friendly on drag. */
.upload-zone {
  border-width: 2px;
  border-radius: 14px;
  transition: transform .15s ease, border-color .15s, background .15s;
}
.upload-zone:hover { border-color: var(--brick-blue); background: #f4f8ff; }
.upload-zone.dragging {
  border-color: var(--brick-red);
  background: #fff5f5;
  transform: scale(1.015);
}
.upload-icon {
  background: var(--brick-yellow) !important;
  color: #6b4e00 !important;
  border-radius: 50%;
  box-shadow: 0 3px 0 #c99f0d;
  transition: transform .2s ease;
}
.upload-zone:hover .upload-icon { transform: translateY(-3px); }

/* The example reference now shows a real build. */
.reference-image { background: #eceae4; }
.reference-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.reference-card {
  border-radius: 12px;
  border-width: 2px;
  transition: border-color .2s, transform .15s ease;
}
.reference-card:hover { border-color: var(--brick-blue); transform: translateY(-2px); }

.instruction-button {
  border-radius: 11px;
  border-width: 2px;
  transition: border-color .2s, transform .12s ease, background .2s;
}
.instruction-button:hover {
  border-color: var(--brick-yellow);
  background: #fffdf4;
  transform: translateY(-2px);
}

/* Issue pins: bolder, and the active one gets a gentle pulse so the
   eye is drawn to the spot being described. */
.pin {
  border-width: 3px;
  font-weight: 800;
  box-shadow: 0 3px 8px #0005;
  transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), background .2s;
}
.pin:hover { transform: translate(-50%, -50%) scale(1.18); }
.pin.active-pin { animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 3px 8px #0005, 0 0 0 0 #d0101266; }
  50%      { box-shadow: 0 3px 8px #0005, 0 0 0 12px #d0101200; }
}

.issues article {
  border-width: 2px;
  transition: transform .15s ease, border-color .2s, box-shadow .2s;
}
.issues article:hover { transform: translateX(3px); }
.issues article.active {
  border-color: var(--brick-red);
  box-shadow: 0 4px 0 #f0d6d6;
}
.issue-number {
  background: var(--brick-red) !important;
  color: #fff !important;
  border-radius: 8px;
  font-weight: 800;
  box-shadow: inset 0 -2px #0003;
}

.success-card {
  border-width: 2px;
  border-color: var(--brick-green);
  background: #f2fbf5;
}
.success-icon { background: var(--brick-green) !important; }

/* Loader: bricks that tumble rather than merely float. */
.loader-brick i:nth-child(1) { background: var(--brick-red) !important; }
.loader-brick i:nth-child(2) { background: var(--brick-blue) !important; }
.loader-brick i:nth-child(3) { background: var(--brick-yellow) !important; }
.loader-brick i:nth-child(4) { background: var(--brick-green) !important; }
.loader-brick { animation: tumble 1.6s ease-in-out infinite; }
@keyframes tumble {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-10px) rotate(-8deg); }
  75%      { transform: translateY(-10px) rotate(8deg); }
}

/* Visible focus for keyboard users — the hover states above are
   mouse-only, and this is the one accessibility gap they would open. */
button:focus-visible, .upload-zone:focus-within, a:focus-visible {
  outline: 3px solid var(--brick-blue);
  outline-offset: 3px;
}

/* Honour a reduced-motion preference: keep the colour, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---- Bricks you need -------------------------------------------------- */
/* Only ever rendered when a set number was read off an instruction page, so
   everything here is an enhancement rather than part of the default result. */
.parts-panel {
  margin-top: 22px;
  padding: 22px 24px;
  background: var(--panel, #fff);
  border: 1px solid rgba(25, 37, 31, 0.1);
  border-radius: 18px;
}
.parts-heading { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.parts-heading h3 { margin: 0; font-size: 1.05rem; }
.parts-heading span { font-family: 'DM Mono', ui-monospace, monospace; font-size: 0.78rem; color: #19251f8c; }
.parts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.parts-list li {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  background: #19251f08;
  border-radius: 12px;
}
/* Candidates sit side by side so the choice is a glance, not a menu. */
.part-options { display: flex; gap: 6px; }
.part-option {
  padding: 2px; border: 2px solid transparent; border-radius: 10px;
  background: #fff; cursor: pointer; line-height: 0;
  transition: border-color 120ms ease, transform 120ms ease;
}
.part-option:hover { transform: translateY(-1px); }
.part-option.selected { border-color: var(--brick-blue, #0057a6); }
.part-option:focus-visible { outline: 3px solid var(--brick-yellow, #f5c518); outline-offset: 2px; }
.parts-list img, .parts-thumb-blank { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: #fff; display: block; }
.parts-note { margin: 12px 0 0; font-size: 0.78rem; color: #19251f8c; }
.parts-list b { display: block; font-size: 0.9rem; }
.parts-list span { font-size: 0.76rem; color: #19251f8c; }
.parts-code { text-align: right; font-family: 'DM Mono', ui-monospace, monospace; }
.parts-code b { font-size: 0.95rem; letter-spacing: 0.02em; }
.parts-code span { display: block; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; }
.parts-list a, .parts-browse {
  font-size: 0.8rem; font-weight: 600; text-decoration: none;
  color: var(--brick-blue, #0057a6); white-space: nowrap;
}
.parts-empty { margin: 0 0 10px; font-size: 0.88rem; color: #19251f99; }

@media (max-width: 620px) {
  .parts-list li { grid-template-columns: 1fr auto; }
  .part-options { grid-column: 1 / -1; }
  .parts-list a { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .part-option { transition: none; }
  .part-option:hover { transform: none; }
}

/* ---- Report a wrong answer ------------------------------------------- */
/* The only route that shares a user's photos, so it reads as a deliberate
   choice rather than a stray click: muted until opened, explicit about what
   it sends, and cancellable. */
.report-wrong {
  margin-top: 18px;
  padding: 14px 18px;
  border: 1px dashed rgba(25, 37, 31, 0.18);
  border-radius: 14px;
}
.report-prompt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.report-prompt span { font-size: 0.85rem; color: #19251f99; }
#report-open {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 0.85rem; font-weight: 600; color: var(--brick-blue, #0057a6);
  text-decoration: underline; text-underline-offset: 3px;
}
.report-form { display: grid; gap: 10px; }
.report-form label { font-size: 0.85rem; font-weight: 600; }
.report-form textarea {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 0.88rem;
  border: 1px solid rgba(25, 37, 31, 0.2); border-radius: 10px; resize: vertical;
  background: #fff; color: inherit;
}
.report-consent { margin: 0; font-size: 0.76rem; line-height: 1.5; color: #19251f99; }
.report-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#report-send {
  padding: 9px 16px; border: none; border-radius: 10px; cursor: pointer;
  font-weight: 700; font-size: 0.85rem; color: #fff;
  background: var(--brick-red, #d01012); box-shadow: 0 3px 0 #8d0b0d;
}
#report-send:active { transform: translateY(2px); box-shadow: 0 1px 0 #8d0b0d; }
#report-send:disabled { opacity: 0.6; cursor: progress; box-shadow: 0 3px 0 #8d0b0d; transform: none; }
.report-secondary {
  padding: 9px 16px; border-radius: 10px; cursor: pointer; font-size: 0.85rem;
  background: transparent; border: 1px solid rgba(25, 37, 31, 0.2); color: inherit;
}
.report-status { margin: 10px 0 0; font-size: 0.85rem; color: var(--brick-green, #237841); font-weight: 600; }
#report-open:focus-visible, #report-send:focus-visible, .report-secondary:focus-visible,
.report-form textarea:focus-visible { outline: 3px solid var(--brick-yellow, #f5c518); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  #report-send:active { transform: none; }
}

/* ---- How it works ------------------------------------------------------ */
.how-panel {
  margin: 0 0 28px;
  padding: 26px 30px;
  background: var(--panel, #fff);
  border: 1px solid rgba(25, 37, 31, 0.1);
  border-radius: 18px;
}
.how-panel ol { margin: 0; padding-left: 20px; display: grid; gap: 12px; }
.how-panel li { font-size: 0.92rem; line-height: 1.6; color: #19251fc4; }
.how-panel li b { color: var(--ink, #19251f); }
.how-panel li::marker { font-family: 'DM Mono', ui-monospace, monospace; color: var(--brick-blue, #0057a6); font-weight: 600; }
.how-caveat {
  margin: 18px 0 0; padding-top: 16px;
  border-top: 1px solid rgba(25, 37, 31, 0.08);
  font-size: 0.82rem; line-height: 1.6; color: #19251f99;
}
#how-it-works:focus-visible { outline: 3px solid var(--brick-yellow, #f5c518); outline-offset: 3px; border-radius: 4px; }

/* ---- Find a set by number --------------------------------------------- */
.set-lookup { display: grid; gap: 9px; }
.set-lookup > label { font-size: 0.8rem; font-weight: 600; }
.set-row { display: flex; gap: 8px; }
#set-number {
  flex: 1; min-width: 0; padding: 10px 12px; font: inherit; font-size: 0.9rem;
  font-family: 'DM Mono', ui-monospace, monospace; letter-spacing: 0.04em;
  border: 1px solid rgba(25, 37, 31, 0.2); border-radius: 10px; background: #fff; color: inherit;
}
#set-find {
  padding: 10px 16px; border: none; border-radius: 10px; cursor: pointer;
  font-weight: 700; font-size: 0.85rem; color: #fff; white-space: nowrap;
  background: var(--brick-blue, #0057a6); box-shadow: 0 3px 0 #003f78;
}
#set-find:active { transform: translateY(2px); box-shadow: 0 1px 0 #003f78; }
#set-find:disabled { opacity: 0.6; cursor: progress; transform: none; }
.set-status { margin: 0; font-size: 0.8rem; color: var(--brick-green, #237841); }
.set-status.error { color: var(--brick-red, #d01012); }
.set-confirm {
  display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 12px;
  padding: 10px 12px; background: #19251f08; border-radius: 12px;
}
.set-confirm img { width: 54px; height: 54px; object-fit: contain; border-radius: 8px; background: #fff; }
.set-confirm b { display: block; font-size: 0.88rem; }
.set-confirm span { font-size: 0.74rem; color: #19251f8c; font-family: 'DM Mono', ui-monospace, monospace; }
#set-use {
  border: none; background: none; cursor: pointer; white-space: nowrap;
  font-weight: 700; font-size: 0.82rem; color: var(--brick-blue, #0057a6);
}
.set-note { margin: 0; font-size: 0.74rem; line-height: 1.5; color: #19251f8c; }
#set-number:focus-visible, #set-find:focus-visible, #set-use:focus-visible {
  outline: 3px solid var(--brick-yellow, #f5c518); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) { #set-find:active { transform: none; } }