:root {
  color-scheme: dark;
  --bg: #111417;
  --bg-lift: #161b20;
  --panel: #19232a;
  --panel-2: #211b2a;
  --panel-3: #18251f;
  --ink: #f4f7fb;
  --muted: #aab7c4;
  --soft: #d8e4ee;
  --line: rgba(226, 236, 244, .14);
  --line-strong: rgba(226, 236, 244, .24);
  --accent: #78f3c5;
  --accent-2: #7dd3fc;
  --gold: #f7c873;
  --coral: #ff8f8f;
  --red: #ff6f6f;
  --green: #7be0a1;
  --shadow: 0 20px 60px rgba(0, 0, 0, .28);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html { min-width: 320px; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(135deg, rgba(120, 243, 197, .08), transparent 34%),
    linear-gradient(225deg, rgba(247, 200, 115, .07), transparent 38%),
    var(--bg);
  color: var(--ink);
}

a { color: inherit; }

button,
input,
textarea,
select {
  font: inherit;
}

button {
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  padding: 0 14px;
  color: #081018;
  background: var(--accent);
  font-weight: 800;
  cursor: pointer;
}

button:hover { filter: brightness(1.05); }
button:disabled { cursor: progress; opacity: .62; }

.secondary {
  background: rgba(244, 247, 251, .08);
  color: var(--ink);
  border: 1px solid var(--line);
}

.ghost {
  background: transparent;
  color: var(--soft);
  border: 1px solid var(--line);
}

.page {
  width: min(1220px, calc(100% - 28px));
  margin: 0 auto;
  padding: 16px 0 34px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}

.brand img {
  width: 40px;
  height: 40px;
  display: block;
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .24);
}

.brand-name {
  display: block;
  font-weight: 900;
  line-height: 1.05;
}

.brand-sub {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.language-select,
.nav-link {
  min-height: 40px;
  max-width: 190px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(244, 247, 251, .08);
  color: var(--ink);
  padding: 0 10px;
  text-decoration: none;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.app-frame {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(330px, .88fr);
  gap: 14px;
  align-items: start;
}

.tool-card,
.result-card,
.report-panel,
.issue-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.tool-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .03)), var(--panel);
  padding: 16px;
}

.result-card,
.report-panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .025)), var(--panel-2);
  padding: 14px;
}

.tool-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}

.tool-head picture { min-width: 0; }

.kicker {
  display: inline-flex;
  width: fit-content;
  border: 1px solid rgba(120, 243, 197, .3);
  border-radius: 8px;
  padding: 5px 8px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

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

h1 {
  margin: 10px 0 8px;
  font-size: 30px;
  line-height: 1.08;
  letter-spacing: 0;
}

.lead {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.hero-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #101820;
}

.audit-form {
  display: grid;
  gap: 10px;
}

.field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 152px;
  gap: 10px;
}

label {
  display: grid;
  gap: 6px;
  color: var(--soft);
  font-size: 13px;
  font-weight: 800;
}

input,
textarea,
select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(5, 10, 15, .46);
  color: var(--ink);
  padding: 0 11px;
}

textarea {
  min-height: 130px;
  padding: 10px 11px;
  resize: vertical;
  line-height: 1.45;
}

input::placeholder,
textarea::placeholder { color: #778795; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mini-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.upload-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.upload-line input {
  max-width: 270px;
  padding: 8px;
}

.score-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.score {
  min-height: 112px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .045);
}

.score span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.score strong {
  display: block;
  margin: 9px 0 4px;
  font-size: 36px;
  line-height: 1;
}

.score small {
  color: var(--soft);
  line-height: 1.35;
}

.good strong { color: var(--green); }
.warn strong { color: var(--gold); }
.bad strong { color: var(--red); }
.neutral strong { color: var(--accent-2); }

.status-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .045);
  padding: 10px;
}

.status-strip span {
  color: var(--muted);
  font-size: 13px;
}

.status-strip strong { color: var(--accent); }

.metric-list {
  display: grid;
  gap: 8px;
}

.metric-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
}

.metric-row:last-child { border-bottom: 0; }
.metric-row span { color: var(--muted); }
.metric-row b { color: var(--ink); }

.report-panel {
  grid-column: 1 / -1;
  margin-top: 14px;
}

.report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.report-head h2 {
  margin: 0;
  font-size: 18px;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.tab {
  min-height: 34px;
  padding: 0 10px;
  background: rgba(255, 255, 255, .06);
  color: var(--soft);
  border: 1px solid var(--line);
}

.tab[aria-selected="true"] {
  background: var(--accent);
  color: #081018;
}

.issue-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.issue-card {
  background: rgba(255, 255, 255, .04);
  padding: 12px;
}

.issue-card h3 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 7px;
  font-size: 15px;
}

.issue-card p {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.issue-card code {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, .2);
  padding: 8px;
  color: var(--soft);
  font-size: 12px;
}

.compact-select { width: auto; min-width: 105px; }
.effort { display: inline-block; margin-left: 6px; color: var(--accent-2); font-size: 12px; }
.code-block { display: grid; gap: 6px; margin-top: 9px; }
.code-block b { color: var(--soft); font-size: 12px; }
.copy-code { width: fit-content; min-height: 32px; font-size: 12px; }
body[data-report-mode="simple"] .technical-only { display: none; }
.plan-list, .history-list { display: grid; gap: 8px; }
.plan-item, .history-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 14px; align-items: center; border-bottom: 1px solid var(--line); padding: 9px 0; }
.plan-item span, .history-row time { color: var(--muted); font-size: 12px; }
.history-row { grid-template-columns: minmax(0,1fr) auto auto; }
.chip-list, .template-grid, .preview-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.tech-card, .template-card, .share-preview { border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.04); padding: 12px; min-width: 0; }
.tech-card p, .share-preview p { color: var(--muted); font-size: 13px; line-height: 1.45; margin: 7px 0 0; }
.template-card code { display: block; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 230px; overflow: auto; margin-bottom: 8px; background: rgba(0,0,0,.22); padding: 9px; border-radius: 8px; color: var(--soft); }
.share-preview { display: grid; gap: 7px; }
.share-image-frame { position: relative; width: 100%; aspect-ratio: 1.91/1; overflow: hidden; border-radius: 6px; background: rgba(0,0,0,.2); }
.share-image-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.share-image-placeholder { width: 100%; height: 100%; display: grid; place-items: center; padding: 18px; color: var(--muted); text-align: center; border: 1px dashed var(--line); border-radius: inherit; background: linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); }
.share-image-placeholder[hidden], .share-image-frame img[hidden] { display: none; }
.share-preview small, .share-preview span { color: var(--muted); overflow-wrap: anywhere; }
.comparison { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.comparison > * { border-bottom: 1px solid var(--line); padding: 8px; overflow-wrap: anywhere; }

@media print {
  body { background: #fff; color: #111; }
  .topbar, .tool-card, .content-section, .footer, .actions, #historyPanel { display: none !important; }
  .page, .app-frame { width: 100%; display: block; }
  .result-card, .report-panel, .issue-card, .score { box-shadow: none; background: #fff; color: #111; break-inside: avoid; }
  .muted, p, span, small { color: #333 !important; }
}

.badge {
  flex: 0 0 auto;
  border-radius: 8px;
  padding: 4px 7px;
  font-size: 11px;
  text-transform: uppercase;
  color: #061018;
}

.badge.good { background: var(--green); }
.badge.warn { background: var(--gold); }
.badge.bad { background: var(--coral); }
.badge.info { background: var(--accent-2); }

.empty {
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  padding: 18px;
  color: var(--muted);
  text-align: center;
}

.content-section {
  margin-top: 34px;
  border-bottom: 1px solid var(--line);
}

.content-section > section {
  padding: 34px 0;
  border-top: 1px solid var(--line);
}

.content-section h2 {
  max-width: 860px;
  margin-bottom: 14px;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0;
}

.content-section h3 {
  margin-bottom: 8px;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: 0;
}

.content-section p,
.content-section li,
.content-section td,
.content-section th {
  color: var(--muted);
  line-height: 1.7;
}

.content-section p { max-width: 920px; }
.content-section ul,
.content-section ol { margin: 14px 0 0; padding-left: 22px; }
.content-section li + li { margin-top: 8px; }

.section-label {
  margin-bottom: 8px;
  color: var(--accent) !important;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.content-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.content-card-grid .content-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .035);
  padding: 16px;
}

.content-card-grid p { margin-bottom: 0; }

.formula-box {
  max-width: 980px;
  margin-top: 20px;
  border-left: 4px solid var(--accent-2);
  background: rgba(125, 211, 252, .06);
  padding: 16px 18px;
}

.formula-box code {
  display: block;
  overflow-wrap: anywhere;
  color: var(--ink);
  line-height: 1.65;
}

.formula-box p { margin: 9px 0 0; }

.worked-example {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(440px, 1.15fr);
  gap: 28px;
  align-items: start;
}

.content-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 42px;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.content-section table {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  background: rgba(255, 255, 255, .025);
}

.content-section th,
.content-section td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.content-section thead th,
.content-section tbody th {
  color: var(--soft);
  font-weight: 800;
}

.content-section tr:last-child th,
.content-section tr:last-child td { border-bottom: 0; }

.privacy-callout {
  border-left: 4px solid var(--accent) !important;
  padding-left: 22px !important;
  background: linear-gradient(90deg, rgba(120, 243, 197, .055), transparent 72%);
}

.limitations-section {
  border-left: 4px solid var(--gold) !important;
  padding-left: 22px !important;
  background: linear-gradient(90deg, rgba(247, 200, 115, .05), transparent 72%);
}

.sources-section ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  list-style: none;
}

.sources-section li {
  display: grid;
  gap: 5px;
  margin: 0;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.sources-section a { color: var(--accent-2); font-weight: 800; }

.faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.faq-list details {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .03);
  padding: 14px;
}

.faq-list summary {
  color: var(--soft);
  font-weight: 800;
  cursor: pointer;
}

.faq-list p { margin: 10px 0 0; }

.footer {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 16px;
}

.footer a,
.footer button {
  color: var(--soft);
  background: none;
  border: 0;
  padding: 0;
  min-height: 0;
  font: inherit;
  text-decoration: none;
}

.loader {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.loader::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
  .app-frame { grid-template-columns: 1fr; }
  .worked-example { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .page { width: min(100% - 16px, 1220px); padding-top: 10px; }
  .topbar { align-items: flex-start; }
  .brand img { width: 36px; height: 36px; }
  .brand-sub { display: none; }
  .top-actions { flex-wrap: wrap; justify-content: flex-end; }
  .language-select { max-width: 154px; }
  .tool-head,
  .field-grid,
  .score-grid,
  .issue-list {
    grid-template-columns: 1fr;
  }
  .chip-list, .template-grid, .preview-grid { grid-template-columns: 1fr; }
  .content-card-grid, .content-split, .sources-section ul, .faq-list { grid-template-columns: 1fr; }
  .history-row { grid-template-columns: 1fr auto; }
  .history-row time { grid-column: 1 / -1; }
  .hero-art { aspect-ratio: 16 / 7; }
  h1 { font-size: 25px; }
  .report-head { align-items: flex-start; flex-direction: column; }
  .content-section > section { padding: 26px 0; }
  .privacy-callout, .limitations-section { padding-left: 16px !important; }
}

@media (max-width: 430px) {
  .actions button,
  .upload-line input {
    width: 100%;
  }
  .status-strip,
  .metric-row {
    grid-template-columns: 1fr;
    display: grid;
  }
}

/* Xephory homepage-style language flags */
.language-menu{position:relative;z-index:60;flex:0 0 auto}.language-menu summary{display:grid;width:2.35rem;height:2.35rem;min-width:2.35rem;place-items:center;border:1px solid rgba(29,35,59,.1);border-radius:999px;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,250,244,.86));box-shadow:0 14px 34px rgba(48,39,25,.1),inset 0 1px 0 rgba(255,255,255,.92);cursor:pointer;list-style:none;padding:0}.language-menu summary::-webkit-details-marker{display:none}.language-menu summary::marker{content:""}.language-menu-list{position:absolute;top:calc(100% + .55rem);right:0;display:grid;grid-template-columns:1fr;gap:.28rem;padding:.45rem;border:1px solid rgba(29,35,59,.1);border-radius:1rem;background:rgba(255,255,255,.95);box-shadow:0 24px 70px rgba(16,42,53,.16);backdrop-filter:blur(18px)}.language-menu:not([open]) .language-menu-list{display:none}.language-menu-list a{display:grid;width:2.06rem;height:2.06rem;place-items:center;border:1px solid transparent;border-radius:999px;text-decoration:none}.language-menu-list a:hover,.language-menu-list a:focus-visible,.language-menu-list a[aria-current="true"]{border-color:rgba(20,184,173,.25);background:rgba(20,184,173,.1);outline:0}.flag-circle{display:block;position:relative;width:1.29rem;height:1.29rem;overflow:hidden;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1px rgba(16,42,53,.14)}.language-menu summary .flag-circle{width:1.4rem;height:1.4rem}.flag-en{background:linear-gradient(90deg,transparent 46%,#fff 46% 54%,transparent 54%),linear-gradient(transparent 42%,#fff 42% 58%,transparent 58%),linear-gradient(90deg,transparent 48%,#c8102e 48% 52%,transparent 52%),linear-gradient(transparent 46%,#c8102e 46% 54%,transparent 54%),linear-gradient(33deg,transparent 45%,#fff 45% 50%,#c8102e 50% 53%,#fff 53% 58%,transparent 58%),linear-gradient(147deg,transparent 45%,#fff 45% 50%,#c8102e 50% 53%,#fff 53% 58%,transparent 58%),#012169}.flag-de{background:linear-gradient(#000 0 33.33%,#dd0000 33.33% 66.66%,#ffce00 66.66%)}.flag-fr{background:linear-gradient(90deg,#0055a4 0 33.33%,#fff 33.33% 66.66%,#ef4135 66.66%)}.flag-es{background:linear-gradient(#aa151b 0 25%,#f1bf00 25% 75%,#aa151b 75%)}.flag-zh{background:#de2910}.flag-zh::before{content:"★";position:absolute;top:.08rem;left:.18rem;color:#ffde00;font-size:.55rem;line-height:1}.flag-ru{background:linear-gradient(#fff 0 33.33%,#0039a6 33.33% 66.66%,#d52b1e 66.66%)}.flag-bg{background:linear-gradient(#fff 0 33.33%,#00966e 33.33% 66.66%,#d62612 66.66%)}

.language-menu-list { grid-template-columns: 2.06rem; }
.flag-zh::before { content: "\2605"; }