:root {
  --bin-blue: #076f9d;
  --bin-blue-dark: #045476;
  --bin-cyan: #0b8fab;
  --bin-green: #087f5b;
  --bin-amber: #9a5b00;
  --bin-red: #b42318;
  --bin-soft-blue: #eaf6fb;
  --bin-soft-green: #eaf8f2;
  --bin-soft-amber: #fff7e7;
  --bin-soft-red: #fff0ee;
  --bin-code: #132531;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: radial-gradient(900px 500px at 12% 0%, rgba(11,143,171,.11), transparent 63%), var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
select { font: inherit; }

#app {
  width: min(1220px, calc(100% - 32px));
  margin: 18px auto 32px;
  display: grid;
  gap: 14px;
}

.panel {
  box-sizing: border-box;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow: var(--shadow);
}

#workspace,
.analysis-grid {
  display: grid;
  gap: 14px;
}

.analysis-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.span-2 { grid-column: 1 / -1; }

h1,
h2,
h3,
p { margin-top: 0; }

h1 {
  max-width: 850px;
  margin-bottom: 8px;
  font-size: clamp(1.65rem, 3.5vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -.03em;
}

h2 { margin-bottom: 7px; font-size: 1.2rem; line-height: 1.25; }
h3 { margin-bottom: 6px; font-size: 1rem; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.hero { overflow: hidden; }
.hero-line,
.controls,
.section-heading,
.report-actions,
.toolbar,
.mini-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.hero-line { margin-bottom: 10px; }
.section-heading { justify-content: space-between; align-items: flex-start; }
.section-heading > div { min-width: 0; }

.sub,
.section-note,
.facts,
.privacy-note,
.archive-fallback p {
  color: var(--muted);
  line-height: 1.52;
}

.sub { max-width: 920px; margin-bottom: 0; font-size: 1.02rem; }
.section-note { margin-bottom: 12px; font-size: .88rem; }
.facts { margin-bottom: 7px; font-size: .9rem; }
.privacy-note { margin: 9px 0 0; font-size: .8rem; }

.scope-note {
  max-width: 980px;
  margin: 14px 0 0;
  padding: 10px 12px;
  border-left: 4px solid var(--bin-blue);
  border-radius: 8px;
  background: var(--bin-soft-blue);
  color: #17475e;
  line-height: 1.48;
}

.controls { margin-top: 16px; }

.btn,
.url,
.filter,
select {
  box-sizing: border-box;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(255,255,255,.9);
  color: var(--text);
}

.btn {
  padding: 9px 13px;
  cursor: pointer;
  font-weight: 680;
  transition: background .16s ease, border-color .16s ease, transform .08s ease;
}

.btn:hover:not(:disabled) { border-color: rgba(7,111,157,.42); background: #fff; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.primary { border-color: var(--bin-blue); background: var(--bin-blue); color: #fff; }
.btn.primary:hover:not(:disabled) { border-color: var(--bin-blue-dark); background: var(--bin-blue-dark); }
.btn.sample { border-color: rgba(8,127,91,.3); background: var(--bin-soft-green); color: var(--bin-green); }
.btn:disabled { opacity: .48; cursor: not-allowed; }

.url { flex: 1 1 330px; min-width: 210px; padding: 9px 12px; }
.filter { flex: 1 1 320px; min-width: 190px; padding: 9px 12px; }
select { padding: 8px 34px 8px 10px; }

.btn:focus-visible,
.url:focus-visible,
.filter:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid rgba(7,111,157,.26);
  outline-offset: 2px;
}

.status {
  min-height: 20px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.45;
}

.status.good { color: var(--bin-green); }
.status.warn { color: var(--bin-amber); }
.status.bad { color: var(--bin-red); }
[hidden] { display: none !important; }

.badge,
.count,
.status-chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  box-sizing: border-box;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: .77rem;
  font-weight: 760;
  white-space: nowrap;
}

.badge.good,
.status-chip.performed { border-color: rgba(8,127,91,.28); background: var(--bin-soft-green); color: var(--bin-green); }
.badge.warn,
.status-chip.on-demand { border-color: rgba(154,91,0,.28); background: var(--bin-soft-amber); color: var(--bin-amber); }
.badge.bad { border-color: rgba(180,35,24,.26); background: var(--bin-soft-red); color: var(--bin-red); }

.eyebrow {
  margin: 0 0 4px;
  color: var(--bin-blue);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.format-name { margin: 4px 0 7px; font-size: clamp(1.25rem, 2.4vw, 1.75rem); }
.evidence { margin-bottom: 13px; padding: 10px 12px; border-radius: 10px; background: var(--bin-soft-blue); color: #16475f; line-height: 1.45; }

.warning-box { margin: 12px 0; padding: 11px 13px; border: 1px solid rgba(154,91,0,.22); border-radius: 10px; background: var(--bin-soft-amber); color: #704300; }
.warning-box ul { margin: 7px 0 0; padding-left: 1.2rem; }
.warning-box li { margin: 4px 0; }

.stat-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; margin: 14px 0; }
.stat-card { min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.72); }
.stat-card strong { display: block; overflow-wrap: anywhere; font-size: 1.05rem; }
.stat-card span { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.report-actions { padding-top: 2px; }

.table-wrap { width: 100%; max-height: min(58vh, 620px); overflow: auto; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.72); }
.table-wrap.compact { margin-top: 12px; max-height: 360px; }
table { width: 100%; border-collapse: collapse; }
th,
td { padding: 9px 11px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { position: sticky; top: 0; z-index: 1; background: #f2f7fa; color: var(--muted); font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; }
tbody tr:last-child td { border-bottom: 0; }
td { font-size: .86rem; line-height: 1.45; }
.offset { font: .8rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; color: #2a5164; }
.muted { color: var(--muted); }
.empty-cell { padding: 25px; color: var(--muted); text-align: center; }
.extent { white-space: nowrap; }
.carve-action { min-height: 34px; padding: 6px 9px; font-size: .78rem; }

.cards-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.data-card { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.72); }
.data-card h3 { display: flex; justify-content: space-between; gap: 8px; }
.data-card p { margin-bottom: 7px; color: var(--muted); font-size: .82rem; line-height: 1.45; }
.data-card dl { display: grid; grid-template-columns: minmax(105px, .7fr) minmax(0, 1.3fr); gap: 5px 10px; margin: 0; font-size: .78rem; }
.data-card dt { color: var(--muted); }
.data-card dd { min-width: 0; margin: 0; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.no-match { grid-column: 1 / -1; padding: 18px; border: 1px dashed var(--line); border-radius: 11px; color: var(--muted); text-align: center; }

.metric { color: var(--bin-blue); font-size: 1.3rem; }
.entropy-chart { display: flex; align-items: end; gap: 2px; height: 155px; padding: 10px 8px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: linear-gradient(to top, rgba(7,111,157,.04), transparent), repeating-linear-gradient(to top, transparent 0 37px, rgba(0,0,0,.07) 38px); }
.entropy-bar { flex: 1 1 2px; min-width: 2px; max-width: 13px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--bin-cyan), var(--bin-blue)); }
.entropy-bar.hot { background: linear-gradient(180deg, #d07b0a, #9a5b00); }
.entropy-legend { display: flex; justify-content: space-between; margin-top: 6px; color: var(--muted); font-size: .7rem; }
.mini-stats { margin-top: 12px; }
.mini-stats span { padding: 6px 9px; border-radius: 8px; background: #f1f6f8; color: #315263; font-size: .79rem; }

.toolbar { margin-bottom: 10px; }
.toolbar label { color: var(--muted); font-size: .8rem; font-weight: 700; }
.strings-wrap { max-height: 480px; }
.strings-wrap td:last-child { overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

.capability-table td:nth-child(1) { font-weight: 700; }
.capability-table td:nth-child(4) { color: var(--muted); }

.archive-fallback { border-color: rgba(154,91,0,.18); }
.archive-frame-wrap { margin-top: 14px; }
.archive-frame-wrap iframe { width: 100%; min-height: 620px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }

.faq details { padding: 10px 0; border-top: 1px solid var(--line); }
.faq details:first-of-type { margin-top: 8px; }
.faq summary { cursor: pointer; font-weight: 730; }
.faq details p { margin: 8px 0 0; color: var(--muted); line-height: 1.55; }

#dropOverlay { position: fixed; inset: 0; z-index: 9999; display: none; place-items: center; padding: 22px; background: rgba(8,29,40,.72); backdrop-filter: blur(4px); }
#dropOverlay.active { display: grid; }
.drop-card { max-width: 580px; padding: 30px; border: 2px dashed rgba(255,255,255,.8); border-radius: 18px; background: rgba(7,111,157,.9); color: #fff; text-align: center; font-size: 1.08rem; font-weight: 750; }

@media (max-width: 900px) {
  .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  #app { width: min(100% - 20px, 1220px); margin-top: 10px; }
  .panel { padding: 14px; border-radius: 13px; }
  .controls { align-items: stretch; }
  .controls .btn { flex: 1 1 auto; }
  .url { flex-basis: 100%; min-width: 0; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards-grid { grid-template-columns: 1fr; }
  .data-card dl { grid-template-columns: 1fr; gap: 2px; }
  .data-card dd { margin-bottom: 5px; }
  .table-wrap { max-height: 480px; }
  th,
  td { padding: 8px; }
  .entropy-chart { height: 125px; }
  .archive-frame-wrap iframe { min-height: 520px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}