.font-detector {
  width:min(1180px,95vw); max-width:1180px; max-height:92vh; overflow:auto; overflow-x:hidden;
  padding:0; border:none; border-radius:26px;
  background:linear-gradient(160deg, var(--bg-blob-1) 0%, #f4f7ff 34%, #ffffff 68%);
  color:var(--text); box-shadow:var(--shadow-lg); position:relative;
}
:root:not([data-theme="light"]) .font-detector { background:linear-gradient(160deg, #1c2440 0%, #171a29 42%, #171a29 100%); }
:root[data-theme="dark"] .font-detector { background:linear-gradient(160deg, #1c2440 0%, #171a29 42%, #171a29 100%); }
.font-detector::backdrop { background:rgba(0,0,0,.58); }
.font-detector p { font-size:14px; line-height:1.5; }
.fd-actions { display:flex; flex-wrap:wrap; gap:10px; margin:14px 0; }
.font-detector .toolbar-btn { font-size:14px; min-height:40px; padding:8px 12px; text-decoration:none; cursor:pointer; }
.fd-fields { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:10px; }
.fd-fields legend { font-size:12px; color:var(--text-faint); margin-bottom:4px; }
.fd-fields label { font-size:12px; }
.fd-fields input { width:100%; box-sizing:border-box; background:var(--surface-2); color:var(--text); border:1px solid var(--border); padding:8px; border-radius:6px; }
.fd-note { color:var(--text-dim); padding:0 44px 26px; margin:0; }
[data-font-detector] { flex-shrink:0; }

.fd-close {
  position:sticky; top:18px; float:right; margin:18px 18px -38px 0; z-index:5;
  width:38px; height:38px; border-radius:50%; border:1px solid var(--border);
  background:var(--surface); color:var(--text-dim); display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.fd-close:hover { background:var(--surface-2); color:var(--text); }

.fd-layout { display:grid; grid-template-columns:0.85fr 1.15fr; gap:0; clear:both; }
.fd-illustration-col { padding:30px 36px 30px 44px; display:flex; flex-direction:column; }
.fd-brand img { height:32px; width:auto; display:block; }
.fd-pill { display:inline-flex; align-self:flex-start; margin-top:26px; background:var(--accent-soft); color:var(--accent-1); font-size:13px; font-weight:700; padding:8px 16px; border-radius:999px; }
.fd-hero-heading { margin:18px 0 6px; font-size:42px; font-weight:800; line-height:1.06; color:var(--text); }
.fd-hero-heading span { color:var(--accent-1); }
.fd-hero-sub { margin:0; font-size:16px; color:var(--text-dim); }

.fd-illustration { position:relative; margin-top:40px; flex:1; min-height:230px; }
.fd-doodle { display:flex; align-items:center; gap:8px; font-family:'Caveat',cursive; font-weight:700; font-size:20px; color:var(--accent-1); white-space:nowrap; }
.fd-doodle-top { position:absolute; top:-6px; left:2px; }
.fd-doodle-top svg { transform:scaleX(-1); }
.fd-doodle-bottom { position:absolute; bottom:-4px; right:-6px; flex-direction:row-reverse; }
.fd-doodle-bottom svg { transform:rotate(20deg); }

.fd-illo-stage { position:relative; margin:60px auto 0; width:230px; height:150px; }
.fd-illo-card {
  position:absolute; left:8px; top:16px; width:200px; height:118px; background:var(--surface);
  border-radius:14px; box-shadow:var(--shadow-md); transform:rotate(-4deg);
  display:flex; align-items:center; justify-content:center;
}
.fd-illo-select { position:absolute; left:14px; top:31px; width:118px; height:44px; border:2px dashed var(--accent-1); border-radius:6px; }
.fd-illo-select::before, .fd-illo-select::after { content:''; position:absolute; width:8px; height:8px; border-radius:50%; background:var(--accent-1); top:50%; margin-top:-4px; }
.fd-illo-select::before { left:-4px; } .fd-illo-select::after { right:-4px; }
.fd-illo-word { font-size:33px; font-weight:800; letter-spacing:-.01em; color:var(--text); transform:rotate(-4deg); }
.fd-illo-lens { position:absolute; right:-10px; bottom:-18px; filter:drop-shadow(0 10px 16px rgba(20,119,198,.28)); }
.fd-chip { position:absolute; background:var(--surface); border-radius:10px; box-shadow:var(--shadow-sm); padding:8px 12px; font-family:Georgia,'Times New Roman',serif; font-weight:700; font-size:17px; color:var(--accent-1); }
.fd-chip-a { top:-18px; right:6px; transform:rotate(8deg); }
.fd-chip-b { bottom:-4px; left:-22px; transform:rotate(-9deg); }
.font-finder-button.icon-btn { width:auto; min-height:40px; padding:8px 12px; gap:7px; display:inline-flex; align-items:center; background:linear-gradient(120deg,#0864cd,#00879f); color:white; border:1px solid #69cfff; border-radius:12px; box-shadow:0 0 0 3px rgba(32,164,255,.15); font-weight:700; font-size:13px; white-space:nowrap; transition:transform .18s ease, box-shadow .18s ease; }
.font-finder-button.icon-btn:hover { background:#075ba8; color:white; transform:translateY(-2px) scale(1.03); box-shadow:0 6px 16px rgba(8,100,205,.35); }
.font-finder-button.icon-btn:active { transform:translateY(0) scale(.98); }
.font-finder-button.icon-btn svg { animation:nodu-fd-icon-pulse 2.4s ease-in-out infinite; }
.font-finder-button:focus-visible,.fd-primary:focus-visible { outline:3px solid #59caff; outline-offset:3px; }
.font-detector .fd-primary { background:#0864cd; color:white; border-radius:8px; font-weight:700; }
.fd-primary:disabled { opacity:.5; cursor:default; }
.fd-result { border:1px solid var(--border); border-radius:10px; padding:12px; margin:10px 0; }
.fd-result small { display:block; margin:5px 0 10px; }
.fd-result img { display:block; max-width:100%; height:auto; background:white; border-radius:6px; }

.fd-form-col { background:var(--surface); border-radius:24px; margin:20px 24px 24px 0; padding:30px 34px; box-shadow:var(--shadow-lg); }
.fd-step-head strong { display:block; font-size:16px; }
.fd-step-head p { margin:4px 0 16px; font-size:13.5px; color:var(--text-dim); }

.fd-dropzone { border:2px dashed var(--border); border-radius:16px; padding:34px 20px; text-align:center; cursor:pointer; transition:border-color .15s, background .15s; }
.fd-dropzone:hover, .fd-dropzone.fd-drag, .fd-dropzone:focus-visible { border-color:var(--accent-1); background:var(--accent-soft); outline:none; }
.fd-dropzone[hidden] { display:none; }
.fd-dropzone-icon { width:60px; height:60px; margin:0 auto 12px; border-radius:14px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; }
.fd-dropzone-title { font-size:16px; font-weight:700; margin-bottom:14px; }
.fd-primary-btn { display:inline-flex; align-items:center; gap:8px; background:var(--accent-grad); color:#fff; border:none; padding:11px 20px; border-radius:10px; font-weight:700; font-size:14px; cursor:pointer; box-shadow:var(--shadow-sm); }
.fd-primary-btn:hover { filter:brightness(1.05); }

.fd-crop-area canvas { display:block; max-width:100%; touch-action:none; cursor:crosshair; background:#fff; border:1px solid var(--border); border-radius:12px; }
.fd-canvas-wrap { position:relative; display:flex; justify-content:center; width:100%; }
.fd-region-overlay { position:absolute; top:0; left:50%; transform:translateX(-50%); pointer-events:none; }
.fd-region-box {
  position:absolute; border:2px solid #7c3aed; background:rgba(124,58,237,.12); border-radius:4px;
  cursor:pointer; pointer-events:auto; padding:0; transition:background .12s, border-color .12s;
}
.fd-region-box:hover { background:rgba(124,58,237,.24); }
.fd-region-box.active { border-color:#0864cd; background:rgba(8,100,205,.22); }
/* Text areas that were found but whose words could not be read: dashed, so it is clear the words must be typed. */
.fd-region-box.fd-region-unread { border-style:dashed; border-color:#d97706; background:rgba(217,119,6,.10); }
.fd-search-all { margin-top:12px; background:linear-gradient(120deg,#7c3aed,#0864cd); }
.fd-line-result { margin:16px 0 4px; padding-top:12px; border-top:1px solid var(--border); }
.fd-line-title { margin:0 0 6px; font-size:14px; word-break:break-word; }
.fd-line-body { font-size:13px; color:var(--text-dim); }
.fd-line-body.fd-line-error { color:#b3261e; }
.fd-region-hint { margin:8px 0 0; font-size:12px; color:var(--text-faint); text-align:center; }
.fd-change-image { display:block; margin:10px auto 0; background:none; border:none; color:var(--accent-1); font-size:13px; font-weight:600; cursor:pointer; text-decoration:underline; padding:4px; }

.fd-secondary-row { display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.fd-sec-btn { flex:1; min-width:130px; display:inline-flex; align-items:center; justify-content:center; gap:7px; border:none; border-radius:10px; padding:11px 10px; font-size:13px; font-weight:700; cursor:pointer; }
.fd-sec-btn:disabled { opacity:.5; cursor:default; }
.fd-sec-violet { background:#efe6fe; color:#7c3aed; } .fd-sec-violet:hover:not(:disabled) { background:#e3d4fd; }
.fd-sec-cyan { background:#dff6fb; color:#0891b2; } .fd-sec-cyan:hover:not(:disabled) { background:#c9eff7; }
.fd-sec-blue { background:var(--accent-soft); color:var(--accent-1); } .fd-sec-blue:hover:not(:disabled) { filter:brightness(0.97); }

.fd-message { margin:14px 0 0; font-size:13px; color:var(--text-dim); }

.fd-text-label { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:22px; font-weight:700; font-size:14px; }
.fd-text-label em { font-style:normal; font-weight:500; color:var(--text-faint); }
.fd-hint-pill { margin-left:auto; font-size:11px; font-weight:600; color:var(--text-faint); background:var(--surface-2); padding:4px 10px; border-radius:999px; white-space:nowrap; }
.fd-text-label input { flex-basis:100%; }
.fd-text-label input { display:block; width:100%; box-sizing:border-box; padding:12px; margin-top:10px; border:1px solid var(--border); border-radius:10px; background:var(--surface-2); color:var(--text); font-size:14px; }

.fd-search-btn {
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%; margin-top:20px;
  background:var(--accent-grad); background-size:200% 100%; background-position:0 0;
  color:#fff; border:none; border-radius:12px; padding:16px; font-size:16px; font-weight:800; cursor:pointer;
  box-shadow:var(--shadow-md); transition:transform .15s, box-shadow .15s, background-position .5s;
}
.fd-search-btn:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 14px 26px rgba(20,119,198,.32); background-position:100% 0; }
.fd-search-btn:active:not(:disabled) { transform:translateY(0); }
.fd-search-btn:disabled { opacity:.5; cursor:default; }
.fd-search-btn-arrow svg { transition:transform .2s; display:block; }
.fd-search-btn:hover:not(:disabled) .fd-search-btn-arrow svg { transform:translateX(4px); }
.fd-search-btn-icon svg { display:block; }
.fd-search-btn.fd-searching { background-position:100% 0; animation:nodu-fd-search-sweep 1.4s linear infinite; }
.fd-search-btn.fd-searching .fd-search-btn-icon svg { animation:nodu-fd-spin .9s linear infinite; }
.fd-search-btn.fd-searching .fd-search-btn-arrow { opacity:0; }

@keyframes nodu-fd-search-sweep {
  0% { background-position:0 0; }
  100% { background-position:200% 0; }
}
@keyframes nodu-fd-spin { to { transform:rotate(360deg); } }

.fd-feature-row { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; padding:0 44px 22px; }
.fd-feature { display:flex; align-items:center; gap:10px; }
.fd-feature-icon { flex:none; width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.fd-feature-orange { background:var(--orange-soft); color:var(--orange); }
.fd-feature-green { background:var(--green-soft); color:var(--green); }
.fd-feature-violet { background:#efe6fe; color:#7c3aed; }
.fd-feature-blue { background:var(--accent-soft); color:var(--accent-1); }
.fd-feature strong { display:block; font-size:13px; }
.fd-feature span { font-size:11.5px; color:var(--text-faint); }

@media (max-width:900px) {
  .fd-layout { grid-template-columns:1fr; }
  .fd-illustration-col { display:none; }
  .fd-form-col { margin:20px; }
  .fd-feature-row { grid-template-columns:repeat(2,1fr); padding:0 20px 20px; }
  .fd-note { padding:0 20px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .fd-search-btn.fd-searching, .fd-search-btn.fd-searching .fd-search-btn-icon svg { animation:none; }
}

.upload-font-finder { position:relative; overflow:hidden; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; margin-top:18px; padding:16px; border:1px solid #69cfff; border-radius:14px; background:rgba(32,164,255,.08); color:var(--text); animation:nodu-fd-glow 3.2s ease-in-out infinite; }
.upload-font-finder::before { content:''; position:absolute; inset:0; background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.4) 50%,transparent 60%); background-size:220% 100%; background-position:150% 0; animation:nodu-fd-shimmer 4.5s ease-in-out infinite; pointer-events:none; }
.upload-font-finder strong { position:relative; font-size:15px; color:#7c3aed; }
.upload-font-finder p { position:relative; margin:6px 0 0; font-size:13px; line-height:1.5; color:var(--text-dim); }
.upload-font-finder > * { position:relative; }

@keyframes nodu-fd-glow {
  0%, 100% { box-shadow:0 0 0 0 rgba(32,164,255,.25); border-color:#69cfff; }
  50% { box-shadow:0 0 0 6px rgba(32,164,255,0); border-color:#9fe0ff; }
}
@keyframes nodu-fd-shimmer {
  0% { background-position:150% 0; }
  55%, 100% { background-position:-50% 0; }
}
@keyframes nodu-fd-icon-pulse {
  0%, 100% { transform:scale(1); }
  50% { transform:scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .upload-font-finder, .upload-font-finder::before, .font-finder-button.icon-btn svg { animation:none; }
}

.nodu-print-lab { border:1px solid #69cfff; border-radius:12px; padding:14px; margin:12px 0; }
.nodu-print-lab p { font-size:13px; overflow-wrap:anywhere; }
.nodu-print-lab pre { white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; max-height:240px; overflow:auto; }
.nodu-print-lab textarea { width:100%; box-sizing:border-box; padding:10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--text); margin:8px 0; }
.lab-typo { border-left:3px solid #e99526; padding:8px; margin:8px 0; background:rgba(233,149,38,.08); }
.lab-typo p { margin:5px 0; }

.fd-camera[hidden] { display:none; }
.fd-camera { margin:10px 0; }
.fd-camera video { display:block; width:100%; max-height:45vh; background:#101522; border-radius:12px; object-fit:contain; }
.fd-camera .fd-actions { margin-top:8px; }

.fd-google-font { display:inline-flex; align-items:center; box-sizing:border-box; margin-top:12px; max-width:100%; }

.fd-download-links { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:12px 0; }
.fd-download-links small { color:var(--text-dim); line-height:1.4; }
.upload-font-finder > a { display:inline-flex; align-items:center; min-height:40px; padding:8px 12px; box-sizing:border-box; background:#0864cd; color:white; border-radius:8px; font-size:14px; font-weight:600; text-decoration:none; }

.fd-download-icon { float:right; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; padding:7px; margin:-4px -4px 4px 8px; border:0; border-radius:5px; background:transparent; color:var(--text-dim); cursor:pointer; }
.fd-download-icon:hover { color:var(--text); background:var(--surface-2); }
.fd-download-icon:focus-visible { outline:2px solid #59caff; outline-offset:2px; }
.fd-download-icon:disabled { opacity:.5; cursor:wait; }
.fd-font-search { font-size:12px; color:var(--text-dim); text-decoration:underline; }
.fd-result .fd-actions:empty { display:none; }