:root{
  --ocean:#0e7c9c;
  --ocean-dark:#0a5a73;
  --sand:#fef8ee;
  --card:#ffffff;
  --ink:#1c2b33;
  --muted:#6b7d85;
  --accent:#ff8a5b;
  --good:#2fa86b;
  --bad:#d9534f;
  --border:#e3ecef;
  --radius:14px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(180deg,#e8f6fa 0%, var(--sand) 320px);
  color:var(--ink);
  min-height:100vh;
}
header{
  padding:28px 24px 18px;
  text-align:center;
}
header h1{
  margin:0 0 4px;
  font-size:1.7rem;
  letter-spacing:-0.02em;
}
header p{
  margin:0;
  color:var(--muted);
  font-size:0.95rem;
}
header p.lede{
  max-width:640px;
  margin:10px auto 0;
  font-size:0.85rem;
  line-height:1.5;
}
.wrap{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px 60px;
}
.rate-limit-banner{
  background:#fff2e2;
  color:#8a5a10;
  border:1px solid #f0cf9a;
  border-radius:9px;
  padding:12px 16px;
  font-size:0.85rem;
  font-weight:600;
  margin:0 0 18px;
}
.rate-limit-banner[hidden]{display:none;}
.tabs-layout{
  display:flex;
  align-items:flex-start;
  gap:20px;
}
.tabs{
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:0 0 170px;
  border-right:1px solid var(--border);
  padding-right:14px;
  position:sticky;
  top:20px;
}
.tab-btn{
  appearance:none;
  border:none;
  background:transparent;
  padding:11px 14px;
  font-size:0.92rem;
  font-weight:600;
  color:var(--muted);
  cursor:pointer;
  text-align:left;
  border-radius:9px;
  border-left:3px solid transparent;
  transition:color .15s, background .15s, border-color .15s;
}
.tab-btn:hover{color:var(--ink);background:#eef4f6;}
.tab-btn.active{color:var(--ocean-dark);background:#e4f4f8;border-left-color:var(--ocean);}
.tab-content{flex:1;min-width:0;}
.tab-panel[hidden]{display:none;}
@media (max-width:640px){
  .tabs-layout{flex-direction:column;}
  .tabs{flex-direction:row;flex:0 0 auto;border-right:none;border-bottom:1px solid var(--border);padding-right:0;padding-bottom:8px;position:static;width:100%;}
}
.panel{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px 20px;
  margin-bottom:18px;
  box-shadow:0 1px 3px rgba(20,50,60,0.06);
}
.panel h2{
  font-size:1rem;
  margin:0 0 12px;
  display:flex;
  align-items:center;
  gap:8px;
}
.btn{
  appearance:none;
  border:none;
  padding:10px 16px;
  border-radius:9px;
  font-size:0.9rem;
  font-weight:600;
  cursor:pointer;
  transition:filter .15s;
}
.btn:hover{filter:brightness(1.05);}
.btn:active{filter:brightness(0.95);}
.btn-primary{background:var(--ocean);color:#fff;}
.btn-accent{background:var(--accent);color:#fff;}
.btn-ghost{background:#eef4f6;color:var(--ink);}
.btn:disabled{opacity:0.5;cursor:not-allowed;}
.hint{font-size:0.78rem;color:var(--muted);margin-top:6px;}
.dropzone{
  border:2px dashed #b9d7e0;
  border-radius:var(--radius);
  padding:34px 20px;
  text-align:center;
  color:var(--muted);
  cursor:pointer;
  background:#f4fafc;
  transition:background .15s, border-color .15s;
}
.dropzone.drag{background:#e4f4f8;border-color:var(--ocean);}
.dropzone strong{color:var(--ocean-dark);}
#fileInput{display:none;}
.toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin:18px 0 12px;
}
.toolbar[hidden]{display:none;}
.toolbar .btn-group{display:flex;gap:8px;flex-wrap:wrap;}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:16px;
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 1px 3px rgba(20,50,60,0.06);
}
.card.card-error{
  border-color:var(--bad);
  border-width:2px;
  box-shadow:0 0 0 1px var(--bad);
}
.card-img{
  width:100%;
  height:190px;
  object-fit:contain;
  background:#eef4f6;
  display:block;
}
.back-thumb-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 0;
}
.back-thumb-row .hint{flex:1;}
.back-thumb-row .btn{padding:4px 9px;font-size:0.78rem;}
.back-thumb{
  width:32px;
  height:44px;
  object-fit:cover;
  border-radius:4px;
  flex-shrink:0;
  border:1px solid var(--border);
}
.card-body{
  padding:14px 14px 16px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.status-line{
  font-size:0.78rem;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:6px;
}
.status-line.detecting{color:var(--accent);}
.status-line.done{color:var(--good);}
.status-line.error{color:var(--bad);}
.spinner{
  width:11px;height:11px;
  border:2px solid #f0d9cc;
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin .7s linear infinite;
  display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg);}}
.card-details-list{display:flex;flex-direction:column;gap:4px;margin-top:2px;font-size:0.82rem;}
.card-details-list strong{color:var(--muted);font-weight:600;margin-right:4px;}
.card-actions{display:flex;gap:8px;flex-wrap:wrap;}
.card-actions .btn{flex:1;padding:8px 10px;font-size:0.82rem;}
.badge{
  display:inline-block;
  background:#eaf6ee;
  color:var(--good);
  font-size:0.72rem;
  font-weight:700;
  padding:2px 8px;
  border-radius:20px;
}
/* select.badge-select beats the generic `select{}` input styling further
   down purely on specificity (element+class > element), regardless of
   source order, so this stays a green pill instead of a bulky text-input
   box even though it's a real <select>. */
select.badge-select{
  background:#eaf6ee;
  color:var(--good);
  font-size:0.72rem;
  font-weight:700;
  padding:2px 6px;
  border-radius:20px;
  border:1px solid transparent;
  cursor:pointer;
  font-family:inherit;
}
select.badge-select:focus{
  outline:2px solid var(--ocean);
  outline-offset:1px;
}

.row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:flex-end;
}
.field{
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:1;
  min-width:150px;
}
.field label{
  font-size:0.78rem;
  color:var(--muted);
  font-weight:600;
}
input[type=text], input[type=number], select{
  padding:9px 11px;
  border:1px solid var(--border);
  border-radius:9px;
  font-size:0.92rem;
  font-family:inherit;
  background:#fbfdfe;
  /* Fixed, not var(--ink): these fields keep a light background in both
     themes, but --ink flips to a near-white value in dark mode — leaving
     that in place made typed text unreadable against the still-light box. */
  color:#1c2b33;
}
input:focus, select:focus{
  outline:2px solid var(--ocean);
  outline-offset:-1px;
}
input.input-required-empty{
  border-color:var(--bad);
}
input.input-required-empty:focus{
  outline-color:var(--bad);
}
summary{cursor:pointer;}
summary::marker{color:var(--muted);}

.card-details{margin-bottom:2px;border:1px solid var(--border);border-radius:8px;padding:8px 10px;}
.card-details summary{font-size:0.8rem;color:var(--ocean-dark);font-weight:600;}

.lctg-search-row{display:flex;gap:6px;}
.lctg-search-row input{flex:1;}
.lctg-results{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  min-height:0;
  max-height:340px;
  overflow-y:auto;
}
.lctg-result{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  width:84px;
  padding:4px;
  border:2px solid transparent;
  border-radius:8px;
  cursor:pointer;
  background:none;
  font:inherit;
  text-align:center;
}
.lctg-result:hover{border-color:var(--ocean);background:#f0f9fb;}
.lctg-result-selected{border-color:var(--good);background:#eaf6ee;}
.lctg-result-selected:hover{border-color:var(--good);}
.lctg-result-selected::after{content:"✓ Selected";display:block;font-size:0.68rem;font-weight:700;color:var(--good);}
.lctg-result img{
  width:76px;
  height:106px;
  object-fit:cover;
  border-radius:6px;
  background:#eef4f6;
  flex-shrink:0;
}
.lctg-result .lctg-result-placeholder{
  width:76px;
  height:106px;
  border-radius:6px;
  background:#eef4f6;
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.6rem;
}
.lctg-result-label{
  font-size:0.68rem;
  line-height:1.25;
  color:var(--muted);
  word-break:break-word;
}

.two-col{display:flex;gap:8px;}
.two-col .field{flex:1;min-width:0;}

.preview{
  background:#0b141a;
  color:#e7f1f5;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:0.82rem;
  border-radius:9px;
  padding:12px;
  white-space:pre-wrap;
  line-height:1.5;
  min-height:60px;
}

.empty{
  text-align:center;
  color:var(--muted);
  padding:40px 0;
  font-size:0.9rem;
}

.history-list{display:flex;flex-direction:column;gap:16px;}
.history-folder{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px 16px;
  box-shadow:0 1px 3px rgba(20,50,60,0.06);
}
.history-folder-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
  flex-wrap:wrap;
  cursor:pointer;
  list-style:none;
}
.history-folder-header::-webkit-details-marker{display:none;}
.history-folder[open] .history-folder-header{margin-bottom:12px;}
.history-folder-header .chevron{display:inline-block;transition:transform .15s;margin-right:4px;color:var(--muted);}
.history-folder[open] .history-folder-header .chevron{transform:rotate(90deg);}
.history-folder-header strong{font-size:1rem;}
.history-folder-header span{font-size:0.78rem;color:var(--muted);flex:1;min-width:120px;}
.history-folder-header .btn{padding:6px 12px;font-size:0.78rem;}
.history-entries{display:flex;flex-direction:column;gap:10px;}
.history-entry{
  display:flex;
  gap:12px;
  background:#fbfdfe;
  border:1px solid var(--border);
  border-radius:9px;
  padding:10px;
}
.history-entry-image{
  width:60px;
  height:84px;
  object-fit:contain;
  border-radius:6px;
  background:#eef4f6;
  flex-shrink:0;
}
.history-entry-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.history-entry-body strong{font-size:0.88rem;}
.history-entry-actions{display:flex;gap:8px;}
.history-entry-actions .btn{padding:5px 10px;font-size:0.78rem;}
.translated-hint{font-size:0.72rem;color:var(--muted);font-style:italic;margin:-2px 0 0;}
.toast{
  position:fixed;
  bottom:22px;
  left:50%;
  transform:translateX(-50%);
  background:var(--ink);
  color:#fff;
  padding:10px 18px;
  border-radius:20px;
  font-size:0.85rem;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s, transform .25s;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(-6px);}

@media (prefers-color-scheme: dark){
  :root{
    --sand:#151b1e;
    --card:#1f272b;
    --ink:#eaf1f3;
    --muted:#8ba0a8;
    --border:#2b363b;
  }
  body{background:linear-gradient(180deg,#10222a 0%, var(--sand) 320px);}
  .dropzone{background:#182226;}
  .btn-ghost{background:#263136;}
  .card-img{background:#263136;}
  .tab-btn:hover{background:#1c262b;}
  .tab-btn.active{background:#17323b;}
  .history-entry{background:#22292d;}
  .history-entry-image{background:#263136;}
  .provider-compare{background:#20282c;}
  .lctg-result:hover{background:#1c262b;}
  .rate-limit-banner{background:#3a2a10;color:#f0c98a;border-color:#5a4420;}
  .lctg-result img, .lctg-result .lctg-result-placeholder{background:#263136;}
  .lctg-result-selected{background:#1a3324;}
}