* { box-sizing: border-box; }
:root{
  --green: #1e6b3c;
  --green-dark: #144a29;
  --gold: #b8860b;
  --bg: #f6f8f6;
  --card: #ffffff;
  --text: #1c231f;
  --muted: #667066;
  --border: #dfe6e0;
}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  padding-bottom: 40px;
}
.topbar{
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  color: white;
  padding: 18px 20px;
  position: sticky; top:0; z-index: 10;
}
.brand{ font-size: 22px; font-weight: 700; }
.subbrand{ font-size: 13px; opacity: .85; margin-top:2px; }

#app{ max-width: 640px; margin: 0 auto; padding: 18px; }

.screen{ display:none; }
.screen.active{ display:block; animation: fade .25s ease; }
@keyframes fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

h1{ font-size: 24px; margin-bottom: 8px;}
h2{ font-size: 20px; margin-bottom: 6px;}
h3{ font-size: 16px; margin: 0 0 10px 0; color: var(--green-dark);}
.lead{ color: var(--muted); line-height: 1.5; }
.hint{ color: var(--muted); font-size: 14px; line-height:1.45; }
.hint-small{ color: var(--muted); font-size: 12px; margin-top:4px;}

.steps-preview{
  list-style:none; padding:0; margin: 16px 0; display:grid; gap:8px;
}
.steps-preview li{
  background: var(--card); border:1px solid var(--border);
  border-radius: 10px; padding: 10px 14px; font-size: 14px;
}

button{ font-family: inherit; cursor: pointer; border:none; }
.btn-primary{
  display:block; width:100%; background: var(--green); color:white;
  padding: 14px; border-radius: 12px; font-size: 16px; font-weight:600;
  margin-top: 14px;
}
.btn-primary:disabled{ background:#a9c3ac; cursor:not-allowed; }
.btn-secondary{
  display:block; width:100%; background: white; color: var(--green-dark);
  border: 1.5px solid var(--green); padding: 12px; border-radius: 12px;
  font-size: 15px; font-weight:600; margin-top: 10px;
}
.btn-record{
  display:block; width:100%; background: #b8321f; color:white;
  padding: 14px; border-radius: 12px; font-size: 16px; font-weight:600;
}
.btn-record:disabled{ background:#e0b0a8; cursor:not-allowed; }
.btn-record.recording{ background:#7a1f13; }
.btn-text-link{
  display:block; width:100%; background:none; color: var(--muted);
  padding: 10px; text-align:center; font-size: 14px; margin-top: 6px;
  text-decoration: underline;
}

.camera-wrap{
  position: relative; width:100%; aspect-ratio: 3/4; background:#000;
  border-radius: 14px; overflow:hidden; margin-top:14px;
}
#camera-preview{ width:100%; height:100%; object-fit:cover; }
.camera-overlay{
  position:absolute; bottom:10px; left:10px; right:10px;
  background:rgba(0,0,0,.55); color:white; font-size:13px;
  padding:6px 10px; border-radius: 8px; text-align:center;
}
.scan-controls{ display:grid; gap:10px; margin-top:14px; }
.frame-count{ margin-top: 14px; font-weight:600; color: var(--green-dark); }
.frame-thumbs{
  display:flex; gap:6px; overflow-x:auto; padding: 8px 0;
}
.frame-thumbs img{
  width:52px; height:70px; object-fit:cover; border-radius:6px;
  border:1px solid var(--border);
}

.progress-wrap{ margin-top: 24px; }
.progress-bar{
  width:100%; height: 14px; background: var(--border); border-radius: 8px; overflow:hidden;
}
.progress-fill{
  height:100%; width:0%; background: linear-gradient(90deg, var(--green), var(--gold));
  transition: width .3s ease;
}
.progress-text{ margin-top:10px; font-size:14px; color: var(--muted); text-align:center; }

#raw-text-area{
  width:100%; min-height: 320px; border:1px solid var(--border); border-radius:12px;
  padding:14px; font-size:14px; line-height:1.5; margin-top:12px; resize:vertical;
  font-family: ui-monospace, monospace;
}
.word-count{ font-size:13px; color: var(--muted); margin-top:6px; }

.setting-block{
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:16px; margin-top:14px;
}
.setting-block label{ font-size:14px; font-weight:600; display:block; margin-bottom:8px;}
.setting-block select, .setting-block input[type=range]{ width:100%; }

.result-stats{
  background: var(--green-dark); color:white; border-radius:12px; padding:14px;
  font-size:14px; line-height:1.6; margin-top:10px;
}
.result-block{
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:16px; margin-top:14px;
}
.key-terms{ display:flex; flex-wrap:wrap; gap:6px; }
.key-terms span{
  background:#eaf3ec; color: var(--green-dark); font-size:13px; font-weight:600;
  padding:5px 10px; border-radius: 20px;
}
.high-yield-list{ margin:0; padding-left: 18px; }
.high-yield-list li{ margin-bottom:8px; font-size:14px; line-height:1.5; }
.summary-sections h4{ color: var(--green-dark); margin: 14px 0 6px 0; font-size:15px;}
.summary-sections p{ font-size:14px; line-height:1.6; margin: 0 0 10px 0; }

.toast{
  position: fixed; bottom: 18px; left:50%; transform: translateX(-50%) translateY(20px);
  background: #222; color:white; padding: 10px 18px; border-radius: 10px;
  font-size: 14px; opacity:0; pointer-events:none; transition: all .3s ease; max-width: 90%; text-align:center;
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }