/* bidss: עיצוב עברי RTL */

/* פלטת "רצפת מסחר": רקע כהה, אדום לוהט, וזהב למקום הראשון.
   כל צירוף טקסט ורקע כאן נבדק ועומד ב-WCAG AA (4.5:1) בשני המצבים. */

:root {
  --background: #fffaf7;
  --foreground: #1f1512;
  --card: #ffffff;
  --muted: #fdefe9;
  --muted-foreground: #665751;    /* 6.65 על הרקע */
  --border: #f0ddd4;
  --primary: #c9300f;             /* 5.18 על הרקע, לבן עליו 5.37 */
  --primary-fill: #ff5a2b;        /* גוון לוהט לשטחים דקורטיביים */
  --primary-foreground: #ffffff;
  --primary-wash: #fdece5;
  --gold: #ffc233;                /* רקע בלבד, תמיד עם דיו כהה */
  --gold-ink: #1f1512;            /* 11.08 על הזהב */
  --live: #0d7d36;                /* 5.06 על הרקע */
  --shadow-card: 0 12px 40px rgba(120, 50, 20, .10);
  --glow: 0 0 0 rgba(0, 0, 0, 0);
  --bar-h: 0rem;                  /* גובה הסרגל הדביק כשהוא מוצג */
  --sans: "Heebo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

html[data-theme="dark"] {
  --background: #0f0a08;
  --foreground: #fbf7f5;          /* 18.48 */
  --card: #1a1210;
  --muted: #251a15;
  --muted-foreground: #b8aca4;    /* 8.88 */
  --border: rgba(255, 255, 255, .16);
  --primary: #ff5a2b;             /* 6.32 על הרקע */
  --primary-fill: #ff5a2b;
  --primary-foreground: #0f0a08;  /* דיו כהה על האדום הלוהט, 6.32 */
  --primary-wash: #2a1410;
  --gold: #ffc233;
  --gold-ink: #0f0a08;            /* 12.20 */
  --live: #34d977;                /* 10.62 */
  --shadow-card: 0 12px 40px rgba(0, 0, 0, .5);
  --glow: 0 0 24px rgba(255, 90, 43, .28);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

html { background: var(--background); }

body {
  margin: 0;
  background: transparent;
  color: var(--foreground);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }

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

.wrap { width: 100%; max-width: 56rem; margin-inline: auto; padding-inline: 1rem; }
.page { display: flex; flex-direction: column; min-height: 100%; }
.main { flex: 1; padding-top: 1rem; padding-bottom: 4rem; }
.muted { color: var(--muted-foreground); }
.small { font-size: .8125rem; }
.accent { color: color-mix(in oklab, var(--primary) 72%, transparent); }
.strong { font-weight: 600; }
.sep { color: var(--muted-foreground); }

/* ---------------------------------------------------------- כותרת עליונה */

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: 1.25rem; padding-bottom: 1rem;
}

.brand {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 800; font-size: 22px; letter-spacing: -.03em;
  direction: ltr; line-height: 1;
}
.brand-mark { display: inline-flex; flex: none; }
.brand-mark svg {
  width: 1.625rem; height: 1.625rem;
  border-radius: .5rem;
  box-shadow: 0 2px 10px color-mix(in oklab, var(--primary) 35%, transparent);
}
.brand-text { display: inline-block; }
.brand-accent { color: var(--primary); }

.header-side { display: flex; align-items: center; gap: .75rem; }

.nav { display: flex; align-items: center; gap: 1rem; list-style: none; margin: 0; padding: 0; font-size: .875rem; }
.nav a { font-weight: 500; color: var(--muted-foreground); transition: color .15s; }
.nav a:hover, .nav a.is-active { color: var(--foreground); }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border: 0; border-radius: 999px;
  background: transparent; color: inherit; cursor: pointer; transition: background .15s;
}
.icon-btn:hover { background: var(--muted); }
.icon-btn svg { width: 1rem; height: 1rem; }
.i-sun { display: none; }
html[data-theme="dark"] .i-moon { display: none; }
html[data-theme="dark"] .i-sun { display: block; }

/* ----------------------------------------------------------- כותרת עמוד */

.pagetop { margin-bottom: 1.5rem; text-align: center; }

.livepill {
  display: inline-block; max-width: 100%; border-radius: 999px;
  background: var(--muted); color: var(--muted-foreground);
  padding: .375rem .875rem; font-size: .875rem;
}
.live-count { font-weight: 600; color: var(--live); }

.live-dot { position: relative; display: inline-flex; width: .5rem; height: .5rem; margin-inline-end: .35rem; vertical-align: -1px; }
.live-dot .ping {
  position: absolute; inset: 0; border-radius: 999px; background: var(--live);
  opacity: .75; animation: ping 1.4s cubic-bezier(0, 0, .2, 1) infinite;
}
.live-dot .core { position: relative; width: 100%; height: 100%; border-radius: 999px; background: var(--live); }
.live-dot.tiny { width: .375rem; height: .375rem; }
.live-dot.tiny .ping, .live-dot.tiny .core { background: var(--primary); }

@keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .live-dot .ping { animation: none; } }

.stack { display: flex; flex-direction: column; gap: 1.5rem; }

/* --------------------------------------------------------- טופס ההצעה */

.claim { scroll-margin-top: 1.5rem; }

.claim-title {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  column-gap: .5rem; row-gap: .25rem; margin: 0;
  text-align: center; font-size: 28px; font-weight: 800; letter-spacing: -.03em;
  line-height: 1.25;
}
@media (min-width: 768px) { .claim-title { font-size: 40px; } }

.amount-group { display: inline-flex; align-items: center; gap: .5rem; direction: ltr; }

.round-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; flex: none; border: 0; border-radius: 999px;
  font-size: .875rem; font-weight: 700; cursor: pointer; line-height: 1;
  background: var(--primary-wash);
  color: var(--primary); transition: background .15s;
}
.round-btn:hover { background: color-mix(in oklab, var(--primary) 28%, transparent); }
.round-btn:active { transform: translateY(1px); }

/* הסכום הוא שדה קלט, ולא רק מספר עם חצים לידו. הקו המקווקו לבדו לא
   הספיק, אז הוא נראה עכשיו כמו תיבה שאפשר להקליד לתוכה, עם סמל עיפרון. */
.amount-field {
  --pad-y: .125rem;
  --pad-r: .625rem;      /* צד ימין פיזי */
  --pad-l: 1.875rem;     /* צד שמאל פיזי, מקום לעיפרון */
  position: relative; display: inline-block; cursor: text;
  padding: var(--pad-y) var(--pad-r) var(--pad-y) var(--pad-l);
  border: 2px dashed color-mix(in oklab, var(--primary) 55%, transparent);
  border-radius: .75rem;
  background: var(--primary-wash);
  color: var(--primary);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.amount-field:hover { border-color: var(--primary); }
.amount-field:focus-within {
  border-style: solid; border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--primary) 25%, transparent);
}

.amount-pencil {
  position: absolute; left: .5rem; top: 50%; transform: translateY(-50%);
  display: inline-flex; color: color-mix(in oklab, var(--primary) 70%, transparent);
  pointer-events: none;
}
.amount-pencil svg { width: .9375rem; height: .9375rem; }
@media (min-width: 768px) { .amount-pencil svg { width: 1.125rem; height: 1.125rem; } }
.amount-field:focus-within .amount-pencil { color: var(--primary); }

.amount-ghost { visibility: hidden; white-space: nowrap; font-variant-numeric: tabular-nums; }
.amount-real {
  position: absolute; top: var(--pad-y); bottom: var(--pad-y);
  right: var(--pad-r); left: var(--pad-l);
  display: flex; align-items: baseline;
}
.amount-real input {
  width: 100%; min-width: 0; padding: 0; border: 0; outline: none;
  background: transparent; font: inherit; letter-spacing: inherit; color: inherit;
  font-variant-numeric: tabular-nums; cursor: text;
}

.amount-hint {
  display: flex; align-items: center; justify-content: center; gap: .3125rem;
  margin: .625rem 0 0; font-size: .8125rem; font-weight: 600;
  color: var(--muted-foreground); text-wrap: balance;
}
.amount-hint-tap { display: inline-flex; color: var(--primary); }
.amount-hint-tap svg { width: .9375rem; height: .9375rem; }

.claim-sub {
  max-width: 32rem; margin: .5rem auto 0; text-align: center;
  font-size: .875rem; font-weight: 500; color: var(--muted-foreground);
}

.alert {
  max-width: 34rem; margin: 1rem auto 0; padding: .625rem 1rem;
  border-radius: .875rem; font-size: .875rem; text-align: center; font-weight: 500;
}
.alert-error { background: color-mix(in oklab, #dc2626 12%, transparent); color: #b91c1c; }
html[data-theme="dark"] .alert-error { color: #fca5a5; }
.alert-ok { background: var(--primary-wash); color: var(--primary); }

.claim-form { margin-top: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.claim-row { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; }
@media (min-width: 768px) { .claim-row { flex-direction: row; align-items: center; } }

.input-wrap { position: relative; flex: 1; min-width: 0; }
.input-icon {
  position: absolute; top: 50%; inset-inline-start: .625rem; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 999px;
  background: var(--muted); color: var(--muted-foreground); pointer-events: none;
}
.input-icon svg { width: .875rem; height: .875rem; }

.input-wrap input {
  width: 100%; height: 2.75rem; border-radius: .75rem;
  border: 1px solid var(--border); background: transparent; color: inherit;
  padding-right: 2.5rem; padding-left: .75rem;   /* האייקון יושב מימין */
  font: inherit; font-size: 1rem; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input-wrap input::placeholder { color: var(--muted-foreground); }
.input-wrap input:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 50%, transparent);
}

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.75rem; width: 100%; flex: none; padding-inline: 1.5rem;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--primary); color: var(--primary-foreground);
  font-size: .9375rem; font-weight: 700; white-space: nowrap; transition: background .15s;
}
@media (min-width: 768px) { .btn-primary { width: auto; } }
.btn-primary:hover { background: color-mix(in oklab, var(--primary) 88%, black); }
.btn-primary:active { transform: translateY(1px); }

.claim-note { margin: 0; text-align: center; font-size: .75rem; color: var(--muted-foreground); }

/* ------------------------------------------------------------- כרטיסים */

.side-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 768px) { .side-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.card {
  display: flex; flex-direction: column; height: 100%;
  border-radius: 1rem; background: var(--card); box-shadow: var(--shadow-card);
  padding: .875rem 1rem .25rem;
}
html[data-theme="dark"] .card { border: 1px solid var(--border); }
@media (min-width: 768px) { .card { padding: 1rem 1.25rem .25rem; } }

.card-title { margin: 0 0 .25rem; font-size: .875rem; font-weight: 600; letter-spacing: -.02em; }

.minilist { list-style: none; margin: 0; padding: 0; }
.minilist li + li { border-top: 1px solid var(--border); }
.minilist a { display: flex; align-items: center; gap: .5rem; padding: .375rem 0; font-size: .75rem; }
.minilist a:hover .mini-label { color: var(--primary); }
.mini-label { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-meta { flex: none; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 1.75rem; height: 1.75rem; border-radius: .5rem;
  background: var(--muted); color: var(--muted-foreground);
  font-size: .8125rem; font-weight: 600; user-select: none;
}
.avatar.sm { width: 1.25rem; height: 1.25rem; border-radius: .375rem; font-size: .6875rem; }

/* ------------------------------------------------------------ טבלת לוח */

.board { scroll-margin-top: 1.5rem; }

.row {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.row + .row { border-top: 1px solid var(--border); }
.row.rank-1, .row.rank-top { border-top: 0; }
.row.rank-1 + .row, .row.rank-top + .row { border-top: 0; }

.row-link {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem; transition: color .15s;
}
@media (min-width: 768px) { .row-link { gap: .75rem; padding: .75rem 1rem; } }
.row-link:hover { color: var(--primary); }

.row.rank-1, .row.rank-top { border-radius: .75rem; margin-block: .875rem .375rem; }
@media (min-width: 768px) { .row.rank-1, .row.rank-top { border-radius: 1rem; margin-block: 1.125rem .75rem; } }
.row.rank-1 { border: 2px solid var(--primary); background: var(--primary-wash); }
.row.rank-top { border: 2px solid color-mix(in oklab, var(--primary) 45%, transparent); background: color-mix(in oklab, var(--primary-fill) 8%, transparent); }
.row.rank-1 .row-link, .row.rank-top .row-link { padding-inline: .625rem; }
.row.rank-1, .row.rank-top { padding-block-start: .5rem; }
.row.rank-1 > .claim-rank, .row.rank-top > .claim-rank { margin-inline-end: .625rem; }
@media (min-width: 768px) { .row.rank-1 .row-link, .row.rank-top .row-link { padding-inline: .875rem; } }

.row-lead { display: flex; flex-direction: column; align-items: center; gap: .375rem; width: 2.5rem; flex: none; }
@media (min-width: 768px) { .row-lead { flex-direction: row; width: auto; gap: .75rem; } }

.rank-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.75rem; padding: 1px .375rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
}
@media (min-width: 768px) { .rank-badge { min-width: 2.5rem; padding: 2px .5rem; font-size: 1rem; } }
.rank-badge.hot { background: var(--primary); color: var(--primary-foreground); }
.row.rank-top .rank-badge.hot { background: var(--primary); }
.row.rank-1 .rank-badge.hot { background: var(--primary); }

.row-body { flex: 1; min-width: 0; }
.row-head { display: flex; align-items: baseline; gap: .5rem; }
.row-name { flex: 1; min-width: 0; margin: 0; font-weight: 700; font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
@media (min-width: 768px) { .row-name { font-size: 1rem; } }
.row-bid { flex: none; margin: 0; font-weight: 600; font-size: .875rem; color: var(--primary); font-variant-numeric: tabular-nums; direction: ltr; }
@media (min-width: 768px) { .row-bid { font-size: 1rem; } }

.row-desc {
  margin: 0; font-size: .75rem; color: var(--muted-foreground);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 768px) { .row-desc { font-size: .875rem; } }

.row-meta { margin: .125rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; font-size: 11px; }
@media (min-width: 768px) { .row-meta { font-size: .75rem; } }
.row-meta .clicks { display: inline-flex; align-items: center; font-weight: 600; }


.divider { display: flex; align-items: center; gap: .75rem; padding: 1.25rem .75rem; }
@media (min-width: 768px) { .divider { gap: 1rem; padding: 1.75rem 1rem; } }
.divider .line { flex: 1; height: 2px; border-radius: 999px; background: color-mix(in oklab, var(--primary) 30%, transparent); }
.divider .chip {
  border-radius: 999px; padding: .25rem .625rem; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; color: var(--primary);
  border: 1px solid color-mix(in oklab, var(--primary) 35%, transparent);
  background: var(--primary-wash);
}
@media (min-width: 768px) { .divider .chip { font-size: .75rem; padding: .25rem .75rem; } }

/* ------------------------------------------------------------- עימוד */

.pager { margin-top: 1.5rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.pager-btns { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem; direction: ltr; }
.page-num, .page-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2rem; height: 2rem; padding-inline: .5rem; border-radius: .5rem;
  font-size: .875rem; font-weight: 500; color: var(--primary);
  font-variant-numeric: tabular-nums; transition: background .15s;
}
.page-num:hover, .page-arrow:hover { background: color-mix(in oklab, var(--primary) 10%, transparent); }
.page-num.is-current { background: var(--primary); color: var(--primary-foreground); }
.page-arrow svg { width: 1.25rem; height: 1.25rem; }
.page-arrow.disabled { opacity: .35; pointer-events: none; }
.pager-count { margin: 0; font-size: .875rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ הכנסות */

.revenue { margin-top: 3.5rem; display: flex; flex-direction: column; align-items: center; }
.revenue-top, .revenue-bottom { margin: 0; font-size: .875rem; color: var(--muted-foreground); }
.revenue-top { margin-bottom: .75rem; }
.revenue-bottom { margin-top: .75rem; }
.revenue-top a { font-weight: 500; color: var(--primary); }
.revenue-num {
  display: flex; align-items: baseline; margin: 0; direction: ltr;
  font-family: var(--mono); font-size: clamp(3rem, 14vw, 6rem);
  font-weight: 600; letter-spacing: -.04em; line-height: 1;
}
.revenue-num .cur { color: var(--primary); padding-inline-end: .5rem; }

/* -------------------------------------------------------------- תוכן */

.prose { max-width: 40rem; margin-inline: auto; }
.prose h2 { font-size: 28px; font-weight: 800; letter-spacing: -.03em; margin: .5rem 0 1rem; }
.prose h3 { font-size: 1.125rem; font-weight: 700; margin: 2rem 0 .5rem; }
.prose p { margin: 0 0 1rem; }
.prose ul { margin: 0 0 1rem; padding-inline-start: 1.25rem; }
.prose li { margin-bottom: .625rem; }
.prose a { color: var(--primary); font-weight: 500; }
.prose strong { font-weight: 700; }

.stat-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin: 1.5rem 0 2rem; }
@media (min-width: 640px) { .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stat { border-radius: 1rem; background: var(--card); box-shadow: var(--shadow-card); padding: 1rem 1.125rem; }
html[data-theme="dark"] .stat { border: 1px solid var(--border); }
.stat-num { margin: 0; font-size: 1.5rem; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; direction: ltr; text-align: start; }
.stat-label { margin: .125rem 0 0; font-size: .8125rem; color: var(--muted-foreground); }


/* ---------------------------------------------------------- עמוד תשלום */

.checkout { max-width: 54rem; margin-inline: auto; }

.back-link { display: inline-block; font-size: .875rem; color: var(--muted-foreground); transition: color .15s; }
.back-link:hover { color: var(--foreground); }

.checkout-title { margin: .75rem 0 .25rem; font-size: 28px; font-weight: 800; letter-spacing: -.03em; }
@media (min-width: 768px) { .checkout-title { font-size: 34px; } }
.checkout-lead { margin: 0 0 1.5rem; color: var(--muted-foreground); font-size: .9375rem; }

.checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (min-width: 860px) { .checkout-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }

.pay-card, .summary-card, .thanks-card { padding: 1.25rem; }
@media (min-width: 768px) { .pay-card, .summary-card, .thanks-card { padding: 1.5rem; } }
.pay-card .card-title, .summary-card .card-title { margin-bottom: 1rem; font-size: 1rem; }

.pay-form { display: flex; flex-direction: column; gap: .875rem; }
.field { display: flex; flex-direction: column; gap: .375rem; }
.field label { font-size: .8125rem; font-weight: 600; }
.field .opt { font-weight: 400; color: var(--muted-foreground); }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .875rem; }
.field-help { margin: 0; font-size: .75rem; color: var(--muted-foreground); }

.field input, .field textarea {
  width: 100%; border-radius: .75rem; border: 1px solid var(--border);
  background: transparent; color: inherit; font: inherit; font-size: 1rem;
  padding: .625rem .75rem; outline: none; transition: border-color .15s, box-shadow .15s;
}
.field input { height: 2.75rem; }
.field textarea { resize: vertical; min-height: 4.5rem; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-foreground); }
.field input:focus-visible, .field textarea:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 35%, transparent);
}
.field input.is-bad { border-color: #dc2626; }

.card-input { position: relative; }
.card-input input { padding-left: 3rem;        /* סמל הכרטיס יושב משמאל */
  letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.card-brand {
  position: absolute; top: 50%; inset-inline-end: .75rem; transform: translateY(-50%);
  color: var(--muted-foreground); pointer-events: none;
}
.card-brand svg { width: 1.5rem; height: 1rem; }

.btn-block { width: 100%; margin-top: .25rem; }

.secure-note {
  display: flex; align-items: center; gap: .375rem; margin: 0;
  font-size: .75rem; color: var(--muted-foreground);
}
.secure-note svg { width: .9375rem; height: .9375rem; flex: none; }

.summary-listing { display: flex; align-items: center; gap: .625rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.summary-listing-text { min-width: 0; flex: 1; }
.summary-name { margin: 0; font-weight: 700; font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
.summary-url { margin: 0; font-size: .75rem; color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }

.summary-lines { margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.summary-lines > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.summary-lines dt { font-size: .875rem; }
.summary-lines dd { margin: 0; font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; direction: ltr; }

.summary-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border);
  font-weight: 700;
}
.total-num { font-size: 1.375rem; color: var(--primary); font-variant-numeric: tabular-nums; direction: ltr; }

.projected {
  margin-top: 1rem; padding: .875rem 1rem; border-radius: .875rem;
  background: var(--primary-wash);
  border: 1px solid color-mix(in oklab, var(--primary) 35%, transparent);
}
.projected-label { margin: 0; font-size: .75rem; color: var(--muted-foreground); }
.projected-rank { margin: .125rem 0; font-size: 1.75rem; font-weight: 800; color: var(--primary); letter-spacing: -.03em; text-align: start; }
.projected-note { margin: 0; font-size: .75rem; color: var(--muted-foreground); }

.summary-facts { margin: 1rem 0 0; padding-inline-start: 1.125rem; font-size: .75rem; color: var(--muted-foreground); }
.summary-facts li { margin-bottom: .375rem; }

.demo-note {
  margin: 1.5rem 0 0; padding: .875rem 1rem; border-radius: .875rem;
  background: var(--muted); color: var(--muted-foreground);
  font-size: .8125rem; line-height: 1.6;
}
.demo-note strong { color: var(--foreground); }

/* --------------------------------------------------------- עמוד תודה */

.thanks { max-width: 34rem; margin-inline: auto; text-align: center; }
.thanks-mark { display: inline-flex; color: var(--primary); }
.thanks-mark svg { width: 3.5rem; height: 3.5rem; }
.thanks-title { margin: .5rem 0 .25rem; font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.thanks-lead { margin: 0 0 1.5rem; color: var(--muted-foreground); font-size: .9375rem; }
.thanks-card { text-align: start; }
.rank-badge.big { min-width: 3rem; font-size: 1.125rem; padding: .25rem .625rem; flex: none; }
.thanks-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .625rem; margin-top: 1.5rem; }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  height: 2.75rem; padding-inline: 1.25rem; border-radius: 999px;
  border: 1px solid var(--border); font-size: .9375rem; font-weight: 600;
  transition: background .15s;
}
.btn-ghost:hover { background: var(--muted); }
.thanks-note { margin-top: 1.5rem; font-size: .8125rem; color: var(--muted-foreground); }

/* ==================================================== נגישות: מצבי תצוגה */

/* דילוג לתוכן הראשי */
.skip-link {
  position: absolute; inset-inline-start: 50%; top: -100px; transform: translateX(50%);
  z-index: 200; padding: .75rem 1.25rem; border-radius: 0 0 .75rem .75rem;
  background: var(--primary); color: var(--primary-foreground);
  font-weight: 700; font-size: .9375rem; transition: top .15s;
}
.skip-link:focus { top: 0; }

/* מיקוד נראה לכל רכיב פעיל */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: .375rem;
}

/* גודל טקסט */
html[data-a11y-font="1"] { font-size: 112%; }
html[data-a11y-font="2"] { font-size: 125%; }
html[data-a11y-font="3"] { font-size: 140%; }
html[data-a11y-font="4"] { font-size: 160%; }

/* ניגודיות גבוהה */
html[data-a11y-contrast="high"] {
  --background: #000; --foreground: #fff; --card: #000; --muted: #1a1a1a;
  --muted-foreground: #f2f2f2; --border: #fff; --primary: #ffe600;
  --primary-foreground: #000; --live: #00ff6a; --shadow-card: none;
}
html[data-a11y-contrast="high"] .card,
html[data-a11y-contrast="high"] .stat { border: 2px solid #fff; }
html[data-a11y-contrast="high"] .row-desc,
html[data-a11y-contrast="high"] .muted,
html[data-a11y-contrast="high"] .mini-meta { color: #f2f2f2; }
html[data-a11y-contrast="high"] .row.rank-1,
html[data-a11y-contrast="high"] .row.rank-top { background: #1a1a1a; }

/* גווני אפור */
html[data-a11y-contrast="gray"] body { filter: grayscale(1); }

/* הדגשת קישורים */
html[data-a11y-links] a {
  text-decoration: underline !important;
  text-underline-offset: 3px;
  outline: 1px dashed currentColor;
  outline-offset: 2px;
}

/* גופן קריא */
html[data-a11y-readable], html[data-a11y-readable] body {
  font-family: Arial, "Noto Sans Hebrew", sans-serif !important;
  letter-spacing: .02em;
  word-spacing: .08em;
  line-height: 1.8;
}
html[data-a11y-readable] * { font-family: inherit !important; }

/* סמן עכבר גדול */
html[data-a11y-cursor], html[data-a11y-cursor] * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 4l26 18-11 2 6 13-5 2-6-13-10 8z' fill='%23fff' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 4 4, auto;
}

/* עצירת אנימציות */
html[data-a11y-still] *, html[data-a11y-still] *::before, html[data-a11y-still] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* ====================================================== כפתור ותפריט */

.a11y-fab {
  position: fixed; inset-block-end: calc(1rem + var(--bar-h));
  inset-inline-start: 1rem; z-index: 90;
  transition: inset-block-end .2s;
  display: inline-flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--primary-foreground);
  background: var(--primary); color: var(--primary-foreground);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .28);
  transition: transform .15s;
}
.a11y-fab:hover { transform: scale(1.06); }
.a11y-fab svg { width: 1.75rem; height: 1.75rem; }

.a11y-backdrop { position: fixed; inset: 0; z-index: 98; background: rgba(0, 0, 0, .45); }

.a11y-panel {
  position: fixed; inset-block-end: calc(1rem + var(--bar-h));
  inset-inline-start: 1rem; z-index: 99;
  width: min(20rem, calc(100vw - 2rem));
  max-height: min(34rem, calc(100vh - 2rem - var(--bar-h)));
  overflow-y: auto; padding: 1rem;
  border-radius: 1rem; border: 1px solid var(--border);
  background: var(--card); color: var(--foreground);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .3);
}
.a11y-panel[hidden], .a11y-backdrop[hidden] { display: none; }

.a11y-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.a11y-head h2 { margin: 0; font-size: 1rem; font-weight: 700; }
.a11y-head .icon-btn svg { width: 1.125rem; height: 1.125rem; }

.a11y-group { margin-bottom: .875rem; }
.a11y-group-title { margin: 0 0 .375rem; font-size: .75rem; font-weight: 600; color: var(--muted-foreground); }

.a11y-item, .a11y-reset {
  display: block; width: 100%; margin-bottom: .375rem; padding: .5rem .75rem;
  border-radius: .625rem; border: 1px solid var(--border); cursor: pointer;
  background: transparent; color: inherit; font-size: .875rem; font-weight: 500;
  text-align: start; transition: background .15s, border-color .15s;
}
.a11y-item:hover, .a11y-reset:hover { background: var(--muted); }
.a11y-item.is-on {
  background: var(--primary-wash);
  border-color: var(--primary); color: var(--primary); font-weight: 700;
}
.a11y-item.is-on::after { content: " ✓"; }

.a11y-stepper { display: flex; align-items: center; gap: .5rem; }
.a11y-step {
  flex: 1; padding: .5rem; border-radius: .625rem; border: 1px solid var(--border);
  background: transparent; color: inherit; font-size: .9375rem; font-weight: 700; cursor: pointer;
}
.a11y-step:hover { background: var(--muted); }
.a11y-step-value { min-width: 3.5rem; text-align: center; font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.a11y-reset { margin-top: .25rem; font-weight: 600; }
.a11y-foot { margin: .75rem 0 0; font-size: .6875rem; line-height: 1.6; color: var(--muted-foreground); }
.a11y-foot a { color: var(--primary); font-weight: 600; }

/* ==================================================== עמודים משפטיים */

.legal { max-width: 44rem; }
.legal-meta { font-size: .8125rem; color: var(--muted-foreground); margin-top: -.5rem; }
.legal h3 { margin-top: 2rem; }
.legal ul { padding-inline-start: 1.25rem; }
.legal li { margin-bottom: .625rem; line-height: 1.7; }

.contact-list { margin: 1rem 0; padding: 1rem 1.125rem; border-radius: .875rem; background: var(--muted); }
.contact-list > div { display: flex; flex-wrap: wrap; gap: .25rem .75rem; padding: .3125rem 0; }
.contact-list dt { min-width: 9rem; font-weight: 600; font-size: .875rem; }
.contact-list dd { margin: 0; font-size: .875rem; }
.contact-list a { color: var(--primary); }

.fillme {
  margin: 1.25rem 0; padding: 1rem 1.125rem; border-radius: .875rem;
  border: 2px solid #dc2626;
  background: color-mix(in oklab, #dc2626 10%, transparent);
  font-size: .875rem; line-height: 1.65;
}
.fillme p { margin: 0 0 .5rem; }
.fillme-title { font-weight: 700; color: #b91c1c; }
html[data-theme="dark"] .fillme-title { color: #fca5a5; }
.fillme ul { margin: 0 0 .5rem; padding-inline-start: 1.25rem; }
.fillme li { margin-bottom: .25rem; font-size: .8125rem; }
.fillme code { font-family: var(--mono); font-size: .8125rem; background: var(--muted); padding: .0625rem .3125rem; border-radius: .25rem; }
.fillme-note { margin-bottom: 0; font-size: .75rem; color: var(--muted-foreground); }

/* ======================================================== תחתית האתר */

.site-footer {
  margin-top: 4rem;
  padding: 2rem 0 calc(5.5rem + var(--bar-h));
  border-top: 1px solid var(--border); text-align: center;
}
.site-footer p { margin: 0; font-size: .875rem; color: var(--muted-foreground); }
.site-footer a { color: var(--primary); }
.footer-tag { margin-bottom: .875rem !important; }
.footer-nav {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .5rem 1rem; list-style: none; margin: 0 0 .875rem; padding: 0; font-size: .875rem;
}
.footer-nav a { font-weight: 500; }
.footer-business { font-size: .8125rem !important; }
.footer-fine { margin-top: .5rem !important; font-size: .75rem !important; }

/* אישור תקנון ופרטי עוסק בעמוד התשלום */
.consent { display: flex; align-items: flex-start; gap: .5rem; font-size: .8125rem; line-height: 1.6; cursor: pointer; }
.consent input { width: 1.125rem; height: 1.125rem; margin: .1875rem 0 0; flex: none; accent-color: var(--primary); cursor: pointer; }
.consent a { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.seller-box { margin-top: 1.5rem; padding: 1rem 1.125rem; border-radius: .875rem; border: 1px solid var(--border); }
.seller-box h3 { margin: 0 0 .5rem; font-size: .875rem; font-weight: 700; }
.seller-line { margin: 0 0 .5rem; font-size: .75rem; line-height: 1.7; color: var(--muted-foreground); }
.seller-line:last-child { margin-bottom: 0; }
.seller-line a { color: var(--primary); }

/* ============================================ רכיבי דחיפות ותנועה חיה */
/* כל הנתונים ברכיבים האלה נשלפים מהמסד. אין ספירה לאחור מזויפת. */

/* ------------------------------------------------- טיקר הצעות אחרונות */
.ticker {
  display: flex; align-items: center; gap: .625rem; overflow: hidden;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); padding: .375rem .375rem .375rem .875rem;
}
.ticker-tag {
  display: inline-flex; align-items: center; gap: .375rem; flex: none;
  border-radius: 999px; background: var(--primary-wash); color: var(--primary);
  padding: .25rem .625rem; font-size: .6875rem; font-weight: 700; white-space: nowrap;
}
.ticker-viewport { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(to left, transparent, #000 2rem, #000 calc(100% - 2rem), transparent); mask-image: linear-gradient(to left, transparent, #000 2rem, #000 calc(100% - 2rem), transparent); }
.ticker-track { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; width: max-content; animation: ticker-scroll 48s linear infinite; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
.ticker-track li { display: inline-flex; align-items: center; gap: .375rem; font-size: .75rem; white-space: nowrap; color: var(--muted-foreground); }
.ticker-track strong { color: var(--foreground); font-weight: 700; }
.ticker-ago { color: var(--muted-foreground); opacity: .8; }
/* הרשימה מוכפלת, ולכן הזזה של חצי מרוחב המסילה מחזירה בדיוק לאותה
   נקודה. הכיוון מ-0 כלפי מטה: בעברית התוכן נע שמאלה, לפי כיוון הקריאה.
   קודם הכיוון היה הפוך, והמסילה בילתה חצי מהמחזור מחוץ למסך. */
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }
html[data-a11y-still] .ticker-track { animation: none !important; }

/* ------------------------------------------- תצוגה מקדימה של הדירוג */
.preview {
  margin: .875rem auto 0; max-width: 34rem; padding: .625rem 1rem;
  border-radius: .875rem; background: var(--primary-wash);
  border: 1px solid color-mix(in oklab, var(--primary) 35%, transparent);
  text-align: center;
}
.preview-line { margin: 0; font-size: .9375rem; font-weight: 700; }
.preview-line span { color: var(--primary); font-variant-numeric: tabular-nums; }
.preview-gap { margin: .1875rem 0 0; font-size: .8125rem; color: var(--muted-foreground); }
.preview-gap[hidden] { display: none; }
.preview.is-first { background: var(--primary-wash); border-color: var(--primary); border-width: 2px; }

/* ------------------------------------------------- כרטיסי לחץ ותנועה */
.pressure-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
@media (min-width: 720px) { .pressure-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pcard {
  border-radius: 1rem; border: 1px solid var(--border); background: var(--card);
  padding: .875rem 1rem; text-align: center;
}
.pcard-num { margin: 0; font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; color: var(--primary); font-variant-numeric: tabular-nums; direction: ltr; }
.pcard-label { margin: .125rem 0 0; font-size: .8125rem; font-weight: 600; line-height: 1.45; }
.pcard-foot { margin: .25rem 0 0; font-size: .6875rem; color: var(--muted-foreground); line-height: 1.45; }

/* --------------------------------------- צ'יפ העקיפה על שורות הלוח */
.claim-rank {
  flex: none; align-self: center;
  margin-inline-end: .75rem;
  border: 1px solid color-mix(in oklab, var(--primary) 45%, transparent);
  border-radius: 999px; cursor: pointer;
  background: var(--card); color: var(--primary);
  padding: .3125rem .75rem; font-size: .75rem; font-weight: 700;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.claim-rank:hover { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.claim-rank-long { display: none; }
.claim-rank-short { display: inline; }
@media (min-width: 900px) {
  .row:hover .claim-rank-long, .claim-rank:focus-visible .claim-rank-long { display: inline; }
  .row:hover .claim-rank-short, .claim-rank:focus-visible .claim-rank-short { display: none; }
}
@media (max-width: 639px) {
  .claim-rank { margin-inline-end: .5rem; padding: .25rem .5rem; font-size: .6875rem; }
}

/* --------------------------------------------------- סרגל דביק תחתון */
.stickybar {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 80;
  border-top: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 94%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .12);
  animation: sticky-in .2s ease-out;
}
.stickybar[hidden] { display: none; }
@keyframes sticky-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
.stickybar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .625rem; }
.stickybar-text { margin: 0; font-size: .8125rem; line-height: 1.4; }
.stickybar-text strong { color: var(--primary); font-size: 1rem; font-variant-numeric: tabular-nums; }
.stickybar-sub { display: block; font-size: .6875rem; color: var(--muted-foreground); }
.stickybar-cta { height: 2.5rem; padding-inline: 1.125rem; font-size: .875rem; width: auto; flex: none; }
/* כשהסרגל הדביק מוצג הוא תופס את תחתית המסך. כל מה שצף שם נדחף
   מעליו, וגם התחתית של העמוד מקבלת ריפוד כדי שלא תיחתך. */
body.has-stickybar { --bar-h: 4.5rem; }

/* --------------------------------------------- באנר דחיפות בתשלום */
.urgency {
  margin-bottom: 1rem; padding: .75rem 1rem; border-radius: .875rem;
  background: var(--primary-wash);
  border: 1px solid color-mix(in oklab, var(--primary) 35%, transparent);
}
.urgency-line { display: flex; align-items: flex-start; gap: .5rem; margin: 0; font-size: .8125rem; line-height: 1.6; }
.urgency-line .live-dot { margin-top: .375rem; }
.urgency.is-hot { border-color: var(--primary); background: color-mix(in oklab, var(--primary) 16%, transparent); }
.urgency.is-hot #urgency-text { font-weight: 600; }

/* ================================================ בחירת רשת חברתית */

.platforms { margin-top: .25rem; }
.platforms[hidden] { display: none; }
.platforms-title { margin: 0 0 .4375rem; font-size: .8125rem; font-weight: 600; text-align: center; }
.platform-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .4375rem; }

.platform-chip {
  display: inline-flex; align-items: center; gap: .375rem; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px;
  padding: .375rem .75rem; font-size: .8125rem; font-weight: 600;
  transition: border-color .15s, background .15s, color .15s;
}
.platform-chip:hover { background: var(--muted); }
.platform-chip:has(input:checked), .platform-chip.is-picked {
  border-color: var(--primary); background: var(--primary-wash); color: var(--primary);
}
.platform-chip:has(input:focus-visible) { outline: 3px solid var(--primary); outline-offset: 2px; }
.platform-icon { display: inline-flex; }
.platform-icon svg { width: 1.0625rem; height: 1.0625rem; }

.platforms-hint { margin: .4375rem 0 0; font-size: .75rem; color: var(--muted-foreground); text-align: center; }
.platforms-hint.is-bad { color: #b91c1c; font-weight: 600; }
html[data-theme="dark"] .platforms-hint.is-bad { color: #fca5a5; }

.row-platform { display: inline-flex; vertical-align: -2px; margin-inline-end: .3125rem; color: var(--muted-foreground); }
.row-platform svg { width: .875rem; height: .875rem; }
.summary-platform { margin: .0625rem 0 0; font-size: .75rem; font-weight: 600; color: var(--primary); text-align: start; }

/* ================================================== אמצעי תשלום */

.method-tabs { display: flex; gap: .375rem; margin-bottom: 1rem; }
.method-tab {
  flex: 1; display: inline-flex; flex-direction: column; align-items: center; gap: .25rem;
  border: 1px solid var(--border); border-radius: .875rem; background: transparent;
  color: inherit; padding: .625rem .375rem; font-size: .8125rem; font-weight: 600;
  cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.method-tab:hover { background: var(--muted); }
.method-tab svg { width: 1.375rem; height: 1.375rem; }
.method-tab.is-active { border-color: var(--primary); background: var(--primary-wash); color: var(--primary); }

.method-pane[hidden] { display: none; }
.method-pane { display: flex; flex-direction: column; gap: .875rem; }

.transfer-steps { margin: 0; padding-inline-start: 1.25rem; font-size: .875rem; line-height: 1.7; }
.transfer-steps li { margin-bottom: .5rem; }
.transfer-phone { display: inline-flex; align-items: center; gap: .375rem; flex-wrap: wrap; }
.transfer-phone a { color: var(--primary); font-weight: 700; font-size: 1.0625rem; letter-spacing: .02em; }

.copy-btn {
  border: 1px solid var(--border); border-radius: 999px; background: transparent;
  color: var(--muted-foreground); padding: .125rem .5rem; font-size: .6875rem;
  font-weight: 600; cursor: pointer; transition: background .15s, color .15s;
}
.copy-btn:hover { background: var(--muted); color: var(--foreground); }
.copy-btn.is-done { border-color: var(--primary); color: var(--primary); }

.transfer-note {
  margin: 0; padding: .75rem .875rem; border-radius: .75rem;
  background: var(--muted); font-size: .75rem; line-height: 1.65;
  color: var(--muted-foreground);
}

/* ------------------------------------------------- ממתין לאישור */

.pending-mark { color: var(--muted-foreground); }
.pending-badge {
  flex: none; border-radius: 999px; padding: .25rem .625rem;
  border: 1px solid color-mix(in oklab, var(--primary) 45%, transparent);
  background: var(--primary-wash); color: var(--primary);
  font-size: .75rem; font-weight: 700;
}
.notice-box {
  margin-top: 1.25rem; padding: 1rem 1.125rem; border-radius: .875rem;
  border: 1px solid var(--border); text-align: start; font-size: .875rem; line-height: 1.7;
}
.notice-box p { margin: 0 0 .5rem; }
.notice-box p:last-child { margin-bottom: 0; }
.notice-box a { color: var(--primary); font-weight: 700; }

/* --------------------------------------------------- מסך אישורים */

.admin-list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.admin-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .875rem 1rem; margin-bottom: .5rem;
  border: 1px solid var(--border); border-radius: .875rem;
}
.admin-list.compact .admin-row { padding: .5rem .875rem; }
.admin-main { min-width: 0; flex: 1; }
.admin-label { margin: 0; font-weight: 700; font-size: .9375rem; text-align: start; }
.admin-meta { margin: .0625rem 0 0; font-size: .75rem; color: var(--muted-foreground); }
.admin-actions { display: flex; gap: .375rem; flex-wrap: wrap; }
.admin-btn { height: 2.25rem; padding-inline: .875rem; font-size: .8125rem; width: auto; }
.ok-tag { color: var(--primary); font-weight: 700; }
.bad-tag { color: var(--muted-foreground); font-weight: 700; }

/* ==================================================== שער כניסה לניהול */

.gate { max-width: 26rem; margin: 2rem auto; }
.gate-card { padding: 1.5rem; }
.gate-title { margin: 0 0 .25rem; font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; }
.gate-lead { margin: 0 0 1.25rem; font-size: .875rem; color: var(--muted-foreground); line-height: 1.6; }
.gate-note { margin: 1rem 0 0; font-size: .75rem; color: var(--muted-foreground); line-height: 1.65; }
.gate-note code { font-family: var(--mono); font-size: .75rem; background: var(--muted); padding: .0625rem .3125rem; border-radius: .25rem; }

/* ========================================================= באק אופיס */

.bo { max-width: 52rem; margin-inline: auto; }

.bo-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.bo-title { margin: 0; font-size: 1.625rem; font-weight: 800; letter-spacing: -.03em; }
.bo-sub { margin: .125rem 0 0; font-size: .875rem; color: var(--muted-foreground); }
.bo-logout { height: 2.25rem; padding-inline: 1rem; font-size: .8125rem; }

.bo-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; margin-bottom: 1.75rem; }
@media (min-width: 720px) { .bo-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bo-stat { border: 1px solid var(--border); border-radius: .875rem; padding: .75rem .875rem; text-align: center; }
.bo-stat.is-alert { border-color: var(--primary); background: var(--primary-wash); }
.bo-stat-num { margin: 0; font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; direction: ltr; letter-spacing: -.02em; }
.bo-stat.is-alert .bo-stat-num { color: var(--primary); }
.bo-stat-label { margin: .0625rem 0 0; font-size: .75rem; color: var(--muted-foreground); }
.bo-stat-foot { margin: .125rem 0 0; font-size: .6875rem; font-weight: 600; color: var(--primary); direction: ltr; }

.bo-section { margin-bottom: 2.5rem; }
.bo-section-title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font-size: 1.0625rem; font-weight: 700; }
.bo-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.5rem; height: 1.5rem; padding-inline: .375rem; border-radius: 999px;
  background: var(--primary); color: var(--primary-foreground);
  font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.bo-hint { margin: 0 0 .875rem; font-size: .8125rem; color: var(--muted-foreground); line-height: 1.6; }

.bo-empty { border: 1px dashed var(--border); border-radius: .875rem; padding: 1.5rem 1.25rem; text-align: center; }
.bo-empty-title { margin: 0 0 .375rem; font-weight: 700; }
.bo-empty p { margin: 0; font-size: .8125rem; color: var(--muted-foreground); line-height: 1.65; }

.bo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.bo-card { border: 1px solid var(--border); border-radius: 1rem; padding: 1rem 1.125rem; background: var(--card); }
.bo-card-top { display: flex; align-items: center; gap: .625rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); }
.bo-card-id { flex: 1; min-width: 0; }
.bo-card-label { margin: 0; font-weight: 700; font-size: .9375rem; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-card-url { margin: 0; font-size: .75rem; color: var(--muted-foreground); text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-amount { flex: none; font-size: 1.25rem; font-weight: 800; color: var(--primary); direction: ltr; font-variant-numeric: tabular-nums; }

.bo-details { display: grid; grid-template-columns: minmax(0, 1fr); gap: .375rem .875rem; margin: .75rem 0; }
@media (min-width: 560px) { .bo-details { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .bo-details-wide { grid-column: 1 / -1; } }
.bo-details > div { display: flex; gap: .5rem; align-items: baseline; }
.bo-details dt { flex: none; min-width: 5.5rem; font-size: .75rem; color: var(--muted-foreground); }
.bo-details dd { margin: 0; font-size: .8125rem; }
.bo-copy-row { display: inline-flex; align-items: center; gap: .375rem; flex-wrap: wrap; }
.bo-copy-row a { color: var(--primary); font-weight: 700; }
.bo-method { border-radius: 999px; background: var(--primary-wash); color: var(--primary); padding: .0625rem .5rem; font-size: .75rem; font-weight: 700; }

.bo-card-actions { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.bo-btn { height: 2.375rem; padding-inline: 1rem; font-size: .8125rem; width: auto; }

.bo-search { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .875rem; }
.bo-search input {
  flex: 1; min-width: 12rem; height: 2.375rem; border-radius: .75rem;
  border: 1px solid var(--border); background: transparent; color: inherit;
  padding-inline: .75rem; font: inherit; font-size: .875rem; outline: none;
}
.bo-search input:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 35%, transparent); }
.bo-search .bo-btn { display: inline-flex; align-items: center; }

.bo-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: .875rem; }
.bo-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.bo-table th, .bo-table td { padding: .5rem .75rem; text-align: start; white-space: nowrap; }
.bo-table thead th { background: var(--muted); font-weight: 700; font-size: .75rem; }
.bo-table tbody tr { border-top: 1px solid var(--border); }
.bo-td-label { font-weight: 600; }

.bo-foot { margin-top: 1.5rem; font-size: .75rem; color: var(--muted-foreground); line-height: 1.65; text-align: center; }
.bo-foot code { font-family: var(--mono); background: var(--muted); padding: .0625rem .3125rem; border-radius: .25rem; }

/* ============================================ פודיום: זהב, כסף, ארד */
/* מדליה היא סימן סטטוס. היא הופכת את המקום הראשון למשהו שרוצים להחזיק
   בו, לא רק לשורה בטבלה. */

.row.rank-1 {
  border-color: var(--gold);
  background: linear-gradient(
    180deg,
    color-mix(in oklab, var(--gold) 16%, var(--card)),
    var(--card) 70%
  );
  box-shadow: var(--glow);
}
.row.rank-1 .rank-badge.hot { background: var(--gold); color: var(--gold-ink); }
.row.rank-1 .row-bid { color: var(--foreground); }

.row.rank-top { border-color: color-mix(in oklab, var(--primary-fill) 55%, transparent); }

.medal {
  position: absolute; inset-block-start: -.6875rem; inset-inline-start: 1rem;
  z-index: 3;
  display: inline-flex; align-items: center; gap: .25rem;
  border-radius: 999px; padding: .125rem .5rem;
  font-size: .6875rem; font-weight: 800; letter-spacing: .02em;
  background: var(--gold); color: var(--gold-ink);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}
.medal.silver { background: #c9ccd4; color: #1f1512; }
.medal.bronze { background: #dda06a; color: #1f1512; }

/* דופק עדין על שורת המקום הראשון, כדי שהעין תיתפס אליה */
@keyframes throne-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 90, 43, 0); }
  50%      { box-shadow: 0 0 26px rgba(255, 90, 43, .30); }
}
html[data-theme="dark"] .row.rank-1 { animation: throne-pulse 3.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .row.rank-1 { animation: none !important; } }
html[data-a11y-still] .row.rank-1 { animation: none !important; }

/* הסכום הגדול נקרא כמו לוח מחירים בבורסה */
.row-bid { letter-spacing: -.02em; }
.claim-title .amount-field { text-decoration-color: var(--primary); }

/* ==================================== חזרה לאתר ומעקב הרישומים שלכם */

.comeback {
  display: flex; align-items: center; gap: .625rem;
  border-radius: .875rem; padding: .75rem 1rem;
  border: 1px solid color-mix(in oklab, var(--primary) 40%, transparent);
  background: var(--primary-wash);
}
.comeback[hidden] { display: none; }
.comeback-icon { flex: none; font-size: 1.125rem; color: var(--primary); }
.comeback-text { margin: 0; font-size: .875rem; line-height: 1.6; }
.comeback-text strong { color: var(--primary); }

.mine[hidden] { display: none; }
.mine-title { margin: 0 0 .5rem; font-size: 1rem; font-weight: 700; }
.mine-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.mine-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: .625rem;
  border: 1px solid var(--border); border-radius: .875rem;
  padding: .75rem 1rem; background: var(--card);
}
.mine-card.is-dropping { border-color: var(--primary); background: var(--primary-wash); }
.mine-id { flex: 1; min-width: 0; }
.mine-label { margin: 0; font-weight: 700; font-size: .9375rem; text-align: start; }
.mine-meta { margin: .0625rem 0 0; font-size: .75rem; color: var(--muted-foreground); }
.mine-drop { color: var(--primary); font-weight: 700; }
.mine-rank { flex: none; font-size: 1.25rem; font-weight: 800; direction: ltr; font-variant-numeric: tabular-nums; }
.mine-btn { flex: none; height: 2.25rem; padding-inline: .875rem; font-size: .8125rem; width: auto; }

/* ============================================== הכתר: מי מחזיק במקום 1 */

.throne {
  display: flex; flex-wrap: wrap; align-items: center; gap: .875rem;
  border-radius: 1rem; padding: 1rem 1.125rem;
  border: 1px solid color-mix(in oklab, var(--gold) 45%, transparent);
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--gold) 12%, var(--card)), var(--card) 65%);
}
.throne-crown { flex: none; color: var(--gold); display: inline-flex; }
.throne-crown svg { width: 2rem; height: 2rem; }
.throne-body { flex: 1; min-width: 12rem; }
.throne-line { margin: 0; font-size: .9375rem; line-height: 1.55; }
.throne-line strong { font-weight: 800; }
.throne-sub { margin: .125rem 0 0; font-size: .75rem; color: var(--muted-foreground); }
.throne-cta {
  flex: none; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--gold); color: var(--gold-ink);
  padding: .5rem 1.125rem; font-size: .875rem; font-weight: 800;
  transition: transform .15s, filter .15s;
}
.throne-cta:hover { transform: translateY(-1px); filter: brightness(1.06); }

/* ================================================ רגע הזכייה בעמוד התודה */
.confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 120; overflow: hidden; }
.confetti-bit {
  position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  to { transform: translateY(105vh) rotate(720deg); opacity: .1; }
}
@media (prefers-reduced-motion: reduce) { .confetti-layer { display: none; } }
html[data-a11y-still] .confetti-layer { display: none; }

.thanks-mark { animation: pop-in .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes pop-in { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .thanks-mark { animation: none; } }

/* =============================================== רקע גרפי בשולי העמוד */
/* שכבה דקורטיבית מאחורי התוכן: הילות אור חמות בשוליים, רשת עדינה,
   וקו זוהר לאורך כל צד. אין בה תוכן, היא לא נגישה לעכבר ולא למקלדת,
   והיא לא משנה אף יחס ניגודיות של טקסט. */

.backdrop {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  overflow: hidden;
}

/* הילות בשני הצדדים. ברוחב צר הן נעלמות כדי לא להעמיס. */
.backdrop-glow {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: .5;
}
.backdrop-glow.one {
  inset-block-start: -6rem; inset-inline-start: -10rem;
  width: 34rem; height: 34rem;
  background: radial-gradient(circle, var(--primary-fill), transparent 68%);
}
.backdrop-glow.two {
  inset-block-start: 32%; inset-inline-end: -12rem;
  width: 30rem; height: 30rem;
  background: radial-gradient(circle, var(--gold), transparent 66%);
  opacity: .3;
}
.backdrop-glow.three {
  inset-block-end: -10rem; inset-inline-start: 18%;
  width: 40rem; height: 26rem;
  background: radial-gradient(ellipse, var(--primary-fill), transparent 70%);
  opacity: .28;
}
html[data-theme="light"] .backdrop-glow { opacity: .22; filter: blur(110px); }
html[data-theme="light"] .backdrop-glow.two { opacity: .18; }
html[data-theme="light"] .backdrop-glow.three { opacity: .14; }

/* רשת עדינה שמזכירה לוח מסחר */
.backdrop-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to left, color-mix(in oklab, var(--foreground) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--foreground) 7%, transparent) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(ellipse 75% 55% at 50% 40%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 55% at 50% 40%, #000 20%, transparent 78%);
  opacity: .5;
}

/* פסי אור אנכיים לאורך שולי עמודת התוכן */
.backdrop-rails { position: absolute; inset-block: 0; inset-inline: 0; display: none; }
@media (min-width: 1100px) {
  .backdrop-rails { display: block; }
  .backdrop-rail {
    position: absolute; inset-block: 0; width: 1px;
    background: linear-gradient(to bottom,
      transparent,
      color-mix(in oklab, var(--primary-fill) 55%, transparent) 22%,
      color-mix(in oklab, var(--gold) 45%, transparent) 55%,
      transparent);
    opacity: .45;
  }
  .backdrop-rail.start { inset-inline-start: calc(50% - 30rem); }
  .backdrop-rail.end { inset-inline-end: calc(50% - 30rem); }
  /* נקודת אור שנעה לאורך הפס */
  .backdrop-spark {
    position: absolute; width: 3px; height: 3px; border-radius: 50%;
    background: var(--primary-fill);
    box-shadow: 0 0 12px 3px color-mix(in oklab, var(--primary-fill) 70%, transparent);
    animation: rail-travel 9s linear infinite;
  }
  .backdrop-spark.start { inset-inline-start: calc(50% - 30rem - 1px); }
  .backdrop-spark.end { inset-inline-end: calc(50% - 30rem - 1px); animation-delay: 4.5s; }
}
@keyframes rail-travel {
  0%   { top: -2%; opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: 102%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .backdrop-spark { animation: none; opacity: 0; } }
html[data-a11y-still] .backdrop-spark { animation: none !important; opacity: 0; }

/* מצבי הנגישות מכבים את הרקע כדי שלא יפריע לקריאה */
html[data-a11y-contrast] .backdrop { display: none; }

/* התפריט נפתח בדיוק במקום הכפתור, אז הכפתור נעלם כל עוד הוא פתוח */
.a11y-fab[aria-expanded="true"] { opacity: 0; pointer-events: none; }

/* ההנחיה לשדה הזיהוי היא תווית גלויה, לא placeholder. ב-placeholder היא
   נחתכה במסך צר ונעלמה ברגע שמתחילים להקליד. תווית נשברת לשורות. */
.claim-label {
  display: block; margin-bottom: .375rem; text-align: center;
  font-size: .8125rem; font-weight: 600; color: var(--muted-foreground);
  text-wrap: pretty;
}
@media (min-width: 768px) { .claim-label { font-size: .875rem; } }

.nowrap { white-space: nowrap; }

/* במסך צר הטיקר צר מאוד, אז הפריטים מתקרבים והתגית מתכווצת */
@media (max-width: 560px) {
  .ticker { gap: .375rem; padding-inline-start: .5rem; }
  .ticker-tag { padding: .1875rem .4375rem; font-size: .625rem; }
  .ticker-track { gap: 1.125rem; }
  .ticker-track li { font-size: .6875rem; gap: .25rem; }
  .ticker-viewport {
    -webkit-mask-image: linear-gradient(to left, transparent, #000 .75rem, #000 calc(100% - .75rem), transparent);
    mask-image: linear-gradient(to left, transparent, #000 .75rem, #000 calc(100% - .75rem), transparent);
  }
}

/* במסך צר מאוד הכותרת העליונה (לוגו + ניווט + מתג תצוגה) לא נכנסת
   לרוחב, והיא דחפה את כל העמוד וגרמה לגלילה אופקית. כאן היא מתכווצת,
   ואם עדיין אין מקום היא נשברת לשורה שנייה במקום לחרוג. */
@media (max-width: 420px) {
  .header-inner { flex-wrap: wrap; gap: .5rem .625rem; padding-top: .875rem; }
  .brand { font-size: 19px; }
  .brand-mark svg { width: 1.375rem; height: 1.375rem; }
  .header-side { gap: .5rem; flex: 1; justify-content: flex-end; }
  .nav { gap: .75rem; font-size: .8125rem; }
}
@media (max-width: 340px) {
  .brand { font-size: 17px; }
  .nav { gap: .625rem; font-size: .75rem; }
}

/* ============================================ הסבר פשוט בראש העמוד */

.pitch { text-align: center; }
.pitch-title {
  margin: 0; font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em;
  line-height: 1.3; text-wrap: balance;
}
@media (min-width: 768px) { .pitch-title { font-size: 1.75rem; } }
.pitch-line {
  margin: .375rem auto 0; max-width: 30rem; font-size: .9375rem;
  line-height: 1.6; color: var(--muted-foreground); text-wrap: pretty;
}

/* ------------------------------------------------ שלושה צעדים */

.steps {
  border-radius: 1rem; border: 1px solid var(--border);
  background: var(--card); padding: 1.125rem 1.25rem;
}
.steps-title { margin: 0 0 .875rem; font-size: 1rem; font-weight: 700; text-align: center; }
.steps-list {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: .875rem;
  list-style: none; margin: 0; padding: 0; counter-reset: none;
}
@media (min-width: 720px) { .steps-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .125rem .625rem; align-items: start; }
@media (min-width: 720px) { .step { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: .25rem; } }
.step-num {
  grid-row: span 2; display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; flex: none; border-radius: 999px;
  background: var(--primary); color: var(--primary-foreground);
  font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
@media (min-width: 720px) { .step-num { grid-row: auto; margin-bottom: .25rem; } }
.step-head { margin: 0; font-size: .9375rem; font-weight: 700; }
.step-body { margin: 0; font-size: .8125rem; line-height: 1.55; color: var(--muted-foreground); }

.steps-warn {
  margin: 1rem 0 0; padding: .625rem .875rem; border-radius: .75rem;
  background: var(--primary-wash);
  border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
  font-size: .8125rem; line-height: 1.55; text-align: center; font-weight: 600;
}

/* ------------------------------------------------ לוח ריק */

.board-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: .5rem; padding: 2.25rem 1.25rem;
  border-radius: 1rem; border: 2px dashed color-mix(in oklab, var(--primary) 45%, transparent);
  background: var(--primary-wash);
}
.board-empty-crown { margin: 0; color: var(--gold); line-height: 0; }
.board-empty-crown svg { width: 2.75rem; height: 2.75rem; }
.board-empty-title { margin: 0; font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; }
.board-empty-line { margin: 0; max-width: 26rem; font-size: .9375rem; line-height: 1.6; color: var(--muted-foreground); }
.board-empty-line strong { color: var(--primary); font-size: 1.0625rem; }
.board-empty-cta { width: auto; margin-top: .5rem; padding-inline: 1.75rem; }

/* אימות היעד לפני תשלום: הזדמנות לתפוס קישור שגוי לפני שמשלמים עליו */
.verify-link {
  margin-top: 1rem; padding: .875rem 1rem; border-radius: .875rem;
  border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
  background: var(--primary-wash);
}
.verify-title { margin: 0; font-size: .875rem; font-weight: 700; }
.verify-body { margin: .25rem 0 .5rem; font-size: .75rem; line-height: 1.55; color: var(--muted-foreground); }
.verify-cta {
  display: block; word-break: break-all; text-align: start;
  font-size: .8125rem; font-weight: 700; color: var(--primary);
  text-decoration: underline; text-underline-offset: 3px;
}
.verify-cta:hover { color: var(--foreground); }

/* ======================================= רצועת פעילות אחרונה בלוח */
/* המידות והפריסה תואמות את הרפרנס: כרטיס מלבני מעוגל ברוחב קבוע,
   אווטאר עגול בצד, ושלוש שורות טקסט. גלילה אופקית. */

.feed { margin: .25rem 0 1.25rem; }
.feed-title {
  display: flex; align-items: center; gap: .375rem; margin: 0 0 .625rem;
  font-size: .8125rem; font-weight: 700;
}
.feed-list {
  display: flex; gap: .75rem; list-style: none; margin: 0;
  padding: .125rem .125rem .625rem;
  overflow-x: auto; scroll-snap-type: x proximity;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.feed-list::-webkit-scrollbar { height: 6px; }
.feed-list::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--muted-foreground) 30%, transparent);
  border-radius: 999px;
}
.feed-list > li { flex: none; scroll-snap-align: start; }

.feed-card {
  display: flex; align-items: center; gap: .625rem;
  width: 10.75rem; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: .875rem;
  background: var(--card); padding: .5625rem .75rem;
  transition: border-color .15s, background .15s, transform .15s;
}
.feed-card:hover {
  border-color: var(--primary); background: var(--primary-wash);
  transform: translateY(-1px);
}

/* אווטאר עגול, בגודל של הרפרנס */
.feed-card .avatar {
  width: 2.125rem; height: 2.125rem; border-radius: 999px;
  font-size: .875rem; font-weight: 800;
}

.feed-text { display: grid; gap: 0; min-width: 0; }
.feed-name {
  font-size: .875rem; font-weight: 700; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.feed-line {
  font-size: .75rem; line-height: 1.35; color: var(--muted-foreground);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.feed-time {
  font-size: .6875rem; line-height: 1.35; white-space: nowrap;
  color: color-mix(in oklab, var(--muted-foreground) 75%, transparent);
}

/* ============================================= עמוד של רישום בודד */

.detail { max-width: 46rem; margin-inline: auto; }

.crumbs { font-size: .8125rem; color: var(--muted-foreground); }
.crumbs a { color: var(--primary); font-weight: 600; }
.crumbs-here { font-weight: 700; color: var(--foreground); }

.detail-head { display: flex; align-items: flex-start; gap: .875rem; margin: .875rem 0 1.25rem; }
.detail-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 4rem; height: 4rem; border-radius: 1.125rem;
  background: var(--muted); color: var(--muted-foreground);
  font-size: 1.75rem; font-weight: 800;
}
@media (min-width: 640px) { .detail-avatar { width: 5rem; height: 5rem; font-size: 2.25rem; } }
.detail-id { min-width: 0; flex: 1; }
.detail-name {
  margin: 0; font-size: 1.625rem; font-weight: 800; letter-spacing: -.03em;
  text-align: start; overflow-wrap: anywhere;
}
@media (min-width: 640px) { .detail-name { font-size: 2.25rem; } }
.detail-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem;
  margin: .25rem 0 0; font-size: .8125rem; color: var(--muted-foreground);
}
.detail-platform { display: inline-flex; align-items: center; gap: .25rem; font-weight: 600; }
.detail-platform svg { width: .875rem; height: .875rem; }
.detail-clicks { font-weight: 700; color: var(--foreground); }
.detail-desc { margin: .5rem 0 0; font-size: .9375rem; line-height: 1.6; }

.detail-stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
@media (min-width: 640px) { .detail-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dstat { border: 1px solid var(--border); border-radius: 1rem; padding: 1rem 1.125rem; background: var(--card); }
.dstat.is-rank { border-color: var(--primary); background: var(--primary-wash); }
.dstat-label { margin: 0; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; color: var(--muted-foreground); }
.dstat-num {
  margin: .1875rem 0; font-size: 2rem; font-weight: 800; letter-spacing: -.03em;
  direction: ltr; text-align: start; font-variant-numeric: tabular-nums;
}
.dstat.is-rank .dstat-num { color: var(--primary); }
.dstat-foot { margin: 0; font-size: .75rem; line-height: 1.5; color: var(--muted-foreground); }

.detail-ahead {
  margin: 1rem 0 0; padding: .75rem 1rem; border-radius: .875rem;
  background: var(--muted); font-size: .875rem; line-height: 1.6;
}
.detail-ahead a { color: var(--primary); font-weight: 700; }
.detail-ahead.is-first {
  background: color-mix(in oklab, var(--gold) 16%, var(--card));
  border: 1px solid color-mix(in oklab, var(--gold) 45%, transparent);
}

.detail-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.detail-visit, .detail-outbid, .detail-copy { width: auto; height: 2.75rem; padding-inline: 1.25rem; }
.detail-visit { flex: 1 1 14rem; justify-content: center; }
.detail-outbid, .detail-copy { display: inline-flex; align-items: center; justify-content: center; font-size: .875rem; }
.detail-copy { cursor: pointer; font-family: inherit; }

.detail-note { margin-top: 1.25rem; font-size: .8125rem; color: var(--muted-foreground); text-align: center; }

/* הסבר הפתיחה: מה האתר הזה, בשלוש שניות */
.pitch-kicker {
  margin: 0 0 .25rem; font-size: .75rem; font-weight: 700; letter-spacing: .04em;
  color: var(--primary); text-transform: none;
}
.pitch-facts {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .375rem .875rem;
  list-style: none; margin: .75rem 0 0; padding: 0;
  font-size: .8125rem; font-weight: 600; color: var(--muted-foreground);
}
.pitch-facts li { display: inline-flex; align-items: center; gap: .3125rem; }
.pitch-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1rem; height: 1rem; border-radius: 999px;
  background: var(--primary); color: var(--primary-foreground);
  font-size: .625rem; font-weight: 800;
}
.pitch-state {
  margin: .75rem auto 0; max-width: 30rem; padding: .5rem .875rem;
  border-radius: 999px; background: var(--muted);
  font-size: .8125rem; font-weight: 600;
}

.detail-ahead.is-first { display: flex; align-items: center; gap: .5rem; }
.ahead-crown { flex: none; display: inline-flex; color: var(--gold); }
.ahead-crown svg { width: 1.375rem; height: 1.375rem; }

/* לוגו אמיתי שנשלף מהאתר, במקום אות ראשונה */
.avatar-logo { object-fit: contain; background: var(--card); padding: 2px; }
.row-host {
  font-size: 11px; color: var(--muted-foreground);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12rem;
}
@media (min-width: 768px) { .row-host { font-size: .75rem; } }
.detail-logo { object-fit: contain; background: var(--card); padding: .375rem; border: 1px solid var(--border); }
.detail-host { margin: .125rem 0 0; font-size: .875rem; font-weight: 600; color: var(--muted-foreground); text-align: start; }
.summary-blurb {
  margin: .1875rem 0 0; font-size: .75rem; line-height: 1.5; color: var(--muted-foreground);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* .stack הוא flex, ולכן ילדיו הם פריטי flex עם min-width: auto, שלא
   יורדים מתחת לרוחב התוכן. מכיוון שרצועת הפעילות גוללת אופקית, בלי
   האיפוס הזה היא דחפה את כל העמוד לגלילה אופקית במסך צר. */
.stack > * { min-width: 0; }
.board, .feed, .feed-list { min-width: 0; }
.row-head { min-width: 0; }

/* אלמנט עם overflow: hidden חותך צאצא ממוקם רק אם הוא עצמו ממוקם.
   בלי זה טקסט לקוראי מסך שיושב אחרי כותרת ארוכה נחת מחוץ לשורה ודחף
   את כל העמוד לגלילה אופקית. */
.row-name, .feed-name, .summary-name, .mini-label,
.bo-card-label, .bo-card-url, .summary-url, .detail-name { position: relative; }