/* ============================================================
   Poke-IL — חומרים במצב בהיר
   נטען אחרון ודורס את holo.css ואת playful.css.

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

     1. הרמה — צל אמיתי שמפריד את המשטח מהנייר.
     2. שפה ספקולרית — קו לבן חד בקצה העליון, כמו זכוכית.
     3. שבירה פריזמטית — צבע קשת רווי, לא הילה לבנה.

   הצבע הוא מה שעושה את העבודה כאן, לא הבהירות.
   ============================================================ */

/* ------------------------------------------------------------
   הקרקע
   נייר מגוון עם פריחת אור בראש המסך. הגרעיניות עוברת ל-multiply
   כי overlay על בסיס בהיר כמעט לא נראה.
   ------------------------------------------------------------ */
:root[data-theme="light"] body::before{
  opacity:.28;
  mix-blend-mode:multiply;
}

/* ------------------------------------------------------------
   משטח לבן על נייר מגוון
   הרים אותו, תן לו שפה מוארת, והוסף רמז פריזמטי בקצה.
   ------------------------------------------------------------ */
:root[data-theme="light"] .panel,
:root[data-theme="light"] .listing,
:root[data-theme="light"] .eventcard,
:root[data-theme="light"] .article,
:root[data-theme="light"] .offercard,
:root[data-theme="light"] .entry{
  background:var(--surface);
  border:1px solid color-mix(in srgb, var(--acc) 14%, var(--line));
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px rgba(16,32,60,.06),
    0 10px 26px rgba(16,32,60,.10);
}

/* ------------------------------------------------------------
   הולו — כאן הספקטרום חייב להיות רווי כדי להיראות בכלל
   על רקע כהה מספיק 16% אלפא; על לבן זה נבלע לגמרי.
   ------------------------------------------------------------ */
:root[data-theme="light"] .holo{
  background:
    linear-gradient(160deg,
      color-mix(in srgb, var(--acc) 10%, #fff) 0%,
      #fff 50%,
      color-mix(in srgb, var(--spark) 8%, #fff) 100%);
  border:1px solid color-mix(in srgb, var(--acc) 30%, var(--line));
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 6px rgba(16,32,60,.07),
    0 18px 44px rgba(16,32,60,.16);
}
:root[data-theme="light"] .holo::before{
  background:conic-gradient(from 210deg,
    rgba(255,64,120,.42), rgba(255,190,60,.40), rgba(60,225,170,.40),
    rgba(70,150,255,.46), rgba(180,100,255,.42), rgba(255,64,120,.42));
  filter:blur(34px) saturate(1.35);
  opacity:.62;
  mix-blend-mode:multiply;
}
/* פס האור האלכסוני: על לבן הוא לא יכול להיות לבן.
   פס פריזמטי דק שמדמה שבירה בזווית. */
:root[data-theme="light"] .holo::after{
  background:linear-gradient(102deg,
    transparent 32%,
    rgba(120,170,255,.20) 44%,
    rgba(255,255,255,.85) 50%,
    rgba(255,150,190,.18) 56%,
    transparent 68%);
  mix-blend-mode:normal;
}

/* ------------------------------------------------------------
   בור הקלף
   הקלף עצמו צבעוני ורווי, אז הבור צריך להיות כהה מספיק
   כדי שהקלף לא ייבלע בו, אבל לא כהה עד שהוא נראה חור.
   ------------------------------------------------------------ */
:root[data-theme="light"] .detail-well,
:root[data-theme="light"] .hero-well{
  background:
    radial-gradient(72% 62% at 50% 0%,
      color-mix(in srgb, var(--acc) 30%, transparent), transparent 72%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--acc) 12%, var(--card-well)),
      var(--card-well));
}
:root[data-theme="light"] .detail-img,
:root[data-theme="light"] .hero-img{
  box-shadow:
    0 2px 6px rgba(16,32,60,.14),
    0 18px 40px rgba(16,32,60,.26),
    0 0 0 1px rgba(255,255,255,.9);
}

/* ------------------------------------------------------------
   סרגלים
   זכוכית חלבית עם קו הפרדה ברור. שקיפות גבוהה על רקע בהיר
   מוחקת את הגבול בין הסרגל לתוכן שגולל מתחתיו.
   ------------------------------------------------------------ */
:root[data-theme="light"] .topbar{
  background:color-mix(in srgb, var(--bg) 78%, #fff);
  border-bottom:1px solid color-mix(in srgb, var(--acc) 16%, var(--line));
}
:root[data-theme="light"] .tabbar{
  background:rgba(255,255,255,.94);
  border-top:1px solid color-mix(in srgb, var(--acc) 18%, var(--line));
  box-shadow:0 -2px 6px rgba(16,32,60,.05), 0 -14px 34px rgba(16,32,60,.10);
}

/* ------------------------------------------------------------
   כפתורים
   הגוף שלהם צבעוני ורווי, ולכן דווקא כאן הברק הלבן עובד.
   רק מרככים את ההילה שלא תכתים את הנייר סביב.
   ------------------------------------------------------------ */
:root[data-theme="light"] .btn{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 2px 4px color-mix(in srgb, var(--acc-deep) 22%, transparent),
    0 8px 20px color-mix(in srgb, var(--acc) 30%, transparent);
}
:root[data-theme="light"] .btn.ghost{
  background:#fff;
  border:1px solid color-mix(in srgb, var(--acc) 22%, var(--line));
  color:var(--acc-ink);
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px rgba(16,32,60,.05),
    0 6px 16px rgba(16,32,60,.09);
}

/* שדות קלט — לבן על נייר מגוון, עם שקע עדין שמסמן "אפשר להקליד" */
:root[data-theme="light"] .field,
:root[data-theme="light"] .inp{
  background:#fff;
  border-color:color-mix(in srgb, var(--acc) 14%, var(--line));
  box-shadow:inset 0 1px 3px rgba(16,32,60,.06);
}
:root[data-theme="light"] .field:focus-within,
:root[data-theme="light"] .inp:focus{
  border-color:var(--acc);
  box-shadow:
    inset 0 1px 3px rgba(16,32,60,.05),
    0 0 0 3px color-mix(in srgb, var(--acc) 16%, transparent);
}

/* ------------------------------------------------------------
   אריחים — כאן הצבע כבר עושה את העבודה, רק מוסיפים הרמה
   ------------------------------------------------------------ */
:root[data-theme="light"] .quick{
  border:1px solid color-mix(in srgb, var(--tile, var(--acc)) 26%, var(--line));
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 4px rgba(16,32,60,.06),
    0 10px 24px color-mix(in srgb, var(--tile, var(--acc)) 20%, transparent);
}
:root[data-theme="light"] .quick:active{
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px rgba(16,32,60,.08);
}

/* התג של הקהילה — פריזמה קטנה, לא שקופה */
:root[data-theme="light"] .claim{
  background:#fff;
  border:1px solid color-mix(in srgb, var(--acc) 34%, var(--line));
  box-shadow:
    inset 0 1px 0 #fff,
    0 6px 18px color-mix(in srgb, var(--acc) 18%, transparent);
}

/* מדפים וכרטיסי קלף ברשימות */
:root[data-theme="light"] .thumbwrap{
  background:var(--surface-3);
  box-shadow:inset 0 0 0 1px rgba(16,32,60,.05);
}
:root[data-theme="light"] .gcard:hover .thumbwrap,
:root[data-theme="light"] .railcard:hover .thumbwrap{
  box-shadow:
    0 12px 28px rgba(16,32,60,.20),
    0 0 0 1px color-mix(in srgb, var(--acc) 45%, transparent);
}

/* כפתור הפעולה הצף */
:root[data-theme="light"] .fab{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 3px 6px color-mix(in srgb, var(--acc-deep) 26%, transparent),
    0 14px 32px color-mix(in srgb, var(--acc) 38%, transparent);
}

/* ------------------------------------------------------------
   וואן פיס — הנייר חם, ולכן הצללים חייבים להיות חמים גם הם.
   צל כחלחל על נייר אדמדם נראה מלוכלך.
   ------------------------------------------------------------ */
:root[data-game="onepiece"][data-theme="light"] .panel,
:root[data-game="onepiece"][data-theme="light"] .listing,
:root[data-game="onepiece"][data-theme="light"] .eventcard,
:root[data-game="onepiece"][data-theme="light"] .article,
:root[data-game="onepiece"][data-theme="light"] .offercard,
:root[data-game="onepiece"][data-theme="light"] .entry{
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px rgba(60,22,20,.06),
    0 10px 26px rgba(60,22,20,.11);
}
:root[data-game="onepiece"][data-theme="light"] .holo{
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 6px rgba(60,22,20,.07),
    0 18px 44px rgba(60,22,20,.17);
}
:root[data-game="onepiece"][data-theme="light"] .tabbar{
  box-shadow:0 -2px 6px rgba(60,22,20,.05), 0 -14px 34px rgba(60,22,20,.11);
}
:root[data-game="onepiece"][data-theme="light"] .detail-img,
:root[data-game="onepiece"][data-theme="light"] .hero-img{
  box-shadow:
    0 2px 6px rgba(60,22,20,.14),
    0 18px 40px rgba(60,22,20,.26),
    0 0 0 1px rgba(255,255,255,.9);
}
/* הספקטרום נוטה לחם, כדי שלא ייראה זר על נייר אדמדם */
:root[data-game="onepiece"][data-theme="light"] .holo::before{
  background:conic-gradient(from 200deg,
    rgba(255,70,70,.44), rgba(255,175,60,.42), rgba(255,225,110,.38),
    rgba(120,200,235,.36), rgba(215,110,190,.42), rgba(255,70,70,.44));
}

/* ------------------------------------------------------------
   שבבי סינון
   הם היו לבן שקוף על נייר מגוון, וזה מטשטש אותם.
   לבן מלא עם הרמה קטנה נותן להם גוף שאפשר "ללחוץ".
   ------------------------------------------------------------ */
:root[data-theme="light"] .chip{
  background:#fff;
  border-color:color-mix(in srgb, var(--acc) 18%, var(--line));
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px rgba(16,32,60,.05),
    0 3px 8px rgba(16,32,60,.07);
}
:root[data-theme="light"] .chip[aria-pressed="true"],
:root[data-theme="light"] .chip.on{
  background:linear-gradient(180deg, var(--acc-2), var(--acc));
  border-color:var(--acc-deep);
  color:var(--on-acc);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    0 2px 4px color-mix(in srgb, var(--acc-deep) 24%, transparent),
    0 6px 16px color-mix(in srgb, var(--acc) 30%, transparent);
}

/* מסגרת "ריק" — מקווקו כמעט בלתי נראה על נייר בהיר */
:root[data-theme="light"] .empty{
  background:color-mix(in srgb, #fff 55%, transparent);
  border-color:color-mix(in srgb, var(--acc) 24%, var(--line));
}

/* ============================================================
   מותג — Poke-IL
   ============================================================ */
.brandmark{display:inline-flex;align-items:center;gap:8px}
.brandmark img{
  border-radius:50%;              /* החיתוך הרוקע בדיוק על הכדור */
  flex:none;
  box-shadow:
    0 0 0 1.5px color-mix(in srgb, var(--acc) 45%, transparent),
    0 2px 6px rgba(16,32,60,.22);
}
.brand{
  direction:ltr;                  /* שם לטיני בתוך ממשק RTL חייב בידוד,
                                     אחרת המקף מזיז את הסדר */
  unicode-bidi:isolate;
  font-weight:700;
  letter-spacing:-.015em;
}

/* ============================================================
   מסך פתיחה
   נעלם ברגע שהאפליקציה מוכנה. יש גם נתיב מילוט בזמן קצוב —
   אם סקריפט נופל, אסור שהמשתמש יישאר נעול מול לוגו.
   ============================================================ */
.splash{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  background:var(--aurora);
  opacity:1; transition:opacity .45s ease, visibility .45s;
}
.splash.gone{opacity:0; visibility:hidden; pointer-events:none}
.splash-in{
  display:flex; flex-direction:column; align-items:center; gap:16px;
  padding:0 24px; text-align:center;
}
.splash-mark{
  width:168px; height:168px; border-radius:50%;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--acc) 40%, transparent),
    0 10px 30px rgba(16,32,60,.20),
    0 0 64px color-mix(in srgb, var(--acc) 32%, transparent);
  animation:splashIn .55s cubic-bezier(.2,.9,.3,1.1) both,
            splashFloat 3.6s ease-in-out 0.55s infinite;
}
@keyframes splashIn{
  from{opacity:0; transform:scale(.86)}
  to  {opacity:1; transform:scale(1)}
}
@keyframes splashFloat{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-7px)}
}
.splash-tag{
  margin:0; font-family:var(--f-display);
  font-size:15px; font-weight:600; color:var(--ink-2);
  animation:splashIn .5s ease .18s both;
}
.splash-bar{
  width:132px; height:4px; border-radius:99px; overflow:hidden;
  background:color-mix(in srgb, var(--ink) 10%, transparent);
}
.splash-bar i{
  display:block; height:100%; width:42%; border-radius:99px;
  background:linear-gradient(90deg, var(--acc-2), var(--acc), var(--spark));
  animation:splashSlide 1.15s ease-in-out infinite;
}
@keyframes splashSlide{
  0%  {transform:translateX(-115%)}
  100%{transform:translateX(255%)}
}
@media (prefers-reduced-motion:reduce){
  .splash-mark{animation:none}
  .splash-bar i{animation:none;width:100%}
}
:root.a11y-no-motion .splash-mark{animation:none}
:root.a11y-no-motion .splash-bar i{animation:none;width:100%}

/* הלוגו במסך ההרשמה */
.onboard-logo{
  border-radius:50%;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--acc) 40%, transparent),
    0 8px 24px rgba(16,32,60,.18),
    0 0 50px color-mix(in srgb, var(--acc) 26%, transparent);
}

/* ============================================================
   קלף בלי תמונה
   לחלק גדול מהקלפים היפנים אין תמונה בשום מאגר. ריבוע ריק
   נראה כאילו האפליקציה נשברה, ולכן מציגים מסגרת מעוצבת
   שנושאת את מה שכן ידוע על הקלף.
   ============================================================ */
.cardph{
  width:min(190px, 56%);
  aspect-ratio:733/1024;
  border-radius:12px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:16px; text-align:center;
  background:
    repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--acc) 7%, transparent) 0 10px,
      transparent 10px 20px),
    var(--surface);
  border:2px dashed color-mix(in srgb, var(--acc) 34%, var(--line));
  box-shadow:var(--bevel), var(--shadow);
}
.cardph-name{
  font-family:var(--f-display); font-size:17px; line-height:1.2;
  color:var(--ink); direction:ltr; unicode-bidi:isolate;
}
.cardph-set{ font-size:12px; color:var(--ink-2) }
.cardph-meta{
  font-size:11.5px; color:var(--ink-3);
  font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate;
}
.cardph-note{
  margin-top:4px; font-size:10.5px; color:var(--ink-3);
  padding:3px 8px; border-radius:99px;
  background:color-mix(in srgb, var(--acc) 10%, transparent);
}

/* מפריד דק בתוך פאנל */
.sep{
  height:1px; margin:4px 0;
  background:var(--line-soft);
}

/* ============================================================
   איורי האריחים
   האיור עומד בפני עצמו, בלי ריבוע צבעוני מתחתיו. הריבוע
   הקטן עם קו מתאר דק נראה כמו ממשק כלים; איור מלא בצבע
   נראה כמו מדבקה, וזה הטון הנכון לתחום הזה.
   ============================================================ */
.quick .qi{
  width:58px; height:58px;
  border-radius:0;
  background:none !important;
  box-shadow:none !important;
  display:flex; align-items:center; justify-content:center;
  /* צל רך מתחת לאיור עצמו, לא מתחת לקופסה */
  filter:drop-shadow(0 3px 5px rgba(16,32,60,.16));
}
.quick .qi svg{ width:100%; height:100%; display:block }

/* האריח נהיה מעט גבוה יותר כדי לתת לאיור מקום */
.quick{ padding-top:14px }

/* בלחיצה האיור נלחץ יחד עם הכרטיס */
.quick:active .qi{ transform:translateY(1px) }

@media (prefers-reduced-motion:no-preference){
  .quick .qi{ transition:transform .18s cubic-bezier(.2,.8,.3,1) }
  .quick:hover .qi{ transform:translateY(-2px) scale(1.04) }
}

/* האיורים המצוירים באריחים */
.quick .qi img{
  width:100%; height:100%;
  object-fit:contain;
  display:block;
}

/* האיור הוא הדבר שהעין תופסת קודם, ולכן הוא צריך נוכחות.
   ב-58px הוא נראה כמו איקון קטן שאבד בתוך כרטיס גדול. */
.quick .qi{
  width:88px; height:88px;
}
.quick{
  padding-top:12px;
  gap:2px;
}
.quick .qt{ margin-top:2px }

/* ============================================================
   איורי סרגל הניווט
   האיקונים הקוויים הוחלפו באיורים מצוירים. הלשונית הפעילה
   מסומנת בהגדלה קלה ובצל, ולא בשינוי צבע — לאיור צבעוני
   אי אפשר "לצבוע" מצב פעיל כמו לקו.
   ============================================================ */
.tab .ti{
  width:29px; height:29px;
  display:flex; align-items:center; justify-content:center;
  flex:none;
}
.tab .ti img{
  width:100%; height:100%;
  object-fit:contain; display:block;
  /* לא פעיל — מעומעם מעט כדי שהפעיל יבלוט */
  opacity:.62;
  filter:saturate(.75);
  transition:opacity .18s, filter .18s, transform .18s cubic-bezier(.2,.8,.3,1);
}
.tab[aria-current="page"] .ti img{
  opacity:1;
  filter:saturate(1.05) drop-shadow(0 2px 4px rgba(16,32,60,.28));
  transform:translateY(-1px) scale(1.1);
}
/* האיור מחליף את ה-svg, אבל ה-svg נשאר כרשת ביטחון */
.tab .ti svg{ width:21px; height:21px }

@media (prefers-reduced-motion:reduce){
  .tab .ti img{ transition:none }
  .tab[aria-current="page"] .ti img{ transform:none }
}

/* מעט יותר נוכחות, כמו במוקאפ */
.tab .ti{ width:33px; height:33px }
.tab{ gap:2px }

/* מחיר שעדיין נטען, או שאין לו ערך — מעומעם.
   קודם זה נעשה בצבע מוטבע מתוך JS, מה שמנע מערכות נושא
   לצבוע אותו בכלל. */
.pr.pending{ color:var(--ink-3) }

/* ============================================================
   סרגל דירוג
   מופיע רק כשהקלף שנסרק היה בתוך מארז אטום. הוא צריך לקפוץ
   לעין: מי שלא ישים לב אליו יקרא את מחיר הגלם כאילו הוא
   מחיר הקלף שלו, וזו טעות שעולה כסף.
   ============================================================ */
.gradebar{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; margin-bottom:10px;
  border-radius:12px;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--good) 14%, var(--surface)),
    color-mix(in srgb, var(--good) 7%, var(--surface)));
  border:2px solid color-mix(in srgb, var(--good) 42%, var(--line));
}
.gbadge{
  flex:none;
  font-family:var(--f-display); font-weight:700; font-size:14px;
  padding:6px 11px; border-radius:9px;
  background:linear-gradient(180deg, #2C3E52, #1B2937);
  color:#FFE9A8;
  border:2px solid #101A24;
  letter-spacing:.02em; direction:ltr; unicode-bidi:isolate;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
.gradebar .gt{ font-weight:700; font-size:13px; color:var(--ink) }

/* ============================================================
   סולם הדירוגים
   כל שורה היא ציון, והרוחב מייצג את המחיר. הצורה הזו עונה
   במבט אחד על "כמה זה קופץ בין ציון לציון".
   ============================================================ */
.gladder{
  display:flex; align-items:center; gap:9px;
  padding:5px 7px; border-radius:9px;
}
.gladder.on{
  background:color-mix(in srgb, var(--good) 14%, transparent);
  box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--good) 45%, transparent);
}
.gl-name{
  flex:none; width:62px;
  font-family:var(--f-display); font-weight:700; font-size:12.5px;
  color:var(--ink-2); direction:ltr; unicode-bidi:isolate;
}
.gl-bar{
  flex:1; height:9px; border-radius:99px; overflow:hidden;
  background:color-mix(in srgb, var(--ink) 8%, transparent);
}
.gl-bar i{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg, var(--acc-2), var(--acc));
}
.gladder.on .gl-bar i{
  background:linear-gradient(90deg, #6FD08C, var(--good));
}
.gl-val{
  flex:none; min-width:62px; text-align:end;
  font-weight:700; font-size:12.5px;
  font-variant-numeric:tabular-nums; color:var(--ink);
}

/* שורת הגלם בסולם — נקודת הייחוס, לא ציון */
.gladder.raw .gl-name{ color:var(--ink-3); font-weight:600 }
.gladder.raw .gl-bar i{
  background:linear-gradient(90deg, #B9C4D2, #97A5B6);
}

/* ============================================================
   מיקום המותג
   הלוגו ממורכז בסרגל בכל רוחב מסך. מיקום מוחלט ולא flex,
   כדי שהמרכוז יהיה ביחס לסרגל עצמו ולא יושפע מרוחב הכפתורים
   שמשני הצדדים — אחרת הוא "זז" כשמופיע מונה הודעות.
   ============================================================ */
.brandrow{ position:relative; min-height:44px }
.brandmark{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  pointer-events:none;
}
.brandrow .beta{ order:-1 }

/* ---------- הצגת סיסמה ---------- */
.pwbox{ position:relative; display:block }
.pwbox .inp.haseye{ padding-inline-end:44px; width:100% }
.pweye{
  position:absolute;
  inset-inline-end:6px;
  top:50%;
  transform:translateY(-50%);
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:9px;
  color:var(--ink-3);
  background:none; border:0;
}
.pweye:hover{ color:var(--acc); background:color-mix(in srgb, var(--acc) 10%, transparent) }
.pweye[aria-pressed="true"]{ color:var(--acc) }

/* ============================================================
   קטלוג
   ============================================================ */
.setgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:10px;
}
.settile{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:14px 10px; text-align:center;
  background:var(--surface);
  border:2px solid color-mix(in srgb, var(--acc) 14%, var(--line));
  border-radius:var(--r-lg);
  box-shadow:inset 0 1px 0 #fff, 0 3px 0 rgba(34,48,63,.08), 0 8px 18px rgba(20,40,90,.13);
  transition:transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s;
}
.settile:hover{ transform:translateY(-2px) }
.settile:active{ transform:translateY(1px) }
.settile img{
  height:44px; width:auto; max-width:100%;
  object-fit:contain;
}
.st-name{
  font-family:var(--f-display); font-weight:600; font-size:13.5px;
  line-height:1.25; color:var(--ink);
}

.cardgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(96px, 1fr));
  gap:10px;
}

/* פס אימות מייל — התראה, לא חסימה */
.verifybar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 12px; margin-bottom:12px;
  border-radius:12px;
  background:color-mix(in srgb, var(--warn) 16%, var(--surface));
  border:2px solid color-mix(in srgb, var(--warn) 40%, var(--line));
  font-size:13.5px; color:var(--ink);
}
.verifybar .btn{ flex:none }
.verifybar .iconbtn{ margin-inline-start:auto; flex:none }