/* v1.9.3 Admin › OCR lab › Screenshot readers card + Gemini hints. */
.oe-card { display: grid; gap: 12px; padding: 16px; margin: 4px 0 14px; border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--sm-line, rgb(255 255 255 / .08)));
  background: linear-gradient(160deg, color-mix(in srgb, var(--primary) 9%, transparent), var(--surface-container-low, rgb(255 255 255 / .02)) 60%); min-width: 0; }
.oe-head { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.oe-head h3 { margin: 0 0 2px; font-size: 1rem; }
.oe-head p { margin: 0; }
.oe-head__icon { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; background: var(--primary); color: var(--on-primary, #000); }
.oe-head__icon svg { width: 22px; height: 22px; }
.oe-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.oe-tile { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 12px; border-radius: 16px; cursor: pointer; min-width: 0;
  border: 1px solid var(--sm-line, rgb(255 255 255 / .1)); background: var(--surface-container, rgb(255 255 255 / .04)); color: inherit; font: inherit;
  transition: border-color .2s ease, background-color .2s ease, transform .18s ease, box-shadow .2s ease; }
.oe-tile:hover { border-color: color-mix(in srgb, var(--primary) 50%, transparent); }
.oe-tile:active { transform: scale(.98); }
.oe-tile:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.oe-tile.is-on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, var(--surface-container, transparent));
  box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--primary) 70%, transparent); }
.oe-tile__check { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 7px; display: grid; place-items: center; margin-top: 1px;
  border: 2px solid var(--on-surface-variant, #9aa); transition: background-color .2s ease, border-color .2s ease; }
.oe-tile.is-on .oe-tile__check { background: var(--primary); border-color: var(--primary); color: var(--on-primary, #000); animation: oe-pop .28s cubic-bezier(.2, .9, .3, 1.4); }
.oe-tile__check svg { width: 16px; height: 16px; }
.oe-tile__text { display: grid; gap: 2px; min-width: 0; }
.oe-tile__text b { font-size: .92rem; }
.oe-tile__text small { color: var(--on-surface-variant); font-size: .76rem; line-height: 1.35; overflow-wrap: anywhere; }
.oe-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.oe-row__label { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--on-surface-variant); }
.oe-row .cc-seg { flex-wrap: wrap; max-width: 100%; }
.oe-row--lab { margin: 0 0 10px; }
.oe-how { margin: 0; padding: 10px 12px; border-radius: 14px; background: color-mix(in srgb, var(--primary) 7%, transparent); line-height: 1.45; }
.oe-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.oe-gem { margin: 0; padding: 8px 12px; border-radius: 12px; color: var(--on-surface, inherit); background: color-mix(in srgb, #8ab4ff 14%, transparent); }
.oe-gem b { color: var(--primary); }
.sm-flag-note--alt { background: color-mix(in srgb, #8ab4ff 16%, transparent); }
@keyframes oe-pop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .oe-tile, .oe-tile__check { transition: none; } .oe-tile.is-on .oe-tile__check { animation: none; } }