/* MyEchoRecall page styles — scoped under .rc-main so they never collide
   with the shared marketing header/footer (which use /assets/style.css). */

.rc-main{ width:min(720px,92%); margin:0 auto; padding-top:26px; }

/* Banner: uses the interior-page .page-head style (solid pine, white text),
   centered, with no gradient/sun. */
.rc-head{ text-align:center; }
.rc-head h1{ margin:0 auto; }
.rc-head p{ margin:10px auto 0; max-width:60ch; }

.rc-main .tools{ display:flex; flex-direction:column; gap:16px; }
.rc-main .tool-card{ background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 6px 24px rgba(15,46,39,.08); padding:20px; display:flex; flex-direction:column; gap:12px; }
.rc-main .row2{ display:flex; gap:10px; }
.rc-main .row2 input{ flex:1; min-width:0; }
.rc-main input{ border:1px solid var(--line); border-radius:10px; padding:13px 14px; font-size:1rem; font-family:inherit; background:#fff; width:100%; }
.rc-main input:focus{ outline:2px solid var(--mint); border-color:var(--mint); }

.rc-main .btn{ border:0; border-radius:12px; padding:14px 18px; font-size:1rem; font-weight:700; font-family:'Poppins',sans-serif; cursor:pointer; }
.rc-main .btn:hover{ filter:brightness(1.05); }
.rc-main .btn-primary{ background:var(--jade); color:#fff; }
.rc-main .btn-ghost{ background:transparent; color:var(--muted); border:1px solid var(--line); }
.rc-main .hint{ color:var(--muted); font-size:.82rem; margin:0; }

.rc-main .divider{ display:flex; align-items:center; text-align:center; color:var(--muted); font-size:.85rem; }
.rc-main .divider::before,.rc-main .divider::after{ content:""; flex:1; height:1px; background:var(--line); }
.rc-main .divider span{ padding:0 12px; }

/* Camera panel stays fully hidden until the visitor taps Scan (app.js toggles [hidden]). */
.rc-main #scanner{ display:none; flex-direction:column; gap:10px; }
.rc-main #scanner:not([hidden]){ display:flex; }
.rc-main #video{ width:100%; border-radius:12px; background:#000; aspect-ratio:4/3; object-fit:cover; }

.rc-main .result{ margin-top:22px; background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 6px 24px rgba(15,46,39,.08); padding:22px; display:flex; flex-direction:column; gap:14px; }
.rc-main .verdict{ border:2px solid; border-radius:14px; padding:18px; text-align:center; }
.rc-main .verdict .emoji{ font-size:38px; }
.rc-main .verdict .label{ font-family:'Poppins',sans-serif; font-weight:800; font-size:1.4rem; margin-top:4px; }
.rc-main .verdict .sub{ color:var(--muted); font-size:.9rem; margin-top:4px; }
.rc-main .v-recall_found{ border-color:#c0392b; } .rc-main .v-recall_found .label{ color:#c0392b; }
.rc-main .v-possible{ border-color:#e67e22; } .rc-main .v-possible .label{ color:#e67e22; }
.rc-main .v-none{ border-color:var(--jade); } .rc-main .v-none .label{ color:var(--jade); }

.rc-main .product-name{ font-family:'Poppins',sans-serif; font-weight:700; font-size:1.15rem; color:var(--pine); }
.rc-main .refine{ background:var(--cloud,#F6F8F7); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:8px; }
.rc-main .refine h3{ font-size:.95rem; color:var(--pine); }
.rc-main .refine p{ font-size:.82rem; color:var(--muted); }
.rc-main .section-title{ font-family:'Poppins',sans-serif; font-weight:700; color:var(--pine); font-size:1rem; }
.rc-main .recall{ display:flex; gap:10px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); text-decoration:none; color:inherit; }
.rc-main .recall:last-child{ border-bottom:0; }
.rc-main .recall .r-title{ font-weight:600; font-size:.95rem; color:var(--ink,#12201C); }
.rc-main .recall .r-meta{ color:var(--muted); font-size:.8rem; margin-top:2px; }
.rc-main .recall .r-go{ color:var(--jade); font-weight:700; font-size:.85rem; white-space:nowrap; }
.rc-main .freshness{ color:var(--muted); font-size:.78rem; text-align:center; }
.rc-main .disclaimer{ color:var(--muted); font-size:.78rem; text-align:center; margin:26px 0; }
.rc-main .spinner{ align-self:center; width:34px; height:34px; border:4px solid var(--line); border-top-color:var(--jade); border-radius:50%; animation:rcspin .8s linear infinite; margin:20px auto; }
@keyframes rcspin{ to{ transform:rotate(360deg); } }
.rc-main .err{ color:#c0392b; text-align:center; font-size:.9rem; }