/* Obrelia Polls — עיצוב לפי design.md (סגנון "Navigate"):
   בנדים full-bleed שחור/קרם/כתום, טיפוגרפיית ענק דחוסה, ליים כצבע פעולה יחיד,
   pill לכל אינטראקציה, בלי צללים/גרדיאנטים/קישוט צילומי. RTL עברית. */

:root {
  /* Colors */
  --pitch-black: #141414;
  --warm-cream: #fdf9f0;
  --charcoal-900: #232323;
  --bone-gray: #eeeeee;
  --acid-lime: #c7ff69;
  --ember-orange: #ff6d38;
  --iris-violet: #7a78ff;
  --toxic-green: #00a652;
  --cobalt-blue: #478bff;
  --schoolbus-yellow: #ffc412;
  --lilac-mist: #ccccff;

  /* Type — Rubik מחליף את פנים ה-display, Assistant את פנים הגוף */
  --font-display: 'Rubik', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Assistant', 'Segoe UI', system-ui, sans-serif;

  --text-caption: 11px;   --leading-caption: 1.2;  --tracking-caption: .15px;
  --text-body: 14px;
  --text-body-lg: 18px;   --leading-body-lg: 1.15;
  --text-heading-sm: clamp(26px, 5vw, 36px);   --leading-heading: .9;
  --text-heading:    clamp(34px, 7vw, 54px);
  --text-heading-lg: clamp(44px, 9vw, 83px);
  --text-display:    clamp(52px, 12vw, 135px); --leading-display: .85;

  /* Radius */
  --radius-pill: 1000px;
  --radius-card: 25px;

  /* Layout */
  --maxw: 1200px;
  --band-pad: clamp(48px, 9vh, 120px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { color-scheme: dark; }

body {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: 1.35;
  background: var(--pitch-black);
  color: var(--warm-cream);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ---------- בנדים ---------- */

.band { padding: var(--band-pad) 20px; }
.band-inner { max-width: var(--maxw); margin: 0 auto; }
.band.dark   { background: var(--pitch-black);  color: var(--warm-cream); }
.band.cream  { background: var(--warm-cream);   color: var(--pitch-black); }
.band.orange { background: var(--ember-orange); color: var(--pitch-black); }
.band.center { text-align: center; }

/* ---------- טיפוגרפיה ---------- */

.display, h1.display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: -.03em;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: var(--leading-heading); }
h1 { font-size: var(--text-heading-lg); letter-spacing: -.025em; }
h2 { font-size: var(--text-heading);    letter-spacing: -.02em; }
h3 { font-size: var(--text-heading-sm); letter-spacing: -.02em; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 500;
  letter-spacing: .14em;
  opacity: .85;
  margin-bottom: 18px;
}
.caption { font-size: var(--text-caption); line-height: var(--leading-caption); letter-spacing: var(--tracking-caption); opacity: .7; }
.muted { opacity: .66; }

/* ---------- כפתורים: ליים בלבד כפעולה ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  border-radius: var(--radius-pill);
  padding: 12px 26px;
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: transform .08s ease, opacity .15s ease;
}
.btn:active { transform: scale(.97); }
.btn-lime { background: var(--acid-lime); color: var(--pitch-black); border-color: var(--acid-lime); }
.btn-lime:hover { opacity: .9; }
.btn-ghost { background: transparent; color: inherit; border-color: var(--acid-lime); }
.btn-ghost:hover { background: rgba(199, 255, 105, .12); }
.btn-dark { background: var(--pitch-black); color: var(--warm-cream); border-color: var(--pitch-black); }
.btn-big { font-size: 19px; font-weight: 700; padding: 16px 44px; }
.btn[disabled] { opacity: .4; pointer-events: none; }

/* ---------- טפסים ---------- */

input[type=text], input[type=password], input[type=number], textarea, select {
  font-family: var(--font-body);
  font-size: 16px;
  width: 100%;
  background: transparent;
  color: inherit;
  border: 2px solid var(--bone-gray);
  border-radius: 14px;
  padding: 12px 16px;
}
.band.dark input, .band.dark textarea, .band.dark select { border-color: rgba(253, 249, 240, .35); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--acid-lime); }
label { display: block; font-weight: 700; font-size: 15px; margin: 22px 0 7px; }
.field-hint { font-size: 13px; opacity: .6; margin-top: 5px; }

/* ---------- ניווט pill צף (אדמין) ---------- */

.pillnav {
  position: sticky; top: 14px; z-index: 50;
  display: flex; align-items: center; gap: 6px;
  width: fit-content; max-width: calc(100% - 28px);
  margin: 14px auto 0;
  background: var(--charcoal-900);
  border-radius: var(--radius-pill);
  padding: 7px 9px;
}
.pillnav .brand {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--ember-orange);
  display: grid; place-items: center;
  font-size: 17px; text-decoration: none;
}
.pillnav a.navlink {
  color: var(--warm-cream); text-decoration: none;
  font-size: 14px; font-weight: 500;
  padding: 8px 14px; border-radius: var(--radius-pill);
}
.pillnav a.navlink:hover { background: rgba(253, 249, 240, .1); }
.pillnav a.navlink.active { background: var(--acid-lime); color: var(--pitch-black); }

/* ---------- כרטיסים / רשימות ---------- */

.card {
  border-radius: var(--radius-card);
  padding: 26px;
  border: 1px solid rgba(253, 249, 240, .14);
}
.band.cream .card { border-color: var(--bone-gray); background: transparent; }

.pill-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--charcoal-900); color: var(--warm-cream);
  border-radius: var(--radius-pill);
  padding: 14px 22px;
  margin-bottom: 12px;
}
.band.cream .pill-row, .band.orange .pill-row { background: var(--pitch-black); }
.pill-row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tag {
  display: inline-block;
  font-size: 12px; font-weight: 700;
  border: 2px solid var(--acid-lime);
  border-radius: var(--radius-pill);
  padding: 2px 12px;
}
.tag.solid { background: var(--acid-lime); color: var(--pitch-black); }
.tag.warn { border-color: var(--ember-orange); }

/* ---------- אריחי אפשרויות (דף הצבעה) ---------- */

.opts { display: grid; gap: 14px; margin: 36px 0; grid-template-columns: 1fr; }
@media (min-width: 640px) { .opts.has-img { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }

.opt {
  display: flex; align-items: center; gap: 16px;
  border: 2px solid rgba(253, 249, 240, .25);
  border-radius: var(--radius-pill);
  padding: 12px 20px;
  cursor: pointer;
  font-size: 18px; font-weight: 500;
  background: transparent; color: inherit;
  text-align: right; width: 100%;
  transition: border-color .12s ease, background .12s ease;
}
.opt:hover { border-color: var(--acid-lime); }
.opt.selected { border-color: var(--acid-lime); background: rgba(199, 255, 105, .14); }

.opt.card-img {
  flex-direction: column; gap: 12px;
  border-radius: var(--radius-card);
  padding: 18px;
  text-align: center;
}
.opt img {
  width: 96px; height: 96px; object-fit: cover;
  border-radius: 18px; flex: none;
}
.opt.card-img img { width: 100%; height: 160px; border-radius: 14px; }

/* ---------- תוצאות ---------- */

.res-row { margin-bottom: 22px; }
.res-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-weight: 700; }
.res-head .pct { font-family: var(--font-display); font-weight: 800; font-size: 24px; direction: ltr; }
.res-track { background: rgba(253, 249, 240, .14); border-radius: var(--radius-pill); height: 18px; margin-top: 8px; overflow: hidden; }
.band.cream .res-track, .band.orange .res-track { background: rgba(20, 20, 20, .14); }
.res-fill { height: 100%; border-radius: var(--radius-pill); background: rgba(253, 249, 240, .55); }
.res-row.winner .res-fill { background: var(--acid-lime); }
.res-row.mine .res-head::after { content: "✓ ההצבעה שלך"; font-size: 12px; font-weight: 500; opacity: .75; }
.res-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 12px; vertical-align: middle; margin-inline-start: 10px; }

/* ---------- אריחי החמישייה (קישוט מותג) ---------- */

.tile-row { display: flex; justify-content: center; gap: 14px; margin: 40px 0 0; }
.tile {
  width: clamp(52px, 9vw, 96px); height: clamp(52px, 9vw, 96px);
  border-radius: var(--radius-card);
  display: grid; place-items: center;
  font-size: clamp(24px, 4.5vw, 44px);
}
.tile.violet { background: var(--iris-violet); }
.tile.green  { background: var(--toxic-green); }
.tile.orange { background: var(--ember-orange); }
.tile.yellow { background: var(--schoolbus-yellow); }
.tile.blue   { background: var(--cobalt-blue); }

/* ---------- אדמין: טבלאות ופריסה ---------- */

.admin-wrap { max-width: 900px; margin: 0 auto; padding: 40px 20px 100px; }
.admin-grid { display: grid; gap: 12px; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.row-actions .btn { padding: 7px 16px; font-size: 13px; }

.opt-edit {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid rgba(253, 249, 240, .18);
  border-radius: 16px; padding: 10px 14px; margin-bottom: 10px;
}
.opt-edit img { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; flex: none; }
.opt-edit .noimg {
  width: 52px; height: 52px; border-radius: 10px; flex: none;
  border: 1px dashed rgba(253, 249, 240, .3);
  display: grid; place-items: center; font-size: 11px; opacity: .5;
}

.flash {
  border: 2px solid var(--acid-lime);
  border-radius: 16px; padding: 12px 18px; margin-bottom: 22px;
  font-weight: 700;
}
.flash.err { border-color: var(--ember-orange); }

.trust-note { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 14px; opacity: .8; margin-top: 26px; }

.stat-strip { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; margin-top: 30px; }
.stat-strip .stat b { font-family: var(--font-display); font-weight: 800; font-size: 34px; display: block; direction: ltr; }

img { max-width: 100%; }
a { color: inherit; }
.hidden { display: none !important; }