/* ── Reset & base ───────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       background: #f5f0e8; color: #1e2d1a; min-height: 100vh; }

/* ── App shell ──────────────────────────────────────── */
.app-shell { display: flex; flex-direction: column; min-height: 100vh; }

.topbar { display:flex; align-items:center; gap:8px; padding:12px 16px;
          background:#3d5a2e; color:#fff; position:sticky; top:0; z-index:200; }
.topbar-logo  { font-size:1.4rem; }
.topbar-title { font-size:1rem; font-weight:700; flex:1; }

.page-content { flex:1; padding-bottom:72px; }
.page         { padding:16px; max-width:600px; margin:0 auto; }

/* ── Stats strip ────────────────────────────────────── */
.stats-strip { display:flex; gap:12px; margin-bottom:16px; }
.stat-item   { flex:1; background:#fff; border-radius:12px; padding:12px;
               text-align:center; box-shadow:0 1px 4px rgba(0,0,0,.06); }
.stat-num    { font-size:1.6rem; font-weight:800; color:#3d5a2e; }
.stat-lbl    { font-size:.65rem; color:#7a9e6e; text-transform:uppercase; letter-spacing:.04em; }

/* ── Search ─────────────────────────────────────────── */
.search-bar   { display:flex; align-items:center; gap:8px; background:#fff;
                border-radius:12px; padding:10px 14px; margin-bottom:12px;
                box-shadow:0 1px 4px rgba(0,0,0,.06); }
.search-input { border:none; outline:none; flex:1; font-size:.95rem; background:transparent; }

/* ── Filter chips ───────────────────────────────────── */
.filter-chips { display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; margin-bottom:16px; scrollbar-width:none; }
.filter-chip  { flex-shrink:0; padding:6px 12px; border-radius:20px; border:1px solid #c8d8b8;
                background:#fff; font-size:.75rem; cursor:pointer; color:#3d5a2e; }
.filter-chip.active { background:#3d5a2e; color:#fff; border-color:#3d5a2e; }

/* ── Plant grid ─────────────────────────────────────── */
.plant-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.plant-card { background:#fff; border-radius:14px; overflow:hidden; cursor:pointer;
              box-shadow:0 1px 6px rgba(0,0,0,.07); transition:transform .15s; }
.plant-card:active { transform:scale(.97); }
.plant-card-img  { height:90px; display:flex; align-items:center; justify-content:center;
                   background:linear-gradient(135deg,#e8f5e0,#c8ddb8); font-size:2.5rem; position:relative; }
.plant-type-badge { position:absolute; bottom:4px; right:6px; font-size:.6rem;
                    background:rgba(61,90,46,.8); color:#fff; border-radius:8px; padding:2px 6px; }
.plant-card-body { padding:10px; }
.plant-card-name { font-size:.88rem; font-weight:700; margin-bottom:2px; }
.plant-card-latin{ font-size:.68rem; color:#7a9e6e; font-style:italic; margin-bottom:6px; }
.plant-card-meta { display:flex; flex-wrap:wrap; gap:4px; }
.meta-pill  { font-size:.6rem; background:#f0f7eb; border-radius:8px; padding:2px 6px; color:#3d5a2e; }
.sc-tag     { font-size:.6rem; background:#e8ddc8; border-radius:8px; padding:2px 6px;
              font-family:monospace; font-weight:700; color:#8a6a3e; }

/* ── FAB ────────────────────────────────────────────── */
.fab { position:fixed; bottom:80px; right:20px; width:52px; height:52px;
       border-radius:50%; background:#3d5a2e; color:#fff; font-size:1.6rem;
       border:none; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.25);
       display:flex; align-items:center; justify-content:center; z-index:150; }

/* ── Season badges ──────────────────────────────────── */
.season-badge { display:inline-block; padding:3px 10px; border-radius:12px;
                font-size:.7rem; font-weight:700; }
.season-spring { background:#d4edda; color:#1e6b3a; }
.season-summer { background:#fff3cd; color:#8a5a00; }
.season-autumn { background:#ffe0b2; color:#7a3500; }
.season-winter { background:#e3f2fd; color:#1565c0; }

/* ── Landing content ────────────────────────────────── */
.qr-landing-bar { background:#3d5a2e; color:#fff; padding:8px 16px; font-size:.78rem; }
.detail-hero    { position:relative; background:linear-gradient(135deg,#e8f5e0,#c8ddb8);
                  padding:24px 16px 16px; display:flex; flex-direction:column; align-items:center; }
.hero-emoji     { font-size:4rem; }
.detail-hero-overlay { text-align:center; margin-top:8px; }
.detail-hero-name    { font-size:1.4rem; font-weight:800; color:#1e2d1a; }
.detail-hero-latin   { font-size:.85rem; color:#5a7a4e; font-style:italic; }
.section        { background:#fff; margin:12px; border-radius:14px; padding:16px; }
.indicator-row  { display:flex; gap:8px; margin-bottom:12px; }
.indicator      { flex:1; text-align:center; }
.indicator-icon { font-size:1.4rem; }
.indicator-label{ font-size:.62rem; color:#7a9e6e; text-transform:uppercase; }
.indicator-val  { font-size:.8rem; font-weight:700; }
.info-row       { display:flex; gap:8px; margin-bottom:8px; }
.info-label     { font-size:.72rem; color:#7a9e6e; width:70px; flex-shrink:0; }
.info-value     { font-size:.82rem; }
.tag            { display:inline-block; background:#f0f7eb; border-radius:8px;
                  padding:2px 8px; font-size:.7rem; color:#3d5a2e; margin:2px; }

/* ── QR / ShortCode widget ──────────────────────────── */
.sc-block      { display:flex; background:#fff; margin:12px; border-radius:14px; overflow:hidden; box-shadow:0 1px 6px rgba(0,0,0,.07); }
.sc-qr-side    { flex:0 0 120px; background:#f5f0e8; display:flex; flex-direction:column; align-items:center; padding:12px 8px; }
.sc-qr-img     { width:90px; height:90px; border-radius:6px; }
.sc-guid-hint  { font-size:.5rem; color:#aaa; margin-top:4px; text-align:center; word-break:break-all; }
.sc-divider    { width:1px; background:#e8ddc8; }
.sc-info-side  { flex:1; padding:12px; display:flex; flex-direction:column; gap:6px; }
.sc-label      { font-size:.62rem; text-transform:uppercase; color:#7a9e6e; font-weight:700; letter-spacing:.05em; }
.sc-code-display { font-family:monospace; font-size:1.6rem; font-weight:800; color:#3d5a2e; letter-spacing:.1em; }
.sc-url        { font-size:.68rem; color:#aaa; }
.sc-actions    { display:flex; gap:6px; flex-wrap:wrap; }
.scb           { padding:5px 10px; border-radius:8px; border:1px solid #c8d8b8; background:#f5f0e8;
                 font-size:.72rem; cursor:pointer; color:#3d5a2e; }
.scb.green     { background:#3d5a2e; color:#fff; border-color:#3d5a2e; }
.sc-code-input { width:100%; padding:8px; font-family:monospace; font-size:1.3rem; font-weight:700;
                 text-align:center; border-radius:8px; border:2px solid #c8d8b8; letter-spacing:.15em;
                 text-transform:uppercase; outline:none; }
.sc-code-input.ok  { border-color:#3d5a2e; }
.sc-code-input.err { border-color:#c0392b; }
.sc-hint.ok  { color:#3d5a2e; font-size:.72rem; }
.sc-hint.err { color:#c0392b; font-size:.72rem; }
.sc-hint.neu { color:#aaa; font-size:.72rem; }

/* ── Scanner page ───────────────────────────────────── */
.scan-hero       { background:linear-gradient(135deg,#1e2d1a,#3d5a2e); padding:24px 16px;
                   display:flex; flex-direction:column; align-items:center; gap:12px; }
.scan-title      { color:#fff; font-size:1.1rem; font-weight:700; }
.scan-viewfinder { width:200px; height:200px; position:relative; display:flex;
                   align-items:center; justify-content:center; }
.scan-cam-bg     { font-size:4rem; opacity:.3; }
.scan-corners    { position:absolute; inset:0; border:3px solid #7af05a; border-radius:12px;
                   clip-path:polygon(0 0,30% 0,30% 8%,8% 8%,8% 30%,0 30%,
                                     70% 0,100% 0,100% 30%,92% 30%,92% 8%,70% 8%,
                                     0 70%,0 100%,30% 100%,30% 92%,8% 92%,8% 70%,
                                     100% 70%,100% 100%,70% 100%,70% 92%,92% 92%,92% 70%); }
.scan-line       { position:absolute; left:8%; right:8%; height:2px; background:#7af05a;
                   animation:scanline 1.5s ease-in-out infinite; }
@keyframes scanline { 0%,100%{top:10%} 50%{top:88%} }
.cam-btn         { padding:10px 20px; border-radius:20px; background:#7af05a; color:#1e2d1a;
                   font-weight:700; border:none; cursor:pointer; font-size:.85rem; }
.cam-btn.on      { background:#f05a5a; color:#fff; }
.scan-sub        { color:#a8c8a0; font-size:.75rem; }

.or-divider { display:flex; align-items:center; gap:12px; padding:16px; }
.or-line    { flex:1; height:1px; background:#e8ddc8; }
.or-text    { font-size:.75rem; color:#aaa; }

.code-entry-card   { margin:0 16px 16px; background:#fff; border-radius:14px;
                     box-shadow:0 1px 6px rgba(0,0,0,.07); overflow:hidden; }
.code-entry-header { background:#f5f0e8; padding:12px 16px; font-size:.82rem;
                     font-weight:700; color:#5a7a4e; border-bottom:1px solid #e8ddc8; }
.code-entry-body   { padding:16px; display:flex; flex-direction:column; gap:12px; }
.big-code-input    { width:100%; padding:16px; font-family:monospace; font-size:2rem;
                     font-weight:800; text-align:center; border-radius:12px;
                     border:3px solid #e8ddc8; text-transform:uppercase; outline:none;
                     letter-spacing:.2em; color:#1e2d1a; }
.big-code-input.found     { border-color:#3d5a2e; background:#f0f7eb; }
.big-code-input.not-found { border-color:#c0392b; background:#fff5f5; }
.code-status      { display:flex; gap:12px; align-items:center; padding:12px;
                    border-radius:10px; background:#f5f0e8; }
.code-status.found     { background:#f0f7eb; }
.code-status.not-found { background:#fff5f5; }
.cs-icon { font-size:2rem; }
.cs-name { font-weight:700; font-size:.9rem; }
.cs-latin{ font-style:italic; font-size:.72rem; color:#7a9e6e; }
.cs-sub  { font-size:.68rem; color:#888; }
.go-btn  { width:100%; padding:14px; border-radius:12px; background:#3d5a2e; color:#fff;
           font-weight:700; border:none; cursor:pointer; font-size:.9rem; }
.code-hint { font-size:.78rem; color:#aaa; text-align:center; }

/* ── Not found ──────────────────────────────────────── */
.not-found { padding:40px 24px; text-align:center; }
.nf-icon   { font-size:3rem; margin-bottom:12px; }
.not-found h2 { color:#3d5a2e; margin-bottom:8px; }
.not-found p  { color:#7a9e6e; margin-bottom:16px; }
.not-found a  { color:#3d5a2e; font-weight:700; }

/* ── Empty state ────────────────────────────────────── */
.empty-state { text-align:center; padding:40px 0; color:#7a9e6e; }
.es-icon     { font-size:2.5rem; margin-bottom:8px; }