/* util.quest — extracted from the design concept.
   Tokens first, then layout, then components. Values match the mockup exactly. */

:root {
  --bg:        #f4f1ea;
  --bg-outer:  #e7e2d7;
  --ink:       #1c1a17;
  --accent:    #b6532c;
  --accent-2:  #8f3f20;
  --amber:     #e6a06a;
  --card:      #ffffff;
  --line:      #ece7dd;
  --line-2:    #e6e0d4;
  --line-3:    #ded7c8;
  --tag-bg:    #f1ede4;
  --ok-bg:     #e9f2e9;
  --ok-ink:    #3a7a4a;
  --hair:      rgba(0, 0, 0, .09);
  --muted:     rgba(0, 0, 0, .62);
  --muted-2:   rgba(0, 0, 0, .55);
  --muted-3:   rgba(0, 0, 0, .45);

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --pad:   44px;
  --wide:  1080px;
  --mid:   820px;
  --slim:  760px;
  --slim2: 720px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-outer);
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }

img { max-width: 100%; height: auto; }

/* Keyboard users must be able to see where they are. The mockup had no focus
   styling at all, which makes the site unusable without a mouse. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--bg);
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  font-weight: 600;
  font-size: 14px;
}
.skip-link:focus {
  left: 0;
  color: var(--bg);
}

@keyframes uqfade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

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

/* ---------- shell ---------- */

.uq-app {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

.uq-pad  { padding-left: var(--pad); padding-right: var(--pad); }
.uq-wide { max-width: var(--wide);  margin: 0 auto; width: 100%; }
.uq-mid  { max-width: var(--mid);   margin: 0 auto; width: 100%; }
.uq-slim { max-width: var(--slim);  margin: 0 auto; width: 100%; }
.uq-slim2{ max-width: var(--slim2); margin: 0 auto; width: 100%; }

.uq-fade { animation: uqfade .4s ease both; }

main { flex: 1; }

/* ---------- topbar ---------- */

.uq-top {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px var(--pad);
  border-bottom: 1px solid var(--hair);
  background: rgba(244, 241, 234, .88);
  backdrop-filter: blur(10px);
}

.uq-logo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -.01em;
  color: var(--ink);
}
.uq-logo:hover { color: var(--ink); }
.uq-logo .dot { color: var(--accent); }

.uq-topnav { display: flex; gap: 8px; align-items: center; }
.uq-navlinks { display: flex; gap: 8px; align-items: center; }

.uq-navlink {
  font-size: 13px;
  padding: 8px 13px;
  border-radius: 8px;
  transition: background .15s;
  font-weight: 500;
  color: rgba(0, 0, 0, .58);
}
.uq-navlink:hover { background: rgba(0, 0, 0, .04); color: var(--ink); }
.uq-navlink.is-active {
  font-weight: 600;
  color: var(--ink);
  background: rgba(0, 0, 0, .06);
}

/* ---------- buttons ---------- */

.uq-btn {
  display: inline-block;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  border: none;
  border-radius: 9px;
  text-align: center;
}
.uq-btn-dark   { background: var(--ink); color: var(--bg); }
.uq-btn-dark:hover { background: #2c2823; color: var(--bg); }
.uq-btn-amber  { background: var(--amber); color: var(--ink); }
.uq-btn-amber:hover { background: #d9925c; color: var(--ink); }
.uq-btn-ghost  { background: var(--card); border: 1px solid var(--line-3); color: var(--ink); }
.uq-btn-ghost:hover { background: #fbf9f5; color: var(--ink); }

.uq-btn-sm { font-size: 13px; padding: 9px 17px; border-radius: 8px; }
.uq-btn-md { font-size: 14px; padding: 13px 24px; }
.uq-btn-lg { font-size: 15px; padding: 15px 30px; border-radius: 10px; }

.uq-cta-top { margin-left: 6px; }

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

.uq-hero { padding-top: 72px; padding-bottom: 44px; }

.uq-eyebrow {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
}

.uq-h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 54px;
  line-height: 1.03;
  letter-spacing: -.02em;
  margin: 0 0 22px;
  text-wrap: pretty;
}
.uq-h1-sm { font-size: 46px; line-height: 1.05; margin-bottom: 28px; }

.uq-lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0;
  max-width: 580px;
}

/* ---------- toolbar ---------- */

.uq-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0 24px;
  flex-wrap: wrap;
  border-top: 1px solid var(--hair);
}

.uq-search {
  flex: 1;
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 11px;
  padding: 11px 15px;
}
.uq-search:focus-within { border-color: var(--accent); }
.uq-search .glass {
  width: 13px; height: 13px;
  border: 2px solid #bcb4a4;
  border-radius: 50%;
  flex: none;
}
.uq-search input {
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  width: 100%;
}

.uq-pills { display: flex; gap: 7px; flex-wrap: wrap; }

.uq-pill {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 9px 15px;
  border-radius: 20px;
  transition: .15s;
  color: #4a463f;
  background: var(--card);
  border: 1px solid var(--line-2);
  cursor: pointer;
}
.uq-pill:hover { border-color: var(--line-3); color: var(--ink); }
.uq-pill.is-active {
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
  font-weight: 600;
}

.uq-sectionhead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 22px;
}
.uq-sectionhead h2 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  margin: 0;
}
.uq-count {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  color: var(--muted-3);
}

/* ---------- tool grid ---------- */

.uq-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding-bottom: 8px;
  list-style: none;
  margin: 0;
}

.uq-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 2px 0 var(--line);
  transition: transform .15s, box-shadow .15s;
  color: var(--ink);
}
.uq-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .09);
}
.uq-card:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }

.uq-thumb {
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, .4);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 10px;
  position: relative;
  overflow: hidden;
}
/* The artwork covers the gradient behind it. The gradient is not redundant: it is what
   shows while the image downloads, and what a tool without artwork keeps. */
.uq-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Matches the artwork, so one asset serves the card and this without a crop. */
.uq-thumb-lg { aspect-ratio: 16 / 10; border-radius: 14px; border: 1px solid rgba(0, 0, 0, .06); font-size: 11px; }

.uq-tier {
  position: absolute;
  top: 10px; left: 10px;
  /* Above the artwork, which comes after it in the markup. */
  z-index: 1;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: .04em;
}
.uq-tier-lg { position: static; font-size: 11px; padding: 5px 11px; }

.uq-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 13px;
}
.uq-card-name { font-weight: 700; font-size: 15px; color: var(--ink); }
.uq-card-name:hover { color: var(--ink); }
/* Stretched link: the whole card is clickable, but only the name is the anchor. */
.uq-card-name::after { content: ''; position: absolute; inset: 0; border-radius: 16px; }
.uq-card-name:focus-visible { outline: none; }

.uq-card-open { font-size: 12px; font-weight: 700; color: var(--accent); flex: none; }
.uq-card-desc { font-size: 13px; color: var(--muted-2); margin-top: 4px; }

.uq-tags {
  display: flex;
  gap: 6px;
  margin: 11px 0 0;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}
/* Tag links must sit above the stretched link, or the card would swallow their clicks. */
.uq-card .uq-tags { position: relative; z-index: 1; margin-top: auto; padding-top: 11px; }
.uq-tag {
  font-size: 10.5px;
  color: rgba(0, 0, 0, .5);
  background: var(--tag-bg);
  padding: 3px 8px;
  border-radius: 6px;
}
a.uq-tag:hover { background: #e8e2d6; color: var(--ink); }

.uq-empty {
  text-align: center;
  padding: 50px 0;
  color: var(--muted-3);
  font-size: 14px;
}

/* ---------- dark band ---------- */

.uq-band {
  margin: 52px 0 0;
  padding: 40px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}
.uq-band h2 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  margin: 0 0 10px;
}
.uq-band p {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(244, 241, 234, .72);
  margin: 0;
}
.uq-band .host { font-family: var(--mono); color: var(--amber); }
.uq-band-copy { max-width: 540px; }
.uq-band .uq-btn { flex: none; }

/* ---------- prose ---------- */

.uq-prose { font-size: 16px; line-height: 1.7; color: rgba(0, 0, 0, .72); }
.uq-prose p { margin: 0 0 20px; }
.uq-prose .brand { font-family: var(--serif); font-size: 20px; color: var(--ink); }
.uq-prose .host { font-family: var(--mono); color: var(--accent); }

.uq-authorcard {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 24px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-top: 8px;
}
.uq-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: repeating-linear-gradient(135deg, #e7e1d5, #e7e1d5 8px, #ded7c8 8px, #ded7c8 16px);
  flex: none;
}
.uq-authorcard .name { font-weight: 600; font-size: 15px; }
.uq-authorcard .meta { font-size: 13px; color: var(--muted-2); margin-top: 2px; }

.uq-back { font-weight: 600; color: var(--accent); font-size: 14px; display: inline-block; }
.uq-back-sm { font-size: 13px; }

/* ---------- breadcrumbs ---------- */

.uq-crumbs {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--muted-3);
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  flex-wrap: wrap;
}
.uq-crumbs li { display: flex; gap: 8px; align-items: center; }
.uq-crumbs a { font-weight: 600; }

/* ---------- tool detail ---------- */

.uq-toolhead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-top: 22px;
}
.uq-toolhead h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 40px;
  letter-spacing: -.02em;
  margin: 0 0 8px;
}
.uq-toolhead .sub { font-size: 16px; color: rgba(0, 0, 0, .6); }

.uq-actions { display: flex; gap: 12px; margin-top: 24px; flex-wrap: wrap; }

.uq-body {
  margin-top: 34px;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(0, 0, 0, .7);
  max-width: 620px;
}
.uq-body p { margin: 0 0 16px; }
.uq-body p:last-child { margin: 0; }

.uq-related { margin-top: 48px; }
.uq-related h2 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  margin: 0 0 18px;
}
.uq-related .uq-grid { grid-template-columns: repeat(3, 1fr); }

/* ---------- forms ---------- */

.uq-form { display: flex; flex-direction: column; gap: 18px; }
.uq-field label,
.uq-field .label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; }

.uq-input,
.uq-textarea {
  width: 100%;
  border: 1px solid var(--line-2);
  outline: none;
  background: var(--card);
  border-radius: 11px;
  font-family: inherit;
  font-size: 15px;
  padding: 13px 15px;
  color: var(--ink);
}
.uq-textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.uq-input:focus, .uq-textarea:focus { border-color: var(--accent); }

.uq-inputgroup {
  display: flex;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 11px;
  overflow: hidden;
}
.uq-inputgroup:focus-within { border-color: var(--accent); }
.uq-inputgroup .uq-input {
  border: none;
  border-radius: 0;
  flex: 1;
  min-width: 0;
}
.uq-inputgroup .suffix {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--muted-3);
  padding: 0 15px;
  flex: none;
}

.uq-error { color: #a3372a; font-size: 13px; margin-top: 6px; }
.uq-field.has-error .uq-input,
.uq-field.has-error .uq-textarea,
.uq-field.has-error .uq-inputgroup { border-color: #c0573f; }

.uq-formerror {
  background: #f7e4e0;
  border: 1px solid #e6bfb6;
  color: #8f3325;
  padding: 13px 16px;
  border-radius: 11px;
  font-size: 14px;
}

/* The honeypot must be reachable by nothing a person uses, but not display:none —
   some bots skip hidden inputs. Off-screen and removed from the tab order works. */
.uq-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.uq-radios { display: flex; gap: 9px; flex-wrap: wrap; }
.uq-radio { position: relative; }
.uq-radio input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0;
  cursor: pointer;
}
.uq-radio span {
  display: block;
  font-size: 13px;
  font-weight: 500;
  padding: 9px 15px;
  border-radius: 20px;
  color: #4a463f;
  background: var(--card);
  border: 1px solid var(--line-2);
  transition: .15s;
}
.uq-radio input:checked + span {
  color: var(--bg);
  background: var(--ink);
  border-color: var(--ink);
  font-weight: 600;
}
.uq-radio input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- confirmation / status ---------- */

.uq-status { text-align: center; padding: 60px 0; }
.uq-status .mark {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--ok-bg);
  color: var(--ok-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  margin: 0 auto 24px;
}
.uq-status h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 38px;
  margin: 0 0 14px;
}
.uq-status p {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(0, 0, 0, .6);
  max-width: 440px;
  margin: 0 auto 30px;
}

/* ---------- footer ---------- */

.uq-foot {
  padding: 30px var(--pad) 48px;
  margin-top: 34px;
  border-top: 1px solid var(--hair);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12.5px;
  color: rgba(0, 0, 0, .5);
}
.uq-foot a { color: rgba(0, 0, 0, .5); }
.uq-foot a:hover { color: var(--ink); }
.uq-foot .who strong { color: var(--ink); font-weight: 600; }
.uq-foot nav { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; }
.uq-foot .stamp { font-family: var(--mono); }

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .uq-grid, .uq-related .uq-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  :root { --pad: 20px; }
  .uq-grid, .uq-related .uq-grid { grid-template-columns: 1fr; }
  .uq-top { padding-left: 18px; padding-right: 18px; }
  .uq-hero { padding-top: 44px; }
  .uq-h1 { font-size: 32px; line-height: 1.08; }
  .uq-h1-sm { font-size: 30px; }
  .uq-toolhead { flex-direction: column; gap: 14px; }
  .uq-toolhead h1 { font-size: 30px; }
  .uq-band { padding: 26px; gap: 18px; }
  .uq-navlinks { display: none; }
  .uq-foot { flex-direction: column; gap: 14px; }
  .uq-status h1 { font-size: 30px; }
}

/* ============================================================
   Tool chrome
   Shared vocabulary for the interactive tools, so five different
   utilities look like one family rather than five microsites.
   ============================================================ */

.uq-toolpage { padding-top: 40px; padding-bottom: 44px; }

.uq-tool {
  margin: 26px 0 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 2px 0 var(--line);
  overflow: hidden;
}

.uq-tool-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: #fdfcf9;
}
.uq-tool-bar + .uq-tool-bar { border-top: 0; }
.uq-tool-body { padding: 16px; }
.uq-tool-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  background: #fdfcf9;
  font-size: 12.5px;
  color: var(--muted-3);
}

.uq-tool-label {
  font: 500 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-3);
}

/* Inputs and outputs */

.uq-ta {
  width: 100%;
  min-height: 190px;
  resize: vertical;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  background: #fff;
  padding: 13px 15px;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
  outline: none;
  tab-size: 2;
}
.uq-ta:focus { border-color: var(--accent); }
.uq-ta[readonly] { background: #faf8f4; color: #3a352e; }
.uq-ta.is-invalid { border-color: #c0573f; }

.uq-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.uq-pane { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.uq-pane > label { font-size: 12.5px; font-weight: 600; }

/* Controls */

.uq-ctl { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.uq-ctl input[type="checkbox"] { accent-color: var(--ink); width: 16px; height: 16px; }
.uq-ctl select {
  font-family: inherit;
  font-size: 13px;
  padding: 7px 10px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

.uq-range { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 200px; }
.uq-range input[type="range"] { flex: 1; accent-color: var(--ink); min-width: 120px; }
.uq-range output {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  min-width: 2.5ch;
  text-align: right;
}

.uq-btn-mini {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: .12s;
}
.uq-btn-mini:hover { border-color: var(--line-3); background: #faf8f4; }
.uq-btn-mini.is-primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.uq-btn-mini.is-primary:hover { background: #2c2823; }
.uq-btn-mini.is-done { border-color: var(--ok-ink); color: var(--ok-ink); background: var(--ok-bg); }
.uq-spacer { flex: 1; }

/* Stat readouts */

.uq-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.uq-stat { background: var(--card); padding: 14px 16px; }
.uq-stat .n {
  display: block;
  font-family: var(--serif);
  font-size: 26px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.uq-stat .k {
  display: block;
  margin-top: 3px;
  font: 500 10.5px/1.3 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-3);
}

/* Result / message strip */

.uq-note {
  font-size: 13px;
  padding: 10px 13px;
  border-radius: 9px;
  margin: 0;
}
.uq-note-ok   { background: var(--ok-bg);  color: var(--ok-ink); }
.uq-note-bad  { background: #f7e4e0;       color: #8f3325; }
.uq-note-info { background: #f1ede4;       color: #4a463f; }
.uq-note-warn { background: #faf0dc;       color: #7a5c22; }

/* Privacy reassurance line — earns its space on tools handling sensitive input */
.uq-privacy {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted-3);
}
.uq-privacy .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok-ink);
  flex: none;
}

/* Coming-soon state */

.uq-soon { margin: 26px 0 8px; }
.uq-soon-note { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 18px 0; }
.uq-tier-soon { color: #6e685e; background: #ece7dd; }

.uq-tags-page { margin-top: 20px; }

@media (max-width: 640px) {
  .uq-panes { grid-template-columns: 1fr; }
  .uq-tool-bar { padding: 12px; }
  .uq-tool-body { padding: 12px; }
}

/* ---------- password generator ---------- */

.uq-pw-out {
  display: block;
  font-family: var(--mono);
  font-size: 22px;
  line-height: 1.5;
  word-break: break-all;
  color: var(--ink);
  background: #faf8f4;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  padding: 18px 16px;
  min-height: 76px;
  user-select: all;
}

.uq-meter-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.uq-meter {
  flex: 1;
  min-width: 140px;
  height: 6px;
  background: var(--line);
  border-radius: 99px;
  overflow: hidden;
}
.uq-meter > i { display: block; height: 100%; width: 0; border-radius: 99px; transition: width .25s, background .25s; }
.uq-meter-label { font-size: 12.5px; font-weight: 600; }
.uq-meter-bits { font: 500 12px var(--mono); color: var(--muted-3); }

.uq-seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 9px; overflow: hidden; }
.uq-seg button {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  border: 0;
  background: #fff;
  color: #4a463f;
  cursor: pointer;
}
.uq-seg button + button { border-left: 1px solid var(--line-2); }
.uq-seg button[aria-pressed="true"],
.uq-seg button[aria-selected="true"],
.uq-seg button.is-active { background: var(--ink); color: var(--bg); }

/* ---------- cutout: the batch queue ---------- */

.uq-co-queue { display: flex; flex-direction: column; gap: 6px; }

.uq-co-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  text-align: left;
  color: inherit;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  cursor: pointer;
}
.uq-co-item:disabled { cursor: default; opacity: .75; }
.uq-co-item.is-active { border-color: var(--accent); background: #fdfbf7; }

/* A checkerboard behind the thumbnail, or a cut-out on a white row looks like a failure. */
.uq-co-item img,
.uq-co-item .ph {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 7px;
  object-fit: contain;
  background: #fff repeating-conic-gradient(#eceae4 0% 25%, #fff 0% 50%) 50% / 12px 12px;
}

.uq-co-item .n {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.uq-co-item .s { flex: none; font: 500 11.5px var(--mono); color: var(--muted-3); }
.uq-co-item .s.is-done   { color: var(--ok-ink); }
.uq-co-item .s.is-failed { color: #8f3325; }

/* ---------- scribe: the proof-reading view ---------- */

/* Monospace and pre-wrap, so the marks sit where the words did rather than reflowing into
   a shape the original never had. */
.uq-ocr-marked {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.8;
  white-space: pre-wrap;
  overflow: auto;
  min-height: 260px;
  max-height: 560px;
  padding: 14px;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  background: #fff;
}

/* Two tiers, because "worth a glance" and "probably wrong" deserve different amounts of
   attention. The underline carries the meaning as well as the tint does, so the
   distinction survives being printed, screenshotted, or read by someone colour-blind. */
.uq-ocr-marked mark {
  background: #fdf3dc;
  color: inherit;
  border-radius: 3px;
  padding: 1px 2px;
  box-shadow: inset 0 -2px 0 #dcae57;
}
.uq-ocr-marked mark.is-poor {
  background: #fbe6e0;
  box-shadow: inset 0 -2px 0 #cd8570;
}

/* ---------- diff ---------- */

.uq-diff {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.65;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  overflow: auto;
  max-height: 560px;
  background: #fff;
}
.uq-diff table { border-collapse: collapse; width: 100%; }
.uq-diff td { padding: 1px 10px; vertical-align: top; white-space: pre-wrap; word-break: break-word; }
.uq-diff td.ln {
  width: 1%;
  text-align: right;
  color: var(--muted-3);
  background: #faf8f4;
  border-right: 1px solid var(--line);
  user-select: none;
  white-space: nowrap;
  font-size: 12px;
}
.uq-diff tr.add td:not(.ln) { background: #e6f2e6; }
.uq-diff tr.del td:not(.ln) { background: #f9e5e1; }
.uq-diff tr.add td.ln { background: #dcebdc; }
.uq-diff tr.del td.ln { background: #f2dbd6; }
.uq-diff .mark { font-weight: 700; }
.uq-diff-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted-3); }
.uq-diff-legend b { font-weight: 600; }
.uq-diff-legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; }

/* ---------- json tree ---------- */

.uq-json {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  padding: 14px 16px;
  overflow: auto;
  max-height: 560px;
}
.uq-json ul { list-style: none; margin: 0; padding-left: 18px; }
.uq-json > ul { padding-left: 0; }
.uq-json li { position: relative; }
.uq-json .k { color: #7a4bbd; }
.uq-json .s { color: #2f7a4a; }
.uq-json .n { color: #b6532c; }
.uq-json .b { color: #2160a8; }
.uq-json .z { color: var(--muted-3); }
.uq-json .p { color: var(--muted-3); }
.uq-json .tog {
  cursor: pointer;
  border: 0;
  background: none;
  font: inherit;
  color: var(--muted-3);
  padding: 0 5px 0 0;
  width: 1.4em;
  text-align: left;
}
.uq-json .tog:hover { color: var(--ink); }
.uq-json li.collapsed > ul { display: none; }
.uq-json li.collapsed > .sum { display: inline; }
.uq-json .sum { display: none; color: var(--muted-3); }

/* ---------- wordcount ---------- */

.uq-sent { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.uq-sent li {
  font-size: 13.5px;
  line-height: 1.6;
  padding: 10px 13px;
  background: #faf8f4;
  border-left: 3px solid var(--amber);
  border-radius: 0 8px 8px 0;
}
.uq-sent .len { font: 500 11px var(--mono); color: var(--muted-3); display: block; margin-bottom: 3px; }

/* ---------- prose inside tool pages ---------- */

/* The supporting sections are real content, so they get the same typographic
   treatment as the rest of the site rather than the browser's bold sans default. */
.uq-body h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 36px 0 14px;
}
.uq-body h2:first-child { margin-top: 0; }
.uq-body h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
  margin: 26px 0 10px;
}
.uq-body strong { color: var(--ink); font-weight: 700; }
.uq-body em { font-style: italic; }

.uq-body code,
.uq-tool code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--tag-bg);
  color: #4a463f;
  padding: 2px 6px;
  border-radius: 5px;
  white-space: nowrap;
}

/* Empty-state for the JSON tree: without this the pane collapses to a thin bar and
   reads as broken rather than idle. */
.uq-json { min-height: 190px; }
.uq-json:empty::before {
  content: 'The tree appears here once the JSON parses.';
  color: var(--muted-3);
  font-family: var(--sans);
  font-size: 13px;
}

/* ---------- markdown preview ---------- */

.uq-md-preview {
  min-height: 340px;
  max-height: 560px;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  padding: 16px 18px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink);
}
.uq-md-preview:empty::before {
  content: 'The preview appears here as you type.';
  color: var(--muted-3);
  font-size: 13px;
}
.uq-md-preview > :first-child { margin-top: 0; }
.uq-md-preview h3 { font-family: var(--serif); font-weight: 500; font-size: 21px; margin: 20px 0 8px; }
.uq-md-preview h4 { font-family: var(--serif); font-weight: 500; font-size: 18px; margin: 18px 0 7px; }
.uq-md-preview h5, .uq-md-preview h6 { font-size: 15px; margin: 16px 0 6px; }
.uq-md-preview p { margin: 0 0 12px; }
.uq-md-preview ul, .uq-md-preview ol { margin: 0 0 12px; padding-left: 22px; }
.uq-md-preview li { margin-bottom: 3px; }
.uq-md-preview blockquote {
  margin: 0 0 12px;
  padding: 2px 0 2px 14px;
  border-left: 3px solid var(--amber);
  color: var(--muted);
}
.uq-md-preview pre {
  background: #faf8f4;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 12px 14px;
  overflow-x: auto;
  margin: 0 0 12px;
}
.uq-md-preview pre code {
  background: none;
  padding: 0;
  font-size: 12.5px;
  white-space: pre;
}
.uq-md-preview table { border-collapse: collapse; width: 100%; margin: 0 0 12px; font-size: 13.5px; }
.uq-md-preview th, .uq-md-preview td { border: 1px solid var(--line-2); padding: 7px 10px; text-align: left; }
.uq-md-preview th { background: #faf8f4; font-weight: 600; }
.uq-md-preview hr { border: 0; border-top: 1px solid var(--line-2); margin: 18px 0; }
.uq-md-preview img { border-radius: 8px; }

/* ---------- regex tester ---------- */

.uq-re-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  padding: 4px 12px;
}
.uq-re-row:focus-within { border-color: var(--accent); }
.uq-re-slash { font-family: var(--mono); font-size: 18px; color: var(--muted-3); }
.uq-re-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  font-family: var(--mono);
  font-size: 14.5px;
  padding: 11px 0;
  color: var(--ink);
  background: transparent;
}
.uq-re-input.is-invalid { color: #a3372a; }
.uq-re-flags {
  width: 7ch;
  border: 0;
  outline: none;
  font-family: var(--mono);
  font-size: 14.5px;
  color: var(--accent);
  background: transparent;
}

.uq-re-out {
  min-height: 190px;
  max-height: 420px;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  padding: 13px 15px;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.uq-re-out mark { background: #ffe9a8; color: var(--ink); border-radius: 3px; padding: 1px 0; }
.uq-re-out mark.empty { background: #f7d4cc; padding: 0 3px; }

.uq-re-matches { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.uq-re-match {
  background: #faf8f4;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 10px 13px;
  font-family: var(--mono);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}
.uq-re-match-head { color: var(--muted-3); font-size: 11px; margin-bottom: 4px; }
.uq-re-match-val { color: var(--ink); font-weight: 500; }
.uq-re-group { margin-top: 4px; color: #4a463f; }
.uq-re-group .g {
  display: inline-block;
  min-width: 3ch;
  margin-right: 8px;
  padding: 1px 6px;
  border-radius: 5px;
  background: #ece7dd;
  color: var(--muted-3);
}
.uq-re-group .g.named { background: #f0e5dd; color: var(--accent); }

/* ---------- jwt claims ---------- */

.uq-claims { display: flex; flex-direction: column; gap: 1px; margin-top: 16px;
             background: var(--line); border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.uq-claim { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
            background: var(--card); padding: 9px 13px; font-size: 13px; }
.uq-claim .k { font-family: var(--mono); font-size: 12.5px; color: var(--accent); min-width: 7ch; }
.uq-claim .lbl { font-size: 11px; color: var(--muted-3); min-width: 8ch; }
.uq-claim .v { color: var(--ink); overflow-wrap: anywhere; flex: 1; min-width: 0; }

/* ---------- hashes ---------- */

.uq-hashes { display: flex; flex-direction: column; gap: 10px; }
.uq-hashes:empty::before {
  content: 'Digests appear here once there is something to hash.';
  color: var(--muted-3); font-size: 13px;
}
.uq-hash-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
               background: #faf8f4; border: 1px solid var(--line); border-radius: 9px; padding: 10px 13px; }
.uq-hash-algo { font: 600 12px var(--mono); min-width: 9ch; display: flex; align-items: center; gap: 6px; }
.uq-hash-weak { font: 500 9.5px var(--mono); text-transform: uppercase; letter-spacing: .08em;
                background: #f7e9de; color: var(--accent); padding: 2px 6px; border-radius: 20px; }
.uq-hash-val { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12.5px;
               overflow-wrap: anywhere; background: none; padding: 0; white-space: normal; }

/* ---------- cron ---------- */

.uq-cron-fields { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.uq-cron-field { display: flex; flex-direction: column; gap: 5px; }
.uq-cron-field input {
  font-family: var(--mono); font-size: 15px; text-align: center;
  border: 1px solid var(--line-2); border-radius: 9px; padding: 11px 6px;
  background: #fff; color: var(--ink); outline: none; width: 100%;
}
.uq-cron-field input:focus { border-color: var(--accent); }
.uq-cron-field .lbl { font: 500 10px var(--mono); letter-spacing: .08em;
                      text-transform: uppercase; color: var(--muted-3); text-align: center; }
.uq-cron-english { font-family: var(--serif); font-size: 21px; line-height: 1.35; margin: 0; }
.uq-cron-runs { display: flex; flex-direction: column; gap: 1px; background: var(--line);
                border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.uq-cron-run { background: var(--card); padding: 9px 13px; font-family: var(--mono);
               font-size: 12.5px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.uq-cron-run .rel { color: var(--muted-3); }
.uq-presets { display: flex; gap: 7px; flex-wrap: wrap; }

/* ---------- timestamp ---------- */

.uq-ts-now { font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums; }
.uq-ts-grid { display: flex; flex-direction: column; gap: 1px; background: var(--line);
              border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.uq-ts-row { background: var(--card); padding: 10px 13px; display: flex; gap: 12px;
             align-items: baseline; flex-wrap: wrap; font-size: 13px; }
.uq-ts-row .k { font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase;
                color: var(--muted-3); min-width: 12ch; }
.uq-ts-row .v { font-family: var(--mono); font-size: 13px; color: var(--ink);
                overflow-wrap: anywhere; flex: 1; min-width: 0; }

/* ---------- contrast ---------- */

.uq-contrast-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.uq-swatch-field { display: flex; flex-direction: column; gap: 7px; }
.uq-swatch-row { display: flex; align-items: center; gap: 9px;
                 background: #fff; border: 1px solid var(--line-2); border-radius: 11px; padding: 7px 11px; }
.uq-swatch-row:focus-within { border-color: var(--accent); }
.uq-swatch-row input[type="color"] { width: 38px; height: 34px; padding: 0; border: 0;
                                     background: none; cursor: pointer; flex: none; }
.uq-swatch-row input[type="text"] { flex: 1; min-width: 0; border: 0; outline: none;
                                    font-family: var(--mono); font-size: 14px; color: var(--ink); }
.uq-preview { border-radius: 11px; padding: 26px 24px; border: 1px solid var(--line-2); }
.uq-preview .big { font-size: 26px; font-weight: 600; margin: 0 0 10px; }
.uq-preview .small { font-size: 14px; margin: 0; line-height: 1.6; }
.uq-ratio { font-family: var(--serif); font-size: 42px; line-height: 1; }
/* Five verdicts: sized so they sit on one row on desktop rather than wrapping to a
   second row with a stranded empty cell. */
.uq-verdicts { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 1px;
               background: var(--line); border: 1px solid var(--line); border-radius: 11px; overflow: hidden; }
.uq-verdict { background: var(--card); padding: 12px 14px; }
.uq-verdict .lvl { font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase;
                   color: var(--muted-3); display: block; margin-bottom: 5px; }
.uq-verdict .res { font-weight: 700; font-size: 14px; }
.uq-verdict .res.pass { color: var(--ok-ink); }
.uq-verdict .res.fail { color: #c0573f; }

@media (max-width: 640px) {
  .uq-cron-fields { grid-template-columns: repeat(3, 1fr); }
  .uq-contrast-inputs { grid-template-columns: 1fr; }
}

/* ---------- shared: file drop zones ---------- */

.uq-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 128px;
  padding: 22px;
  text-align: center;
  cursor: pointer;
  border: 1.5px dashed var(--line-3);
  border-radius: 13px;
  background: #faf8f4;
  transition: border-color .15s, background .15s;
}
.uq-drop:hover,
.uq-drop.is-over { border-color: var(--accent); background: #fdfbf7; }
.uq-drop:focus-within { border-color: var(--accent); }
.uq-drop.is-loaded { min-height: 0; padding: 14px; }
.uq-drop-main { font-size: 14px; font-weight: 600; }
.uq-drop-sub { font-size: 12.5px; color: var(--muted-3); }

/* A file input styled as a button. The input itself is visually hidden, so the label
   carries the affordance and the keyboard focus ring. */
.uq-filebtn {
  cursor: pointer;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  padding: 6px 11px;
  font-size: 12.5px;
  font-weight: 600;
}
.uq-filebtn:hover { border-color: var(--line-3); background: #faf8f4; }
.uq-filebtn:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- colormuse ---------- */

.uq-cm-stage { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.uq-cm-canvas {
  max-width: 100%;
  max-height: 220px;
  border-radius: 11px;
  border: 1px solid var(--line-2);
  cursor: crosshair;
  image-rendering: auto;
}

.uq-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
               gap: 9px; margin-top: 16px; }
.uq-swatch {
  position: relative;
  min-height: 78px;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 11px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 10px;
  font: 500 12px var(--mono);
  transition: transform .12s;
}
.uq-swatch:hover { transform: translateY(-2px); }
.uq-swatch .val { overflow-wrap: anywhere; text-align: left; }
.uq-swatch .pin { position: absolute; top: 8px; left: 9px; font-size: 9.5px;
                  letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.uq-swatch.is-picked { border-style: dashed; border-color: rgba(0, 0, 0, .3); }
.uq-swatch.is-done { outline: 2px solid var(--ok-ink); outline-offset: 1px; }

/* ---------- qrcraft ---------- */

.uq-qr-layout { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: start; }
.uq-qr-fields { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.uq-qr-out { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.uq-qr-canvas {
  max-width: 100%;
  border-radius: 11px;
  border: 1px solid var(--line-2);
  background: #fff;
  padding: 6px;
  /* Modules must stay square-edged when the canvas is scaled down by CSS. */
  image-rendering: pixelated;
}

/* ---------- imagesmith ---------- */

.uq-im-list { display: flex; flex-direction: column; gap: 1px; margin-top: 14px;
              background: var(--line); border-radius: 11px; overflow: hidden; }
.uq-im-list:empty { display: none; }
.uq-im-row { background: var(--card); padding: 11px 13px; display: flex; gap: 12px;
             align-items: center; flex-wrap: wrap; }
.uq-im-row .nm { font-weight: 600; font-size: 13px; min-width: 140px; overflow-wrap: anywhere; }
.uq-im-row .dt { font: 500 12px var(--mono); color: var(--muted-3); flex: 1; min-width: 0;
                 overflow-wrap: anywhere; }
.uq-im-row .dt.is-bad { color: #c0573f; }
.uq-im-row .dt.is-warn { color: #8a6a33; }

/* ---------- metapeek ---------- */

.uq-mp-form { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.uq-mp-form .uq-input { flex: 1; min-width: 220px; }
.uq-mp-form button { flex: none; padding-inline: 18px; }

.uq-mp-previews { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 18px; }
.uq-mp-preview { display: flex; flex-direction: column; gap: 9px; min-width: 0; }

.uq-mp-google { border: 1px solid var(--line-2); border-radius: 11px; padding: 14px; background: #fff; }
.uq-mp-crumb { font-size: 12px; color: var(--muted-2); margin-bottom: 4px; overflow-wrap: anywhere; }
.uq-mp-gtitle { font-size: 18px; line-height: 1.3; color: #1a0dab; overflow-wrap: anywhere; }
.uq-mp-gdesc { font-size: 13px; line-height: 1.55; color: var(--muted); margin-top: 4px; }
.uq-mp-gdesc.is-missing { font-style: italic; color: var(--muted-3); }

.uq-mp-card { border: 1px solid var(--line-2); border-radius: 11px; overflow: hidden; background: #fff; }
.uq-mp-cardimg { display: block; width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover;
                 background: var(--tag-bg); }
.uq-mp-cardimg.is-empty { display: flex; align-items: center; justify-content: center;
                          font: 500 11px var(--mono); color: var(--muted-3); }
.uq-mp-cardbody { padding: 11px 13px; }
.uq-mp-cardhost { font-size: 11px; letter-spacing: .04em; color: var(--muted-3); overflow-wrap: anywhere; }
.uq-mp-cardtitle { font-weight: 700; font-size: 14px; line-height: 1.35; margin-top: 3px;
                   overflow-wrap: anywhere; }
.uq-mp-carddesc { font-size: 12.5px; line-height: 1.5; color: var(--muted-2); margin-top: 3px; }

/* X renders a small square thumbnail unless the card is declared summary_large_image,
   so the preview has to show that difference rather than assume the large one. */
.uq-mp-twitter.is-small { display: flex; align-items: stretch; }
.uq-mp-twitter.is-small .uq-mp-cardimg { width: 108px; flex: none; aspect-ratio: 1 / 1; }
.uq-mp-twitter.is-small .uq-mp-cardbody { flex: 1; min-width: 0; }

.uq-mp-checks { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.uq-mp-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; }
.uq-mp-check .mk { flex: none; width: 19px; height: 19px; border-radius: 50%; margin-top: 1px;
                   display: flex; align-items: center; justify-content: center;
                   font-size: 11px; font-weight: 700; }
.uq-mp-check.is-ok .mk   { background: var(--ok-bg);  color: var(--ok-ink); }
.uq-mp-check.is-warn .mk { background: #f6efdd;       color: #8a6a33; }
.uq-mp-check.is-bad .mk  { background: #f7e4e0;       color: #8f3325; }
.uq-mp-check .tx { flex: 1; min-width: 0; }

.uq-mp-tags { display: flex; flex-direction: column; gap: 1px; margin-top: 10px;
              background: var(--line); border: 1px solid var(--line); border-radius: 11px;
              overflow: hidden; }
.uq-mp-tag { background: var(--card); padding: 9px 13px; display: flex; gap: 12px;
             align-items: baseline; flex-wrap: wrap; }
.uq-mp-tag .k { font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase;
                color: var(--muted-3); min-width: 14ch; }
.uq-mp-tag .v { font-size: 13px; color: var(--ink); flex: 1; min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 780px) {
  .uq-qr-layout { grid-template-columns: 1fr; }
  .uq-qr-out { order: -1; }
}

/* ---------- pageshot ---------- */

.uq-shot-frame {
  margin-top: 12px;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  overflow: hidden;
  background: #fff;
  /* A full-page capture of a long site is very tall; scroll it inside the panel rather
     than letting it push the rest of the page out of reach. */
  max-height: 560px;
  overflow-y: auto;
}
.uq-shot-frame img { display: block; width: 100%; height: auto; }

/* ---------- vitals ---------- */

.uq-vitals { display: grid; grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)); gap: 1px;
             background: var(--line); border: 1px solid var(--line); border-radius: 11px;
             overflow: hidden; }
.uq-vital { background: var(--card); padding: 13px 14px; display: flex; flex-direction: column; gap: 3px; }
.uq-vital .lbl { font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase;
                 color: var(--muted-3); }
.uq-vital .val { font-family: var(--serif); font-size: 25px; line-height: 1.1; }
.uq-vital .note { font-size: 11px; color: var(--muted-3); }
.uq-vital.is-good .val       { color: var(--ok-ink); }
.uq-vital.is-needs-work .val { color: #8a6a33; }
.uq-vital.is-poor .val       { color: #c0573f; }

/* ---------- where a tool runs ---------- */

.uq-runs {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 1;
  font: 700 9.5px var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 20px;
}
.uq-runs.is-browser { color: var(--ok-ink); background: var(--ok-bg); }
.uq-runs.is-server  { color: #7a5a24;      background: #f6efdd; }

/* On the tool page the badge sits inline in the statement rather than pinned to a card. */
.uq-runs-note {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  margin: 22px 0 4px;
  padding: 15px 17px;
  border-radius: 13px;
  border: 1px solid var(--line-2);
  background: #faf8f4;
}
.uq-runs-note .uq-runs { position: static; flex: none; margin-top: 1px; }
.uq-runs-note p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.uq-runs-note.is-server { border-color: #e8dcc2; background: #fdfaf3; }

/* ---------- cutout ---------- */

/* A checkerboard, so transparency reads as transparency rather than as white. */
.uq-cutout-stage {
  border: 1px solid var(--line-2);
  border-radius: 11px;
  padding: 14px;
  display: flex;
  justify-content: center;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%),
    linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
}
.uq-cutout-stage img { max-width: 100%; max-height: 420px; height: auto; display: block; }

/* ---------- shared tool chrome (uq-tool.js) ---------- */

/* The "saved on this device" line and its off switch. Sits in a tool's foot bar next to
   the privacy note, because it is the same kind of statement: what this page keeps. */
.uq-remember {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--muted-3);
}
.uq-linkbtn {
  font: inherit;
  font-size: inherit;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.uq-linkbtn:hover { color: var(--accent-2); }

/* A shortcut nobody knows about is not a feature, so each tool states its own. */
.uq-kbdhint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--muted-3);
}
.uq-kbdhint kbd {
  font: 600 11px/1 var(--mono);
  padding: 3px 5px;
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: #faf8f4;
  color: var(--muted-2);
}

/* "Send to …" — the row that tells someone the answer they are looking at is the input
   to another tool. Only rendered once a result exists. */
.uq-handoff {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 13px 16px;
  border-top: 1px solid var(--line);
}
.uq-handoff-label {
  font: 500 10.5px/1.3 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-3);
}

/* ---------- markpad formatting toolbar ---------- */

.uq-fmt { display: flex; gap: 4px; flex-wrap: wrap; }
.uq-fmt button {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: .12s;
}
.uq-fmt button:hover { border-color: var(--line-3); background: #faf8f4; }
.uq-fmt button i, .uq-fmt button b { font-style: normal; font-weight: 700; }
.uq-fmt button i { font-style: italic; font-weight: 500; font-family: var(--serif); }

/* Inline key names in prose, matching the hint chips in the tool chrome. */
.uq-body kbd {
  font: 600 12px/1 var(--mono);
  padding: 3px 6px;
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: #faf8f4;
  color: var(--muted-2);
  white-space: nowrap;
}

/* ---------- regexlab: explainer, chips, replace ---------- */

.uq-rx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 14px;
}
.uq-rx-chip {
  font: inherit;
  padding: 4px 8px;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
  transition: .12s;
}
.uq-rx-chip:hover { border-color: var(--accent); background: #faf8f4; }
.uq-rx-chip code { font: 600 12px/1.4 var(--mono); color: var(--ink); }

/* The nesting is the explanation: it is what shows a quantifier belongs to the group
   rather than to the last character inside it. */
.uq-rx-list { list-style: none; margin: 0; padding: 0; }
.uq-rx-list .uq-rx-list {
  margin: 6px 0 4px 6px;
  padding-left: 14px;
  border-left: 2px solid var(--line-2);
}
.uq-rx-list li { margin: 5px 0; font-size: 14px; line-height: 1.55; }
.uq-rx-detail { color: var(--ink); }
.uq-rx-note {
  margin-left: 7px;
  font-size: 12px;
  color: var(--muted-3);
}
.uq-rx-or {
  display: inline-block;
  margin-right: 7px;
  font: 600 10.5px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.uq-rx-empty { font-size: 13px; color: var(--muted-3); margin: 0; }

.uq-rx-flags { margin-top: 16px; }
.uq-rx-flag {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 13px;
  color: var(--muted);
  padding: 5px 0;
}
.uq-rx-flag code {
  font: 700 12px/1 var(--mono);
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--tag-bg);
  color: var(--ink);
  flex: none;
}

/* ---------- contrast: suggestions, APCA, palette grid ---------- */

.uq-ct-fixes { margin-top: 16px; }
.uq-ct-fix {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 0;
  border-top: 1px dashed var(--line-2);
}
.uq-ct-fix-label {
  font: 500 10.5px/1.3 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-3);
  flex: none;
}
.uq-ct-fix-none { font-size: 13px; color: var(--muted-2); }

.uq-ct-swatchbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 12.5px;
  padding: 5px 11px 5px 6px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: .12s;
}
.uq-ct-swatchbtn:hover { border-color: var(--accent); }
.uq-ct-swatchbtn .sw {
  width: 20px; height: 20px;
  border-radius: 5px;
  border: 1px solid var(--hair);
  flex: none;
}
.uq-ct-swatchbtn .tx { font-family: var(--mono); font-size: 12px; }

.uq-ct-apca {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--muted);
}
.uq-ct-draft {
  font-size: 9px;
  letter-spacing: .08em;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--tag-bg);
  color: var(--muted-3);
}

.uq-ct-hint { font-size: 13px; color: var(--muted-2); margin: 8px 0 10px; line-height: 1.6; }
.uq-ct-gridwrap { margin-top: 16px; overflow-x: auto; }

.uq-ct-grid { border-collapse: separate; border-spacing: 3px; }
.uq-ct-grid th { padding: 0; }
.uq-ct-grid td {
  width: 46px;
  height: 34px;
  text-align: center;
  font: 600 12px/1 var(--mono);
  border-radius: 6px;
  cursor: pointer;
}
.uq-ct-grid td.pass  { background: var(--ok-bg);  color: var(--ok-ink); }
.uq-ct-grid td.large { background: #f6efdf;       color: #8a6320; }
.uq-ct-grid td.fail  { background: #f7e4e0;       color: #8f3325; }
.uq-ct-grid td.same  { background: #faf8f4;       color: var(--muted-3); cursor: default; }
.uq-ct-grid td:not(.same):hover { outline: 2px solid var(--accent); }

.uq-ct-chip {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid var(--hair);
}

/* ---------- checker additions: fixes, propagation, config blocks ---------- */

.uq-fix {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: #faf8f4;
}
.uq-fix-title { font-weight: 600; font-size: 14px; }
.uq-fix-where {
  margin-top: 3px;
  font: 500 11px/1.4 var(--mono);
  color: var(--muted-3);
}
.uq-fix-value {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 11px;
}
.uq-fix-value pre {
  flex: 1;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: #fff;
  font: 12.5px/1.6 var(--mono);
  white-space: pre-wrap;
  word-break: break-all;
  overflow-x: auto;
}
.uq-fix-value .uq-btn-mini { flex: none; }
.uq-fix-note {
  margin: 11px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.uq-hd-next { margin: 0 16px 4px; }
.uq-hd-config {
  margin: 0;
  padding: 14px 16px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: #faf8f4;
  font: 12.5px/1.7 var(--mono);
  overflow-x: auto;
}

.uq-cert-countdown { margin: 0 16px 4px; }

.uq-dns-ttl {
  margin: -8px 0 18px;
  font-size: 12.5px;
  color: var(--muted-3);
  font-style: italic;
}

.uq-dns-resolver {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line-2);
  font-size: 13.5px;
}
.uq-dns-resolver .k {
  flex: none;
  width: 96px;
  font: 500 11px/1.4 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-3);
}
.uq-dns-resolver .v { font-family: var(--mono); font-size: 12.5px; word-break: break-all; }
.uq-dns-resolver .v.is-quiet { color: var(--muted-3); font-style: italic; }

.uq-mail-tried {
  margin: 10px 0 0;
  font: 12px/1.8 var(--mono);
  color: var(--muted-3);
  word-break: break-word;
}

/* ---------- diff: word level, split view, navigation ---------- */

/* The changed words inside a changed line. Without this a one-character edit reads as a
   whole line rewritten, which is accurate and useless. */
.uq-diff .w {
  background: #ffe08a;
  border-radius: 3px;
  padding: 0 1px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05);
}
.uq-diff tr.del .w { background: #f5b8ab; }

.uq-diff table.is-split td.tx { width: 50%; }
.uq-diff table.is-split td.is-blank { background: #faf8f4; }
.uq-diff table.is-split tr.changed td.tx:not(.is-blank) { background: #fdf6e8; }
.uq-diff table.is-split td.ln + td.tx { border-right: 1px solid var(--line); }

/* Where you are, when stepping through changes. */
.uq-diff tr.is-current td { box-shadow: inset 0 0 0 2px var(--accent); }

/* ---------- jsonlens: search, paths ---------- */

.uq-json-find { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.uq-json-find .uq-input { flex: 1; min-width: 0; }

/* Keys are buttons now — they copy their own path — but must still read as keys. */
.uq-json button.k {
  font: inherit;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}
.uq-json button.k:hover { text-decoration: underline; text-underline-offset: 2px; }

.uq-json li.is-hit > .k,
.uq-json li.is-hit > .s,
.uq-json li.is-hit > .n,
.uq-json li.is-hit > .b,
.uq-json li.is-hit > .z { background: #ffe08a; border-radius: 3px; }
.uq-json li.is-current > .k,
.uq-json li.is-current > .s,
.uq-json li.is-current > .n,
.uq-json li.is-current > .b,
.uq-json li.is-current > .z { box-shadow: 0 0 0 2px var(--accent); }

.uq-json-path {
  margin: 8px 0 0;
  font: 12px/1.5 var(--mono);
  color: var(--muted-2);
  word-break: break-all;
}

/* ---------- wordcount: keyword density ---------- */

.uq-wc-terms { display: grid; gap: 7px; }
.uq-wc-term {
  display: grid;
  grid-template-columns: minmax(90px, 150px) 1fr auto;
  gap: 12px;
  align-items: center;
  font-size: 13px;
}
.uq-wc-term .w { font-family: var(--mono); font-size: 12.5px; word-break: break-all; }
.uq-wc-term .b {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: var(--line);
  overflow: hidden;
}
.uq-wc-term .b i { display: block; height: 100%; background: var(--amber); border-radius: 4px; }
.uq-wc-term .c {
  font: 11.5px/1 var(--mono);
  color: var(--muted-3);
  white-space: nowrap;
}

/* ---------- base64: decoded binary ---------- */

.uq-b64-binary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: #faf8f4;
}
.uq-b64-preview {
  max-width: 100%;
  max-height: 300px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: #fff;
}

/* ---------- jwtlens: key field, claim explanations ---------- */

.uq-jwt-key {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 13px;
  padding: 8px 11px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  resize: vertical;
  min-height: 38px;
  line-height: 1.5;
}
.uq-jwt-key:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* What a receiver is supposed to do with each claim — the part that separates a decoder
   from a JSON formatter with extra steps. */
.uq-claim .why {
  /* .uq-claim is a flex row, so a full-width break needs flex-basis rather than a grid
     column span. */
  flex: 0 0 100%;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted-3);
}

/* ---------- epoch: per-row copy, duration ---------- */

.uq-ts-row .uq-ts-copy {
  margin-left: auto;
  opacity: 0;
  transition: opacity .12s;
}
.uq-ts-row:hover .uq-ts-copy,
.uq-ts-row:focus-within .uq-ts-copy { opacity: 1; }
/* Never hide it from keyboard users behind a hover. */
@media (hover: none) { .uq-ts-row .uq-ts-copy { opacity: 1; } }

.uq-ts-duration {
  margin: 14px 0 0;
  font: 600 16px/1.5 var(--mono);
  color: var(--ink);
}

/* ---------- crontab: the builder, UTC column ---------- */

.uq-cron-build { margin-top: 12px; display: grid; gap: 10px; }
.uq-cron-brow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.uq-cron-brow input[type="number"] {
  font-family: var(--mono);
  font-size: 13px;
  padding: 6px 8px;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
}

.uq-cron-run .utc {
  font: 11.5px/1 var(--mono);
  color: var(--muted-3);
}

/* ---------- hashery: drop zone, file list ---------- */

.uq-hash-drop {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 16px;
  border: 1px dashed var(--line-3);
  border-radius: 12px;
  background: #faf8f4;
  font-size: 13px;
  color: var(--muted-2);
  transition: .12s;
}
.uq-hash-drop.is-over { border-color: var(--accent); background: #fdf3ee; }

.uq-hash-files { display: grid; gap: 8px; margin-top: 12px; }
.uq-hash-file {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) auto minmax(0, 2fr) auto;
  gap: 12px;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: #fff;
  font-size: 13px;
}
.uq-hash-file .n { font-weight: 500; word-break: break-all; }
.uq-hash-file .z { font: 11.5px/1 var(--mono); color: var(--muted-3); white-space: nowrap; }
.uq-hash-file .h { font: 11.5px/1.5 var(--mono); color: var(--muted); word-break: break-all; }

@media (max-width: 640px) {
  .uq-hash-file { grid-template-columns: 1fr; }
}

/* ---------- keysmith: spares, entropy explanation ---------- */

.uq-pw-explain {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--muted-3);
}
.uq-pw-extras { display: grid; gap: 8px; margin-top: 12px; }
.uq-pw-extra {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: #fff;
}
.uq-pw-extra code {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 13.5px;
  word-break: break-all;
}

/* ---------- qrcraft: paired fields ---------- */

.uq-qr-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .uq-qr-pair { grid-template-columns: 1fr; } }

/* ---------- crawlspace: on-page findings ---------- */

.uq-cr-findings { display: grid; gap: 10px; }
.uq-cr-finding details { margin: 6px 0 0 30px; }
.uq-cr-finding summary {
  font-size: 12.5px;
  color: var(--accent);
  cursor: pointer;
}
.uq-cr-urls {
  margin: 8px 0 0;
  padding-left: 18px;
  font: 12px/1.7 var(--mono);
  color: var(--muted-2);
  word-break: break-all;
}

/* ---------- vitals: comparison table ---------- */

.uq-vt-compare { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.uq-vt-compare th {
  text-align: left;
  padding: 8px 12px 8px 0;
  font: 500 10.5px/1.4 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-3);
  border-bottom: 1px solid var(--line);
  word-break: break-all;
}
.uq-vt-compare td {
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 13px;
  white-space: nowrap;
}
.uq-vt-compare td.k {
  font-family: var(--sans);
  font-weight: 600;
  color: var(--ink);
}
.uq-vt-compare td.d { font-weight: 700; }
.uq-vt-compare td.d.is-better { color: var(--ok-ink); }
.uq-vt-compare td.d.is-worse  { color: #c0573f; }

/* ---------- colormuse: roles ---------- */

.uq-cm-roles { display: grid; gap: 8px; }
.uq-cm-role {
  display: grid;
  grid-template-columns: 26px 90px auto 1fr;
  gap: 12px;
  align-items: center;
  font-size: 13px;
}
.uq-cm-role .sw {
  width: 26px; height: 26px;
  border-radius: 6px;
  border: 1px solid var(--hair);
}
.uq-cm-role .n { font-weight: 600; }
.uq-cm-role .v { font: 12.5px/1 var(--mono); color: var(--muted); }
.uq-cm-role .w { font-size: 12.5px; color: var(--muted-3); }

@media (max-width: 560px) {
  .uq-cm-role { grid-template-columns: 26px 1fr; }
  .uq-cm-role .w { grid-column: 1 / -1; }
}

/* ---------- csvlens: parse preview ---------- */

.uq-csv-preview { overflow-x: auto; }
.uq-csv-table {
  border-collapse: collapse;
  font: 12.5px/1.5 var(--mono);
  min-width: 100%;
}
.uq-csv-table th,
.uq-csv-table td {
  border: 1px solid var(--line-2);
  padding: 6px 10px;
  text-align: left;
  white-space: nowrap;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.uq-csv-table th { background: #faf8f4; font-weight: 600; }
/* A short row is a real parsing signal, usually an unescaped delimiter earlier on. */
.uq-csv-table td.is-missing { background: #fdf3ee; color: var(--muted-3); text-align: center; }
.uq-csv-more { margin: 10px 0 0; font-size: 12.5px; color: var(--muted-3); }

/* ---------- reel: job history ---------- */

.uq-md-jobs { display: grid; gap: 8px; }
.uq-md-job {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 9px 12px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: #fff;
  font-size: 13px;
}
.uq-md-job .n { font-weight: 500; word-break: break-all; }
.uq-md-job .z { font: 11.5px/1 var(--mono); color: var(--muted-3); white-space: nowrap; }

/* ---------- cutout: the refine canvas ---------- */

.uq-bg-canvas {
  max-width: 100%;
  max-height: 460px;
  height: auto;
  display: block;
  cursor: crosshair;
  touch-action: none;
}
/* Outlining the cut is how you judge it before downloading — a soft edge and a hard one
   look identical against a checkerboard until you draw a line round them. */
.uq-bg-canvas.is-edged {
  filter: drop-shadow(1px 0 0 var(--accent)) drop-shadow(-1px 0 0 var(--accent))
          drop-shadow(0 1px 0 var(--accent)) drop-shadow(0 -1px 0 var(--accent));
}

/* ---------- batch 1: chains, hash progress, scan hint ---------- */

.uq-cr-chains { display: grid; gap: 12px; }
.uq-cr-chain {
  padding: 12px 14px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: #faf8f4;
}
.uq-cr-chain-head { font: 600 12.5px/1.4 var(--sans); }
.uq-cr-chain-head.is-warn { color: #8a6a33; }
.uq-cr-chain-head.is-bad  { color: #c0573f; }
.uq-cr-hops {
  margin: 8px 0 0;
  padding-left: 20px;
  font: 12px/1.8 var(--mono);
  color: var(--muted-2);
  word-break: break-all;
}
.uq-cr-hops li.is-final { color: var(--ok-ink); font-weight: 600; }

.uq-hash-meter {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}
.uq-hash-meter i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--amber);
  transition: width .1s linear;
}

.uq-qr-scanhint { margin-top: 12px; }

/* ---------- colormuse: locked swatches ---------- */

.uq-swatch { position: relative; }
.uq-swatch .lock {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 11px;
  line-height: 1;
  opacity: 0;
  cursor: pointer;
  transition: opacity .12s;
}
.uq-swatch:hover .lock,
.uq-swatch:focus-within .lock,
.uq-swatch.is-locked .lock { opacity: 1; }
.uq-swatch.is-locked { box-shadow: inset 0 0 0 3px var(--accent); }
@media (hover: none) { .uq-swatch .lock { opacity: 1; } }

/* ---------- metapeek: per-network cards ---------- */

.uq-mp-hint {
  font-size: 9.5px;
  letter-spacing: .06em;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--tag-bg);
  color: var(--muted-3);
}

/* Slack — accent bar, then the image at reduced size below the text. */
.uq-mp-slack { border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: #fff; }
.uq-mp-slackbody { padding: 12px 14px 12px 16px; border-left: 4px solid var(--line-3); }
.uq-mp-slackhost { font-size: 12px; font-weight: 700; color: var(--ink); }
.uq-mp-slacktitle { font-size: 14px; font-weight: 600; color: #1264a3; margin-top: 3px; }
.uq-mp-slackdesc { font-size: 13px; line-height: 1.5; color: var(--muted); margin-top: 4px; }
.uq-mp-slackimg { display: block; max-width: 360px; width: 100%; border-radius: 8px; margin-top: 10px; }

/* WhatsApp — square thumbnail beside the text. A wide image is centre-cropped here,
   so anything at the left or right edge is simply gone. */
.uq-mp-whatsapp { border: 1px solid var(--line-2); border-radius: 10px; background: #dcf8c6; padding: 8px; }
.uq-mp-warow { display: flex; gap: 10px; align-items: flex-start; }
.uq-mp-wathumb {
  width: 76px; height: 76px;
  object-fit: cover;
  border-radius: 6px;
  flex: none;
  background: #fff;
}
.uq-mp-wabody { min-width: 0; }
.uq-mp-watitle { font-size: 13px; font-weight: 600; color: #111; }
.uq-mp-wadesc { font-size: 12px; line-height: 1.45; color: #555; margin-top: 2px; }
.uq-mp-wahost { font-size: 11px; color: #888; margin-top: 4px; }

/* Discord — dark, and the longest description of any of them. */
.uq-mp-discord { border-radius: 10px; overflow: hidden; background: #2b2d31; }
.uq-mp-dcbody { padding: 12px 14px 14px 16px; border-left: 4px solid #b6532c; }
.uq-mp-dchost { font-size: 11.5px; color: #b5bac1; }
.uq-mp-dctitle { font-size: 14px; font-weight: 600; color: #00a8fc; margin-top: 4px; }
.uq-mp-dcdesc { font-size: 13px; line-height: 1.5; color: #dbdee1; margin-top: 5px; }
.uq-mp-dcimg { display: block; max-width: 100%; border-radius: 6px; margin-top: 10px; }

/* ---------- imagesmith: the HEIC exception ---------- */

/* Visually distinct from the rest of the tool on purpose: it is the one place where the
   page's own promise does not apply, and it should not look like an ordinary control. */
.uq-im-heic {
  border-top: 1px solid var(--line);
  background: #fdf6ee;
}
.uq-im-heic-note { margin: 0; font-weight: 600; font-size: 14px; }
.uq-im-heic-terms {
  margin: 8px 0 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 62ch;
}

/* ---------- imagesmith: before/after slider ---------- */

.uq-im-compare {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  background: #faf8f4;
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
  max-width: 100%;
}
.uq-im-before { display: block; width: 100%; height: auto; }
/* The clip is what moves; the image inside it is pinned to the frame's width so sliding
   reveals rather than squashes. */
.uq-im-afterclip {
  position: absolute;
  inset: 0 auto 0 0;
  width: 50%;
  overflow: hidden;
}
.uq-im-after { display: block; height: 100%; object-fit: cover; object-position: left top; }
.uq-im-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
  pointer-events: none;
}
.uq-im-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.uq-im-comparecap { margin: 10px 0 0; font-size: 12.5px; color: var(--muted-3); }

/* ---------- vitals: run history ---------- */

.uq-vt-runs { display: grid; gap: 7px; }
.uq-vt-run {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 12px;
  align-items: baseline;
  font-size: 13px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--line-2);
}
.uq-vt-run .k {
  font: 500 11px/1.4 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-3);
}
.uq-vt-run .v { font-family: var(--mono); font-size: 12.5px; }
.uq-vt-run .d { font-size: 12px; font-weight: 600; color: var(--muted-3); white-space: nowrap; }
.uq-vt-run .d.is-better { color: var(--ok-ink); }
.uq-vt-run .d.is-worse  { color: #c0573f; }

@media (max-width: 560px) { .uq-vt-run { grid-template-columns: 1fr; } }