/* checkthe.guru: the one stylesheet. Top to bottom:
 *   1. tokens: the checkthe.guru palette (navy ink, electric blue, the logo green)
 *   2. the WeBuyAnyLead base this design grew out of: type, header, cards, buttons,
 *      inputs, chips, banners, modal, toast
 *   3. the dashboard layer (rings, charts, tables, the scan bar), scoped under body.sl
 *   4. the ctg- layer: guru cards, profile header, socials, comments, the all-sellers table
 *   5. the sponsor badge
 *   6. tags, votes and the list controls
 *   7. the rest of the ctg- layer: what the page needed beyond those blocks
 * Layers 2 and 3 were written for a green brand. Here --green is an alias for the brand
 * blue, so every rule that says green comes out blue, and the few things that must stay
 * green (profit, "measured", a finished scan) point at --good by name.
 * System fonts only, 6 px corners, hairlines and one soft shadow.
 */

/* ================================================================ 1. tokens */
:root {
  color-scheme: light;
  --blue: #0a62f6;            /* primary: buttons, active nav, links, the sales ring */
  --blue-dark: #0848c2;       /* hover and pressed */
  --blue-tint: #e8f0fe;       /* soft blue fill */
  --blue-soft: rgba(10,98,246,.10);
  --sky: #2b8cf8;             /* second blue for charts and the Buy Box stat */
  --ink: #0f1e38;             /* main text, the navy of the wordmark */
  --ink-soft: #51607a;
  --bg: #ffffff; --card: #ffffff;
  --band: #f3f6fb;            /* page ground and alternating bands (cool, not WBAL's green-grey) */
  --line: #e1e7f0;
  --good: #0ea35a; --good-soft: rgba(14,163,90,.10); --good-deep: #0b7a44;   /* profit, measured, the logo green */
  --warn: #b7791f; --warn-deep: #8a5a14; --warn-soft: rgba(183,121,31,.12);
  --bad: #c1122f; --bad-soft: rgba(193,18,47,.08);
  --info: var(--blue); --info-soft: var(--blue-soft);
  --wash: rgba(15,30,56,.035);
  --blurple: #5865F2;         /* Discord buttons only */
  --wbal: #039738;            /* the sponsor's green, used only inside the badge */
  --tag-blue: #0a62f6; --tag-green: #0ea35a; --tag-red: #c1122f; --tag-amber: #e08a0b; --tag-purple: #7c3aed;
  /* aliases so every rule from the two older stylesheets that still says green lands on blue;
     the few rules that must stay green are re-pointed by hand (see below) */
  --green: var(--blue); --green-dark: var(--blue-dark); --green-tint: var(--blue-tint); --green-soft: var(--blue-soft);
  --font-body: "Segoe UI", SegoeUI, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", SFMono-Regular, Consolas, Menlo, monospace;
  --ease: cubic-bezier(0.2, 0.9, 0.1, 1); --radius: 6px;
  --shadow-card: 0 1px 3px rgba(15,30,56,.07); --shadow-float: 0 8px 28px rgba(15,30,56,.12);
}

/* ================================================================ 2. the WeBuyAnyLead base */
/* ------------------------------------------------ base */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  scroll-behavior: smooth;
  /* full-bleed bands overshoot by the scrollbar width - never allow x-scroll */
  overflow-x: hidden;
  overflow-x: clip;
  /* consistent type on phones: no browser auto-inflation, we size explicitly */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden; /* full-bleed bands overshoot by the scrollbar width */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--green); color: #fff; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3 {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 17px; }
p { margin: 0 0 12px; }
.muted { color: var(--ink-soft); }
.small { font-size: 13px; }
.strong { font-weight: 700; }
.good { color: var(--good); }
.bad { color: var(--bad); }
.mono { font-family: var(--font-mono); font-size: 0.92em; font-variant-numeric: tabular-nums; }
.link { color: var(--green); font-weight: 600; }
.link:hover { color: var(--green-dark); text-decoration: underline; text-underline-offset: 3px; }
.req { color: var(--bad); }

:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

#app { display: flex; flex-direction: column; min-height: 100vh; }

/* ------------------------------------------------ header */
#header {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: 1060px; margin: 0 auto;
  display: flex; align-items: center; gap: 22px;
  padding: 12px 24px;
}
.wordmark { display: inline-flex; align-items: center; flex: 0 0 auto; }
.wordmark img { height: 34px; width: auto; display: block; }
.header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.pill {
  background: var(--green-tint); border: 1px solid rgba(10, 98, 246, 0.25);
  color: var(--green-dark); font-size: 12.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  border-radius: 999px; padding: 4px 12px; white-space: nowrap;
}
.user-chip { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
/* the chip links to account settings - keep it chip-shaped, not link-shaped */
a.user-chip { color: inherit; text-decoration: none; cursor: pointer; }
a.user-chip:hover .user-name { text-decoration: underline; }
.user-name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
  background: var(--band); border: 1px solid var(--line);
  display: inline-grid; place-items: center; flex: 0 0 30px;
  color: var(--ink-soft); font-weight: 700; font-size: 12.5px;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-fallback { background: var(--good-soft); color: var(--good-deep); }
.avatar-site { background: transparent; border: 0; }
.av-svg { display: block; border-radius: 50%; }

/* ------------------------------------------------ layout */
.view {
  flex: 1; width: 100%;
  max-width: 1060px; margin: 0 auto;
  padding: 40px 24px 80px;
  outline: none;
}
.page-head { margin-bottom: 28px; }
.page-head h1 { margin-bottom: 6px; }
.page-loading {
  color: var(--ink-soft); text-align: center; padding: 60px 0;
  font-size: 14px;
}

.footer { border-top: 1px solid var(--line); margin-top: auto; background: var(--band); }
.footer-inner {
  max-width: 1060px; margin: 0 auto; padding: 24px;
  color: var(--ink-soft); font-size: 13px; text-align: center;
}
.footer-inner p { margin: 0; }

/* ------------------------------------------------ cards */
.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 24px;
}
.empty-card { text-align: center; padding: 48px 24px; }
.empty-card .btn { margin-top: 8px; }

/* ------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  padding: 10px 20px; border-radius: var(--radius);
  font-weight: 600; font-size: 15px; line-height: 1.35;
  transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:hover:not(:disabled) { border-color: var(--ink-soft); }
.btn-primary { background: var(--green); border-color: var(--green); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--green-dark); border-color: var(--green-dark); }
.btn-ghost { background: #fff; border: 1px solid var(--green); color: var(--green); }
.btn-ghost:hover:not(:disabled) {
  background: var(--green-tint); border-color: var(--green-dark); color: var(--green-dark);
}
.btn-danger { background: transparent; border-color: transparent; color: var(--bad); }
.btn-danger:hover:not(:disabled) { border-color: var(--bad); background: var(--bad-soft); }
.btn-sm { padding: 6px 12px; font-size: 13.5px; }
.btn-lg { padding: 12px 26px; font-size: 16px; }
.btn-xl { padding: 14px 30px; font-size: 17px; }
.btn-discord { background: var(--blurple); border-color: var(--blurple); color: #fff; }
.btn-discord:hover:not(:disabled) { background: #4752c4; border-color: #4752c4; }
.btn-discord svg { width: 18px; height: 18px; flex: 0 0 18px; }
.btn-sm svg { width: 15px; height: 15px; flex: 0 0 15px; }

/* ------------------------------------------------ forms */
input[type="text"], input[type="number"], input[type="file"], select, textarea, .input {
  background: #fff; border: 1px solid var(--line); color: var(--ink);
  /* 16px minimum: below that iOS Safari auto-zooms the page on focus */
  border-radius: var(--radius); padding: 10px 12px; font-size: 16px;
  font-family: var(--font-body); width: 100%;
  transition: border-color 0.12s, box-shadow 0.12s;
}
input[type="number"] { font-variant-numeric: tabular-nums; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field > label, .field > span.muted {
  font-weight: 600; font-size: 13px; color: var(--ink-soft);
}
.hint { color: var(--ink-soft); font-size: 13px; }
.check-row {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-size: 14.5px; padding: 8px 2px; color: var(--ink);
}
.check-row input { width: 16px; height: 16px; accent-color: var(--green); }
.radio-row {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 10px; transition: border-color 0.12s, background 0.12s;
}
.radio-row:hover { border-color: var(--green); background: var(--green-tint); }
.radio-row input { width: 16px; height: 16px; accent-color: var(--green); }
.input-sm {
  padding: 6px 10px; font-size: 13px; border-radius: var(--radius); max-width: 160px;
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  font-family: var(--font-body);
}
input.input-sm[type="number"], input.input-sm[type="text"] { font-variant-numeric: tabular-nums; font-size: 13px; }
.input-sm:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
select.input-sm { max-width: 210px; }

/* ------------------------------------------------ chips */
.chip {
  display: inline-flex; align-items: center;
  border-radius: 999px; padding: 3px 10px;
  border: 1px solid transparent;
  font-weight: 600; font-size: 12px; line-height: 1.6;
  white-space: nowrap;
}
.chip.good { background: var(--good-soft); color: var(--good-deep); border-color: rgba(14,163,90,.25); }
.chip.bad { background: var(--bad-soft); color: var(--bad); border-color: rgba(193, 18, 47, 0.25); }
.chip.warn { background: var(--warn-soft); color: var(--warn-deep); border-color: rgba(183, 121, 31, 0.3); }
.chip.info, .chip.pending { background: var(--info-soft); color: var(--info); border-color: rgba(10, 98, 246, 0.25); }
.chip.muted { background: var(--wash); color: var(--ink-soft); border-color: var(--line); }

/* ------------------------------------------------ banners */
.banner {
  border-radius: var(--radius); padding: 12px 16px; font-size: 14px;
  margin: 16px 0 0;
  border: 1px solid var(--line); border-left: 3px solid var(--ink-soft);
  background: #fff;
}
.banner-red { border-left-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
.banner-info { border-left-color: var(--info); background: var(--info-soft); color: var(--info); }
.banner-warn { border-left-color: var(--warn); background: var(--warn-soft); color: var(--warn-deep); }
.banner.small { font-size: 13px; padding: 8px 12px; }

/* ------------------------------------------------ progress */
.progress {
  height: 8px; border-radius: 999px; background: var(--band);
  border: 1px solid var(--line); overflow: hidden; margin: 14px 0 12px;
}
.progress-fill { height: 100%; background: var(--good); transition: width 0.4s var(--ease); }
.progress-fill.fail { background: var(--bad); }

/* ------------------------------------------------ tables */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 14px; font-size: 14px; }
thead th {
  font-weight: 600; color: var(--ink-soft);
  text-transform: uppercase; font-size: 11.5px; letter-spacing: 0.05em;
  border-bottom: 2px solid var(--line);
  white-space: nowrap;
}
tbody tr { border-bottom: 1px solid var(--line); }
tbody tr:nth-child(even) { background: var(--wash); }
tbody tr:last-child { border-bottom: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------ modal
 * The overlay scrolls, not the modal, and the modal centres with margin:auto: centred when
 * it fits, top-aligned and scrolling when it is taller than the screen. */
#modal-root.show {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(15, 30, 56, 0.45); backdrop-filter: blur(2px);
  display: flex; justify-content: center;
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 20px;
  padding-top: max(20px, env(safe-area-inset-top));
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}
.modal {
  width: 480px; max-width: 100%; margin: auto;
  background: #fff; border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(15, 30, 56, 0.22);
}
.modal-head {
  padding: 20px 24px 14px;
  font-weight: 700; font-size: 18px; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.modal-body { padding: 16px 24px 8px; }
.modal-foot { padding: 14px 24px 20px; display: flex; gap: 10px; justify-content: flex-end; }
.modal { position: relative; }
.modal-x {
  position: absolute; top: 6px; right: 6px; width: 44px; height: 44px;
  border: 0; background: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--ink-soft);
}
.modal-x:hover { color: var(--ink); }

/* ------------------------------------------------ toast */
#toast-root {
  position: fixed; right: 18px; bottom: 18px; z-index: 200;
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  background: #fff; border: 1px solid var(--line);
  border-left: 3px solid var(--ink-soft);
  color: var(--ink);
  padding: 12px 16px; border-radius: var(--radius);
  box-shadow: var(--shadow-float);
  font-weight: 600; font-size: 13.5px; max-width: 360px;
  transition: opacity 0.5s;
}
.toast.ok { border-left-color: var(--good); }
.toast.err { border-left-color: var(--bad); }
.toast.fade { opacity: 0; }

/* ------------------------------------------------ spinner */
.spinner {
  width: 15px; height: 15px; flex: 0 0 15px;
  border: 2px solid var(--line); border-top-color: var(--green);
  border-radius: 50%; display: inline-block;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------ admin pieces */
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.bi-title { font-weight: 650; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.admin-item { margin-bottom: 12px; }
.admin-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.admin-controls label { white-space: nowrap; }

/* ------------------------------------------------ phones (from the WeBuyAnyLead 640 block, without its drawer nav) */
@media (max-width: 640px) {
  /* the wordmark is an image and a flex item: without min-width 0 it refuses to shrink on a 320 px handset */
  .wordmark { min-width: 0; }
  .wordmark img { width: auto; max-width: 100%; object-fit: contain; min-width: 0; }
  .header-right { gap: 8px; }
  .pill { display: none; }
  .user-name { display: none; }
  .card { padding: 18px 16px; }
  #modal-root.show { padding: 14px; padding-top: max(14px, env(safe-area-inset-top));
    padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .modal-head { padding: 18px 18px 12px; }
  .modal-body { padding: 14px 18px 8px; }
  .modal-foot { padding: 12px 18px 18px; flex-wrap: wrap; }
  #toast-root { left: 12px; right: 12px; bottom: 12px; }
  .toast { max-width: none; }
  /* phones get a larger type floor, never a smaller one */
  .footer-inner { font-size: 14px; }
  .hint, .small, .muted.small, .field > label, .field > span.muted, .banner.small { font-size: 14px; }
  .chip { font-size: 12.5px; padding: 4px 10px; }
  .toast { font-size: 14.5px; }
  .btn-sm { font-size: 14.5px; padding: 8px 14px; }
  .check-row { font-size: 15px; }
  .check-row input, .radio-row input { width: 20px; height: 20px; }
  .input-sm, input.input-sm[type="number"], input.input-sm[type="text"] { font-size: 16px; }  /* no iOS zoom-on-focus */
}

/* ------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
  .spinner { animation: none !important; border-top-color: var(--green); }
}

/* ================================================================ 3. the dashboard layer
 * A SellerToolkit-style dashboard: a four-ring overview with stat boxes, then rows of
 * cards. Scoped under body.sl where it overrides the base above.
 * Profit is --good green, sales --info blue, units --warn amber, ROI --ink, losses --bad. */

body.sl { background: var(--band); font-size: 14px; line-height: 1.5; }
body.sl #header { background: var(--bg); }
body.sl .header-inner, body.sl .footer-inner, body.sl .view { max-width: 1400px; }
body.sl .view { padding: 24px 24px 64px; }
body.sl .footer { background: var(--bg); }
body.sl .btn svg { width: 18px; height: 18px; flex: 0 0 18px; }
body.sl .btn-sm svg { width: 15px; height: 15px; flex: 0 0 15px; }
body.sl .btn-danger { border-color: var(--line); }
body.sl .chip { padding: 1px 9px; font-size: 11.5px; }
body.sl a.chip:hover { border-color: currentColor; }
@media (max-width: 640px) { body.sl .header-inner { gap: 10px; padding: 10px 12px; flex-wrap: wrap; } }
.sl-key { font-variant-numeric: tabular-nums; }
.tiny { font-size: 11.5px; color: var(--ink-soft); }
.sl-icon { width: 15px; height: 15px; flex: 0 0 15px; vertical-align: -2px; }

/* ---------- landing ---------- */
.sl-landing { max-width: 760px; margin: 28px auto 0; }
.sl-landing > .card { padding: 30px 30px 26px; text-align: center; }
/* the name is one unbreakable word: scale it down on a phone rather than let it overflow */
.sl-landing h1 { font-size: clamp(22px, 8vw, 32px); margin-bottom: 8px; }
.sl-landing .lead { color: var(--ink-soft); font-size: 16px; margin: 0 auto 22px; max-width: 580px; }
.sl-lookup { display: flex; gap: 10px; }
.sl-lookup input { flex: 1; min-width: 0; }
.sl-lookup .btn { white-space: nowrap; }
.sl-landing .hint { margin-top: 12px; }
.sl-landing .banner { text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.sl-landing h3 { margin: 28px 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.sl-list { display: flex; flex-direction: column; gap: 8px; }
.sl-item {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: 12px 16px; text-align: left;
}
a.sl-item:hover, .sl-item.hit:hover { border-color: var(--green); }
.sl-item .nm { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.sl-item .sub { color: var(--ink-soft); font-size: 13px; overflow-wrap: anywhere; }
.sl-item .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.sl-item .when { color: var(--ink-soft); font-size: 12.5px; white-space: nowrap; }
.sl-item .btn { flex: 0 0 auto; }
@media (max-width: 560px) { .sl-lookup { flex-direction: column; } .sl-item { flex-direction: column; align-items: stretch; } }

/* ---------- layout: rows of cards, SellerToolkit style ---------- */
.row { display: grid; gap: 16px; margin-bottom: 16px; }
.row-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.stack > .sl-card:last-child { flex: 1; }
@media (max-width: 1100px) { .row-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .row-2 { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .row-4 { grid-template-columns: 1fr; } body.sl .view { padding: 14px 12px 48px; } }

.sl-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-card); display: flex; flex-direction: column; min-width: 0;
}
.sl-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px 10px; flex-wrap: wrap;
  padding: 9px 10px 9px 16px; border-bottom: 1px solid var(--line); min-height: 49px; position: relative;
  font-weight: 700; font-size: 15px; color: var(--ink);
}
.sl-card-head .ttl { min-width: 0; }
.sl-card-head .per { font-weight: 600; color: var(--ink-soft); }
.sl-card-head .sub { display: block; color: var(--ink-soft); font-weight: 400; font-size: 12px; }
.sl-card-head .tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sl-card-head .tools:empty { display: none; }
.sl-card-head.has-per { padding-right: 48px; }
.sl-card-head.has-per > .btn-icon { position: absolute; top: 9px; right: 10px; }
.sl-card-body { padding: 14px 16px; flex: 1; min-width: 0; }
.sl-card-body.tight { padding: 4px 8px 8px; }
.sl-card-body.loading { opacity: .45; transition: opacity .12s; }
/* what the overview figure rests on, and the low-confidence notice */
.evidence { margin-top: 10px; color: var(--ink-soft); text-align: center; }
.evidence .banner { text-align: left; margin: 0 0 8px; }
.sl-tools { display: flex; gap: 8px; align-items: center; }

/* the period button every card carries in its top right corner, and its menu */
.btn-icon {
  display: inline-grid; place-items: center; width: 30px; height: 30px; flex: 0 0 30px; padding: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-soft);
}
.btn-icon:hover, .btn-icon:focus-visible { border-color: var(--green); color: var(--green-dark); }
.btn-icon svg { width: 16px; height: 16px; }
.sl-menu {
  position: absolute; top: 44px; right: 10px; z-index: 30; min-width: 150px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-float); padding: 4px; display: flex; flex-direction: column;
}
.sl-menu button {
  border: 0; background: none; text-align: left; padding: 7px 10px; border-radius: 4px;
  font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap;
}
.sl-menu button:hover { background: var(--band); }
.sl-menu button.on { background: var(--green-tint); color: var(--green-dark); }
.trend {
  font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 9px; white-space: nowrap;
  background: var(--wash); color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.trend.up { background: var(--good-soft); color: var(--good-deep); }
.trend.down { background: var(--bad-soft); color: var(--bad); }

/* ---------- the four rings ---------- */
.rings { display: flex; justify-content: space-around; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0 2px; }
.rings.four > * { width: clamp(104px, 23%, 172px); }
.ring { position: relative; width: 100%; aspect-ratio: 1; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .track { stroke: var(--good-soft); }
.ring .arc { stroke: var(--good); stroke-linecap: round; transition: stroke-dashoffset .6s var(--ease); }
.ring.blue .track { stroke: var(--info-soft); }
.ring.blue .arc { stroke: var(--info); }
.ring.amber .track { stroke: var(--warn-soft); }
.ring.amber .arc { stroke: var(--warn); }
.ring.ink .track { stroke: rgba(15, 30, 56, 0.10); }
.ring.ink .arc { stroke: var(--ink); }
.ring .txt { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 16%; }
.ring .txt b { font-size: clamp(15px, 1.55vw, 23px); font-weight: 700; color: var(--ink); letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ring .txt span { color: var(--ink-soft); font-size: 12px; font-weight: 600; line-height: 1.25; }
.ring .txt em { font-style: normal; font-size: 11px; line-height: 1.25; margin-top: 3px; color: var(--ink-soft); }
.ring .txt em.up { color: var(--good-deep); }
.ring .txt em.down { color: var(--bad); }
/* the ROI ring is a button: click it to simulate another ROI */
.ring-btn { border: 0; background: none; padding: 0; border-radius: 50%; cursor: pointer; color: inherit; font: inherit; }
.ring-btn:hover .track, .ring-btn:focus-visible .track { stroke: rgba(15, 30, 56, 0.2); }
.ring-btn .ring .txt em { color: var(--info); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ring-btn.sim .ring .txt em { color: var(--warn-deep); }
@media (max-width: 720px) { .rings.four > * { width: 46%; max-width: 190px; } .ring .txt b { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { .ring .arc { transition: none; } }

/* the stat boxes under the rings: a label strip with the figure below it */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.stats.two { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 10px; }
.stat { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-align: center; background: #fff; }
.stat .l { font-size: 12px; font-weight: 600; color: var(--ink); padding: 3px 6px; background: var(--band); border-bottom: 1px solid var(--line); }
.stat.info .l { background: var(--info-soft); }
.stat.good .l { background: var(--good-soft); }
.stat.warn .l { background: var(--warn-soft); }
.stat .v { font-weight: 700; font-size: 15px; padding: 5px 6px; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (max-width: 560px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats.two { grid-template-columns: 1fr; } }
.methods { display: flex; gap: 6px 14px; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 10px; }
.methods .warn { color: var(--warn-deep); }

/* list cards (profit and loss, Keepa tokens): label left, figure right, nothing clips */
dl.sl-kv { margin: 0; }
.sl-kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.sl-kv > div:last-child { border-bottom: 0; }
.sl-kv dt { color: var(--ink-soft); min-width: 0; }
.sl-kv dd { margin: 0; font-weight: 600; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sl-kv .total dd { font-size: 16px; font-weight: 700; }
.sl-kv .pos dd { color: var(--good-deep); }
.sl-kv .neg dd { color: var(--bad); }
.sl-kv + .tiny { margin: 10px 0 0; }

/* ---------- toolbar ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.toolbar .left, .toolbar .right { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sl-seg { display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 2px; }
/* four periods are wider than a phone: the toolbar's group wraps, it never runs off the screen */
.toolbar .sl-seg { flex-wrap: wrap; max-width: 100%; }
.sl-seg button { border: 0; background: none; color: var(--ink-soft); padding: 4px 11px; border-radius: 4px; font-weight: 600; font-size: 13px; white-space: nowrap; }
.sl-seg button:hover { color: var(--ink); }
.sl-seg button.on { background: var(--green); color: #fff; }

/* ---------- scan bar ---------- */
.scanbar {
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--ink-soft); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: 10px 16px; margin-bottom: 16px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
}
.scanbar .progress { flex: 1; min-width: 160px; margin: 0; }
.scanbar .txt { color: var(--ink-soft); font-size: 13px; }
.scanbar .txt b { color: var(--ink); }
.scanbar .note { color: var(--warn-deep); }
.scanbar.busy { border-left-color: var(--info); }
.scanbar.done { border-left-color: var(--good); }
.scanbar.paused { border-left-color: var(--warn); }
.scanbar .btn { margin-left: auto; }

/* ---------- charts ---------- */
.chart { position: relative; width: 100%; height: 240px; }
.chart canvas { width: 100%; height: 100%; display: block; }
.chart.short { height: 180px; }
.chart + .legend + .chart { margin-top: 12px; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--ink-soft); min-height: 18px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.legend .sales { background: var(--info); }
.legend .profit { background: var(--good); }
.chart-tip {
  position: fixed; z-index: 150; background: #fff; color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-float); padding: 8px 10px; font-size: 12.5px;
  pointer-events: none; display: none; max-width: 260px; font-variant-numeric: tabular-nums;
}
/* the brand and category cards are a quarter wide: ring on top, list below */
.donut-wrap { display: grid; grid-template-columns: 1fr; gap: 12px; justify-items: center; }
.donut-wrap svg { width: 132px; height: 132px; transform: rotate(-90deg); }
.donut-list { list-style: none; margin: 0; padding: 0; font-size: 13px; min-width: 0; width: 100%; }
.donut-list li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.donut-list li:last-child { border-bottom: 0; }
.donut-list li i { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 10px; }
.donut-list li .n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-list li .v { color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- tables (denser than the site default) ---------- */
.tbl-wrap { overflow: auto; max-height: 520px; }
table.tbl { font-size: 13px; }
.tbl th, .tbl td { padding: 7px 8px; font-size: 13px; }
.tbl thead th { position: sticky; top: 0; background: var(--card); z-index: 1; border-bottom: 2px solid var(--line); }
.tbl th[data-sort] { cursor: pointer; }
.tbl th[data-sort]:hover { color: var(--ink); }
.tbl th.active { color: var(--green-dark); }
.tbl td { vertical-align: middle; white-space: nowrap; }
.tbl tbody tr:hover { background: var(--green-tint); }
.tbl .pos { color: var(--good-deep); }
.tbl .neg { color: var(--bad); }
.tbl.plain tbody tr:nth-child(even) { background: none; }
.sl-thumb { width: 38px; height: 38px; border-radius: 4px; background: #fff; border: 1px solid var(--line); object-fit: contain; flex: 0 0 38px; display: inline-block; }
.prod { display: flex; align-items: center; gap: 10px; min-width: 0; }
.prod .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 340px; color: var(--ink); }
.prod .a { color: var(--ink-soft); font-size: 11.5px; }
/* a table that fits its card: the product column takes what the others leave */
.tbl.fit { width: 100%; }
.tbl.fit td:first-child { width: 100%; max-width: 0; }
.tbl.fit .prod > div { min-width: 0; }
.tbl.fit .prod .t { max-width: none; }
.tbl.fit .prod .a { white-space: normal; }
.prod .a a, .seller-row a { color: var(--green-dark); }
.prod .a a:hover, .seller-row a:hover { text-decoration: underline; }
body.sl input.cog-in { width: 76px; padding: 4px 6px; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
body.sl input.cog-in.set { border-color: var(--green); background: var(--green-tint); }
body.sl .sl-search { width: 220px; padding: 5px 10px; font-size: 13.5px; }
body.sl select.sl-search { width: auto; }
.pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; padding: 8px 4px 0; color: var(--ink-soft); font-size: 12.5px; }
.pager .btn { padding: 4px 8px; }

/* ---------- top sellers ---------- */
.seller-row { display: grid; grid-template-columns: 24px 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.seller-row:last-child { border-bottom: 0; }
.seller-row .rank { color: var(--ink-soft); font-size: 12px; font-variant-numeric: tabular-nums; }
.seller-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.seller-row .s { color: var(--ink-soft); font-size: 12px; }
.seller-row .amt { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.seller-row .amt small { display: block; color: var(--ink-soft); font-weight: 400; font-size: 11.5px; }

/* ---------- misc ---------- */
.sl-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { .sl-row2 { grid-template-columns: 1fr; } }
body.sl .modal.wide { width: 620px; }
body.sl .modal textarea { min-height: 96px; font-family: var(--font-mono); font-size: 13px; }
body.sl .modal-body p { margin-bottom: 10px; }
body.sl .modal-foot { flex-wrap: wrap; }
.facts { display: flex; gap: 6px; flex-wrap: wrap; }
details.how {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: 12px 16px; margin-bottom: 16px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.6;
}
details.how summary { cursor: pointer; color: var(--green-dark); font-weight: 600; }
details.how ul { margin: 8px 0 0; padding-left: 18px; }
details.how b { color: var(--ink); }

/* ================================================================ 4. the ctg- layer */
.sl-landing.ctg-home, .ctg-explore, .ctg-admin { max-width: 1100px; margin: 8px auto 0; }
.ctg-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.ctg-head h1 { font-size: clamp(22px, 5vw, 28px); margin: 0 0 4px; }
.ctg-sub { color: var(--ink-soft); font-size: 14.5px; max-width: 62ch; margin: 0; }
.ctg-nav { display: flex; gap: 2px; margin-left: 6px; }
.ctg-nav a { padding: 8px 10px; color: var(--ink-soft); font-weight: 600; font-size: 14.5px; white-space: nowrap; }
.ctg-nav a:hover { color: var(--ink); }
.ctg-nav a.active { color: var(--blue-dark); box-shadow: inset 0 -2px 0 var(--blue); }
.ctg-section { margin-top: 26px; }
.ctg-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ctg-section-head h3 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.ctg-section-tools { display: flex; align-items: center; gap: 14px; }
.ctg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.ctg-card { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 12px; padding: 14px 14px 12px 44px; min-height: 152px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); color: var(--ink); text-decoration: none; transition: border-color .12s; }
.ctg-card:hover { border-color: var(--blue); }
.ctg-card.ctg-ph { opacity: .55; pointer-events: none; }
.ctg-rank { position: absolute; left: 14px; top: 14px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 22px; }
.ctg-rank.top { color: var(--ink); font-weight: 800; }
.tbl .ctg-rank { position: static; }
.ctg-card .ctg-photo { grid-row: 1 / 3; }
.ctg-id { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
/* the whole name, on as many lines as it takes: a nickname is never cut short */
.ctg-name { font-weight: 700; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.ctg-socials { display: inline-flex; gap: 6px; align-items: center; color: var(--ink-soft); }
.ctg-glyph { display: inline-grid; place-items: center; width: 18px; height: 18px; }  .ctg-glyph svg { width: 16px; height: 16px; }
.ctg-nums { grid-column: 1 / -1; display: flex; gap: 18px; margin-top: 6px; }
.ctg-num b { display: block; font-size: 19px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ctg-num b.pos { color: var(--good-deep); }  .ctg-num b.neg { color: var(--bad); }
.ctg-num span { font-size: 12px; color: var(--ink-soft); }
.ctg-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
.ctg-foot .tiny.warn { color: var(--warn-deep); }
.ctg-photo { position: relative; display: inline-grid; place-items: center; width: 56px; height: 56px; flex: 0 0 56px; border-radius: 50%; overflow: hidden; border: 1px solid var(--line); background: var(--band); }
.ctg-photo.sm { width: 36px; height: 36px; flex-basis: 36px; }  .ctg-photo.lg { width: 88px; height: 88px; flex-basis: 88px; }
.ctg-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ctg-photo img[hidden] { display: none; }
.ctg-mono { width: 100%; height: 100%; display: grid; place-items: center; background: var(--c, #0a62f6); color: #fff; font-weight: 700; font-size: 22px; }
.ctg-photo.sm .ctg-mono { font-size: 15px; }  .ctg-photo.lg .ctg-mono { font-size: 34px; }
.ctg-empty { text-align: center; padding: 36px 24px; }  .ctg-empty b { font-size: 16px; display: block; margin-bottom: 6px; }  .ctg-empty p { max-width: 52ch; margin: 0 auto 14px; }
.ctg-pending, .ctg-hidden-note { max-width: 560px; margin: 24px auto; text-align: center; padding: 28px 24px; }
.ctg-pending b { font-size: 17px; display: block; margin-bottom: 6px; }  .ctg-pending .progress { margin: 14px 0 10px; }
.ctg-profile-body { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 16px 20px; align-items: start; }
.ctg-profile-main { min-width: 0; }
.ctg-alias { font-size: 24px; font-weight: 700; letter-spacing: -.01em; margin: 2px 0 4px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ctg-linked { color: var(--ink-soft); font-size: 13px; margin: 0 0 10px; }
.ctg-social-btns { display: flex; gap: 8px; flex-wrap: wrap; }  .ctg-social svg { width: 15px; height: 15px; }
.ctg-masknote { margin: 10px 0 0; }
.ctg-profile-minis { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 10px; }
.ctg-profile-minis .mini { background: var(--band); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.ctg-profile-minis .mini .label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.ctg-profile-minis .mini .v { font-size: 19px; font-weight: 700; }  .ctg-profile-minis .mini .v small { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.ctg-profile-minis .mini .s { font-size: 12px; color: var(--ink-soft); }
.ctg-links { display: flex; flex-direction: column; }
.ctg-link { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.ctg-link:last-child { border-bottom: 0; }
.ctg-link a { color: var(--blue-dark); font-weight: 600; }  .ctg-link a:hover { text-decoration: underline; }
.ctg-link .tiny { margin-left: auto; white-space: nowrap; }
.ctg-votes { font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 9px; background: var(--wash); color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ctg-votes.mine { background: var(--good-soft); color: var(--good-deep); }
.ctg-suggest { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }  .ctg-suggest input { flex: 1; min-width: 160px; }
.ctg-sgrow { display: grid; grid-template-columns: 150px 1fr; gap: 0 12px; }
.ctg-composer textarea { width: 100%; min-height: 72px; font-family: var(--font-body); font-size: 14px; line-height: 1.5; resize: vertical; }
.ctg-composer-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.ctg-comments { margin-top: 12px; }
.ctg-comment { padding: 10px 0; border-bottom: 1px solid var(--line); }  .ctg-comment:last-child { border-bottom: 0; }
.ctg-cmeta { display: flex; align-items: center; gap: 8px; }  .ctg-cname { font-weight: 600; font-size: 13.5px; }
.ctg-cmeta .ctg-report { margin-left: auto; padding: 2px 8px; font-size: 12.5px; }  .ctg-cmeta .ctg-cdel { padding: 2px 8px; font-size: 12.5px; }
.ctg-cbody { margin: 4px 0 0; font-size: 14px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.ctg-rowname { font-weight: 600; color: var(--ink); }  .ctg-rowname:hover { color: var(--blue-dark); text-decoration: underline; }
.tbl .ctg-socials { margin-left: 6px; vertical-align: middle; }  .tbl .ctg-socials .ctg-glyph svg { width: 14px; height: 14px; }
@media (max-width: 1100px) { .ctg-profile-body { grid-template-columns: 88px minmax(0, 1fr); } .ctg-profile-minis { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px) { .ctg-hide-m { display: none; } .ctg-profile-body { grid-template-columns: 1fr; } .ctg-profile-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ctg-card { padding-left: 40px; } }
@media (max-width: 560px) { .ctg-hide-s { display: none; } .ctg-section-head { flex-wrap: wrap; } .ctg-composer-foot { flex-direction: column; align-items: stretch; } .ctg-sgrow { grid-template-columns: 1fr; } .ctg-nums { gap: 14px; } }
@media (prefers-reduced-motion: reduce) { .ctg-card { transition: none; } }

/* ================================================================ 5. the sponsor badge
 * On every page, fixed bottom-left (toasts are bottom-right). Small on purpose. */
.ctg-sponsor { position: fixed; left: 14px; bottom: 14px; z-index: 60; display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-card);
  color: var(--ink-soft); font-size: 11.5px; font-weight: 600; text-decoration: none; }
.ctg-sponsor:hover { border-color: var(--wbal); color: var(--ink); }
.ctg-sponsor img { height: 16px; width: auto; display: block; }
@media (max-width: 640px) { .ctg-sponsor { left: 10px; bottom: 10px; padding: 5px 8px 5px 10px; } .ctg-sponsor-k { display: none; } .ctg-sponsor img { height: 14px; } #toast-root { bottom: 52px; } }
@media print { .ctg-sponsor { display: none; } }

/* ================================================================ 6. tags, votes and the list controls */
.ctg-tags { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.ctg-tag { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 9.5px; font-weight: 700; letter-spacing: .01em;
  background: var(--t, transparent); color: #fff; border: 1.5px solid var(--t, var(--ink)); cursor: default; }
.ctg-tag.funnel { background: transparent; color: var(--ink); border-color: var(--ink); }
.ctg-tag.pending { opacity: .55; }
.tbl .ctg-tag, .ctg-tags.sm .ctg-tag { width: 16px; height: 16px; font-size: 7.5px; border-width: 1px; }
.ctg-tag-more { font-size: 11px; color: var(--ink-soft); }
.ctg-tagrow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 4px 0 8px; position: relative; }
.ctg-tag-add { width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed var(--ink-soft); background: var(--card); color: var(--ink-soft); display: inline-grid; place-items: center; padding: 0; }
.ctg-tag-add:hover { border-color: var(--blue); color: var(--blue); }
.ctg-tag-add svg { width: 12px; height: 12px; }
.ctg-tagmenu { position: absolute; top: 30px; left: 0; z-index: 30; width: 260px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-float); padding: 8px; }
.ctg-tagmenu h4 { margin: 6px 6px 4px; font-weight: 600; }
.ctg-tagopt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border: 0; background: none; border-radius: 4px; font-size: 13.5px; color: var(--ink); text-align: left; }
.ctg-tagopt:hover { background: var(--band); }
.ctg-tagopt .ctg-votes { margin-left: auto; }
.ctg-tagopt.mine { background: var(--blue-tint); }
.ctg-score { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); }
.ctg-vote { width: 26px; height: 26px; border-radius: 50%; border: 0; background: none; color: var(--ink-soft); display: inline-grid; place-items: center; padding: 0; }
.ctg-vote:hover { background: var(--band); color: var(--ink); }
.ctg-vote.up.on { color: var(--good-deep); }  .ctg-vote.down.on { color: var(--bad); }
.ctg-vote svg { width: 16px; height: 16px; }
.ctg-score-n { min-width: 24px; text-align: center; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ctg-score-n.pos { color: var(--good-deep); }  .ctg-score-n.neg { color: var(--bad); }
.ctg-scorepill { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ctg-scorepill svg { width: 12px; height: 12px; }
.ctg-scorepill.pos { color: var(--good-deep); }  .ctg-scorepill.neg { color: var(--bad); }
.ctg-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.ctg-controls select { max-width: 200px; }
.ctg-tagfilter { display: flex; gap: 6px; flex-wrap: wrap; }
.ctg-tagchip { cursor: pointer; }
.ctg-tagchip .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; background: var(--t); vertical-align: 0; }
.ctg-tagchip.on { background: var(--blue-tint); color: var(--blue-dark); border-color: rgba(10,98,246,.35); }
.ctg-name-edit { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: text; text-align: left; border-bottom: 1px dashed transparent; }
.ctg-name-edit:hover { border-bottom-color: var(--ink-soft); }
.ctg-name-input { max-width: 220px; }
.ctg-profile-side { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
@media (max-width: 720px) { .ctg-profile-side { align-items: flex-start; } .ctg-tagmenu { left: auto; right: 0; } }

/* ================================================================ 7. the rest of the ctg- layer */

/* ---------- shell ---------- */
/* the wordmark is shown 28 px tall, 22 px on a phone */
.wordmark img { height: 28px; }
.user-chip .avatar { width: 24px; height: 24px; flex-basis: 24px; }
.footer-inner p + p { margin-top: 6px; }
.footer-inner a { color: var(--blue-dark); font-weight: 600; }
.footer-inner a:hover { text-decoration: underline; }
/* the badge sits over the bottom-left corner: the footer ends above it at every width */
.footer-inner { padding-bottom: 56px; }
@media (max-width: 640px) { .wordmark img { height: 22px; } .ctg-nav { margin-left: 0; } .ctg-nav a { padding: 6px 8px; } }
.check-row input { flex: 0 0 auto; }
/* header buttons keep their words on one line; on a phone the group wraps under the wordmark instead */
.header-right .btn { white-space: nowrap; }
@media (max-width: 640px) { .header-right { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; } }
/* logged in, the header holds more than fits beside the wordmark below about 900 px: the right-hand group drops to a
   second row instead of pushing Log out off the screen, and a header that tall scrolls away with the page */
.header-inner { flex-wrap: wrap; row-gap: 8px; }
@media (max-width: 900px) { #header { position: static; } }
.ctg-login { text-align: center; }
.ctg-login img { display: block; width: 72px; height: 72px; margin: 4px auto 12px; }
.ctg-login .btn { margin: 4px 0 10px; }
.ctg-sgrow { margin-bottom: 10px; }
body.sl .modal textarea.ctg-text { font-family: var(--font-body); font-size: 14px; min-height: 72px; }

/* ---------- home ---------- */
.ctg-home .sl-lookup + .hint { margin: 8px 0 0; }
.ctg-tagchip { background: var(--card); border-color: var(--line); color: var(--ink); }
/* these chips are buttons: a little more to press than a status chip */
body.sl .ctg-tagchip { padding: 3px 10px; font-size: 12px; }
.ctg-id { align-items: flex-start; }
.ctg-id > * { max-width: 100%; }
/* the owner's name is a button: it takes font: inherit, so the weights are said again */
.ctg-name.ctg-name-edit { font-weight: 700; font-size: 15px; }
.ctg-rowname.ctg-name-edit { font-weight: 600; }
/* a stale or never-scanned guru says so where its figures would be */
.ctg-status { font-size: 13px; color: var(--ink-soft); padding: 6px 0 2px; }
/* three things share the foot of a card: on a narrow card the date takes a line of its own, whole */
.ctg-foot { flex-wrap: wrap; align-self: end; }
/* cards in one row are as tall as the tallest: the spare height goes above the foot, not between the lines */
.ctg-card { grid-template-rows: auto auto auto 1fr; }
.ctg-foot .tiny { white-space: nowrap; }
.ctg-grid + .pager { padding-top: 12px; }
.ctg-updated { margin: 12px 0 0; }

/* ---------- all sellers ---------- */
.ctg-explore .tbl-wrap, .ctg-admin .tbl-wrap { max-height: none; }
.ctg-explore .toolbar .right { flex: 1; justify-content: flex-end; }
@media (max-width: 720px) { .ctg-explore .toolbar .right { flex: 1 1 100%; justify-content: flex-start; } }
/* on a phone the Seller cell wraps (name, ID, glyphs and tags stack), so the profit beside it stays on the screen */
@media (max-width: 720px) { .ctg-explore .tbl td:nth-child(3) { white-space: normal; overflow-wrap: anywhere; min-width: 130px; } }
.tbl .tiny.warn { color: var(--warn-deep); }
.tbl .ctg-tags { vertical-align: middle; flex-wrap: nowrap; }
.ctg-open { display: inline-grid; place-items: center; vertical-align: middle; color: var(--ink-soft); }
.ctg-open:hover { color: var(--blue-dark); }

/* ---------- a seller's page ---------- */
.row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .row-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .row-3 { grid-template-columns: 1fr; } }
/* the scan buttons are longer than the row on most screens: when they wrap they keep to the right, except on a phone */
.toolbar .right { margin-left: auto; }
@media (max-width: 720px) { .toolbar .right { margin-left: 0; } }
.ctg-profile { margin-bottom: 16px; }
/* a store name with no spaces in it breaks rather than run out of the card */
.ctg-alias > span:first-child { min-width: 0; overflow-wrap: anywhere; }
/* the score and the four minis share the side column: below 1100 px it drops under the name and runs as a row */
@media (max-width: 1100px) {
  .ctg-profile-side { grid-column: 1 / -1; flex-direction: row; align-items: center; flex-wrap: wrap; }
  .ctg-profile-side .ctg-profile-minis { flex: 1 1 420px; }
}
@media (max-width: 720px) {
  .ctg-profile-side { flex-direction: column; align-items: flex-start; }
  .ctg-profile-side .ctg-profile-minis { flex: none; width: 100%; }
}
.ctg-profile .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ctg-meta { color: var(--ink-soft); font-size: 13px; line-height: 1.6; margin: 10px 0 0; overflow-wrap: anywhere; }
.ctg-social-btns + .ctg-meta { margin-top: 12px; }
.ctg-hidden-note { align-self: center; color: var(--ink-soft); }
.ctg-pending p { margin: 0 auto 10px; max-width: 46ch; color: var(--ink-soft); }
.ctg-pending .btn { margin-top: 4px; white-space: normal; }
.ctg-tagopt:disabled { cursor: default; color: var(--ink); }
.ctg-tagopt .ctg-tag { flex: 0 0 22px; }
.ctg-tagopt small { display: block; color: var(--ink-soft); font-size: 11.5px; }
.ctg-votes svg { width: 11px; height: 11px; flex: 0 0 11px; margin-right: 3px; vertical-align: -1px; }

/* ---------- socials and comments ---------- */
.ctg-link .tiny + .tiny { margin-left: 0; }
.ctg-link .ctg-votes { margin-left: auto; }
.ctg-link .btn { padding: 2px 8px; font-size: 12.5px; }
/* a long handle or display name gives way before the count and the buttons beside it do; on a phone the glyph alone names the site */
.ctg-link a, .ctg-cname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .ctg-link .mono { display: none; } }
.sl-card-body h4.tiny { margin: 14px 0 2px; font-weight: 600; }
.ctg-suggest + .hint { margin: 10px 0 0; }
.ctg-terms { margin: 8px 0 0; }
.ctg-cmeta .avatar { width: 22px; height: 22px; flex-basis: 22px; }
/* a comment of your own has no Report button, so Delete takes its place at the right */
.ctg-cmeta .tiny + .ctg-cdel { margin-left: auto; }
#cm-more { margin-top: 8px; }

/* ---------- admin ---------- */
.ctg-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 16px; }
.ctg-tiles .card { padding: 10px 14px; margin: 0; }
.ctg-tiles b { display: block; font-size: 19px; font-variant-numeric: tabular-nums; }
.ctg-admin .admin-item { padding: 14px 16px; }
.ctg-admin .admin-item.done { opacity: .6; }
.ctg-admin .admin-controls:first-child { margin-top: 0; }
/* the Gurus table has eleven columns: it takes the whole width of the page, and its chips and buttons may wrap */
.ctg-admin.wide { max-width: none; }
.ctg-admin .tbl td { white-space: normal; }
.ctg-admin .tbl td.mono, .ctg-admin .tbl td.num { white-space: nowrap; }
.ctg-admin .tbl .admin-controls { margin-top: 0; gap: 6px; }
.ctg-admin .tbl .btn-sm { padding: 3px 8px; font-size: 12.5px; white-space: nowrap; }
.ctg-admin .ctg-cbody { margin: 8px 0 0; }
.ctg-reason { margin: 4px 0 0; }
.ctg-h { margin: 24px 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.ctg-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.ctg-filter .input-sm { max-width: 240px; }
.ctg-filter .check-row { padding: 0 2px; font-size: 13.5px; }
.ctg-userlink { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--blue-dark); }
.ctg-userlink:hover { text-decoration: underline; }
.tbl td.ctg-detail { white-space: normal; max-width: 360px; overflow-wrap: anywhere; }
.tbl .ctg-link { border-bottom: 0; padding: 2px 0; gap: 6px; }
.ctg-usertrail { max-height: 300px; margin-top: 12px; }
.ctg-pre { margin: 6px 0 0; font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-soft); }
.ctg-setting { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ctg-setting:first-child { padding-top: 0; }
.ctg-setting:last-child { border-bottom: 0; padding-bottom: 0; }
.ctg-setting .admin-controls { margin-top: 0; }
.ctg-setting .ctg-setting-in { width: 260px; max-width: 100%; }
.ctg-setting select.input-sm { width: auto; }
/* what the profit rests on, said once under the header of a dashboard and of the sellers table */
.ctg-basis { margin: 0 2px 12px; color: var(--ink-soft); }
.ctg-head .ctg-basis { margin: 6px 0 0; }
.ctg-basis[hidden] { display: none; }
button.link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; cursor: pointer; }
/* the sponsor's one-time note: the same modal as every other prompt, centred, one line that carries it */
.ctg-promo { text-align: center; padding: 6px 0 2px; }
.ctg-promo img { height: 24px; width: auto; display: block; margin: 0 auto 14px; }
.ctg-promo-lead { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 0 8px; }
.ctg-promo p { max-width: 44ch; margin-left: auto; margin-right: auto; }
.ctg-promo .btn { display: inline-flex; margin-top: 6px; }