:root { --forest:#17352f; --forest-2:#245348; --cream:#f5f1e8; --paper:#fffdf8; --ink:#1e2725; --muted:#68736f; --gold:#c99b4f; --line:#dedbd2; --sage:#dfe9e3; --danger:#9b3d36; --shadow:0 14px 38px rgba(24,48,42,.11); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--cream); }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:linear-gradient(180deg,#edf1eb 0,#f6f2e9 250px); padding-bottom:calc(86px + env(safe-area-inset-bottom)); }
button,input,textarea { font:inherit; }
button,label { -webkit-tap-highlight-color:transparent; }
.topbar { position:sticky; top:0; z-index:20; display:flex; justify-content:space-between; align-items:center; min-height:80px; padding:calc(14px + env(safe-area-inset-top)) 20px 14px; color:white; background:rgba(23,53,47,.96); backdrop-filter:blur(18px); }
.topbar h1 { margin:2px 0 0; font-family:Georgia,serif; font-size:27px; font-weight:500; }
.eyebrow { margin:0; color:var(--forest-2); font-size:11px; font-weight:800; letter-spacing:.14em; }
.eyebrow.light { color:#d4c199; }
.icon-button { width:44px; height:44px; border:1px solid rgba(255,255,255,.28); border-radius:50%; color:white; background:rgba(255,255,255,.08); font-size:22px; cursor:pointer; }
main { width:min(1120px,100%); margin:auto; }
.view { display:none; padding:18px 14px 30px; }
.view.active { display:block; }
.hero-card { display:grid; grid-template-columns:56px 1fr; gap:15px; margin:0 0 14px; padding:22px; border-radius:24px; color:white; background:linear-gradient(135deg,var(--forest),#2f6457); box-shadow:var(--shadow); }
.hero-icon { display:grid; place-items:center; width:54px; height:54px; border:1px solid rgba(255,255,255,.35); border-radius:18px; font-size:32px; }
.hero-card h2,.page-intro h2 { margin:5px 0 7px; font:500 29px/1.05 Georgia,serif; }
.hero-card p:last-child { margin:0; color:#e1ebe6; line-height:1.45; }
.card { margin:14px 0; padding:18px; border:1px solid rgba(80,90,84,.12); border-radius:24px; background:var(--paper); box-shadow:0 8px 28px rgba(32,49,44,.07); }
.photo-stage { position:relative; display:grid; place-items:center; min-height:230px; overflow:hidden; border:1px dashed #a7b1ab; border-radius:19px; background:#ecf0eb; }
.photo-stage img { display:block; width:100%; max-height:420px; object-fit:contain; background:#111; }
#photo-empty { display:grid; justify-items:center; gap:6px; padding:30px; color:var(--muted); text-align:center; }
#photo-empty span { font-size:42px; color:var(--forest-2); }
#photo-empty small { font-size:12px; }
.capture-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
.primary-action,.secondary-action,.wide-button,.secondary-wide { display:flex; justify-content:center; align-items:center; min-height:48px; padding:12px 16px; border-radius:14px; font-weight:750; cursor:pointer; }
.primary-action,.wide-button { border:0; color:white; background:var(--forest); }
.secondary-action,.secondary-wide { border:1px solid var(--line); color:var(--forest); background:white; }
.wide-button,.secondary-wide { width:100%; margin-top:12px; }
.wide-button:disabled { opacity:.46; cursor:not-allowed; }
.location-button { display:flex; align-items:center; gap:12px; width:100%; margin-top:12px; padding:12px 14px; border:1px solid var(--line); border-radius:15px; color:var(--ink); text-align:left; background:white; cursor:pointer; }
.location-button > span:first-child { font-size:24px; color:var(--forest-2); }
.location-button strong,.location-button small { display:block; }
.location-button small { margin-top:2px; color:var(--muted); }
.progress-wrap { margin-top:15px; }
.progress-bar { height:8px; overflow:hidden; border-radius:999px; background:#e0e4df; }
.progress-bar span { display:block; width:4%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--gold),#e4bd74); transition:width .2s; }
.progress-wrap p { margin:7px 0 0; color:var(--muted); font-size:13px; }
.section-heading { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:13px; }
.section-heading h2 { margin:4px 0 0; font:500 24px Georgia,serif; }
.status-pill { display:inline-flex; flex:none; padding:6px 9px; border-radius:999px; color:#6e5a2d; background:#f6e7c5; font-size:11px; font-weight:800; }
.status-pill.verified { color:#1d5749; background:#dceee7; }
.status-pill.suggested { color:#625a32; background:#f1e8c9; }
label { display:block; margin-top:12px; color:#39443f; font-size:12px; font-weight:750; }
input,textarea { width:100%; margin-top:6px; padding:13px 14px; border:1px solid #cfd4cf; border-radius:13px; color:var(--ink); background:white; outline:none; }
input:focus,textarea:focus { border-color:var(--forest-2); box-shadow:0 0 0 3px rgba(36,83,72,.12); }
textarea { resize:vertical; line-height:1.45; }
.clue-grid { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.clue-chip { padding:7px 9px; border-radius:10px; color:#3f4945; background:var(--sage); font-size:12px; }
.text-link { display:block; margin-top:12px; color:var(--forest-2); font-weight:750; text-align:center; }
.match-list { display:grid; gap:10px; }
.match { width:100%; padding:14px; border:1px solid var(--line); border-radius:16px; text-align:left; background:white; cursor:pointer; }
.match:hover,.match:focus { border-color:var(--forest-2); background:#f5faf6; }
.match strong,.match small { display:block; }
.match small { margin-top:5px; color:var(--muted); line-height:1.35; }
.helper { margin:-3px 0 8px; color:var(--muted); font-size:13px; line-height:1.4; }
.form-grid { display:grid; grid-template-columns:1fr; gap:0 12px; }
.industry-note { margin-top:14px; padding:12px; border-radius:13px; color:#544b2f; background:#f5edda; font-size:13px; line-height:1.45; }
.inline-message { margin:12px 0 0; padding:11px 12px; border-radius:12px; color:#5e4327; background:#fff0d6; font-size:13px; line-height:1.4; }
.page-intro { padding:16px 5px 6px; }
.page-intro p:last-child { color:var(--muted); line-height:1.5; }
.saved-list { display:grid; gap:12px; }
.saved-card { display:grid; grid-template-columns:72px 1fr; gap:13px; padding:14px; border-radius:20px; background:var(--paper); box-shadow:0 8px 28px rgba(32,49,44,.07); }
.saved-card img,.saved-placeholder { width:72px; height:72px; border-radius:14px; object-fit:cover; background:var(--sage); }
.saved-placeholder { display:grid; place-items:center; color:var(--forest-2); font-size:29px; }
.saved-card h3 { margin:2px 0 5px; font:500 21px Georgia,serif; }
.saved-card p { margin:0; color:var(--muted); font-size:13px; }
.saved-actions { display:flex; gap:8px; margin-top:10px; }
.saved-actions button { padding:7px 10px; border:1px solid var(--line); border-radius:10px; color:var(--forest); background:white; font-weight:700; cursor:pointer; }
.saved-actions .delete { color:var(--danger); }
.empty-card { padding:55px 20px; border:1px dashed #a7b1ab; border-radius:22px; color:var(--muted); text-align:center; }
.empty-card span { font-size:42px; color:var(--forest-2); }
.empty-card h3 { margin:8px 0 5px; color:var(--ink); }
.about-list article { display:grid; grid-template-columns:36px 1fr; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); }
.about-list article:last-child { border:0; }
.about-list article > span { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; color:white; background:var(--forest); font-weight:800; }
.about-list h3,.privacy-card h3 { margin:0 0 4px; }
.about-list p,.privacy-card p:last-child { margin:0; color:var(--muted); line-height:1.45; }
.release-label { color:var(--muted); font-size:12px; text-align:center; }
.bottom-nav { position:fixed; z-index:30; bottom:0; left:0; right:0; display:grid; grid-template-columns:repeat(3,1fr); padding:8px 12px calc(8px + env(safe-area-inset-bottom)); border-top:1px solid rgba(30,50,44,.12); background:rgba(255,253,248,.95); backdrop-filter:blur(18px); }
.bottom-nav button { display:grid; justify-items:center; gap:2px; min-height:52px; border:0; color:#74807b; background:transparent; font-size:11px; font-weight:750; cursor:pointer; }
.bottom-nav button span { font-size:22px; }
.bottom-nav button.active { color:var(--forest); }
.toast { position:fixed; z-index:50; left:50%; bottom:94px; width:min(420px,calc(100% - 28px)); padding:13px 15px; border-radius:14px; transform:translateX(-50%); color:white; background:#152d28; box-shadow:var(--shadow); text-align:center; font-weight:700; }
.hidden { display:none !important; }

@media (min-width:760px) {
  body { padding-bottom:0; }
  .topbar { padding-inline:max(28px,calc((100vw - 1080px)/2)); }
  main { padding:22px 24px 55px; }
  .view { padding:0; }
  #scan-view { max-width:960px; }
  .hero-card { grid-template-columns:70px 1fr; padding:30px; }
  .hero-icon { width:66px; height:66px; }
  .hero-card h2 { font-size:38px; }
  .capture-card { display:grid; grid-template-columns:minmax(320px,1.05fr) minmax(300px,.95fr); column-gap:22px; }
  .photo-stage { grid-row:1 / span 5; min-height:390px; }
  .capture-actions { align-self:start; }
  .form-grid { grid-template-columns:1fr 1fr; }
  .span-2 { grid-column:span 2; }
  .saved-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bottom-nav { position:fixed; top:50%; right:22px; bottom:auto; left:auto; width:80px; grid-template-columns:1fr; gap:6px; padding:10px; border:1px solid var(--line); border-radius:22px; transform:translateY(-50%); box-shadow:var(--shadow); }
  .toast { bottom:28px; }
}

@media (min-width:1100px) {
  .card { padding:24px; }
  .saved-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
}