/* Codes-Reduc.com — Site styles */

/* ─── Layout primitives ─────────────────────────────────────────── */
.cr-page { background: #000; min-height: 100vh; display: flex; flex-direction: column; color: #fff; }
.cr-wrap { max-width: 1180px; margin: 0 auto; width: 100%; padding: 0 28px; }

.cr-hr   { height: 1px; background: var(--cr-line); border: 0; }
.cr-grow { flex: 1; }

/* ─── Header / NavBar ───────────────────────────────────────────── */
.cr-nav {
  padding: 14px 28px; display: flex; align-items: center; gap: 28px;
  position: sticky; top: 0; z-index: 50; background: #000;
  border-bottom: 1px solid var(--cr-line);
}
.cr-logo {
  display: inline-flex; align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.cr-logo img { display: block; height: 38px; width: auto; }
.cr-logo--sm img { height: 28px; }
.cr-logo:focus-visible { outline: 2px solid var(--cr-mint); outline-offset: 3px; border-radius: 8px; }

.cr-nav__links { display: flex; gap: 4px; margin-left: 8px; }
.cr-nav__links a {
  padding: 8px 14px; border-radius: 8px;
  font-size: 14px; font-weight: 500; cursor: pointer;
  color: rgba(255,255,255,.65);
  display: inline-flex; align-items: center; gap: 4px;
}
.cr-nav__links a:hover     { color: #fff; }
.cr-nav__links a.is-active { color: #fff; }
.cr-nav__links .caret      { font-size: 10px; opacity: .5; }

.cr-nav__search {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,255,255,.06); border: 1px solid var(--cr-line);
  color: #fff; cursor: pointer; font-size: 15px;
}
.cr-nav__cta {
  background: var(--cr-mint); color: #000; border: 0;
  padding: 10px 18px; border-radius: 10px;
  font-weight: 600; font-size: 14px; cursor: pointer;
}
.cr-nav__user {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 6px; border-radius: 999px;
  background: rgba(255,255,255,.04); border: 1px solid var(--cr-line);
  color: #fff; text-decoration: none;
}
.cr-nav__user:hover { background: rgba(255,255,255,.08); }
.cr-nav__user-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--cr-mint); color: #000;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px;
}
.cr-nav__user-name { font-size: 13px; font-weight: 500; max-width: 140px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── Footer ────────────────────────────────────────────────────── */
.cr-footer {
  border-top: 1px solid var(--cr-line); padding: 48px 28px 28px;
  color: var(--cr-fg-dim); font-size: 13px; background: #000; margin-top: auto;
}
.cr-footer__grid {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 40px;
}
.cr-footer__intro p { margin: 0; line-height: 1.55; max-width: 320px; }
.cr-footer__col h4 { color: #fff; font-weight: 600; margin: 0 0 12px; font-size: 13px; }
.cr-footer__col a  { display: block; padding: 4px 0; cursor: pointer; }
.cr-footer__col a:hover { color: #fff; }
.cr-footer__bottom {
  max-width: 1180px; margin: 36px auto 0; padding-top: 22px;
  border-top: 1px solid var(--cr-line);
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px; color: var(--cr-fg-muted);
  letter-spacing: .04em; text-transform: uppercase;
}

/* ─── Buttons ───────────────────────────────────────────────────── */
.cr-btn {
  appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: 600;
  border-radius: 10px; transition: transform .08s, background .12s, color .12s;
  white-space: nowrap;
}
.cr-btn:active { transform: translateY(1px); }
.cr-btn--mint  { background: var(--cr-mint); color: #000; padding: 12px 18px; font-size: 14px; }
.cr-btn--mint:hover { background: #38e3bf; }
.cr-btn--white { background: #fff; color: #000; padding: 12px 18px; font-size: 14px; }
.cr-btn--ghost {
  background: transparent; color: #fff; border: 1px solid var(--cr-line-strong);
  padding: 11px 17px; font-size: 14px;
}
.cr-btn--ghost:hover { background: rgba(255,255,255,.04); }
.cr-btn--outline-mint {
  background: transparent; border: 1.5px solid var(--cr-mint); color: var(--cr-mint);
  padding: 12px 18px; font-size: 14px;
}
.cr-btn--sm   { padding: 8px 12px; font-size: 12.5px; }
.cr-btn--xs   { padding: 5px 9px;  font-size: 11.5px; border-radius: 6px; }

/* ─── Pills ─────────────────────────────────────────────────────── */
.cr-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
  background: var(--cr-mint-bg); border: 1px solid var(--cr-mint-border);
  color: var(--cr-mint);
}
.cr-pill--warn { background: rgba(245,200,67,.10); border-color: rgba(245,200,67,.30); color: var(--cr-amber); }
.cr-pill--star { background: rgba(255,232,0,.12); border-color: rgba(255,232,0,.30); color: #FFE800; }
.cr-pill--bad  { background: rgba(255,107,107,.10); border-color: rgba(255,107,107,.30); color: var(--cr-coral); }
.cr-pill--dim  { background: rgba(255,255,255,.04);  border-color: var(--cr-line);             color: var(--cr-fg-muted); }

/* ─── Eyebrow & crumbs ──────────────────────────────────────────── */
.cr-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  color: var(--cr-mint); margin-bottom: 18px; text-transform: uppercase;
}
.cr-crumbs {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--cr-fg-muted);
  margin-bottom: 22px; letter-spacing: .06em;
}
.cr-crumbs a { cursor: pointer; }
.cr-crumbs a:hover { color: #fff; }
.cr-crumbs .sep { color: rgba(255,255,255,.20); margin: 0 8px; }
.cr-crumbs .last { color: #fff; }

/* ─── Merchant logo (real img with initial-disc fallback) ──────── */
.cr-mlogo {
  display: inline-flex; align-items: center; justify-content: center;
  background: #000; color: #fff;
  font-weight: 800; letter-spacing: -.02em;
  font-family: var(--font-ui);
  border-radius: 10px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.cr-mlogo__letter {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 0;
}
.cr-mlogo__img {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
}

/* ─── Success bar + vote chips ──────────────────────────────────── */
.cr-success {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--cr-fg-muted); font-family: var(--font-mono);
}
.cr-success__pct { font-variant-numeric: tabular-nums; color: #fff; }
.cr-success__bar { width: 80px; height: 3px; background: rgba(255,255,255,.06); border-radius: 2px; overflow: hidden; }
.cr-success__bar > i { display: block; height: 100%; background: var(--cr-mint); }
.cr-success--warn .cr-success__bar > i { background: var(--cr-amber); }
.cr-success--bad  .cr-success__bar > i { background: var(--cr-coral); }
.cr-success__label { text-transform: uppercase; letter-spacing: .08em; }
.cr-success--compact .cr-success__bar { width: 50px; }
.cr-success--compact .cr-success__label { display: none; }

.cr-votes {
  display: inline-flex; gap: 8px; font-size: 11.5px;
  color: var(--cr-fg-muted); align-items: center; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.cr-votes__up   { color: var(--cr-mint); }
.cr-votes__down { color: rgba(255,255,255,.3); }
.cr-votes__n    { color: rgba(255,255,255,.85); }

/* ─── Code chip ─────────────────────────────────────────────────── */
.cr-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 11px;
  border: 1.5px dashed rgba(255,255,255,.25);
  background: rgba(255,255,255,.04);
  border-radius: 8px;
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
  letter-spacing: .04em; color: #fff;
  transition: all .18s;
}
.cr-chip--sm { padding: 4px 8px; font-size: 11px; }
.cr-chip--lg { padding: 10px 14px; font-size: 15px; }
.cr-chip.is-copied {
  border-color: var(--cr-mint); background: rgba(0,212,168,.08); color: var(--cr-mint);
}

/* ─── Coupon card ───────────────────────────────────────────────── */
.cr-coupon {
  background: #2F3032; border: 1px solid var(--cr-line);
  border-radius: 14px; padding: 16px;
  display: flex; gap: 16px; position: relative; cursor: pointer;
  text-decoration: none; color: inherit;
  align-items: stretch;
}
.cr-coupon:hover { border-color: var(--cr-line-strong); }

/* Discount value box (left). Replaces the merchant logo slot. */
.cr-coupon__discount {
  flex: 0 0 96px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 14px 8px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--cr-line);
  border-radius: 12px;
  text-align: center;
}
.cr-coupon__discount-v {
  font-weight: 800; font-size: 26px; line-height: 1; color: var(--cr-mint);
  letter-spacing: -.01em; word-break: break-word;
}
.cr-coupon__discount-l {
  margin-top: 8px;
  font-family: var(--font-mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--cr-fg-muted); font-weight: 600;
}
.cr-coupon__discount-pills {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: 10px; align-items: center;
}

.cr-coupon__side  { display: flex; flex-direction: column; align-items: center; gap: 8px; } /* legacy, kept for safety */
.cr-coupon__main  { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.cr-coupon__meta  {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--cr-fg-muted); letter-spacing: .06em;
  text-transform: uppercase;
}
.cr-coupon__meta .name { color: #fff; font-weight: 600; }
.cr-coupon__meta .dot  { color: rgba(255,255,255,.20); }
.cr-coupon__meta img   { border-radius: 4px; }
.cr-coupon__title { margin: 0 0 6px; font-size: 16px; font-weight: 700; line-height: 1.3; color: #fff; letter-spacing: -.005em; }
.cr-coupon__desc  { margin: 0 0 12px; font-size: 13px; color: var(--cr-fg-dim); line-height: 1.5; max-width: 540px; }
.cr-coupon__foot  { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cr-coupon__used  { font-size: 11.5px; color: var(--cr-fg-muted); font-family: var(--font-mono); }
.cr-coupon__used .n { color: #fff; }
.cr-coupon__right {
  display: flex; flex-direction: column; justify-content: space-between;
  align-items: flex-end; gap: 10px;
  min-width: 140px;
}
.cr-coupon__expires {
  font-size: 11px; color: var(--cr-fg-muted);
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em;
}
.cr-coupon__expires.is-soon {
  color: var(--cr-amber); padding: 3px 10px; background: rgba(245,200,67,.12);
  border-radius: 4px; font-weight: 600;
}
.cr-coupon__btn {
  background: var(--cr-mint); color: #000; border: 0;
  padding: 14px 22px; border-radius: 10px;
  font-weight: 700; font-size: 14px; cursor: pointer;
  white-space: nowrap;
}
.cr-coupon__btn:hover { filter: brightness(1.05); }
.cr-coupon__chip { display: inline-flex; }
.cr-coupon__chip[hidden] { display: none; }

/* "Soumis par X" badge in the meta row. Staff and user variants share
   layout; tone hints at provenance without screaming. */
.cr-coupon__submitter {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; color: var(--cr-fg-muted);
}
.cr-coupon__submitter.is-staff { color: var(--cr-mint); }
.cr-coupon__submitter.is-user  { color: var(--cr-fg-dim); }
.cr-coupon__submitter.is-user::before {
  content: '👤'; font-size: 10px; line-height: 1;
}
.cr-coupon__submitter.is-staff::before {
  content: '◆'; font-size: 9px; line-height: 1;
}

/* "Détails" expandable section under the foot row. Button is a tiny
   ghost trigger; the panel is a tinted box that mirrors cr-md typography. */
.cr-coupon__details-btn {
  margin-left: auto;
  background: transparent; border: 1px solid var(--cr-line);
  color: var(--cr-fg-dim); font-size: 11.5px; font-weight: 600;
  padding: 4px 10px; border-radius: 6px; cursor: pointer;
  font-family: inherit;
}
.cr-coupon__details-btn:hover { color: #fff; border-color: var(--cr-line-strong); }
.cr-coupon__details-btn[aria-expanded="true"] { background: rgba(255,255,255,.04); color: #fff; }
.cr-coupon__details {
  margin-top: 12px; padding: 12px 14px;
  background: rgba(255,255,255,.025); border: 1px solid var(--cr-line);
  border-radius: 8px;
  font-size: 13px; color: var(--cr-fg-dim); line-height: 1.55;
}
.cr-coupon__details > *:first-child { margin-top: 0; }
.cr-coupon__details > *:last-child  { margin-bottom: 0; }
.cr-coupon__details[hidden] { display: none; }

/* "Voir les vérifications" panel — same tinted box as Détails, but
   with a feed of verification rows. Lazy-loaded from
   /api/code-verifications on first open. */
.cr-coupon__verif {
  margin-top: 12px; padding: 14px;
  background: rgba(255,255,255,.025); border: 1px solid var(--cr-line);
  border-radius: 8px;
}
.cr-coupon__verif[hidden] { display: none; }
.cr-verif__h {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cr-mint); font-weight: 600;
  margin-bottom: 10px;
}
.cr-verif__list { display: flex; flex-direction: column; gap: 8px; }
.cr-verif__row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; background: rgba(255,255,255,.02);
  border: 1px solid var(--cr-line); border-radius: 6px;
}
.cr-verif__avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--cr-mint-bg); color: var(--cr-mint);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; flex-shrink: 0;
}
.cr-verif__body { flex: 1; min-width: 0; }
.cr-verif__line { font-size: 13px; color: var(--cr-fg); line-height: 1.3; }
.cr-verif__line b { color: #fff; font-weight: 600; }
.cr-verif__when { font-size: 11.5px; color: var(--cr-fg-muted); margin-top: 2px; }
.cr-verif__badge {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em;
  color: var(--cr-mint); padding: 3px 8px; border-radius: 999px;
  background: var(--cr-mint-bg); border: 1px solid var(--cr-mint-border);
}
.cr-verif__empty, .cr-verif__loading {
  font-size: 12.5px; color: var(--cr-fg-muted); padding: 8px 4px;
}

/* Expired codes still render but grey out: button is dimmed, content
   loses contrast. Click still works — we want users to try them anyway
   and the data signal helps moderation. */
.cr-coupon.is-expired { opacity: .55; }
.cr-coupon.is-expired:hover { opacity: .8; }
.cr-coupon.is-expired .cr-coupon__btn {
  background: rgba(255,255,255,.08); color: var(--cr-fg-dim);
}
.cr-coupon.is-expired .cr-coupon__expires { color: var(--cr-coral); }

/* ─── Generic panels ────────────────────────────────────────────── */
.cr-panel {
  background: var(--cr-panel); border: 1px solid var(--cr-line);
  border-radius: 12px; padding: 20px;
}
.cr-panel--mint {
  background: var(--cr-panel-2); border: 1px solid var(--cr-mint-border);
  border-radius: 12px; padding: 20px;
}

/* ─── Inputs ────────────────────────────────────────────────────── */
.cr-input {
  width: 100%; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--cr-line-strong);
  background: rgba(0,0,0,.4); color: #fff;
  font-size: 13px; outline: none; font-family: inherit;
}
.cr-input::placeholder { color: var(--cr-fg-muted); }
.cr-select {
  appearance: none; border: 1px solid var(--cr-line-strong); border-radius: 8px;
  padding: 6px 28px 6px 12px; background: var(--cr-panel);
  font-size: 12px; cursor: pointer; color: #fff; font-family: inherit;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='rgba(255,255,255,.5)' d='M0 0h10L5 6z'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
}

/* ─── Home hero ─────────────────────────────────────────────────── */
.cr-hero {
  padding: 72px 28px 36px; position: relative;
}
.cr-hero__grid {
  position: absolute; inset: 0; opacity: .35; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
}
.cr-hero__inner { max-width: 1080px; margin: 0 auto; text-align: center; position: relative; }
.cr-hero__badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px; border-radius: 999px;
  background: rgba(255,255,255,.04); border: 1px solid var(--cr-line);
  font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.7);
  margin-bottom: 38px;
}
.cr-hero__badge .pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--cr-mint);
  box-shadow: 0 0 0 4px rgba(0,212,168,.18);
}
.cr-hero__badge .mint { color: var(--cr-mint); }
.cr-hero__badge .strong { color: #fff; }
.cr-hero__title {
  font-family: var(--font-ui); font-weight: 800;
  font-size: clamp(56px, 8vw, 112px); line-height: .98;
  margin: 0 0 26px; letter-spacing: -.035em; color: #fff;
}
.cr-hero__lede {
  font-size: 17px; line-height: 1.55; color: rgba(255,255,255,.62);
  max-width: 620px; margin: 0 auto 40px;
}
.cr-hero__search {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.04); border: 1px solid var(--cr-line);
  border-radius: 14px; padding: 14px 18px;
  max-width: 620px; margin: 0 auto;
}
.cr-hero__search input {
  flex: 1; border: 0; background: transparent; outline: none;
  font: inherit; font-size: 15px; color: #fff;
}
.cr-hero__search .icon { color: rgba(255,255,255,.4); font-size: 16px; }
.cr-hero__popular {
  margin-top: 18px; font-size: 12.5px;
  color: rgba(255,255,255,.45); font-family: var(--font-mono);
}
.cr-hero__popular a { color: rgba(255,255,255,.65); cursor: pointer; }
.cr-hero__popular a:hover { color: #fff; }
.cr-hero__popular .sep { color: rgba(255,255,255,.2); }
.cr-hero__popular .label { color: rgba(255,255,255,.35); }

/* ─── Stats strip ───────────────────────────────────────────────── */
.cr-stats {
  padding: 40px 28px 80px;
  border-top: 1px solid var(--cr-line);
  border-bottom: 1px solid var(--cr-line);
}
.cr-stats__grid {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.cr-stat { text-align: center; }
.cr-stat__v {
  font-weight: 800; font-size: 56px; line-height: 1; margin-bottom: 12px;
  letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums;
}
.cr-stat__v.is-mint { color: var(--cr-mint); }
.cr-stat__l {
  font-family: var(--font-mono); font-size: 11.5px;
  color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .1em;
}

/* ─── Verification section ──────────────────────────────────────── */
.cr-verif        { padding: 80px 28px; }
.cr-verif__grid  {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 56;
  gap: 56px; align-items: flex-start;
}
.cr-verif h2 {
  font-weight: 700; font-size: 44px; line-height: 1.05; letter-spacing: -.02em;
  margin: 0 0 22px; color: #fff;
}
.cr-verif p.lede {
  font-size: 15.5px; color: rgba(255,255,255,.6); line-height: 1.6;
  margin: 0 0 32px; max-width: 460px;
}
.cr-verif__steps { display: flex; flex-direction: column; gap: 10px; }
.cr-step {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px; border-radius: 12px;
  background: rgba(255,255,255,.025); border: 1px solid var(--cr-line);
  position: relative;
}
.cr-step__ic {
  width: 36px; height: 36px; border-radius: 8px;
  background: rgba(0,212,168,.10); color: var(--cr-mint);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 16px;
}
.cr-step__t { font-weight: 600; font-size: 14.5px; color: #fff; margin-bottom: 4px; }
.cr-step__d { font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.5; }
.cr-step__tag {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--cr-mint);
  align-self: flex-start; text-transform: uppercase; letter-spacing: .1em;
  display: inline-flex; align-items: center; gap: 5px;
}
.cr-step__tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cr-mint); }

.cr-verif a.more {
  display: inline-block; margin-top: 28px;
  color: #fff; font-size: 14px; font-weight: 500; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.3); padding-bottom: 2px;
}

/* ─── Live feed (terminal-style) ────────────────────────────────── */
.cr-feed {
  background: var(--cr-panel); border: 1px solid var(--cr-line);
  border-radius: 14px; overflow: hidden;
  font-family: var(--font-mono); font-size: 12px;
  box-shadow: 0 0 0 1px rgba(0,212,168,.04), 0 24px 56px rgba(0,212,168,.04);
}
.cr-feed__head {
  padding: 14px 18px; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--cr-line);
}
.cr-feed__dots { display: flex; gap: 5px; }
.cr-feed__dots span { width: 9px; height: 9px; border-radius: 50%; background: #3a3a3a; }
.cr-feed__title {
  flex: 1; text-align: center; color: rgba(255,255,255,.5);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
.cr-feed__live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; color: var(--cr-mint);
  letter-spacing: .1em; text-transform: uppercase;
}
.cr-feed__live .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--cr-mint);
  animation: crBlink 1.5s infinite;
}
.cr-feed__body { padding: 8px 0; }
.cr-feed__row {
  padding: 10px 18px; display: flex; align-items: flex-start; gap: 10px;
}
.cr-feed__row .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--cr-mint);
  flex-shrink: 0; margin-top: 5px;
}
.cr-feed__row .dot.bad { background: var(--cr-coral); }
.cr-feed__row .dot.new { background: var(--cr-amber); }
.cr-feed__row .who { color: #fff; font-weight: 600; }
.cr-feed__row .time { color: rgba(255,255,255,.4); font-size: 11px; }
.cr-feed__row .verb { color: rgba(255,255,255,.5); font-size: 11.5px; margin-top: 2px; }
.cr-feed__row .verb .code { color: var(--cr-info); }
.cr-feed__row .verb .tag  { color: var(--cr-mint); }
.cr-feed__row .verb .tag.bad { color: var(--cr-coral); }
.cr-feed__row .user { color: rgba(255,255,255,.35); font-size: 11px; margin-top: 1px; }
.cr-feed__top { display: flex; align-items: baseline; gap: 8px; flex: 1; }
.cr-feed__top .grow { flex: 1; }
.cr-feed__col { flex: 1; min-width: 0; }
.cr-feed__foot {
  padding: 12px 18px; border-top: 1px solid var(--cr-line);
  text-align: center; color: rgba(255,255,255,.4); font-size: 11px;
}

/* ─── Store directory (home) ────────────────────────────────────── */
.cr-section { padding: 80px 28px; }
.cr-section__inner { max-width: 1180px; margin: 0 auto; }
.cr-section__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 28px; flex-wrap: wrap; gap: 16px;
}
.cr-section__head h2 {
  font-weight: 700; font-size: 44px; line-height: 1.05;
  letter-spacing: -.02em; margin: 0; color: #fff;
}
.cr-section__head h2 .dim { color: rgba(255,255,255,.5); }
.cr-section__links { display: flex; gap: 22px; font-size: 14px; color: var(--cr-mint); }
.cr-section__links a { cursor: pointer; }

.cr-tabs { display: flex; gap: 6px; margin-bottom: 22px; flex-wrap: wrap; }
.cr-tab {
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--cr-line-strong);
  color: rgba(255,255,255,.75); font-size: 13px; font-weight: 500;
  font-family: inherit;
}
.cr-tab.is-active { background: var(--cr-mint); border-color: var(--cr-mint); color: #000; }

.cr-store-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.cr-store-card {
  background: var(--cr-panel); border: 1px solid var(--cr-line);
  border-radius: 14px; padding: 20px;
  display: flex; flex-direction: column; gap: 14px; cursor: pointer;
  text-decoration: none; color: inherit;
}
.cr-store-card:hover { border-color: var(--cr-line-strong); }
.cr-store-card__head { display: flex; align-items: center; gap: 12px; }
.cr-store-card__head .name { font-size: 16px; font-weight: 600; color: #fff; }
.cr-store-card__codes {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: rgba(255,255,255,.6); margin-bottom: 12px;
}
.cr-store-card__codes .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--cr-mint);
}
.cr-store-card__bar {
  height: 3px; background: rgba(255,255,255,.06);
  border-radius: 2px; overflow: hidden; margin-bottom: 8px;
}
.cr-store-card__bar > i { display: block; height: 100%; background: var(--cr-mint); }
.cr-store-card__health {
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .06em;
}
.cr-store-card__health b { color: #fff; font-weight: 600; }

/* ─── Extension pitch (home) ────────────────────────────────────── */
.cr-pitch {
  background: var(--cr-panel); border: 1px solid var(--cr-line);
  border-radius: 16px; padding: 36px;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center;
}
.cr-pitch h3 { font-size: 28px; font-weight: 700; color: #fff; margin: 18px 0 14px; letter-spacing: -.01em; }
.cr-pitch p  { font-size: 15px; color: rgba(255,255,255,.6); line-height: 1.55; margin: 0 0 26px; max-width: 420px; }
.cr-pitch__platforms {
  margin-top: 20px; font-family: var(--font-mono); font-size: 10.5px;
  color: rgba(255,255,255,.4); letter-spacing: .12em; text-transform: uppercase;
}
.cr-pitch__demo {
  background: #000; border: 1px solid var(--cr-line-strong);
  border-radius: 12px; padding: 18px;
  font-family: var(--font-mono); font-size: 12.5px;
}
.cr-pitch__demo .head {
  display: flex; justify-content: space-between; margin-bottom: 14px;
  color: rgba(255,255,255,.6);
}
.cr-pitch__demo .head b { color: #fff; }
.cr-pitch__demo .head .url { color: var(--cr-mint); }
.cr-pitch__demo .row {
  padding: 12px 14px; margin-bottom: 8px;
  background: rgba(255,255,255,.025); border: 1px solid var(--cr-line);
  border-radius: 8px; display: flex; align-items: center; gap: 10px;
}
.cr-pitch__demo .row.is-best {
  background: rgba(0,212,168,.06); border-color: var(--cr-mint-border);
}
.cr-pitch__demo .row .code  { flex: 1; color: #fff; font-weight: 600; letter-spacing: .04em; }
.cr-pitch__demo .row .score { color: var(--cr-mint); font-size: 11px; }
.cr-pitch__demo .row .save  { color: #fff; }
.cr-pitch__demo button {
  width: 100%; margin-top: 6px; padding: 12px;
  background: transparent; border: 1.5px solid var(--cr-mint); color: var(--cr-mint);
  border-radius: 8px; font-weight: 600; font-size: 13px; cursor: pointer;
  font-family: inherit; letter-spacing: .02em;
}

/* ─── Search results ────────────────────────────────────────────── */
.cr-search-head {
  padding: 40px 28px 24px;
}
.cr-search-head h1 {
  font-weight: 700; font-size: 52px; line-height: 1.05; letter-spacing: -.025em;
  margin: 0 0 10px; color: #fff;
}
.cr-search-head h1 .dim { color: rgba(255,255,255,.4); }
.cr-search-head .meta {
  margin: 0; font-size: 14px; color: var(--cr-fg-muted);
  font-family: var(--font-mono); letter-spacing: .04em;
}
.cr-search-body {
  max-width: 1180px; margin: 0 auto; width: 100%;
  padding: 12px 28px 56px;
  display: grid; grid-template-columns: 260px 1fr; gap: 32px;
}

.cr-featured {
  background: var(--cr-panel); border: 1px solid var(--cr-line);
  border-radius: 14px; padding: 20px;
  display: flex; gap: 18px; margin-bottom: 20px; align-items: center;
  cursor: pointer;
}
.cr-featured__meta {
  font-family: var(--font-mono); font-size: 12px; color: var(--cr-fg-muted);
  margin-bottom: 8px; letter-spacing: .04em;
}
.cr-featured__stats {
  display: flex; gap: 18px; font-size: 12.5px; color: var(--cr-fg-dim);
  align-items: center; font-family: var(--font-mono);
}
.cr-featured__stats b { color: #fff; font-weight: 600; }
.cr-featured__stats .sep { color: rgba(255,255,255,.20); }
.cr-featured__stats .star { color: #fff; }
.cr-featured__stats .grade { color: var(--cr-mint); font-weight: 600; }

.cr-sort {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; font-size: 13px; font-family: var(--font-mono);
}
.cr-sort .count { color: var(--cr-fg-muted); letter-spacing: .04em; }
.cr-sort .row { display: flex; align-items: center; gap: 10px; }
.cr-sort .row span { color: var(--cr-fg-muted); }

.cr-filter { position: sticky; top: 78px; font-size: 13.5px; }
.cr-filter__box { background: var(--cr-panel); border: 1px solid var(--cr-line); border-radius: 12px; padding: 4px; }
.cr-filter__section { padding: 12px 14px; }
.cr-filter__head {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-weight: 600; font-size: 11px; color: #fff;
  text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-mono);
}
.cr-filter__head .chev { color: var(--cr-fg-muted); font-size: 11px; transition: transform .15s; }
.cr-filter__section.is-closed .chev { transform: rotate(-90deg); }
.cr-filter__list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.cr-filter__section.is-closed .cr-filter__list { display: none; }
.cr-filter__hr { height: 1px; background: var(--cr-line); margin: 0 10px; }
.cr-filter__check {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 3px 0; font-size: 13px;
}
.cr-filter__check input { display: none; }
.cr-filter__check .box {
  width: 16px; height: 16px; border-radius: 4px;
  border: 1.5px solid var(--cr-line-strong); background: transparent;
  display: flex; align-items: center; justify-content: center;
  color: #000; font-size: 10px; font-weight: 700; flex-shrink: 0;
}
.cr-filter__check input:checked + .box {
  border-color: var(--cr-mint); background: var(--cr-mint);
}
.cr-filter__check input:checked + .box::after { content: '✓'; }
.cr-filter__check .lbl { flex: 1; color: var(--cr-fg-dim); }
.cr-filter__check .n   { font-size: 11px; color: var(--cr-fg-muted); font-family: var(--font-mono); }

.cr-tip {
  margin-top: 16px; padding: 16px;
  background: rgba(0,212,168,.06); border: 1px solid rgba(0,212,168,.20);
  border-radius: 12px;
  font-size: 12.5px; color: var(--cr-fg-dim); line-height: 1.5;
}
.cr-tip__head {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px;
  font-family: var(--font-mono); color: var(--cr-mint);
  letter-spacing: .08em; font-size: 10.5px; text-transform: uppercase;
}
.cr-tip__head .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cr-mint); }

/* ─── Store / merchant page ─────────────────────────────────────── */
.cr-merch-hero { border-bottom: 1px solid var(--cr-line); }
.cr-merch-hero__inner { padding: 40px 28px 0; }
.cr-merch-hero__row {
  display: flex; gap: 28px; align-items: flex-start; margin-bottom: 32px;
}
.cr-merch-hero__col { flex: 1; }
.cr-merch-hero h1 {
  font-weight: 700; font-size: 56px; margin: 0 0 14px;
  letter-spacing: -.025em; line-height: 1.02; color: #fff;
}
.cr-merch-hero p {
  margin: 0 0 18px; font-size: 16px; color: var(--cr-fg-dim);
  line-height: 1.55; max-width: 720px;
}
.cr-merch-hero p b { color: #fff; font-weight: 600; }
.cr-merch-hero__meta {
  display: flex; gap: 18px; font-size: 12.5px; color: var(--cr-fg-dim);
  align-items: center; font-family: var(--font-mono); letter-spacing: .04em;
  flex-wrap: wrap;
}
.cr-merch-hero__meta .star { color: var(--cr-amber); }
.cr-merch-hero__meta b { color: #fff; font-weight: 600; }
.cr-merch-hero__meta .sep { color: rgba(255,255,255,.2); }
.cr-merch-hero__cta { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }

.cr-merch-tabs { display: flex; gap: 0; margin-bottom: -1px; }
.cr-merch-tab {
  padding: 14px 18px; border: 0; background: transparent; cursor: pointer;
  font-size: 13.5px; font-family: inherit; font-weight: 500;
  color: var(--cr-fg-muted); border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  text-decoration: none;
}
.cr-merch-tab:hover { color: var(--cr-fg); }
.cr-merch-tab.is-active { color: #fff; font-weight: 600; border-bottom-color: var(--cr-mint); }
.cr-merch-tab .n {
  color: var(--cr-fg-muted); font-weight: 400; margin-left: 4px;
  font-family: var(--font-mono); font-size: 11.5px;
}
/* Anchored sections targeted by .cr-merch-tabs — keep them clear of the
   sticky nav so the heading is visible after the jump. */
#codes, #histoire, #faq { scroll-margin-top: 80px; }
html { scroll-behavior: smooth; }

.cr-merch-body {
  max-width: 1180px; margin: 0 auto; width: 100%;
  padding: 32px 28px 56px;
  display: grid; grid-template-columns: 1fr 320px; gap: 32px;
}
.cr-merch-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 28px;
}
.cr-mstat {
  padding: 16px 18px; background: var(--cr-panel);
  border: 1px solid var(--cr-line); border-radius: 12px;
}
.cr-mstat__v {
  font-weight: 800; font-size: 30px; color: #fff; line-height: 1;
  letter-spacing: -.025em; font-variant-numeric: tabular-nums;
}
.cr-mstat__v.is-mint { color: var(--cr-mint); }
.cr-mstat__l {
  font-size: 10.5px; color: var(--cr-fg-muted); text-transform: uppercase;
  letter-spacing: .08em; margin-top: 8px; font-family: var(--font-mono);
}
.cr-merch-chips { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }

.cr-guide {
  margin-top: 40px; padding: 28px;
  background: var(--cr-panel); border: 1px solid var(--cr-line); border-radius: 14px;
}
.cr-guide h2 {
  font-weight: 700; font-size: 24px; margin: 0 0 14px;
  letter-spacing: -.01em; color: #fff;
}
.cr-guide p  { margin: 0 0 16px; font-size: 14px; color: var(--cr-fg-dim); line-height: 1.65; }
.cr-guide ul { margin: 0; padding: 0 0 0 20px; font-size: 14px; color: var(--cr-fg-dim); line-height: 1.8; }
.cr-guide ul b { color: #fff; font-weight: 600; }

/* Markdown-rendered content (vendor about/tips/shipping, blog posts, FAQ answers). */
.cr-md { color: var(--cr-fg-dim); font-size: 14px; line-height: 1.7; }
.cr-md > :first-child { margin-top: 0; }
.cr-md > :last-child  { margin-bottom: 0; }
.cr-md p { margin: 0 0 14px; }
.cr-md h2 { font-size: 20px; font-weight: 700; color: #fff; margin: 28px 0 12px; letter-spacing: -.01em; }
.cr-md h3 { font-size: 16px; font-weight: 600; color: #fff; margin: 22px 0 10px; }
.cr-md ul, .cr-md ol { margin: 0 0 14px; padding: 0 0 0 22px; }
.cr-md li { margin: 4px 0; }
.cr-md strong, .cr-md b { color: #fff; font-weight: 600; }
.cr-md a { color: var(--cr-mint); text-decoration: underline; text-underline-offset: 2px; }
.cr-md a:hover { text-decoration: none; }
.cr-md code {
  font-family: var(--font-mono); font-size: 12.5px;
  padding: 1px 6px; border-radius: 4px;
  background: rgba(255,255,255,.06); color: #fff;
}
.cr-md blockquote {
  margin: 0 0 14px; padding: 6px 14px; border-left: 2px solid var(--cr-mint);
  color: var(--cr-fg); background: rgba(255,255,255,.03);
}
.cr-md hr { border: 0; border-top: 1px solid var(--cr-line); margin: 22px 0; }

/* Per-merchant FAQ — collapsible question/answer list. */
.cr-faq__list { display: flex; flex-direction: column; gap: 10px; }
.cr-faq__item {
  border: 1px solid var(--cr-line); border-radius: 12px;
  background: rgba(255,255,255,.02); overflow: hidden;
}
.cr-faq__item summary {
  list-style: none; cursor: pointer; padding: 14px 18px;
  font-size: 14.5px; font-weight: 600; color: #fff;
  display: flex; align-items: center; gap: 10px;
  position: relative;
}
.cr-faq__item summary::-webkit-details-marker { display: none; }
.cr-faq__item summary::after {
  content: '+'; margin-left: auto;
  font-family: var(--font-mono); font-size: 18px; font-weight: 400;
  color: var(--cr-fg-muted); transition: transform .2s ease;
}
.cr-faq__item[open] summary::after { content: '−'; }
.cr-faq__item summary:hover { background: rgba(255,255,255,.03); }
.cr-faq__item > div { padding: 0 18px 16px; border-top: 1px solid var(--cr-line); padding-top: 14px; }

.cr-aside { display: flex; flex-direction: column; gap: 14px; }
.cr-aside__head {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  color: var(--cr-fg-muted); text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: 14px;
}
.cr-aside__head.is-mint { color: var(--cr-mint); }
.cr-aside__grade {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px;
}
.cr-aside__grade .v {
  font-weight: 800; font-size: 56px; color: var(--cr-mint);
  line-height: 1; letter-spacing: -.04em;
}
.cr-aside__grade .l {
  font-size: 11.5px; color: var(--cr-fg-muted);
  font-family: var(--font-mono); letter-spacing: .04em;
}
.cr-aside__rating-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12.5px; padding: 8px 0; border-top: 1px solid var(--cr-line);
}
.cr-aside__rating-row .lbl { color: var(--cr-fg-dim); }
.cr-aside__rating-row .v   { font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
.cr-aside__rating-row .v .star { color: var(--cr-amber); }
.cr-aside__similar-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--cr-line);
  cursor: pointer; text-decoration: none; color: inherit;
}
.cr-aside__similar-row .name { font-size: 13px; font-weight: 600; color: #fff; }
.cr-aside__similar-row .n {
  font-size: 11px; color: var(--cr-fg-muted);
  font-family: var(--font-mono); letter-spacing: .04em; margin-top: 2px;
}
.cr-alert {
  background: var(--cr-panel-2); border: 1px solid var(--cr-mint-border);
  border-radius: 12px; padding: 20px;
}
.cr-alert__head {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  color: var(--cr-mint); text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: 10px;
}
.cr-alert__head .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cr-mint); animation: crBlink 1.5s infinite; }
.cr-alert__body { font-size: 13.5px; line-height: 1.5; margin-bottom: 14px; color: var(--cr-fg-dim); }

/* ─── Coupon detail page ────────────────────────────────────────── */
.cr-coupon-page {
  max-width: 1180px; margin: 0 auto; width: 100%; padding: 32px 28px 56px;
}
.cr-coupon-grid {
  display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start;
}
.cr-coupon-hero {
  background: var(--cr-panel); border: 1px solid var(--cr-line);
  border-radius: 16px; overflow: hidden; position: relative;
}
.cr-coupon-hero__top { padding: 32px; display: flex; gap: 24px; align-items: flex-start; }
.cr-coupon-hero__pills {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.cr-coupon-hero__brand {
  font-size: 12px; color: var(--cr-fg-muted); font-weight: 500;
  font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.cr-coupon-hero h1 {
  font-weight: 700; font-size: 40px; line-height: 1.1;
  margin: 0 0 14px; letter-spacing: -.025em; color: #fff;
}
.cr-coupon-hero p { margin: 0; font-size: 15px; color: var(--cr-fg-dim); line-height: 1.6; max-width: 560px; }
.cr-coupon-hero__reveal {
  padding: 28px 32px;
  background: rgba(0,0,0,.4);
  border-top: 1px solid var(--cr-line);
}
.cr-coupon-hero__foot {
  padding: 18px 32px; display: flex; gap: 24px; align-items: center;
  flex-wrap: wrap; border-top: 1px solid var(--cr-line);
}
.cr-coupon-hero__foot .used { font-size: 11.5px; color: var(--cr-fg-muted); font-family: var(--font-mono); letter-spacing: .04em; }
.cr-coupon-hero__foot .used b { color: #fff; font-weight: 600; }
.cr-coupon-hero__foot .ver  { font-size: 11.5px; color: var(--cr-fg-muted); font-family: var(--font-mono); letter-spacing: .04em; }
.cr-coupon-hero__foot .right { margin-left: auto; }

/* Inline reveal interaction (variant A) */
.cr-reveal {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.cr-reveal__col { flex: 1; min-width: 240px; }
.cr-reveal__label {
  font-size: 11px; color: var(--cr-fg-muted); margin-bottom: 6px;
  font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.cr-reveal__label.is-ok { color: var(--cr-mint); font-weight: 600; }
.cr-reveal__hidden {
  font-family: var(--font-mono); font-size: 26px; font-weight: 700;
  color: rgba(255,255,255,.25); letter-spacing: .08em;
}
.cr-reveal__chip {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 18px;
  border: 2px dashed rgba(255,255,255,.3);
  background: rgba(255,255,255,.04); border-radius: 10px;
  font-family: var(--font-mono); font-size: 24px; font-weight: 700;
  color: #fff; letter-spacing: .08em;
}
.cr-reveal__chip.is-ok {
  border-color: var(--cr-mint); background: rgba(0,212,168,.08);
}
.cr-reveal__btn {
  background: var(--cr-mint); color: #000; border: 0;
  padding: 14px 24px; border-radius: 10px;
  font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.cr-reveal__btn--white { background: #fff; color: #000; }
.cr-reveal__redirect {
  margin-top: 14px; padding: 12px 16px;
  background: rgba(255,255,255,.04); border-radius: 8px;
  border: 1px solid var(--cr-line);
  font-size: 13px; color: var(--cr-fg-dim);
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); letter-spacing: .04em;
}
.cr-reveal__redirect .cnt {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--cr-mint); color: #000;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 700;
}
.cr-reveal__redirect b { color: #fff; font-weight: 600; }
.cr-reveal__redirect button {
  margin-left: auto; border: 0; background: transparent; cursor: pointer;
  font-size: 12px; color: var(--cr-fg-muted); text-decoration: underline;
}

.cr-conditions h3 { margin: 0 0 14px; font-size: 20px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.cr-conditions ul { margin: 0; padding: 0 0 0 20px; font-size: 14px; color: var(--cr-fg-dim); line-height: 1.85; }

.cr-reviews h3 { margin: 0; font-weight: 700; font-size: 22px; color: #fff; letter-spacing: -.01em; }
.cr-review {
  background: var(--cr-panel); border: 1px solid var(--cr-line);
  border-radius: 12px; padding: 16px;
}
.cr-review__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cr-review__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(0,212,168,.12); color: var(--cr-mint);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.cr-review__name { font-size: 13px; font-weight: 600; color: #fff; }
.cr-review__date { font-size: 11px; color: var(--cr-fg-muted); font-family: var(--font-mono); letter-spacing: .04em; margin-top: 2px; }
.cr-review p    { margin: 0 0 12px; font-size: 13.5px; color: var(--cr-fg-dim); line-height: 1.55; }
.cr-review__row { display: flex; gap: 14px; font-size: 11.5px; color: var(--cr-fg-muted); font-family: var(--font-mono); letter-spacing: .04em; }

/* ─── Categories page ───────────────────────────────────────────── */
.cr-cat-hero { padding: 48px 28px 32px; }
.cr-cat-hero h1 {
  font-weight: 700; font-size: 64px; line-height: 1.02;
  letter-spacing: -.03em; margin: 0 0 18px; color: #fff;
}
.cr-cat-hero h1 .dim { color: rgba(255,255,255,.5); }
.cr-cat-hero p {
  margin: 0; font-size: 16px; color: var(--cr-fg-dim);
  max-width: 620px; line-height: 1.55;
}
.cr-cat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.cr-cat-card {
  display: block; padding: 22px; position: relative;
  background: var(--cr-panel); color: #fff;
  border: 1px solid var(--cr-line); border-radius: 14px;
  cursor: pointer; text-decoration: none; overflow: hidden;
}
.cr-cat-card:hover { border-color: var(--cr-line-strong); }
.cr-cat-card.is-featured {
  background: var(--cr-panel-2); border-color: var(--cr-mint-border);
}
.cr-cat-card__badge {
  position: absolute; top: 0; right: 0;
  font-family: var(--font-mono); font-size: 9.5px; color: var(--cr-mint);
  padding: 4px 10px; background: rgba(0,212,168,.1);
  border-bottom-left-radius: 8px;
  letter-spacing: .1em; text-transform: uppercase;
}
.cr-cat-card__ic {
  width: 44px; height: 44px; border-radius: 10px;
  background: rgba(255,255,255,.04); color: rgba(255,255,255,.7);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.cr-cat-card__ic svg { width: 22px; height: 22px; }
.cr-cat-card.is-featured .cr-cat-card__ic {
  background: rgba(0,212,168,.12); color: var(--cr-mint);
}

/* /categorie/{slug} page bits */
.cr-catpage-eyebrow {
  display: flex; align-items: center; gap: 12px; margin-bottom: 6px;
}
.cr-catpage-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 9px;
  background: rgba(0,212,168,.12); color: var(--cr-mint);
}
.cr-catpage-icon svg { width: 20px; height: 20px; }
.cr-catpage-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
}
.cr-cat-card__name { font-size: 18px; font-weight: 600; margin-bottom: 6px; letter-spacing: -.01em; }
.cr-cat-card__count {
  font-size: 12px; color: var(--cr-fg-muted);
  font-family: var(--font-mono); letter-spacing: .04em; margin-bottom: 12px;
}
.cr-cat-card__count b { color: #fff; font-weight: 600; }
.cr-cat-card.is-featured .cr-cat-card__count b { color: var(--cr-mint); }
.cr-cat-card__sample { font-size: 11.5px; color: var(--cr-fg-dim); line-height: 1.5; }

.cr-deals-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cr-deal {
  padding: 18px; border-radius: 12px; background: var(--cr-panel);
  border: 1px solid var(--cr-line);
  display: flex; align-items: center; gap: 16px; cursor: pointer;
  text-decoration: none; color: inherit;
}
.cr-deal__v {
  font-weight: 800; font-size: 32px; color: var(--cr-mint);
  line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.cr-deal__cat {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--cr-fg-muted);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 3px;
}
.cr-deal__m { font-size: 14px; font-weight: 600; color: #fff; }
.cr-deal__s { font-size: 12px; color: var(--cr-fg-dim); margin-top: 2px; }

/* ─── Directory (/categories.php) ──────────────────────────────── */
.cr-dir-section {
  padding: 56px 28px; max-width: 1180px; margin: 0 auto; width: 100%;
}
.cr-dir-section:first-of-type { padding-top: 32px; }
.cr-dir-h2 {
  font-weight: 700; font-size: 36px; line-height: 1.05;
  letter-spacing: -.02em; margin: 0 0 24px; color: #fff;
}
.cr-dir-h2 .dim { color: rgba(255,255,255,.5); }

.cr-dir-search {
  display: flex; align-items: center; gap: 0;
  background: var(--cr-panel); border: 1px solid var(--cr-line);
  border-radius: 12px; padding: 4px; margin: 24px 0 18px; max-width: 720px;
}
.cr-dir-search:focus-within { border-color: var(--cr-line-strong); }
.cr-dir-search__ic {
  padding: 0 8px 0 14px; color: var(--cr-fg-muted); font-size: 18px;
}
.cr-dir-search__input {
  flex: 1; background: none; border: 0; outline: none;
  color: #fff; font-size: 15px; padding: 12px 8px;
  font-family: inherit;
}
.cr-dir-search__input::placeholder { color: var(--cr-fg-muted); }
.cr-dir-search__btn { padding: 10px 20px; }

.cr-dir-alpha {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 6px; padding: 8px 0;
}
.cr-dir-alpha__l {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px; min-width: 36px; justify-content: center;
  background: rgba(255,255,255,.04); border: 1px solid var(--cr-line);
  border-radius: 8px; color: #fff;
  font-size: 13px; font-weight: 600; text-decoration: none;
  font-family: var(--font-mono); letter-spacing: .04em;
}
.cr-dir-alpha__l:hover {
  background: rgba(255,255,255,.08); border-color: var(--cr-line-strong);
}
.cr-dir-alpha__l span {
  font-size: 10px; font-weight: 400; color: var(--cr-fg-muted);
  letter-spacing: 0;
}
.cr-dir-alpha__l.is-empty {
  color: var(--cr-fg-muted); border-style: dashed;
  cursor: default; opacity: .5;
}

.cr-dir-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }

.cr-dir-tiles {
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px;
  margin-bottom: 48px;
}
.cr-dir-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 14px 6px;
  background: var(--cr-panel); border: 1px solid var(--cr-line);
  border-radius: 10px; text-decoration: none; color: #fff;
}
.cr-dir-tile:hover { border-color: var(--cr-line-strong); }
.cr-dir-tile.is-empty { color: var(--cr-fg-muted); opacity: .4; cursor: default; }
.cr-dir-tile__l {
  font-size: 22px; font-weight: 700; letter-spacing: -.02em;
}
.cr-dir-tile__n {
  font-size: 11px; color: var(--cr-fg-muted);
  font-family: var(--font-mono); letter-spacing: .03em;
}

.cr-dir-letter {
  margin-top: 32px; scroll-margin-top: 80px;
}
.cr-dir-letter__head {
  display: flex; align-items: baseline; gap: 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--cr-line); margin-bottom: 16px;
}
.cr-dir-letter__l {
  font-size: 32px; font-weight: 700; color: var(--cr-mint); letter-spacing: -.02em;
}
.cr-dir-letter__n {
  font-size: 13px; color: var(--cr-fg-muted);
  font-family: var(--font-mono); letter-spacing: .04em;
}
.cr-dir-letter__top {
  margin-left: auto; font-size: 12px; color: var(--cr-fg-muted);
  text-decoration: none; font-family: var(--font-mono); letter-spacing: .04em;
}
.cr-dir-letter__top:hover { color: #fff; }
.cr-dir-letter__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.cr-dir-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid transparent; border-radius: 8px;
  text-decoration: none; color: #fff;
}
.cr-dir-row:hover {
  background: var(--cr-panel); border-color: var(--cr-line);
}
.cr-dir-row__name { font-size: 14px; font-weight: 500; }
.cr-dir-row__cat {
  font-size: 11px; color: var(--cr-fg-muted);
  font-family: var(--font-mono); letter-spacing: .04em;
  text-transform: uppercase;
}
.cr-dir-row__n {
  font-size: 11.5px; color: var(--cr-fg-dim);
  font-family: var(--font-mono); letter-spacing: .03em;
  min-width: 56px; text-align: right;
}

/* ─── Dashboard ─────────────────────────────────────────────────── */
.cr-dash-hero {
  padding: 40px 28px 24px; border-bottom: 1px solid var(--cr-line);
}
.cr-dash-hero__inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; gap: 24px;
}
.cr-dash-hero__avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(0,212,168,.12); color: var(--cr-mint);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 24px; letter-spacing: -.02em;
  border: 1px solid var(--cr-mint-border);
}
.cr-dash-hero h1 {
  font-weight: 700; font-size: 32px; margin: 0;
  letter-spacing: -.015em; color: #fff; line-height: 1.2;
}
.cr-dash-hero h1 .mint { color: var(--cr-mint); }

.cr-dash-body {
  max-width: 1180px; margin: 0 auto; width: 100%;
  padding: 32px 28px 56px;
  display: grid; grid-template-columns: 260px 1fr; gap: 32px;
}
.cr-dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cr-dstat {
  padding: 18px 20px; background: var(--cr-panel);
  border: 1px solid var(--cr-line); border-radius: 12px;
}
.cr-dstat__v {
  font-weight: 800; font-size: 36px; color: #fff;
  line-height: 1; margin-bottom: 8px;
  letter-spacing: -.025em; font-variant-numeric: tabular-nums;
}
.cr-dstat__v.is-mint { color: var(--cr-mint); }
.cr-dstat__l { font-size: 12.5px; color: var(--cr-fg-dim); }
.cr-dstat__s {
  font-size: 10.5px; color: var(--cr-mint); margin-top: 10px;
  font-weight: 500; font-family: var(--font-mono);
  letter-spacing: .06em; text-transform: uppercase;
}

.cr-dash-side { position: sticky; top: 78px; }
.cr-dash-side__nav {
  background: var(--cr-panel); border: 1px solid var(--cr-line);
  border-radius: 12px; padding: 6px;
}
.cr-dash-side__nav a {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 8px;
  color: var(--cr-fg-dim); font-weight: 500;
  font-size: 13.5px; cursor: pointer;
}
.cr-dash-side__nav a.is-active {
  background: rgba(0,212,168,.08); color: var(--cr-mint); font-weight: 600;
}
.cr-dash-side__nav a .grow { flex: 1; }
.cr-dash-side__nav a .n { font-size: 11px; color: var(--cr-fg-muted); font-family: var(--font-mono); }
.cr-dash-side__promo {
  margin-top: 16px; padding: 18px;
  background: var(--cr-panel-2); border: 1px solid var(--cr-mint-border);
  border-radius: 12px;
}
.cr-dash-side__promo .h {
  font-size: 10.5px; font-weight: 600; color: var(--cr-mint);
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px;
  font-family: var(--font-mono);
}
.cr-dash-side__promo p { font-size: 13px; line-height: 1.5; color: var(--cr-fg-dim); margin: 0 0 14px; }

.cr-saved-row {
  display: flex; align-items: center; gap: 16px;
  background: var(--cr-panel); border: 1px solid var(--cr-line);
  border-radius: 12px; padding: 14px;
}
.cr-saved-row__title { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 4px; letter-spacing: -.005em; }
.cr-saved-row__meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--cr-fg-muted);
  font-family: var(--font-mono); letter-spacing: .04em;
}
.cr-saved-row__heart {
  width: 32px; height: 32px; border: 0; background: transparent;
  color: var(--cr-mint); cursor: pointer; font-size: 16px;
}

.cr-recent-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
}
.cr-recent-row + .cr-recent-row { border-top: 1px solid var(--cr-line); }
.cr-recent-row .title {
  font-size: 13.5px; font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cr-recent-row .when {
  font-size: 11px; color: var(--cr-fg-muted);
  font-family: var(--font-mono); letter-spacing: .04em; margin-top: 2px;
}
.cr-recent-row .save {
  font-size: 16px; font-weight: 700; color: var(--cr-mint);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}

.cr-alert-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cr-alert-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--cr-panel); border: 1px solid var(--cr-line);
  border-radius: 12px; padding: 14px;
}
.cr-alert-card .name { font-size: 13px; font-weight: 600; color: #fff; }
.cr-alert-card .meta { font-size: 11px; color: var(--cr-fg-muted); font-family: var(--font-mono); letter-spacing: .04em; margin-top: 2px; }

/* ─── Extension marketing page ──────────────────────────────────── */
.cr-ext-hero { padding: 56px 28px 24px; position: relative; }
.cr-ext-hero__grid {
  position: absolute; inset: 0; opacity: .35; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at 30% 30%, #000 30%, transparent 70%);
          mask-image: radial-gradient(ellipse at 30% 30%, #000 30%, transparent 70%);
}
.cr-ext-hero__inner {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px;
  align-items: center; position: relative;
}
.cr-ext-hero h1 {
  font-weight: 800; font-size: clamp(48px, 6vw, 80px); line-height: 1;
  margin: 0 0 22px; letter-spacing: -.035em; color: #fff;
}
.cr-ext-hero h1 .mint { color: var(--cr-mint); }
.cr-ext-hero p { font-size: 17px; line-height: 1.55; color: var(--cr-fg-dim); max-width: 480px; margin: 0 0 32px; }
.cr-ext-hero__rating {
  display: flex; align-items: center; gap: 18px;
  font-size: 12px; color: var(--cr-fg-muted);
  font-family: var(--font-mono); letter-spacing: .04em;
}
.cr-ext-hero__rating b { color: #fff; font-weight: 600; }
.cr-ext-hero__rating .sep { color: rgba(255,255,255,.2); }
.cr-ext-hero__mockup {
  position: relative; aspect-ratio: 4 / 3; border-radius: 16px;
  overflow: hidden; border: 1px solid var(--cr-line);
  background: #fff; box-shadow: 0 32px 80px rgba(0,0,0,.6);
}

/* Extension popup (uses inside ext page mockup) */
.cr-extpop {
  width: 380px; background: #0a0a0a; border-radius: 14px;
  box-shadow: 0 32px 80px rgba(0,212,168,.18), 0 0 0 1px rgba(0,212,168,.1);
  border: 1px solid var(--cr-line-strong);
  overflow: hidden; font-family: var(--font-ui);
  font-size: 13px; color: #fff;
}
.cr-extpop__head {
  padding: 14px 16px; display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--cr-line);
}
.cr-extpop__head .url {
  flex: 1; font-size: 11px; color: var(--cr-fg-muted);
  font-family: var(--font-mono); letter-spacing: .04em;
}
.cr-extpop__head .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--cr-mint);
  box-shadow: 0 0 0 4px rgba(0,212,168,.15); animation: crBlink 2s infinite;
}
.cr-extpop__hero {
  padding: 16px;
  background: rgba(0,212,168,.06);
  border-bottom: 1px solid rgba(0,212,168,.15);
}
.cr-extpop__hero-row { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.cr-extpop__check {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--cr-mint); color: #000;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 13px;
}
.cr-extpop__hero-label {
  font-weight: 600; color: var(--cr-mint); font-size: 11px;
  font-family: var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.cr-extpop__intro { font-size: 14px; color: #fff; margin-bottom: 14px; line-height: 1.45; }
.cr-extpop__intro .code { color: var(--cr-mint); font-family: var(--font-mono); font-weight: 700; }
.cr-extpop__chip {
  padding: 10px 14px; background: rgba(0,0,0,.4); border-radius: 8px;
  border: 1.5px dashed var(--cr-mint);
  display: flex; align-items: center; gap: 10px;
}
.cr-extpop__chip .code { flex: 1; font-family: var(--font-mono); font-size: 14px; font-weight: 700; letter-spacing: .06em; color: #fff; }
.cr-extpop__chip button {
  background: var(--cr-mint); color: #000; border: 0;
  padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.cr-extpop__log { padding: 14px 16px; }
.cr-extpop__log .h {
  font-size: 10.5px; font-weight: 600; color: var(--cr-fg-muted);
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px;
  font-family: var(--font-mono);
}
.cr-extpop__row {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-top: 1px solid var(--cr-line); font-size: 12.5px;
}
.cr-extpop__row .ic {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--cr-mint); color: #000;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700;
}
.cr-extpop__row.is-bad .ic { background: rgba(255,255,255,.15); color: #fff; }
.cr-extpop__row .code { flex: 1; font-family: var(--font-mono); color: #fff; font-weight: 500; letter-spacing: .04em; }
.cr-extpop__row.is-bad .code { color: var(--cr-fg-muted); }
.cr-extpop__row .code.best { font-weight: 700; }
.cr-extpop__row .save { color: var(--cr-mint); font-weight: 600; font-family: var(--font-mono); font-size: 11.5px; }
.cr-extpop__row.is-bad .save { color: var(--cr-fg-muted); font-weight: 400; }
.cr-extpop__row .best-tag {
  font-size: 9px; font-weight: 700; color: var(--cr-mint);
  padding: 2px 6px; background: rgba(0,212,168,.12); border-radius: 4px;
  text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-mono);
}
.cr-extpop__cashback {
  padding: 14px 16px; border-top: 1px solid var(--cr-line);
  background: rgba(255,255,255,.02); display: flex; align-items: center; gap: 14px;
}
.cr-extpop__cashback .v { font-weight: 800; font-size: 24px; color: var(--cr-mint); line-height: 1; letter-spacing: -.03em; }
.cr-extpop__cashback .t { font-size: 12.5px; font-weight: 600; color: #fff; }
.cr-extpop__cashback .s { font-size: 10.5px; color: var(--cr-fg-muted); font-family: var(--font-mono); letter-spacing: .04em; margin-top: 2px; }
.cr-extpop__foot {
  padding: 10px 16px; display: flex; justify-content: space-between;
  font-size: 10.5px; color: var(--cr-fg-muted); border-top: 1px solid var(--cr-line);
  font-family: var(--font-mono); letter-spacing: .04em;
}

/* Fake checkout (Sephora-like) inside extension mockup */
.cr-fake {
  height: 100%; display: flex; flex-direction: column; color: #0d1626;
  font-family: var(--font-ui);
}
.cr-fake__bar {
  padding: 10px 16px; background: #0d0d0d; color: #fff; font-size: 11px;
  display: flex; justify-content: space-between; font-family: var(--font-mono);
}
.cr-fake__bar span { opacity: .6; }
.cr-fake__top {
  padding: 14px 18px; border-bottom: 1px solid rgba(0,0,0,.08);
  display: flex; align-items: center; gap: 10px;
}
.cr-fake__top .square { width: 24px; height: 24px; background: #0d1626; border-radius: 4px; }
.cr-fake__top .brand  { font-family: var(--font-serif); font-size: 16px; color: #0d1626; letter-spacing: .04em; }
.cr-fake__body {
  padding: 18px; flex: 1;
  display: grid; grid-template-columns: 1fr 200px; gap: 16px; font-size: 11px;
}
.cr-fake__h { font-size: 12px; font-weight: 600; margin-bottom: 12px; color: #0d1626; }
.cr-fake__item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(0,0,0,.06); }
.cr-fake__item .thumb { width: 36px; height: 36px; background: #f0f3f8; border-radius: 6px; }
.cr-fake__item .name { flex: 1; font-size: 11.5px; }
.cr-fake__item .p   { font-weight: 600; font-size: 11.5px; }
.cr-fake__code {
  margin-top: 12px; padding: 10px;
  border: 1px dashed #c8c8c5; border-radius: 6px;
  color: #666; font-size: 11px;
}
.cr-fake__code b { font-family: var(--font-mono); color: var(--cr-mint-dim); }
.cr-fake__sum {
  background: #f0f3f8; padding: 12px; border-radius: 6px; height: fit-content;
}
.cr-fake__sum .r { display: flex; justify-content: space-between; padding: 4px 0; }
.cr-fake__sum .r.disc { color: var(--cr-mint-dim); font-weight: 600; }
.cr-fake__sum .hr { height: 1px; background: rgba(0,0,0,.1); margin: 6px 0; }
.cr-fake__sum .total { font-weight: 700; font-size: 13px; }
.cr-fake__sum button {
  width: 100%; margin-top: 10px; padding: 8px;
  background: #0d1626; color: #fff; border: 0; border-radius: 4px;
  font-size: 11px; font-weight: 600; cursor: pointer;
}

.cr-ext-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cr-ext-step {
  padding: 24px; background: var(--cr-panel);
  border: 1px solid var(--cr-line); border-radius: 14px;
}
.cr-ext-step .n {
  font-family: var(--font-mono); font-size: 12px; color: var(--cr-mint);
  margin-bottom: 18px; letter-spacing: .1em;
}
.cr-ext-step .t { font-size: 18px; font-weight: 700; margin-bottom: 10px; color: #fff; letter-spacing: -.01em; }
.cr-ext-step .d { font-size: 13.5px; line-height: 1.55; color: var(--cr-fg-dim); }

.cr-ext-compat { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.cr-ext-compat__card {
  padding: 16px; background: var(--cr-panel);
  border: 1px solid var(--cr-line); border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.cr-ext-compat__card .n { font-size: 12px; color: #fff; font-weight: 500; }

/* ─── Search drawer (opened by the nav ⌕ button) ────────────────── */
.cr-search-drawer {
  position: sticky; top: 67px; z-index: 49;
  background: #0a0a0a; border-bottom: 1px solid var(--cr-line);
  padding: 14px 28px;
  animation: crFade .15s ease-out;
}
.cr-search-drawer[hidden] { display: none; }
.cr-search-drawer__form {
  display: flex; align-items: center; gap: 12px;
  max-width: 720px; margin: 0 auto;
  background: rgba(255,255,255,.04); border: 1px solid var(--cr-line);
  border-radius: 12px; padding: 12px 16px;
}
.cr-search-drawer__form:focus-within {
  border-color: var(--cr-mint);
  box-shadow: 0 0 0 3px rgba(0,212,168,.10);
}
.cr-search-drawer__icon { color: rgba(255,255,255,.55); font-size: 16px; }
.cr-search-drawer__form input {
  flex: 1; border: 0; background: transparent; outline: none;
  font: inherit; font-size: 15px; color: #fff;
}
.cr-search-drawer__hint {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--cr-fg-muted); letter-spacing: .06em; text-transform: uppercase;
}
.cr-search-drawer__panel {
  max-width: 720px; margin: 8px auto 0;
  background: var(--cr-panel); border: 1px solid var(--cr-line);
  border-radius: 12px; overflow: hidden;
  display: none;
}
.cr-search-drawer__panel:not(:empty) { display: block; }
.cr-search-drawer__group {
  padding: 8px 14px 4px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cr-fg-muted); font-weight: 600;
}
.cr-search-drawer__row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; text-decoration: none; color: inherit;
  border-top: 1px solid var(--cr-line);
}
.cr-search-drawer__row:first-of-type { border-top: 0; }
.cr-search-drawer__row:hover,
.cr-search-drawer__row.is-cursor { background: rgba(255,255,255,.04); }
.cr-search-drawer__badge {
  width: 30px; height: 30px; border-radius: 8px;
  background: #000; color: var(--cr-mint);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; flex-shrink: 0;
  font-family: var(--font-mono); letter-spacing: -.02em;
  border: 1px solid var(--cr-line);
}
.cr-search-drawer__col { min-width: 0; flex: 1; }
.cr-search-drawer__title {
  font-size: 13.5px; font-weight: 600; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cr-search-drawer__sub {
  font-size: 11.5px; color: var(--cr-fg-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--font-mono); letter-spacing: .04em;
}
.cr-search-drawer__empty {
  padding: 18px 14px; text-align: center;
  color: var(--cr-fg-muted); font-size: 12.5px;
}
.cr-search-drawer__more {
  padding: 10px 14px; border-top: 1px solid var(--cr-line);
  text-align: center; font-size: 12.5px; color: var(--cr-mint);
  text-decoration: none; display: block;
}
.cr-search-drawer__more:hover { background: rgba(0,212,168,.06); }

/* ─── Blog (cards + article) ────────────────────────────────────── */
.cr-blog-card {
  display: flex; flex-direction: column;
  background: var(--cr-panel); border: 1px solid var(--cr-line);
  border-radius: 14px; overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s;
}
.cr-blog-card:hover { border-color: var(--cr-line-strong); transform: translateY(-2px); }
.cr-blog-card__hero {
  aspect-ratio: 16/9;
  background-size: cover; background-position: center;
  background-color: #000;
}
.cr-blog-card__hero--blank {
  display: flex; align-items: center; justify-content: center;
  background-image:
    linear-gradient(135deg, rgba(0,212,168,.10) 0%, transparent 70%),
    radial-gradient(circle at 70% 30%, rgba(0,212,168,.18), transparent 60%);
  color: var(--cr-mint); font-size: 48px;
}
.cr-blog-card__body { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.cr-blog-card__cat {
  align-self: flex-start;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--cr-mint);
  padding: 3px 8px; background: rgba(0,212,168,.08);
  border-radius: 4px;
}
.cr-blog-card h2 {
  margin: 0; font-size: 18px; line-height: 1.3; letter-spacing: -.005em;
  color: #fff; font-weight: 600;
}
.cr-blog-card p {
  margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--cr-fg-dim);
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
.cr-blog-card__meta {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--cr-fg-muted); letter-spacing: .06em;
  margin-top: auto;
}

.cr-blog-article {
  max-width: 760px; margin: 0 auto; width: 100%;
  padding: 40px 28px 60px;
}
.cr-blog-article__head { margin-bottom: 36px; }
.cr-blog-article__head h1 {
  font-weight: 700; font-size: clamp(36px, 5vw, 56px); line-height: 1.05;
  letter-spacing: -.025em; margin: 0 0 18px; color: #fff;
}
.cr-blog-article__lede {
  font-size: 18px; line-height: 1.55; color: var(--cr-fg-dim);
  margin: 0 0 18px;
}
.cr-blog-article__byline {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--cr-fg-muted); letter-spacing: .04em;
}
.cr-blog-article__byline .who { color: #fff; font-weight: 600; }
.cr-blog-article__byline .sep { margin: 0 8px; color: rgba(255,255,255,.2); }
.cr-blog-article__hero {
  width: 100%; aspect-ratio: 21/9;
  background-size: cover; background-position: center;
  border-radius: 14px; margin-bottom: 36px;
}
.cr-blog-article__body {
  font-size: 16.5px; line-height: 1.7; color: var(--cr-fg-dim);
}
.cr-blog-article__body h2 {
  font-weight: 700; font-size: 28px; letter-spacing: -.015em;
  color: #fff; margin: 38px 0 14px;
}
.cr-blog-article__body h3 {
  font-weight: 600; font-size: 22px; letter-spacing: -.01em;
  color: #fff; margin: 30px 0 12px;
}
.cr-blog-article__body p { margin: 0 0 16px; }
.cr-blog-article__body a {
  color: var(--cr-mint);
  border-bottom: 1px solid rgba(0,212,168,.30);
}
.cr-blog-article__body a:hover { border-bottom-color: var(--cr-mint); }
.cr-blog-article__body strong { color: #fff; font-weight: 600; }
.cr-blog-article__body em { color: rgba(255,255,255,.85); font-style: italic; }
.cr-blog-article__body code {
  background: rgba(255,255,255,.06); padding: 2px 6px; border-radius: 4px;
  font-family: var(--font-mono); font-size: 14px; color: #fff;
}
.cr-blog-article__body ul,
.cr-blog-article__body ol { padding-left: 22px; margin: 0 0 18px; }
.cr-blog-article__body li { margin-bottom: 6px; }
.cr-blog-article__body blockquote {
  margin: 24px 0; padding: 12px 22px;
  border-left: 3px solid var(--cr-mint);
  background: rgba(0,212,168,.06);
  border-radius: 0 8px 8px 0;
}
.cr-blog-article__body blockquote p { margin: 0; color: rgba(255,255,255,.85); font-style: italic; }
.cr-blog-article__body hr {
  border: 0; height: 1px; background: var(--cr-line); margin: 32px 0;
}
.cr-blog-article__body img {
  max-width: 100%; border-radius: 10px;
  margin: 20px 0;
}
.cr-blog-article__foot {
  margin-top: 48px; padding-top: 24px;
  border-top: 1px solid var(--cr-line);
}

@media (max-width: 720px) {
  .cr-blog-card__body h2 { font-size: 16px; }
  .cr-blog-article__body { font-size: 15.5px; line-height: 1.65; }
}

/* ─── Verify-email banner ───────────────────────────────────────── */
.cr-verify-banner {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 10px 20px;
  background: rgba(245,200,67,.10);
  border-bottom: 1px solid rgba(245,200,67,.30);
  color: var(--cr-amber);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em;
}
.cr-verify-banner b { color: #fff; font-weight: 600; }
.cr-verify-banner form { margin: 0; }

/* ─── Reveal modal (variant B) ──────────────────────────────────── */
.cr-modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.85);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: crFade .2s ease-out;
}
.cr-modal {
  background: var(--cr-panel); border-radius: 16px;
  width: min(460px, 100%);
  border: 1px solid var(--cr-line-strong);
  box-shadow: 0 32px 80px rgba(0,212,168,.15);
  overflow: hidden; position: relative;
  animation: crPop .25s cubic-bezier(.2,.8,.3,1);
  padding: 32px 28px 22px;
  text-align: center;
}
.cr-modal__close {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border: 0;
  background: rgba(255,255,255,.06); border-radius: 8px;
  cursor: pointer; color: #fff; font-size: 14px;
}
.cr-modal__close:hover { background: rgba(255,255,255,.12); }
.cr-modal__head { margin-bottom: 14px; }
.cr-modal__brand {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--cr-fg-muted);
}
.cr-modal__title {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--cr-mint); font-weight: 600; margin-top: 10px;
}
.cr-modal__chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border: 1px solid var(--cr-line-strong);
  background: rgba(255,255,255,.06);
  border-radius: 10px; font-family: var(--font-mono);
  font-size: 22px; font-weight: 700; letter-spacing: .08em; color: #fff;
}
.cr-modal__chip .ico { color: var(--cr-mint); font-size: 14px; opacity: .85; }

/* Reveal-modal additions (logo, copy row, vote buttons, CTA layout). */
.cr-modal--reveal { padding: 28px 28px 22px; text-align: center; }
.cr-modal__logo {
  width: 64px; height: 64px; margin: 0 auto 16px;
  border-radius: 50%; background: #fff; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.cr-modal__logo-img      { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.cr-modal__logo-initial  { font-weight: 700; font-size: 28px; color: #111; }
.cr-modal__title2 {
  font-weight: 800; font-size: 28px; line-height: 1.1;
  letter-spacing: -.01em; color: #fff; margin: 0 0 6px;
}
.cr-modal__sub {
  font-size: 14px; color: var(--cr-fg-dim); line-height: 1.5;
  margin: 0 0 22px;
}
.cr-modal__copy { position: relative; margin: 0 0 22px; }
.cr-modal__toast {
  position: absolute; left: 50%; top: -34px; transform: translateX(-50%);
  background: rgba(255,255,255,.92); color: #111;
  padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 500;
  white-space: nowrap;
}
.cr-modal__toast::after {
  content: ''; position: absolute; left: 50%; bottom: -5px;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: rgba(255,255,255,.92);
}
.cr-modal__chip-row { display: flex; align-items: stretch; gap: 8px; justify-content: center; }
.cr-modal__copy-btn {
  padding: 0 16px; border: 1px solid var(--cr-line-strong);
  background: rgba(255,255,255,.04); color: #fff;
  border-radius: 10px; font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.cr-modal__copy-btn:hover { background: rgba(255,255,255,.08); }

.cr-modal__vote { margin: 0 0 22px; }
.cr-modal__vote-q {
  font-size: 13.5px; color: var(--cr-fg-dim); margin-bottom: 10px;
}
.cr-modal__vote-row { display: flex; gap: 8px; justify-content: center; }
.cr-modal__vote-btn {
  flex: 0 0 auto;
  padding: 9px 18px;
  border: 1px solid var(--cr-line-strong);
  background: rgba(255,255,255,.04); color: var(--cr-fg);
  border-radius: 8px; font: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer; transition: all .15s;
}
.cr-modal__vote-btn:hover { background: rgba(255,255,255,.08); }
.cr-modal__vote-btn.is-good.is-active { background: rgba(0,212,168,.12); border-color: var(--cr-mint); color: var(--cr-mint); }
.cr-modal__vote-btn.is-bad.is-active  { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.5); color: #ef4444; }
.cr-modal__vote.is-voting { opacity: .5; pointer-events: none; }
.cr-modal__vote-thanks {
  font-size: 13.5px; color: var(--cr-mint); font-weight: 600;
  padding: 9px 0;
}

.cr-modal--reveal .cr-modal__cta { margin-top: 0; }
.cr-modal__body {
  font-size: 13.5px; color: var(--cr-fg-dim);
  line-height: 1.6; margin: 0 0 20px;
}
.cr-modal__body b { color: #fff; font-weight: 600; }
.cr-modal__cta { width: 100%; padding: 14px; font-size: 15px; }
.cr-modal__note {
  margin: 14px 0 0; font-size: 11px;
  color: var(--cr-fg-muted); font-family: var(--font-mono);
  letter-spacing: .04em; line-height: 1.5;
}

/* ─── Flash messages (in-place feedback near a control) ─────────── */
.cr-flash {
  display: block; margin-top: 10px; padding: 8px 12px;
  border-radius: 8px; font-size: 12.5px; font-weight: 500;
  background: rgba(0,212,168,.08); color: var(--cr-mint);
  border: 1px solid var(--cr-mint-border);
  transition: opacity .4s; opacity: 1;
}
.cr-flash--bad {
  background: rgba(255,107,107,.08); color: var(--cr-coral);
  border-color: rgba(255,107,107,.30);
}
.cr-flash.is-fading { opacity: 0; }

/* Vote button "active" state on /code.php sidebar */
.cr-btn.is-active.cr-btn--mint  { box-shadow: 0 0 0 2px var(--cr-mint) inset; }
.cr-btn.is-active.cr-btn--ghost { border-color: var(--cr-coral); color: var(--cr-coral); }

/* Saved heart */
.cr-save {
  width: 36px; height: 36px; border-radius: 8px;
  border: 1px solid var(--cr-line-strong); background: transparent;
  color: rgba(255,255,255,.55); cursor: pointer; font-size: 16px;
}
.cr-save:hover { color: var(--cr-mint); }
.cr-save.is-saved { color: var(--cr-mint); border-color: var(--cr-mint-border); background: var(--cr-mint-soft); }

/* ─── Mobile menu (hamburger ☰) + drawer ───────────────────────── */
.cr-nav__burger {
  display: none; /* shown via mobile media query */
  width: 40px; height: 40px; border: 0; background: transparent;
  cursor: pointer; padding: 8px; border-radius: 8px;
  flex-direction: column; justify-content: center; gap: 5px;
}
.cr-nav__burger:hover { background: rgba(255,255,255,.06); }
.cr-nav__burger span {
  display: block; height: 2px; width: 100%; background: #fff; border-radius: 1px;
  transition: transform .2s, opacity .2s;
}
.cr-nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cr-nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cr-nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.cr-mobile-menu {
  display: none; /* shown via mobile media query */
  position: fixed; inset: 64px 0 0; z-index: 49;
  background: #000; border-top: 1px solid var(--cr-line);
  flex-direction: column; padding: 24px 20px; gap: 20px;
  animation: crFade .18s ease-out;
  overflow-y: auto;
}
.cr-mobile-menu__links { display: flex; flex-direction: column; gap: 2px; }
.cr-mobile-menu__links a {
  padding: 14px 8px; font-size: 17px; color: var(--cr-fg);
  border-bottom: 1px solid var(--cr-line); text-decoration: none;
  display: flex; align-items: center; justify-content: space-between;
}
.cr-mobile-menu__links a.is-active { color: var(--cr-mint); font-weight: 600; }
.cr-mobile-menu__links a:last-child { border-bottom: 0; }
.cr-mobile-menu__auth { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
.cr-mobile-menu__auth .cr-btn { padding: 14px; font-size: 15px; text-align: center; }
.cr-mobile-menu__user {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  border: 1px solid var(--cr-line); border-radius: 12px;
  color: var(--cr-fg); text-decoration: none; font-weight: 500;
}

body.cr-no-scroll { overflow: hidden; }

/* ─── /recherche.php — mobile filter trigger + drawer ───────────── */
.cr-filter-trigger {
  display: none; /* shown via mobile media query */
  align-items: center; gap: 10px;
  padding: 12px 16px; margin: 0 0 14px;
  background: var(--cr-panel); border: 1px solid var(--cr-line-strong);
  border-radius: 12px; color: #fff; font: inherit; font-size: 14px;
  font-weight: 600; cursor: pointer; width: 100%;
}
.cr-filter-trigger .ico {
  font-family: var(--font-mono); color: var(--cr-mint); font-size: 14px;
}
.cr-filter-trigger .badge {
  margin-left: auto;
  padding: 2px 9px; border-radius: 999px;
  background: var(--cr-mint); color: #000;
  font-size: 11.5px; font-weight: 700;
  font-family: var(--font-mono);
}
.cr-filter-drawer__head {
  display: none; /* shown when drawer is full-screen */
  align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--cr-line);
  font-weight: 600; color: #fff; font-size: 16px;
  position: sticky; top: 0; background: #000; z-index: 2;
}
.cr-filter-drawer__close {
  width: 36px; height: 36px; border: 0; background: rgba(255,255,255,.06);
  border-radius: 8px; color: #fff; font-size: 16px; cursor: pointer;
}
.cr-filter-drawer__apply {
  display: none; /* shown when drawer is full-screen */
  width: calc(100% - 32px); margin: 8px 16px 16px;
  padding: 14px; font-size: 15px;
  position: sticky; bottom: 16px; z-index: 2;
}

/* On desktop the filter aside is always visible — override the [hidden]
   attribute used to keep it closed by default on phones. */
@media (min-width: 1025px) {
  .cr-filter-aside, .cr-filter-aside[hidden] { display: block; }
}

/* ─── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .cr-store-grid       { grid-template-columns: repeat(2, 1fr); }
  .cr-cat-grid         { grid-template-columns: repeat(2, 1fr); }
  .cr-deals-grid       { grid-template-columns: repeat(2, 1fr); }
  .cr-stats__grid      { grid-template-columns: repeat(2, 1fr); }
  .cr-dash-stats       { grid-template-columns: repeat(2, 1fr); }
  .cr-merch-stats      { grid-template-columns: repeat(2, 1fr); }
  .cr-dir-tiles        { grid-template-columns: repeat(6, 1fr); }
  .cr-dir-letter__list { grid-template-columns: repeat(2, 1fr); }
  .cr-ext-compat       { grid-template-columns: repeat(3, 1fr); }
  .cr-verif__grid      { grid-template-columns: 1fr; gap: 36px; }
  .cr-pitch            { grid-template-columns: 1fr; gap: 28px; }
  .cr-ext-hero__inner  { grid-template-columns: 1fr; }
  .cr-search-body      { grid-template-columns: 1fr; }
  .cr-merch-body       { grid-template-columns: 1fr; }
  .cr-coupon-grid      { grid-template-columns: 1fr; }
  .cr-dash-body        { grid-template-columns: 1fr; }
  .cr-filter           { position: static; }

  /* Filter aside becomes a full-screen drawer; trigger button reveals it. */
  .cr-filter-trigger   { display: flex; }
  .cr-filter-aside {
    position: fixed; inset: 0; z-index: 60;
    background: #000; overflow-y: auto;
    padding: 0; margin: 0;
    display: flex; flex-direction: column;
    animation: crFade .15s ease-out;
  }
  .cr-filter-aside[hidden] { display: none; }
  .cr-filter-drawer__head, .cr-filter-drawer__apply { display: flex; justify-content: center; }
  .cr-filter-aside .cr-filter { padding: 0 16px 8px; }
  .cr-filter-aside .cr-filter__box, .cr-filter-aside .cr-tip { border-radius: 12px; }
}
@media (max-width: 640px) {
  .cr-wrap, .cr-search-head, .cr-merch-hero__inner, .cr-dash-hero,
  .cr-section, .cr-verif, .cr-hero, .cr-ext-hero { padding-left: 16px; padding-right: 16px; }
  .cr-nav { padding: 10px 16px; gap: 8px; }
  .cr-nav__links { display: none; }
  .cr-nav__user-name { display: none; } /* avatar only on phones */
  .cr-nav__auth, .cr-nav__cta { display: none; } /* handled by burger menu */
  .cr-nav__burger { display: flex; }
  .cr-mobile-menu { display: flex; }
  .cr-mobile-menu[hidden] { display: none; }

  .cr-store-grid, .cr-cat-grid, .cr-deals-grid,
  .cr-stats__grid, .cr-dash-stats, .cr-merch-stats { grid-template-columns: 1fr; }
  .cr-dir-section      { padding: 32px 16px; }
  .cr-dir-h2           { font-size: 26px; }
  .cr-dir-search       { flex-wrap: wrap; }
  .cr-dir-search__btn  { width: 100%; }
  .cr-dir-tiles        { grid-template-columns: repeat(4, 1fr); }
  .cr-dir-letter__list { grid-template-columns: 1fr; }
  .cr-catpage-list     { grid-template-columns: 1fr; }
  .cr-ext-compat       { grid-template-columns: repeat(2, 1fr); }
  .cr-coupon           { flex-direction: column; }
  .cr-coupon__discount { flex-direction: row; padding: 12px; gap: 12px; align-self: stretch; flex: 0 0 auto; align-items: center; justify-content: flex-start; text-align: left; }
  .cr-coupon__discount-l { margin-top: 0; }
  .cr-coupon__discount-pills { flex-direction: row; margin-top: 0; margin-left: auto; }
  .cr-coupon__right    { align-items: flex-start; flex-direction: row; justify-content: space-between; width: 100%; min-width: 0; }
  .cr-coupon__btn      { padding: 12px 18px; }
  .cr-footer__grid     { grid-template-columns: 1fr 1fr; gap: 24px; }
  .cr-merch-hero__row  { flex-direction: column; }
  .cr-merch-hero__cta  { align-items: flex-start; }
  .cr-hero__title      { font-size: 48px; }
  .cr-merch-hero h1, .cr-cat-hero h1, .cr-search-head h1, .cr-coupon-hero h1 { font-size: 32px; line-height: 1.1; }
  .cr-search-head h1 .dim { display: block; margin-top: 6px; font-size: 18px; }
  .cr-stat__v, .cr-dstat__v { font-size: 36px; }
  .cr-dash-hero__inner { flex-direction: column; align-items: flex-start; }
  .cr-footer__bottom   { flex-direction: column; gap: 8px; }

  /* Hide the extension promo inside the filter drawer on phones — there's
     no Safari iOS extension and the banner just eats screen real estate. */
  .cr-filter-aside .cr-tip { display: none; }
}

/* ─── /soumettre.php — hero, steps, form, history ────────────────── */
.cr-sub-hero { padding: 48px 28px 24px; }
.cr-sub-hero__inner { max-width: 960px; margin: 0 auto; width: 100%; }
.cr-sub-hero h1 {
  font-weight: 700; font-size: 42px; line-height: 1.05;
  letter-spacing: -.025em; margin: 0 0 14px; color: #fff;
}
.cr-sub-hero__lede {
  margin: 0 0 32px; font-size: 15px; color: var(--cr-fg-dim);
  line-height: 1.6; max-width: 640px;
}
.cr-sub-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-top: 8px;
}
.cr-sub-stat {
  background: rgba(255,255,255,.03); border: 1px solid var(--cr-line);
  border-radius: 12px; padding: 18px 18px 16px;
}
.cr-sub-stat .v {
  font-weight: 800; font-size: 28px; letter-spacing: -.02em;
  color: #fff; line-height: 1;
}
.cr-sub-stat .v.is-mint { color: var(--cr-mint); }
.cr-sub-stat .l {
  margin-top: 6px; font-size: 12px; color: var(--cr-fg-muted);
  line-height: 1.4;
}

.cr-sub-how { max-width: 960px; margin: 32px auto; padding: 0 28px; width: 100%; }
.cr-sub-steps {
  list-style: none; padding: 0; margin: 14px 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.cr-sub-steps li {
  display: flex; gap: 14px; padding: 18px;
  background: rgba(255,255,255,.02); border: 1px solid var(--cr-line);
  border-radius: 12px;
}
.cr-sub-steps .n {
  flex: 0 0 36px; height: 36px; border-radius: 50%;
  background: var(--cr-mint); color: #000;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; font-family: var(--font-mono);
}
.cr-sub-steps h3 { margin: 2px 0 6px; font-size: 15px; color: #fff; font-weight: 600; }
.cr-sub-steps p  { margin: 0; color: var(--cr-fg-dim); font-size: 13.5px; line-height: 1.5; }

.cr-sub-form-wrap { max-width: 760px; margin: 24px auto 32px; padding: 0 28px; width: 100%; }
.cr-sub-form { padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.cr-sub-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cr-sub-form__foot {
  display: flex; gap: 12px; align-items: center;
  padding-top: 8px; flex-wrap: wrap;
}
.cr-sub-form__note { flex: 1; min-width: 220px; font-size: 12.5px; color: var(--cr-fg-muted); }

.cr-field { display: flex; flex-direction: column; gap: 6px; }
.cr-field__l {
  font-family: var(--font-mono); font-size: 11px; color: var(--cr-fg-muted);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
}

.cr-sub-history { max-width: 960px; margin: 40px auto 80px; padding: 0 28px; width: 100%; }
.cr-sub-history h2 {
  font-weight: 700; font-size: 24px; letter-spacing: -.01em;
  margin: 0 0 4px; color: #fff;
}
.cr-sub-table {
  border: 1px solid var(--cr-line); border-radius: 12px; overflow: hidden;
  background: rgba(255,255,255,.02);
}
.cr-sub-table__head, .cr-sub-table__row {
  display: grid; grid-template-columns: 1.2fr 2.4fr 1fr 1fr;
  align-items: center; padding: 12px 16px; gap: 14px;
}
.cr-sub-table__head {
  font-family: var(--font-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--cr-fg-muted); border-bottom: 1px solid var(--cr-line);
  background: rgba(255,255,255,.03);
}
.cr-sub-table__row { border-bottom: 1px solid var(--cr-line); font-size: 13.5px; }
.cr-sub-table__row:last-child { border-bottom: 0; }
.cr-sub-table__row .merchant {
  color: #fff; font-weight: 600; text-decoration: none;
}
.cr-sub-table__row .merchant:hover { color: var(--cr-mint); }
.cr-sub-table__row .offer .title { color: var(--cr-fg); }
.cr-sub-table__row .offer code {
  font-family: var(--font-mono); font-size: 11.5px;
  background: rgba(255,255,255,.06); color: #fff;
  padding: 1px 6px; border-radius: 4px; margin-top: 4px;
  display: inline-block; letter-spacing: .04em;
}
.cr-sub-table__row .offer .tag {
  font-family: var(--font-mono); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--cr-fg-muted); display: inline-block; margin-top: 4px;
}
.cr-sub-table__row .when { color: var(--cr-fg-muted); font-size: 12.5px; }

.cr-sub-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; font-size: 11.5px;
  font-weight: 600; border: 1px solid transparent;
  font-family: var(--font-mono); letter-spacing: .02em;
}
.cr-sub-badge.is-ok      { color: var(--cr-mint); border-color: rgba(80,219,156,.35); background: rgba(80,219,156,.08); }
.cr-sub-badge.is-pending { color: #fbbf24;        border-color: rgba(251,191,36,.35); background: rgba(251,191,36,.08); }
.cr-sub-badge.is-warn    { color: #f97316;        border-color: rgba(249,115,22,.35); background: rgba(249,115,22,.08); }
.cr-sub-badge.is-bad     { color: #ef4444;        border-color: rgba(239,68,68,.35);  background: rgba(239,68,68,.08); }

@media (max-width: 720px) {
  .cr-sub-stats { grid-template-columns: repeat(2, 1fr); }
  .cr-sub-steps { grid-template-columns: 1fr; }
  .cr-sub-form__row { grid-template-columns: 1fr; }
  .cr-sub-table__head { display: none; }
  .cr-sub-table__row {
    grid-template-columns: 1fr; gap: 6px;
    padding: 14px 16px;
  }
}