/* EDIX Font Detector — plugin stylesheet
   Everything is scoped under .efd-app so it can never leak into (or clash
   with) the active WordPress theme's own styles. */

.efd-app{
  --efd-bg:#0a0e17;
  --efd-bg-panel:#0e1420;
  --efd-bg-panel-2:#111826;
  --efd-bg-card:#131a26;
  --efd-border:#232c3d;
  --efd-border-soft:#1a2231;
  --efd-text:#e8ecf3;
  --efd-text-muted:#8892a3;
  --efd-text-faint:#5b6478;
  --efd-brand-orange:#ef8a3d;
  --efd-accent-blue:#3b7dfa;
  --efd-accent-blue-hover:#2f6bde;
  --efd-ok-green:#34d399;
  --efd-warn-amber:#f2b94a;
  --efd-danger-red:#f2617a;

  display:flex;
  flex-direction:column;
  height:min(78vh, 760px);
  min-height:540px;
  background:var(--efd-bg);
  color:var(--efd-text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  border-radius:14px;
  border:1px solid var(--efd-border);
  overflow:hidden;
  position:relative;
  isolation:isolate; /* keep our stacking context self-contained */
}
.efd-app *{ box-sizing:border-box; }
.efd-app ::-webkit-scrollbar{ width:9px; height:9px; }
.efd-app ::-webkit-scrollbar-thumb{ background:#232c3d; border-radius:6px; }
.efd-app ::-webkit-scrollbar-track{ background:transparent; }

/* ---------- Header ---------- */
.efd-app header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  height:56px;
  min-height:56px;
  background:var(--efd-bg-panel);
  border-bottom:1px solid var(--efd-border);
}
.efd-app .efd-brand{
  display:flex;
  align-items:baseline;
  gap:8px;
  font-size:19px;
  font-weight:800;
  letter-spacing:-0.01em;
  white-space:nowrap;
}
.efd-app .efd-brand .efd-edix{ color:var(--efd-brand-orange); }
.efd-app .efd-brand .efd-rest{ color:var(--efd-text); font-weight:600; }

.efd-app .efd-header-right{ display:flex; align-items:center; gap:12px; }

.efd-app .efd-file-input-label{
  display:flex; align-items:center; gap:8px;
  padding:8px 14px;
  border:1px solid var(--efd-border);
  border-radius:8px;
  color:var(--efd-text-muted);
  font-size:13.5px;
  font-weight:500;
  cursor:pointer;
  background:transparent;
  transition:border-color .15s, color .15s;
}
.efd-app .efd-file-input-label:hover{ border-color:#3a465c; color:var(--efd-text); }
.efd-app .efd-file-input-label svg{ width:15px; height:15px; flex:none; }
.efd-app input[type=file]{ display:none; }

.efd-app .efd-btn-primary{
  display:flex; align-items:center; gap:8px;
  padding:9px 16px;
  background:var(--efd-accent-blue);
  color:#fff;
  border:none;
  border-radius:8px;
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s, transform .1s;
  font-family:inherit;
}
.efd-app .efd-btn-primary:hover{ background:var(--efd-accent-blue-hover); }
.efd-app .efd-btn-primary:active{ transform:translateY(1px); }
.efd-app .efd-btn-primary:disabled{ background:#22293a; color:var(--efd-text-faint); cursor:not-allowed; }
.efd-app .efd-btn-primary svg{ width:14px; height:14px; }

/* ---------- Layout ---------- */
.efd-app .efd-body-row{ flex:1; display:flex; min-height:0; }

.efd-app main{ flex:1; overflow-y:auto; padding:28px 32px 60px; }

.efd-app aside{
  width:196px;
  min-width:196px;
  border-left:1px solid var(--efd-border);
  background:var(--efd-bg-panel);
  overflow-y:auto;
  padding:16px 12px;
}
.efd-app aside h3{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--efd-text-faint);
  margin:4px 8px 12px;
  font-weight:700;
}
.efd-app .efd-page-tile{
  display:flex; align-items:center; gap:8px;
  padding:9px 10px;
  border-radius:8px;
  color:var(--efd-text-muted);
  font-size:12.5px;
  font-weight:500;
  cursor:pointer;
  margin-bottom:4px;
  border:1px solid transparent;
  transition:background .12s, color .12s;
}
.efd-app .efd-page-tile:hover{ background:var(--efd-bg-panel-2); color:var(--efd-text); }
.efd-app .efd-page-tile.efd-active{ background:var(--efd-bg-panel-2); border-color:var(--efd-border); color:var(--efd-text); }
.efd-app .efd-page-tile .efd-dot{ width:6px; height:6px; border-radius:50%; flex:none; }
.efd-app .efd-dot.efd-text{ background:var(--efd-ok-green); }
.efd-app .efd-dot.efd-image{ background:var(--efd-warn-amber); }

/* ---------- Empty state ---------- */
.efd-app .efd-empty-wrap{ height:100%; display:flex; align-items:center; justify-content:center; }
.efd-app .efd-dropzone{
  width:100%;
  max-width:560px;
  padding:56px 40px;
  border:1.5px dashed var(--efd-border);
  border-radius:16px;
  background:var(--efd-bg-card);
  text-align:center;
  transition:border-color .15s, background .15s;
  cursor:pointer;
}
.efd-app .efd-dropzone.efd-dragover{ border-color:var(--efd-accent-blue); background:#101a2c; }
.efd-app .efd-dropzone svg{ width:46px; height:46px; color:#4a5877; margin-bottom:18px; }
.efd-app .efd-dropzone h2{ font-size:22px; margin:0 0 10px; font-weight:800; }
.efd-app .efd-dropzone h2 .efd-edix{ color:var(--efd-brand-orange); }
.efd-app .efd-dropzone p.efd-lead{ font-size:15px; color:var(--efd-text); margin:0 0 6px; font-weight:600; }
.efd-app .efd-dropzone p.efd-sub{ font-size:13px; color:var(--efd-text-muted); margin:0 0 26px; line-height:1.6; }
.efd-app .efd-demo-link{ color:var(--efd-accent-blue); font-size:13.5px; text-decoration:none; font-weight:600; border-bottom:1px solid transparent; }
.efd-app .efd-demo-link:hover{ border-bottom-color:var(--efd-accent-blue); }

/* ---------- Results ---------- */
.efd-app .efd-summary-bar{
  display:flex; align-items:center; gap:18px;
  padding:14px 18px;
  background:var(--efd-bg-card);
  border:1px solid var(--efd-border);
  border-radius:10px;
  margin-bottom:22px;
  font-size:13px;
  color:var(--efd-text-muted);
}
.efd-app .efd-summary-bar strong{ color:var(--efd-text); font-weight:700; }
.efd-app .efd-summary-bar .efd-fname{ color:var(--efd-text); font-weight:600; max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.efd-app .efd-summary-bar .efd-sep{ width:1px; height:16px; background:var(--efd-border); }

.efd-app .efd-page-card{
  border:1px solid var(--efd-border);
  background:var(--efd-bg-card);
  border-radius:12px;
  margin-bottom:16px;
  overflow:hidden;
  scroll-margin-top:16px;
}
.efd-app .efd-page-card-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid var(--efd-border-soft);
}
.efd-app .efd-page-card-head .efd-ptitle{ font-size:14px; font-weight:700; color:var(--efd-text); display:flex; align-items:center; gap:10px; }
.efd-app .efd-mode-chip{ font-size:11px; font-weight:700; letter-spacing:.02em; padding:3px 9px; border-radius:99px; text-transform:uppercase; }
.efd-app .efd-mode-chip.efd-text{ background:rgba(52,211,153,.12); color:var(--efd-ok-green); }
.efd-app .efd-mode-chip.efd-image{ background:rgba(242,185,74,.13); color:var(--efd-warn-amber); }

.efd-app .efd-page-card-body{ padding:16px 18px; }

.efd-app .efd-font-row{
  display:flex; align-items:center; gap:10px;
  padding:11px 12px;
  border:1px solid var(--efd-border-soft);
  border-radius:8px;
  margin-bottom:8px;
  background:var(--efd-bg-panel-2);
}
.efd-app .efd-font-row:last-child{ margin-bottom:0; }
.efd-app .efd-font-row .efd-fname2{
  font-family:'JetBrains Mono',monospace;
  font-size:13px; font-weight:600; color:var(--efd-text);
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.efd-app .efd-badge{ font-size:11px; font-weight:600; padding:3px 8px; border-radius:6px; white-space:nowrap; flex:none; }
.efd-app .efd-badge.efd-embedded{ background:rgba(52,211,153,.12); color:var(--efd-ok-green); }
.efd-app .efd-badge.efd-not-embedded{ background:rgba(139,146,163,.14); color:var(--efd-text-muted); }
.efd-app .efd-badge.efd-type{ background:rgba(59,125,250,.14); color:#7ba6ff; }
.efd-app .efd-badge.efd-legacy{ background:rgba(242,97,122,.14); color:var(--efd-danger-red); }
.efd-app .efd-badge.efd-unicode-sin{ background:rgba(59,125,250,.14); color:#7ba6ff; }

.efd-app .efd-empty-fonts{ color:var(--efd-text-faint); font-size:13px; font-style:italic; }

.efd-app .efd-image-note{
  display:flex; gap:12px;
  padding:14px 16px;
  background:rgba(242,185,74,.06);
  border:1px solid rgba(242,185,74,.22);
  border-radius:9px;
  font-size:13px; color:#dcc48a; line-height:1.6;
}
.efd-app .efd-image-note svg{ width:18px; height:18px; flex:none; margin-top:1px; color:var(--efd-warn-amber); }
.efd-app .efd-image-note b{ color:#f0d29e; }

.efd-app .efd-btn-visual-match{
  display:flex; align-items:center; gap:8px;
  padding:9px 14px;
  background:var(--efd-accent-blue);
  color:#fff; border:none; border-radius:8px;
  font-size:13px; font-weight:600; cursor:pointer;
  transition:background .15s;
  font-family:inherit;
  margin-top:12px;
}
.efd-app .efd-btn-visual-match:hover:not(:disabled){ background:var(--efd-accent-blue-hover); }
.efd-app .efd-btn-visual-match:disabled{ background:#22293a; color:var(--efd-text-faint); cursor:progress; }

.efd-app .efd-visual-match-result{ margin-top:14px; }
.efd-app .efd-vm-match-row{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px;
  border:1px solid var(--efd-border-soft);
  border-radius:8px;
  margin-bottom:6px;
  background:var(--efd-bg-panel-2);
}
.efd-app .efd-vm-match-row .efd-vm-pct{ font-family:'JetBrains Mono',monospace; font-size:12.5px; font-weight:700; color:var(--efd-ok-green); width:52px; flex:none; }
.efd-app .efd-vm-match-row .efd-vm-name{ font-weight:600; font-size:13px; color:var(--efd-text); flex:1; }
.efd-app .efd-vm-match-row .efd-vm-style{ font-size:11px; color:var(--efd-text-muted); }
.efd-app .efd-vm-caveat{ font-size:12px; color:var(--efd-text-faint); line-height:1.6; margin-top:10px; }
.efd-app .efd-vm-error{ font-size:13px; color:var(--efd-danger-red); background:rgba(242,97,122,.08); border:1px solid rgba(242,97,122,.22); border-radius:8px; padding:10px 12px; }
.efd-app .efd-vm-sampled{ font-size:12px; color:var(--efd-text-muted); margin-bottom:10px; }

.efd-app .efd-footer-status{
  height:32px; min-height:32px;
  display:flex; align-items:center; gap:16px;
  padding:0 18px;
  background:var(--efd-bg-panel);
  border-top:1px solid var(--efd-border);
  font-size:11.5px; color:var(--efd-text-faint);
}
.efd-app .efd-footer-status span b{ color:var(--efd-text-muted); font-weight:600; }

.efd-app .efd-spinner{
  width:15px; height:15px;
  border:2px solid rgba(255,255,255,.25);
  border-top-color:#fff;
  border-radius:50%;
  animation:efd-spin .7s linear infinite;
}
@keyframes efd-spin{ to{ transform:rotate(360deg); } }

@media (max-width:720px){
  .efd-app{ height:min(88vh, 820px); }
  .efd-app aside{ display:none !important; }
  .efd-app main{ padding:20px 16px 50px; }
  .efd-app .efd-dropzone{ padding:40px 22px; }
}