/* PolyglotBugHunter-X - static space styling.
   Dark by default because this is a security tool people stare at, with a
   light-mode fallback that respects prefers-color-scheme. No frameworks, no
   CDN: everything ships in the repo so it works offline and cold. */

:root {
  color-scheme: dark;
  --bg: #0b0f17;
  --panel: #111823;
  --panel-2: #151d2a;
  --border: #1f2937;
  --fg: #e6edf3;
  --muted: #8b949e;
  --accent: #a78bfa;
  --accent-2: #ec4899;
  --critical: #b91c1c;
  --high: #c2410c;
  --medium: #a16207;
  --low: #1d4ed8;
  --info: #4b5563;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Noto Sans", "Noto Sans JP", "Noto Sans SC", "Noto Sans KR",
          "Noto Sans Arabic", "Noto Sans Devanagari", sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 1rem 3rem;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.65 var(--sans);
}

.wrap, body > * { max-width: 1100px; margin-inline: auto; }

[dir="rtl"] { text-align: right; }
[dir="rtl"] .tabs, [dir="rtl"] .subtabs { direction: rtl; }

/* ---------- hero ---------- */

.hero { text-align: center; padding: 2.2rem 0 1rem; }
.hero .emoji { font-size: 3rem; line-height: 1; }
.hero h1 {
  margin: .2rem 0;
  font-size: clamp(1.7rem, 5vw, 2.5rem);
  letter-spacing: -.02em;
}
.hero .tagline { margin: .3rem 0; font-size: 1.05rem; }
.hero .sub { margin: .3rem 0 0; color: var(--muted); font-size: .92rem; }
.badges { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; margin-top: .9rem; }
.badge {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 99px; padding: .12rem .6rem; font-size: .75rem; color: var(--muted);
}

/* ---------- language bar ---------- */

.langbar {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  justify-content: center; padding: .8rem 0;
  border-block: 1px solid var(--border);
}
.langbar label { font-size: .85rem; color: var(--muted); }
.langbar select {
  background: var(--panel); color: var(--fg);
  border: 1px solid var(--border); border-radius: 8px;
  padding: .35rem .6rem; font: inherit; font-size: .9rem;
}
.note { color: var(--muted); font-size: .8rem; }

/* ---------- disclaimer ---------- */

.disclaimer {
  margin: 1rem 0; padding: .7rem 1rem;
  background: #1c1410; border: 1px solid #7c2d12; color: #fdba74;
  border-radius: 8px; font-size: .85rem;
}

/* ---------- tabs ---------- */

.tabs {
  display: flex; gap: .25rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--border); margin-bottom: 1.2rem;
}
.tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--muted); font: inherit; font-size: .95rem;
  padding: .6rem .9rem; cursor: pointer; border-radius: 6px 6px 0 0;
}
.tab:hover { color: var(--fg); background: var(--panel); }
.tab.active { color: var(--fg); border-bottom-color: var(--accent); }

.subtabs { display: flex; gap: .25rem; margin-bottom: 1rem; flex-wrap: wrap; }
.subtab {
  background: var(--panel); border: 1px solid var(--border); color: var(--muted);
  font: inherit; font-size: .85rem; padding: .35rem .7rem;
  border-radius: 99px; cursor: pointer;
}
.subtab.active { color: #fff; border-color: var(--accent); background: #1e1b3a; }

.panel, .subpanel { display: none; }
.panel.active, .subpanel.active { display: block; }

/* ---------- CTA ---------- */

.cta { text-align: center; padding: 1.4rem 0 1.8rem; }
.big {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; border: none; font: inherit; font-weight: 700; font-size: 1.15rem;
  padding: .9rem 2rem; border-radius: 12px; cursor: pointer;
  box-shadow: 0 6px 24px rgba(167, 139, 250, .28);
}
.big:hover { filter: brightness(1.08); }
.big:disabled { opacity: .6; cursor: wait; }
.hint { color: var(--muted); font-size: .85rem; margin: .7rem auto 0; max-width: 60ch; }

/* ---------- controls ---------- */

details.advanced {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: .7rem 1rem; margin-bottom: 1rem;
}
details.advanced summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: .8rem; }
.grid label, .subpanel label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .8rem; }
.checks { display: flex; gap: .8rem; margin-top: .3rem; color: var(--fg); }
.checks label { display: inline-flex; align-items: center; gap: .25rem; margin: 0; }

input[type="text"], textarea, select, input[type="search"] {
  width: 100%; background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 8px;
  padding: .45rem .6rem; font: inherit; font-size: .9rem;
}
textarea { font-family: var(--mono); resize: vertical; }
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--accent); outline-offset: -1px;
}
input[type="range"] { width: 100%; accent-color: var(--accent); }

.btn {
  display: inline-block; background: var(--panel); color: var(--fg);
  border: 1px solid var(--border); border-radius: 8px;
  padding: .45rem .9rem; font: inherit; font-size: .88rem;
  cursor: pointer; text-decoration: none; margin: .3rem .3rem .3rem 0;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: #0b0f17; border-color: transparent; font-weight: 600; }

/* ---------- progress ---------- */

.progress { height: 6px; background: var(--panel-2); border-radius: 99px; overflow: hidden; margin: 1rem 0; position: relative; }
.progress .bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .18s ease; }
.progress span {
  position: absolute; inset-block-start: -1.35rem; inset-inline-end: 0;
  font-size: .75rem; color: var(--muted); white-space: nowrap;
}

.status {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: .8rem 1rem; margin: 1rem 0;
  font-family: var(--mono); font-size: .85rem; white-space: pre-wrap;
}

/* ---------- summary ---------- */

.summary {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 1rem 1.2rem; margin: 1rem 0;
}
.summary .target { font-family: var(--mono); font-size: .82rem; color: var(--muted); word-break: break-all; }
.summary .risk {
  font-size: 2.6rem; font-weight: 800; line-height: 1.05;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.summary .risk small { font-size: 1rem; -webkit-text-fill-color: var(--muted); }
.pills { display: flex; gap: .4rem; flex-wrap: wrap; margin: .6rem 0; }
.pill { padding: .18rem .6rem; border-radius: 99px; font-size: .78rem; font-weight: 600; color: #fff; }
.meta { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .82rem; color: var(--muted); margin-top: .4rem; }
.downloads { margin: .8rem 0; }
.findingbar { display: flex; gap: .6rem; align-items: center; margin: 1rem 0 .5rem; }

/* ---------- findings ---------- */

.card {
  background: var(--panel); border: 1px solid var(--border);
  border-left: 5px solid var(--info); border-radius: 10px;
  padding: .9rem 1.1rem; margin: .7rem 0;
}
.card h3 { margin: 0 0 .45rem; font-size: 1rem; }
.card .tags { display: flex; gap: .3rem; flex-wrap: wrap; margin-top: .6rem; }
.card .tag {
  background: var(--panel-2); border-radius: 5px; padding: .08rem .45rem;
  font-size: .7rem; color: var(--muted);
}
.card details { margin-top: .5rem; }
.card summary { cursor: pointer; color: var(--accent); font-size: .85rem; }
.card .impact { color: #fcd34d; font-size: .88rem; }
.card .fix { color: #86efac; font-size: .88rem; }
.card .proof { color: #fbbf24; font-size: .85rem; }
.card .where { color: var(--muted); font-size: .78rem; font-family: var(--mono); word-break: break-all; }
.score {
  color: #fff; font-weight: 700; padding: .1rem .5rem;
  border-radius: 6px; font-size: .8rem;
}
.meta-row {
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  font-size: .76rem; color: var(--muted); margin-bottom: .5rem;
}
.meta-row code { font-family: var(--mono); font-size: .72rem; }

pre.out, .out {
  background: #0a0e14; border: 1px solid var(--border); border-radius: 10px;
  padding: .8rem 1rem; overflow: auto; font-family: var(--mono);
  font-size: .8rem; white-space: pre-wrap; word-break: break-word;
  line-height: 1.55; margin: .8rem 0;
}
.out:empty { display: none; }
.out h3 { margin: 1rem 0 .3rem; font-size: .95rem; color: var(--accent); }
.out table { border-collapse: collapse; margin: .5rem 0; }
.out th, .out td { border: 1px solid var(--border); padding: .2rem .5rem; text-align: start; }
.out code { background: var(--panel-2); padding: .05rem .3rem; border-radius: 4px; }

iframe#report-html {
  width: 100%; height: 70vh; border: 1px solid var(--border); border-radius: 10px;
  background: #0b0f17;
}

.canary-row { display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: flex-start; }
.canary-row figure { margin: 0; }
.canary-row canvas {
  image-rendering: pixelated; background: #fff;
  border: 1px solid var(--border); border-radius: 6px;
}
.canary-row figcaption { font-size: .72rem; color: var(--muted); margin-top: .3rem; max-width: 40ch; }
.canary-row .out { flex: 1; min-width: 260px; }

.filelist { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }
.filelist a {
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  padding: .3rem .6rem; font-size: .78rem; color: var(--fg);
  text-decoration: none; font-family: var(--mono);
}
.filelist a:hover { border-color: var(--accent); }
.filelist a.bad { border-color: var(--high); color: #fdba74; }

footer {
  margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: .3rem;
  color: var(--muted); font-size: .78rem;
}
footer a { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}