:root{
  --teal:#0d9488;
  --bg:#0b1324;
  --card:#111827;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --ok:#10b981;
  --caution:#f59e0b;
  --avoid:#ef4444;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
header{padding:1rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #1f2937;gap:1rem}
h1{margin:0;font-size:1.25rem;color:#fff}
#status{font-size:.875rem;color:var(--muted);text-align:right}
.version-text,.version-note{font-size:.82rem;color:var(--muted);margin-top:.2rem}
main{padding:1rem;max-width:900px;margin:0 auto}
.card{background:var(--card);padding:1rem;border-radius:.75rem;border:1px solid #1f2937;margin-bottom:1rem}
.search-row{display:flex;gap:.5rem}
.search-row input{flex:1;padding:.75rem;border-radius:.5rem;border:1px solid #374151;background:#0f172a;color:#e5e7eb}
.search-row button,.scan-controls button,#settings button{padding:.75rem 1rem;border-radius:.5rem;border:1px solid #374151;background:var(--teal);color:white;cursor:pointer}
.hint{color:var(--muted);margin:.5rem 0 0}
.tabs{display:flex;gap:.5rem;margin:.5rem 0 1rem;flex-wrap:wrap}
.tabs .tab{background:#0f172a;border:1px solid #374151;color:#e5e7eb;padding:.5rem .75rem;border-radius:.5rem;cursor:pointer}
.tabs .tab.active{background:var(--teal);border-color:var(--teal)}
.tabpanel{display:none}
.tabpanel.active{display:block}
.results{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem}
.result-item{display:flex;gap:.75rem;background:var(--card);border:1px solid #1f2937;padding:.75rem;border-radius:.75rem}
.result-item .badge{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;flex:0 0 auto}
.badge[data-verdict="OK"]{background:var(--ok)}
.badge[data-verdict="CAUTION"]{background:var(--caution)}
.badge[data-verdict="AVOID"]{background:var(--avoid)}
.meta .name{font-weight:600}
.meta .sub{font-size:.85rem;color:var(--muted)}
.meta .ingredients{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;font-size:.85rem;color:#d1d5db;margin-top:.25rem;white-space:pre-wrap}
details.why{margin-top:.25rem}
#scannerRegion,.scanner-region{width:100%;min-height:280px;max-height:60vh;background:#000;border-radius:.5rem;margin-top:.5rem;overflow:hidden}
.scanner-region video{width:100%!important;height:auto!important;max-height:60vh;object-fit:cover;border-radius:.5rem}
.scanner-region__placeholder{display:flex;align-items:center;justify-content:center;min-height:280px;color:#cbd5e1;font-size:.95rem;padding:1rem;text-align:center}
.scan-controls{display:flex;gap:.5rem;flex-wrap:wrap}
.scan-status{margin-top:.5rem;color:var(--muted)}
.toggle{display:flex;gap:.5rem;align-items:center;margin:.5rem 0}
button{cursor:pointer}
code{background:#0f172a;padding:.1rem .3rem;border-radius:.35rem}
a{color:#5eead4}
@media (max-width:640px){
  header{align-items:flex-start;flex-direction:column}
  #status{text-align:left}
  .search-row{flex-direction:column}
}


.app-footer{max-width:900px;margin:2rem auto 1.5rem;padding:1rem;border-top:1px solid #1f2937;text-align:center;font-size:.85rem;color:var(--muted)}
.app-footer p{margin:.35rem 0}
.app-footer a{color:#5eead4}
.footer-note{font-size:.75rem;opacity:.85}
.result-item .badge{width:auto;min-width:90px;height:36px;padding:0 .75rem;border-radius:999px;font-size:.78rem;letter-spacing:.02em}

.scan-card{margin-bottom:1rem}
.file-input{display:block;margin:.5rem 0 0;color:var(--muted)}
.scan-card h2{margin-top:0}

.loading-indicator{display:flex;align-items:center;gap:.5rem;margin-top:.75rem;color:var(--muted);font-size:.95rem}
.spinner{width:16px;height:16px;border-radius:999px;border:2px solid rgba(255,255,255,.2);border-top-color:var(--teal);display:inline-block;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.secondary-btn{padding:.6rem .85rem;border-radius:.5rem;border:1px solid #374151;background:#0f172a;color:#e5e7eb;cursor:pointer}
.history-header{display:flex;justify-content:space-between;align-items:center;gap:.75rem;flex-wrap:wrap}
.history-list{list-style:none;padding:0;margin:1rem 0 0;display:flex;flex-direction:column;gap:.75rem}
.history-item{display:flex;justify-content:space-between;gap:1rem;background:#0f172a;border:1px solid #1f2937;padding:.85rem;border-radius:.75rem;align-items:flex-start}
.history-main{min-width:0}
.history-title{font-weight:600;word-break:break-word}
.history-sub{font-size:.85rem;color:var(--muted);margin-top:.2rem;word-break:break-word}
.history-actions{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:flex-end}
.icon-btn{padding:.55rem .75rem;border-radius:.5rem;border:1px solid #374151;background:#0f172a;color:#e5e7eb;cursor:pointer;font-size:1rem;line-height:1}
.icon-btn.favorited{color:#fbbf24;border-color:#fbbf24}
.danger-btn{border-color:#7f1d1d;color:#fecaca}
.history-empty{background:var(--card);border:1px solid #1f2937;padding:.9rem;border-radius:.75rem;color:var(--muted)}
@media (max-width:640px){.history-item{flex-direction:column}.history-actions{justify-content:flex-start}}

.loading-indicator[hidden]{display:none !important}

.history-tools{display:flex;flex-direction:column;gap:.75rem;margin-top:.85rem}
.history-export-row{display:flex;gap:.5rem;flex-wrap:wrap}
.history-select{display:flex;align-items:flex-start;padding-top:.2rem}
.history-checkbox{width:18px;height:18px;margin-top:.15rem}
.history-item{align-items:flex-start}
.history-item.selected{border-color:#5eead4;box-shadow:0 0 0 1px rgba(94,234,212,.25) inset}
.history-main{flex:1}
.history-actions{align-items:flex-start}
.history-export-meta{font-size:.82rem;color:var(--muted)}
@media (max-width:640px){.history-export-row{flex-direction:column}.history-export-row .secondary-btn{width:100%}}

#scannerRegion__dashboard_section_csr, #scannerRegion__dashboard_section_swaplink { color: #e2e8f0; }
#scannerRegion select, #scannerRegion button, #scannerRegion input { max-width: 100%; }
#scannerRegion img { max-width: 100%; height: auto; }


body.theme-light{
  --bg:#f5f7fb;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
}
body.theme-light header{border-bottom-color:#dbe1ea}
body.theme-light .card,
body.theme-light .result-item,
body.theme-light .history-item,
body.theme-light .history-empty{border-color:#dbe1ea}
body.theme-light .search-row input,
body.theme-light .tabs .tab,
body.theme-light .secondary-btn,
body.theme-light code{background:#f8fafc;color:#111827;border-color:#dbe1ea}
body.theme-light .search-row button,
body.theme-light .scan-controls button,
body.theme-light #settings button{color:white}
body.theme-light #scannerRegion,.theme-light .scanner-region{background:#d1d5db}
body.theme-light .meta .ingredients{color:#374151}
body.large-text{font-size:18px}
body.large-text .meta .ingredients, body.large-text .sub, body.large-text .history-sub, body.large-text .hint{font-size:.95rem}
main{padding:1.25rem;max-width:960px}
.card{border-radius:1rem;box-shadow:0 10px 24px rgba(0,0,0,.12)}
.tabs{gap:.65rem;margin:.75rem 0 1.1rem}
.tabs .tab{padding:.7rem 1rem;border-radius:.8rem;font-weight:600;min-height:44px}
.result-item{padding:1rem;align-items:flex-start;position:relative}
.result-item .meta{flex:1;min-width:0}
.result-item .name{font-size:1.05rem;color:#fff}
.theme-light .result-item .name{color:#111827}
.result-item .sub{margin-top:.2rem}
.result-item .ingredients{margin-top:.6rem;line-height:1.55;background:rgba(255,255,255,.03);padding:.65rem .75rem;border-radius:.75rem}
.theme-light .result-item .ingredients{background:#f8fafc}
.result-item.result-ok{border-left:4px solid var(--ok)}
.result-item.result-caution{border-left:4px solid var(--caution)}
.result-item.result-avoid{border-left:4px solid var(--avoid)}
details.why{margin-top:.6rem;padding-top:.25rem}
details.why summary{cursor:pointer;font-weight:600;color:#cbd5e1}
.theme-light details.why summary{color:#334155}
.empty-state{background:var(--card);border:1px dashed #334155;padding:1rem;border-radius:.9rem;color:var(--muted);list-style:none}
.settings-card h2{margin-top:0;margin-bottom:.5rem}
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.85rem 1rem;margin-bottom:1rem}
.setting-row,.toggle{background:#0f172a;border:1px solid #1f2937;border-radius:.85rem;padding:.8rem .9rem;display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin:0}
.theme-light .setting-row,.theme-light .toggle{background:#f8fafc;border-color:#dbe1ea}
.setting-label{font-weight:600}
.setting-select{padding:.65rem .75rem;border-radius:.65rem;border:1px solid #374151;background:#0b1324;color:var(--text);min-width:140px}
.theme-light .setting-select{background:#fff;border-color:#dbe1ea}
.history-item,.history-empty,.result-item{transition:border-color .2s ease, transform .15s ease, box-shadow .2s ease}
.history-item:hover,.result-item:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.12)}
@media (max-width:640px){
  main{padding:1rem}
  .settings-grid{grid-template-columns:1fr}
  .setting-row,.toggle{align-items:flex-start;flex-direction:column}
  .setting-select{width:100%}
}