/* ===================== סל ===================== */
:root{
  --bg:#0B0D0F;
  --ink:#F3F5F2;
  --ink-2:rgba(243,245,242,.78);
  --ink-3:rgba(243,245,242,.58);
  --lime:#C6F24E;
  --lime-deep:#9BD11F;
  --mint:#5EE6B5;
  --rose:#FF6B6B;
  --glass:rgba(255,255,255,.045);
  --glass-2:rgba(255,255,255,.075);
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --r-lg:26px;
  --r-md:18px;
  --r-sm:13px;
  --r-btn:16px;
  --sat:env(safe-area-inset-top,0px);
  --sab:env(safe-area-inset-bottom,0px);
  /* גובה הישיבה של הכפתורים הצפים בתחתית, מעל פס הבית של אייפון */
  --dock-b:max(16px,calc(var(--sab) + 6px));
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:400;font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
  font-variant-numeric:tabular-nums;
  overflow:hidden;
}
button,input,textarea{font:inherit;color:inherit}
/* סאפרי במובייל מתעלם מ-user-scalable=no, ולכן הוא ממתין אחרי כל נגיעה לראות
   אם מגיעה נגיעה שנייה שתגדיל את הדף. זה מוסיף בערך שליש שנייה לכל לחיצה. */
button,[role="button"]{touch-action:manipulation}
button{background:none;border:0;padding:0;cursor:pointer}
input{background:none;border:0;outline:0}
[hidden]{display:none !important}
svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ---------- זוהר רקע ---------- */
/* הזוהר מצויר בגרדיאנט רך ולא ב-filter:blur. שלושה עיגולים בגודל מסך עם
   blur(90px) הם שלוש שכבות שהאייפון מטשטש מחדש בכל פעם שמשהו מעליהן זז,
   וזה מה שהפך פתיחת רשימה לשתי שניות. */
.aurora{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:paint}
.aurora i{position:absolute;display:block;border-radius:50%;opacity:.5}
.aurora .a1{width:104vw;height:104vw;top:-44vw;inset-inline-end:-34vw;
  background:radial-gradient(circle closest-side,rgba(198,242,78,.26),rgba(198,242,78,.14) 32%,rgba(198,242,78,.05) 58%,transparent 100%)}
.aurora .a2{width:116vw;height:116vw;bottom:-56vw;inset-inline-start:-44vw;
  background:radial-gradient(circle closest-side,rgba(94,230,181,.17),rgba(94,230,181,.09) 32%,rgba(94,230,181,.03) 58%,transparent 100%)}
.aurora .a3{width:88vw;height:88vw;top:30%;inset-inline-start:8%;
  background:radial-gradient(circle closest-side,rgba(120,110,255,.14),rgba(120,110,255,.07) 32%,rgba(120,110,255,.025) 58%,transparent 100%)}

/* ---------- מסכים ---------- */
/* הגלילה יושבת על המסך עצמו ולא על המסמך, כדי שסרגל הניווט יישאר צמוד לתחתית
   גם כשסאפרי במובייל מכווץ את סרגל הכתובת */
#app{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column}
/* width:100% נחוץ כי margin אוטומטי בציר הרוחב מבטל את ה-stretch של פריט flex */
#app .screen{flex:1;width:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain}

.screen{display:none;position:relative;z-index:1;max-width:560px;margin:0 auto;
  padding:calc(var(--sat) + 18px) 20px 0;min-height:100svh}
.screen--auth{overflow-y:auto}
/* בלי transform בכניסה: transform על המסך היה הופך אותו ל-containing block
   ומזיז את הכפתורים הצפים (composer) למשך האנימציה */
.screen.is-active{display:block;animation:screen-in .2s var(--ease)}
@keyframes screen-in{from{opacity:0}to{opacity:1}}
.scroll-pad{height:28px}
.scroll-pad--list{height:100px}

/* ===================== התחברות ===================== */
/* הגלילה יושבת על המסך עצמו כי body הוא overflow:hidden. בלי גובה קצוב
   תוכן דף הנחיתה היה גולש מתחת לקצה בלי דרך להגיע אליו. */
.screen--auth.is-active{display:block;height:100svh;overscroll-behavior-y:contain;
  padding-bottom:calc(var(--sab) + 24px)}
/* הטופס נשאר ממורכז במסך הראשון, והתוכן מתחיל בגלילה הראשונה.
   42px הם הריפוד של .screen למעלה (18) ולמטה (24) */
.auth-hero{min-height:calc(100svh - var(--sat) - var(--sab) - 42px);
  display:flex;flex-direction:column;align-items:center}
/* margin אוטומטי ולא justify-content: כך הטופס ממורכז בשטח הפנוי והרמז
   נדחף לתחתית. כשהטופס גבוה מהמסך המרווח מתאפס והרמז יורד מתחתיו, בלי חפיפה. */
.auth-wrap{margin-block:auto}
/* מסך הפתיחה משמש גם כספלאש: עד שהנתונים חוזרים רואים את הלוגו נכתב, ורק אז
   הוא נמוג ומפנה את המקום לאפליקציה. transform בטוח כאן כי אין כאן אלמנט fixed. */
.screen--auth.is-booting .btn-google,.screen--auth.is-booting .auth-note,
.screen--auth.is-booting .btn-guest,.screen--auth.is-booting .guest-note,
.screen--auth.is-booting .auth-form,.screen--auth.is-booting .auth-swap,
.screen--auth.is-booting .auth-or,.screen--auth.is-booting .more-hint{visibility:hidden}
.screen--auth.is-gone{opacity:0;transform:scale(1.07);pointer-events:none;
  transition:opacity .34s var(--ease),transform .34s var(--ease)}
.auth-wrap{width:100%;max-width:400px;text-align:center;transition:transform .55s var(--ease)}
/* הכפתורים המוסתרים שומרים על מקומם, ולכן בזמן הספלאש הלוגו יושב מעל אמצע המסך.
   app.js מודד את הפער ומזיז את הבלוק למטה בחציו, וכשהכפתורים נחשפים הוא חוזר חלק. */
.screen--auth.is-booting .auth-wrap{transform:translateY(var(--boot-shift,0px))}
.auth-mark{width:96px;height:96px;margin:0 auto 22px;display:grid;place-items:center;
  border-radius:30px;background:var(--glass);border:1px solid var(--line);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 26px 60px -24px rgba(198,242,78,.55)}
/* הלוגו: שלוש שורות רשימה שנכתבות מימין לשמאל, ושתיים מהן מסומנות */
.mark{width:58px;height:58px;fill:none;stroke:var(--lime);stroke-linecap:round;stroke-linejoin:round}
/* fill-box כדי שהתיבה תגדל מהמרכז שלה ולא מפינת ה-SVG */
.mk-box{stroke-width:4.6;opacity:.85;transform-box:fill-box;transform-origin:center;
  animation:mk-pop .42s var(--spring) both}
.mk-line{stroke-width:5;stroke-dasharray:35;stroke-dashoffset:35;animation:mk-draw .4s var(--ease) both}
.mk-tick{stroke-width:4.4;stroke-dasharray:17;stroke-dashoffset:17;animation:mk-draw .3s var(--ease) both}
/* שתי השורות הראשונות גם נדלקות ומתעמעמות אחרי הווי, ולכן שתי אנימציות.
   הרצף כולו נגמר ב-1.2 שניות, וזה גם משך הספלאש ב-app.js */
.mk-row--1 .mk-box{animation:mk-pop .42s .04s var(--spring) both,mk-lit .35s .76s var(--ease) forwards}
.mk-row--2 .mk-box{animation:mk-pop .42s .12s var(--spring) both,mk-lit .35s .92s var(--ease) forwards}
.mk-row--3 .mk-box{animation-delay:.2s}
.mk-row--1 .mk-line{animation:mk-draw .4s .2s var(--ease) both,mk-fade .28s .82s var(--ease) forwards}
.mk-row--2 .mk-line{animation:mk-draw .4s .3s var(--ease) both,mk-fade .28s .98s var(--ease) forwards}
.mk-row--3 .mk-line{animation-delay:.4s}
.mk-row--1 .mk-tick{animation-delay:.74s}
.mk-row--2 .mk-tick{animation-delay:.9s}
/* הרצף מתחיל רק כש-JS מדליק אותו בפריים הראשון. בלי זה, בטעינה איטית או
   בחזרה מהתחברות גוגל, האנימציה נגמרת לפני שהמסך בכלל מצויר ונראה לוגו קפוא. */
.auth-mark .mark .mk-box,.auth-mark .mark .mk-line,.auth-mark .mark .mk-tick{animation-play-state:paused}
.auth-mark .mark.is-on .mk-box,.auth-mark .mark.is-on .mk-line,.auth-mark .mark.is-on .mk-tick{animation-play-state:running}
@keyframes mk-draw{to{stroke-dashoffset:0}}
@keyframes mk-pop{from{opacity:0;transform:scale(.4) rotate(-12deg)}to{opacity:.85;transform:none}}
@keyframes mk-fade{to{opacity:.45}}
@keyframes mk-lit{to{opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .mark *{animation:none!important;stroke-dashoffset:0!important}
  .mk-row--1 .mk-line,.mk-row--2 .mk-line{opacity:.45}
}

.auth-title{margin:0;font-size:68px;line-height:1;font-weight:800;letter-spacing:-.04em;
  background:linear-gradient(170deg,#fff 20%,var(--lime));-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:rise .6s .2s var(--ease) both}
.auth-sub{margin:14px 0 30px;color:var(--ink-2);font-size:17px;line-height:1.6;animation:rise .6s .32s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.auth-form{display:grid;gap:10px;animation:rise .6s .44s var(--ease) both}
.auth-form .field{height:52px;border-radius:var(--r-btn);padding:0 18px;text-align:start}
.auth-form .field::placeholder{color:var(--ink-3)}
.auth-form .btn-primary{margin-top:2px;height:52px}
.auth-err{margin:2px 4px 0;font-size:13px;color:var(--rose);line-height:1.5;text-align:start}

.auth-swap{margin:14px 0 0;font-size:14px;color:var(--ink-3);
  animation:rise .6s .5s var(--ease) both}
.auth-swap button{color:var(--lime);font-size:14px;font-weight:600;text-decoration:underline;
  text-underline-offset:3px}

.auth-or{display:flex;align-items:center;gap:12px;margin:22px 0 16px;
  animation:rise .6s .56s var(--ease) both}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-or span{font-size:13px;color:var(--ink-3)}

.btn-google{width:100%;height:52px;border-radius:var(--r-btn);background:#fff;color:#14171a;
  display:flex;align-items:center;justify-content:center;gap:11px;font-weight:600;font-size:16px;
  transition:transform .2s var(--spring);
  animation:rise .6s .62s var(--ease) both}
.btn-google svg{width:20px;height:20px;flex:none;stroke:none}
.btn-google:active{transform:scale(.97)}

.btn-guest{width:100%;height:52px;margin-top:12px;border-radius:var(--r-btn);
  border:1px solid var(--line-2);background:transparent;color:var(--ink-2);font-size:16px;font-weight:600;
  transition:transform .2s var(--spring);animation:rise .6s .68s var(--ease) both}
.btn-guest:active{transform:scale(.97)}
.guest-note{margin:12px 2px 0;font-size:12.5px;color:var(--ink-3);line-height:1.65;
  animation:rise .6s .74s var(--ease) both}

.auth-note{margin-top:20px;font-size:13px;color:var(--ink-3);line-height:1.6}

.more-hint{display:flex;flex-direction:column;align-items:center;gap:1px;
  padding:14px 16px 0;color:var(--ink-3);font-size:13px;font-weight:500;
  animation:hint-bob 2.6s 1.6s var(--ease) infinite}
.more-hint svg{width:19px;height:19px;stroke-width:2.1}
.more-hint:active{color:var(--ink-2)}
@keyframes hint-bob{0%,74%,100%{transform:none}86%{transform:translateY(5px)}}
@media (prefers-reduced-motion:reduce){.more-hint{animation:none}}

/* ===================== דף נחיתה (מתחת לטופס) ===================== */
/* בלי אנימציית כניסה: התוכן הזה נסרק, ואופסיטי 0 בפתיחה מסתכן בכך
   שזחלן שמצלם את הדף מוקדם מדי יראה אותו ריק */
.landing{padding-top:56px}
.ld-sec{margin-bottom:40px}
.ld-sec h2{margin:0 0 12px;font-size:25px;font-weight:700;letter-spacing:-.03em;line-height:1.25}
.ld-lead{margin:0;color:var(--ink-2);font-size:16px;line-height:1.75}
.ld-feats{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ld-feat{padding:18px 20px;border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--line)}
.ld-feat h3{margin:0 0 6px;font-size:16.5px;font-weight:600;letter-spacing:-.02em}
.ld-feat p{margin:0;color:var(--ink-3);font-size:14.5px;line-height:1.7}
.ld-q{margin:0 0 5px;font-size:16px;font-weight:600;letter-spacing:-.02em}
.ld-a{margin:0 0 20px;color:var(--ink-3);font-size:14.5px;line-height:1.75}
.ld-a:last-child{margin-bottom:0}
.ld-a a{color:var(--lime);text-decoration:underline;text-underline-offset:3px}
.ld-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;
  padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-3)}
.ld-foot a{color:var(--ink-2);text-decoration:none}
.ld-foot p{margin:0;margin-inline-start:auto}
@media (min-width:560px){.ld-feats{grid-template-columns:1fr 1fr}}

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

/* ===================== כותרת עליונה ===================== */
.topbar{display:flex;align-items:flex-end;gap:10px;padding:10px 0 22px}
.topbar--list{align-items:center;gap:4px;padding-top:2px}
.topbar-kicker{margin:0 0 2px;font-size:13px;color:var(--ink-3);font-weight:500}
.topbar-title{margin:0;font-size:34px;font-weight:800;letter-spacing:-.035em;line-height:1.1;flex:1}
.topbar-title--list{font-size:27px;outline:0;border-radius:8px;padding:1px 4px;margin-inline-start:-4px}
.topbar-title--list:focus{background:var(--glass-2);box-shadow:0 0 0 1px var(--line-2)}
.topbar-list-mid{flex:1;min-width:0}
.topbar>div:first-child{flex:1;min-width:0}

.icon-btn{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:14px;
  color:var(--ink-2);transition:background .18s,color .18s,transform .18s var(--spring)}
.icon-btn svg{width:21px;height:21px}
.icon-btn:active{background:var(--glass-2);color:var(--ink);transform:scale(.9)}
.icon-btn.is-on{color:var(--lime);background:rgba(198,242,78,.12)}

.avatar-btn{width:44px;height:44px;flex:none;border-radius:50%;overflow:hidden;position:relative;
  border:1px solid var(--line-2);background:var(--glass-2);display:grid;place-items:center;
  font-weight:700;font-size:16px;color:var(--lime)}
.avatar-btn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.avatar-btn img[src=""]{display:none}

/* ===================== סגמנט ===================== */
.seg{position:relative;display:flex;gap:2px;padding:4px;border-radius:var(--r-md);
  background:var(--glass);border:1px solid var(--line);margin-bottom:24px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.seg-btn{flex:1;position:relative;z-index:2;height:38px;border-radius:14px;font-size:14px;font-weight:500;
  color:var(--ink-3);transition:color .25s}
.seg-btn.is-on{color:#0B0D0F;font-weight:600}
.seg-pill{position:absolute;z-index:1;top:4px;bottom:4px;border-radius:14px;background:var(--lime);
  transition:inset-inline-start .42s var(--ease),width .42s var(--ease);
  box-shadow:0 8px 22px -10px rgba(198,242,78,.9)}

/* ===================== כרטיסי רשימות ===================== */
.lists-grid{display:grid;gap:15px}
.list-card{position:relative;display:flex;align-items:center;gap:15px;
  padding-block:19px;padding-inline:20px 12px;
  border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--line);overflow:hidden;
  transition:transform .25s var(--spring),border-color .25s,background .25s;
  animation:card-in .45s var(--ease) both;text-align:start;width:100%}
@keyframes card-in{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.list-card:active{transform:scale(.975);background:var(--glass-2)}
.list-card::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:4px;background:var(--c,var(--lime));opacity:.9}
.list-card.is-done::before{background:var(--mint)}
.lc-ring{width:48px;height:48px;flex:none;position:relative;display:grid;place-items:center}
.lc-ring svg{transform:rotate(-90deg);stroke-width:3.4}
.lc-ring .r-bg{stroke:rgba(255,255,255,.1)}
.lc-ring .r-fg{stroke:var(--c,var(--lime));stroke-linecap:round;transition:stroke-dashoffset .7s var(--ease)}
.lc-ring b{position:absolute;font-size:12.5px;font-weight:700;letter-spacing:-.02em}
.lc-main{flex:1;min-width:0}
.lc-name{display:block;font-size:18px;font-weight:600;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-sub{display:block;margin-top:3px;font-size:13px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-menu{width:36px;height:36px;flex:none;border-radius:11px;display:grid;place-items:center;color:var(--ink-3)}
.lc-menu:active{background:var(--glass-2)}
.lc-menu svg{width:18px;height:18px}
.lc-badge{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;background:rgba(94,230,181,.14);
  color:var(--mint);white-space:nowrap}

.empty{text-align:center;padding:52px 26px;color:var(--ink-3)}
.empty b{display:block;color:var(--ink);font-size:19px;font-weight:600;margin-bottom:7px;letter-spacing:-.02em}
.empty span{font-size:14.5px;line-height:1.6}

/* ===================== התקדמות ===================== */
.progress-strip{display:flex;align-items:center;gap:11px;margin:2px 0 20px}
.progress-rail{flex:1;height:7px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.progress-rail i{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--lime-deep),var(--lime));
  box-shadow:0 0 16px rgba(198,242,78,.65);transition:width .55s var(--ease)}
.progress-strip span{font-size:12.5px;color:var(--ink-3);font-weight:500;flex:none}

/* ===================== חיפוש ===================== */
.search-bar{display:flex;align-items:center;gap:9px;height:50px;padding:0 14px;margin-bottom:18px;
  border-radius:var(--r-md);background:var(--glass);border:1px solid var(--line-2);
  animation:rise .3s var(--ease)}
.sb-ico{width:18px;height:18px;flex:none;color:var(--ink-3)}
.search-bar input{flex:1;font-size:15.5px;min-width:0}
.search-bar input::-webkit-search-cancel-button{display:none}
.sb-close{color:var(--ink-3);font-size:15px;padding:6px}

/* ===================== פריטים ===================== */
/* pan-y משאיר גלילה אנכית ומונע מספארי לחטוף את המגע לפני שהגרירה מתחילה */
.items-wrap{display:grid;gap:11px;touch-action:pan-y}
.items-head{display:flex;align-items:center;gap:9px;margin:24px 2px 6px;font-size:12.5px;
  color:var(--ink-3);font-weight:500}
.items-head::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---- קטגוריות ---- */
.cat{display:grid;gap:11px}
.cat + .cat{margin-top:10px}
.cat-head{display:flex;align-items:center;gap:8px;width:100%;padding:9px 8px 9px;
  border:1px solid transparent;border-radius:14px;
  color:var(--ink-2);font-size:13px;font-weight:600;text-align:start;
  transition:background .2s,border-color .2s,color .2s}
.cat-chev{width:16px;height:16px;flex:none;color:var(--ink-3);
  transition:transform .28s var(--ease)}
.cat.is-collapsed .cat-chev{transform:rotate(-90deg)}
.cat-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-count{flex:none;font-size:11.5px;font-weight:500;color:var(--ink-3);
  padding:3px 9px;border-radius:999px;background:var(--glass-2);font-variant-numeric:tabular-nums}
.cat.is-collapsed .cat-count{color:var(--ink-2)}
/* 1fr -> 0fr מאפשר קיפול מונפש בלי לדעת מראש את הגובה */
.cat-items{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s var(--ease)}
.cat-items > div{display:grid;gap:11px;min-height:0;overflow:hidden}
.cat.is-collapsed .cat-items{grid-template-rows:0fr}

/* ---- גרירה לקטגוריה ---- */
/* .item.X ולא .X, כי חוקי .item מוגדרים בהמשך הקובץ והיו גוברים */
.item.is-lifted{opacity:.2}
/* left/top פיזיים בכוונה: ה-transform שמזיז את הרפאים נמדד מפינה שמאלית-עליונה */
.item.item-ghost{position:fixed;top:0;left:0;z-index:70;pointer-events:none;
  opacity:.97;animation:none;transition:none;border-color:rgba(198,242,78,.55);
  box-shadow:0 28px 52px -20px rgba(0,0,0,.95)}
.cat.is-drop .cat-head{background:rgba(198,242,78,.15);border-color:rgba(198,242,78,.5);color:var(--lime)}
.cat.is-drop .cat-chev{color:var(--lime)}
.cat.is-drop .cat-count{background:var(--lime);color:#0B0D0F}
.cat--slot .cat-head{border-style:dashed;border-color:var(--line-2);color:var(--ink-3)}
.cat--slot .cat-count{font-weight:400}
#cat-slots{display:grid;gap:11px}

/* בלי backdrop-filter כאן ובכרטיסי הרשימות: שורה כזו חוזרת עשרות פעמים,
   ובאייפון כל אחת מהן היא שכבת טשטוש נפרדת שעולה שנייה שלמה בפתיחת הרשימה.
   הרקע מאחור שטוח ממילא, אז ויזואלית לא הפסדנו כלום. */
.item{position:relative;display:flex;align-items:center;gap:14px;padding:15px 16px;
  -webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
  border-radius:var(--r-md);background:var(--glass);border:1px solid var(--line);
  transition:background .25s,opacity .3s,transform .3s var(--ease)}
.item.is-checked{opacity:.62;background:rgba(255,255,255,.022)}
.item.is-going{animation:item-out .42s var(--ease) forwards}
@keyframes item-out{
  0%{transform:none;opacity:1}
  35%{transform:scale(1.02)}
  100%{transform:translateY(14px) scale(.96);opacity:.44}
}

.check{width:27px;height:27px;flex:none;position:relative;border-radius:50%;
  border:2px solid var(--line-2);display:grid;place-items:center;
  transition:border-color .2s,background .25s var(--spring),transform .2s var(--spring)}
.check svg{width:15px;height:15px;stroke:#0B0D0F;stroke-width:3.2;
  stroke-dasharray:26;stroke-dashoffset:26;transition:stroke-dashoffset .3s .06s var(--ease)}
.check:active{transform:scale(.85)}
.item.is-checked .check{background:var(--lime);border-color:var(--lime)}
.item.is-checked .check svg{stroke-dashoffset:0}
.check::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--lime);
  opacity:0;pointer-events:none}
.item.just-checked .check::after{animation:ring-burst .62s var(--ease) forwards}
@keyframes ring-burst{0%{opacity:.85;transform:scale(.7)}100%{opacity:0;transform:scale(2.1)}}

.item-main{flex:1;min-width:0}
.item-name{display:inline;font-size:16px;font-weight:500;letter-spacing:-.01em;
  background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;
  background-size:0% 1.6px;background-position:100% 57%;
  transition:background-size .34s var(--ease),color .3s;overflow-wrap:anywhere}
.item.is-checked .item-name{background-size:100% 1.6px;color:var(--ink-2)}
.item-note{margin:2px 0 0;font-size:12.5px;color:var(--ink-3)}
.qty{direction:ltr;flex:none;display:flex;align-items:center;gap:1px;height:38px;padding:0 3px;
  border-radius:999px;background:var(--glass-2);border:1px solid var(--line)}
.qty-btn{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;
  color:var(--ink-2);font-size:16px;line-height:1;font-weight:600;
  transition:background .2s,transform .18s var(--spring),opacity .2s}
.qty-btn:active{transform:scale(.86);background:var(--glass)}
.qty-btn:disabled{opacity:.3}
.qty-n{min-width:18px;text-align:center;font-size:14.5px;font-weight:700;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.item-thumb{width:44px;height:44px;flex:none;border-radius:12px;object-fit:cover;background:var(--glass-2);
  border:1px solid var(--line);transition:transform .2s var(--spring)}
.item-thumb:active{transform:scale(.92)}
.item-menu{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;color:var(--ink-3)}
.item-menu svg{width:17px;height:17px}
.item-menu:active{background:var(--glass-2)}

.spark{position:fixed;width:7px;height:7px;border-radius:50%;background:var(--lime);pointer-events:none;z-index:60;
  animation:spark-fly .62s var(--ease) forwards}
@keyframes spark-fly{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.2)}}

/* ===================== מחבר ===================== */
.composer{position:fixed;z-index:30;inset-inline:0;bottom:var(--dock-b);
  max-width:560px;margin:0 auto;padding:0 18px;display:flex;align-items:center;gap:8px}
.composer::before{content:"";position:absolute;inset:-26px 0 -30px;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,var(--bg) 42%,rgba(11,13,15,.86) 72%,transparent)}
.comp-cam,.comp-add{width:50px;height:50px;flex:none;border-radius:16px;display:grid;place-items:center;
  border:1px solid var(--line-2);background:var(--glass-2);color:var(--ink-2);position:relative;
  transition:transform .2s var(--spring),color .2s}
.comp-cam svg,.comp-add svg{width:21px;height:21px}
.comp-cam:active,.comp-add:active{transform:scale(.9)}
.comp-add{background:var(--lime);border-color:var(--lime);color:#0B0D0F}
.comp-add svg{stroke-width:2.6}
.cam-dot{position:absolute;top:8px;inset-inline-end:8px;width:8px;height:8px;border-radius:50%;
  background:var(--lime);box-shadow:0 0 0 2px var(--bg)}
.composer input{flex:1;height:50px;min-width:0;padding:0 17px;border-radius:16px;font-size:16px;
  background:var(--glass-2);border:1px solid var(--line-2)}
.composer input:focus{border-color:rgba(198,242,78,.5);background:rgba(198,242,78,.06)}
.composer input::placeholder{color:var(--ink-3)}

.suggest{position:absolute;bottom:60px;inset-inline:18px;border-radius:var(--r-md);overflow:hidden;
  background:rgba(22,25,28,.92);border:1px solid var(--line-2);
  backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);
  box-shadow:0 26px 60px -20px rgba(0,0,0,.8);animation:rise .22s var(--ease)}
.sg-item{display:flex;align-items:center;gap:10px;width:100%;padding:12px 15px;text-align:start;
  font-size:15px;border-bottom:1px solid var(--line)}
.sg-item:last-child{border-bottom:0}
.sg-item:active{background:var(--glass-2)}
.sg-item small{margin-inline-start:auto;font-size:11.5px;color:var(--ink-3);flex:none}
.sg-item svg{width:15px;height:15px;flex:none;color:var(--ink-3)}

/* ===================== כרטיסים ===================== */
.glass{border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--line);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.card-pad{padding:20px 19px;margin-bottom:22px}

/* ===================== הגדרות ===================== */
.field-label{display:block;font-size:12.5px;color:var(--ink-3);margin-bottom:9px;font-weight:500}
.field{width:100%;height:50px;padding:0 14px;border-radius:var(--r-sm);font-size:16px;
  background:var(--glass-2);border:1px solid var(--line)}
.field:focus{border-color:rgba(198,242,78,.45)}
.field--area{height:104px;max-height:280px;padding:12px 14px;line-height:1.6;resize:none;
  overflow-y:auto;font-family:inherit;text-align:start}
.field--area::placeholder{color:var(--ink-3)}
.idea-card{margin-top:30px}
.idea-card .btn-ghost{margin-top:14px}
.idea-sent{margin:12px 2px 0;font-size:13px;color:var(--lime);line-height:1.6}
.members{display:grid;gap:12px;margin-bottom:18px}
.member{display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:var(--r-md);
  background:var(--glass);border:1px solid var(--line)}
.member img,.member .m-ph{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none}
.member .m-ph{display:grid;place-items:center;background:var(--glass-2);color:var(--lime);font-weight:700;font-size:15px}
.m-name{margin:0;font-size:15px;font-weight:500}
.m-mail{margin:1px 0 0;font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-tag{margin-inline-start:auto;font-size:11px;color:var(--ink-3);flex:none}

.btn-primary{height:54px;border-radius:var(--r-btn);background:var(--lime);color:#0B0D0F;font-weight:600;font-size:16px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  transition:transform .2s var(--spring)}
.btn-primary:active{transform:scale(.97)}
.bp-ico{width:19px;height:19px;flex:none}
.btn-wide{width:100%}
.guest-card{border-color:rgba(198,242,78,.22)}
.guest-card-t{margin:0 0 8px;font-weight:700;font-size:16px}
.guest-card-s{margin:0 0 16px;font-size:13.5px;color:var(--ink-3);line-height:1.65}
.bp-ico--flat{stroke:none}

.btn-ghost{height:50px;border-radius:var(--r-btn);border:1px solid var(--line-2);color:var(--ink-2);
  font-size:15px;margin-top:16px;transition:transform .2s var(--spring)}
.btn-ghost:active{transform:scale(.97)}
.soft-note{font-size:13px;color:var(--ink-2);line-height:1.65;margin-top:22px}
.build-note{text-align:center;font-size:11.5px;color:var(--ink-3);margin:26px 0 0}

/* ===================== מודאל הבית ===================== */
/* מסך מלא ולא מגירה תחתונה: התוכן גבוה מדי בשביל sheet במובייל */
.modal{position:fixed;inset:0;z-index:46;overflow-y:auto;overscroll-behavior:contain;
  background:rgba(11,13,15,.94);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  animation:modal-in .34s var(--ease)}
@keyframes modal-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.modal.is-out{animation:modal-out .24s var(--ease) forwards}
@keyframes modal-out{to{opacity:0;transform:translateY(18px)}}
.modal-inner{max-width:560px;margin:0 auto;
  padding:calc(var(--sat) + 18px) 20px calc(var(--sab) + 24px)}

/* "רשימה חדשה" נשאר באותו גובה בכל הלשוניות: כשהתוכן קצר הוא נדחף לתחתית
   המסך, וכשיש הרבה רשימות הוא פשוט בא אחריהן וגולל איתן. */
#screen-lists.is-active{display:flex;flex-direction:column}
#screen-lists > *{flex:none}
#screen-lists > #btn-new-list{margin-top:auto}

.cta-inline{margin:22px auto 0;width:max-content;height:50px;padding:0 24px;border-radius:var(--r-btn);background:var(--lime);color:#0B0D0F;
  display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:15px;
  transition:transform .25s var(--spring)}
.cta-inline svg{width:19px;height:19px;stroke-width:2.6}
.cta-inline:active{transform:scale(.95)}

/* ===================== מגירה ===================== */
.sheet-scrim{position:fixed;inset:0;z-index:48;background:rgba(6,7,9,.66);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);animation:fade .25s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{position:fixed;z-index:50;inset-inline:0;bottom:0;max-width:560px;margin:0 auto;
  padding:10px 18px calc(var(--sab) + 20px);
  border-radius:30px 30px 0 0;background:rgba(20,23,26,.97);border:1px solid var(--line-2);border-bottom:0;
  backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  box-shadow:0 -24px 70px -20px rgba(0,0,0,.85);
  animation:sheet-up .42s var(--ease);max-height:86svh;overflow-y:auto}
@keyframes sheet-up{from{transform:translateY(102%)}to{transform:none}}
.sheet.is-out{animation:sheet-down .28s var(--ease) forwards}
@keyframes sheet-down{to{transform:translateY(102%)}}
.sheet-grab{width:38px;height:4px;border-radius:99px;background:var(--line-2);margin:0 auto 14px}
.sheet-title{margin:0 0 14px;font-size:20px;font-weight:700;letter-spacing:-.025em}
.sheet-body{display:grid;gap:9px}

.opt{display:flex;align-items:center;gap:13px;padding:15px 16px;border-radius:var(--r-md);
  background:var(--glass);border:1px solid var(--line);text-align:start;font-size:15.5px;font-weight:500;
  transition:background .2s,transform .2s var(--spring)}
.opt:active{background:var(--glass-2);transform:scale(.98)}
.opt svg{width:19px;height:19px;flex:none;color:var(--ink-3)}
.opt small{display:block;font-size:12px;color:var(--ink-3);font-weight:400;margin-top:2px}
.opt.danger{color:var(--rose)}
.opt.danger svg{color:var(--rose)}
.opt-sub{flex:1;min-width:0}

.sheet .field{margin-bottom:4px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 6px}
.chip{padding:9px 15px;border-radius:999px;background:var(--glass-2);border:1px solid var(--line);
  font-size:14px;transition:transform .2s var(--spring)}
.chip:active{transform:scale(.94)}
.chip.is-on{background:var(--lime);border-color:var(--lime);color:#0B0D0F;font-weight:600}
.swatches{display:flex;gap:10px;margin:4px 0 8px}
.sw{width:34px;height:34px;border-radius:50%;border:2px solid transparent;transition:transform .2s var(--spring)}
.sw.is-on{border-color:#fff;transform:scale(1.12)}
.share-row{position:relative;display:flex;align-items:center;gap:13px;padding:13px 16px;
  border-radius:var(--r-md);background:var(--glass);border:1px solid var(--line)}
.share-row img,.share-row .m-ph{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none}
.share-row .m-ph{display:grid;place-items:center;background:var(--glass-2);color:var(--lime);
  font-weight:700;font-size:14px}
.share-name{flex:1;min-width:0;font-size:15px;font-weight:500;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.sw-box{position:absolute;opacity:0;pointer-events:none}
.sw-track{position:relative;flex:none;width:48px;height:29px;border-radius:99px;
  background:var(--glass-2);border:1px solid var(--line-2);transition:background .22s,border-color .22s}
.sw-track::after{content:'';position:absolute;top:3px;inset-inline-start:3px;width:21px;height:21px;
  border-radius:50%;background:var(--ink-3);transition:transform .24s var(--spring),background .22s}
.sw-box:checked + .sw-track{background:var(--lime);border-color:var(--lime)}
.sw-box:checked + .sw-track::after{background:#0B0D0F;transform:translateX(-19px)}
.sw-box:focus-visible + .sw-track{outline:2px solid var(--lime);outline-offset:2px}
.invite-code{display:flex;align-items:center;justify-content:center;gap:4px;font-size:30px;font-weight:800;
  letter-spacing:.22em;color:var(--lime);padding:18px 0 6px;text-align:center}
.invite-hint{margin:0 0 14px;font-size:13.5px;color:var(--ink-2);text-align:center;line-height:1.6}

a.opt{color:inherit;text-decoration:none}
.siri-note{margin:13px 0 4px;font-size:12.5px;line-height:1.6;color:var(--ink-3)}

/* ===================== הוספה בקול ===================== */
/* המודאל הזה נפתח מעל מודאל הבית, ושתי שכבות שקופות למחצה מחזירות את
   הכפתורים של המסך מתחת. כאן הרקע אטום. */
#siri-modal{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}

/* תמלול של שיחה מדוברת, לא בועות התכתבות */
.siri-demo{padding:6px 0;margin-bottom:18px;border:1px solid var(--line-2)}
.sd-row{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:baseline;
  padding:11px 16px}
.sd-row + .sd-row{border-top:1px solid var(--line)}
.sd-who{font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--ink-3)}
.sd-txt{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.sd-row--siri .sd-who{color:var(--lime)}
.sd-row--siri .sd-txt{color:var(--ink);font-weight:500}
.token{margin:12px 0 0;padding:11px 13px;border-radius:12px;background:var(--glass-2);
  border:1px solid var(--line);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;letter-spacing:.02em;color:var(--ink-2);word-break:break-all;
  -webkit-user-select:all;user-select:all}
.lang-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.lang-btn{height:44px;border-radius:var(--r-btn);border:1px solid var(--line-2);
  background:var(--glass);color:var(--ink-3);font-size:14px;
  transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease)}
.lang-btn.is-on{border-color:var(--lime);background:rgba(198,242,78,.1);color:var(--lime);font-weight:600}
.lang-note{margin:10px 2px 18px;font-size:12.5px;line-height:1.6;color:var(--ink-3)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.step{display:flex;gap:13px;align-items:flex-start;padding:16px;
  border-radius:var(--r-md);background:var(--glass);border:1px solid var(--line)}
.step-n{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--lime);color:#0B0D0F;font-size:13px;font-weight:700;margin-top:1px}
.step-b{flex:1;min-width:0}
.step-t{margin:0;font-size:15.5px;font-weight:600}
.step-s{margin:5px 0 0;font-size:13px;line-height:1.6;color:var(--ink-2)}
/* grid ולא block, אחרת הטקסט בתוך תג a נצמד לראש הכפתור */
.step .btn-ghost{margin-top:12px;display:grid;place-items:center;text-decoration:none;color:inherit}

/* ===================== תמונה מוגדלת ===================== */
.lightbox{position:fixed;inset:0;z-index:70;background:rgba(6,7,9,.96);display:grid;place-items:center;
  padding:calc(var(--sat) + 60px) 16px calc(var(--sab) + 30px);animation:fade .25s var(--ease)}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:16px;
  animation:lb-in .4s var(--spring)}
@keyframes lb-in{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
.lb-close{position:absolute;top:calc(var(--sat) + 14px);inset-inline-end:16px;width:42px;height:42px;
  border-radius:50%;background:var(--glass-2);border:1px solid var(--line-2);color:var(--ink);font-size:16px}
.lb-cap{position:absolute;bottom:calc(var(--sab) + 14px);inset-inline:0;text-align:center;font-size:13.5px;
  color:var(--ink-2);margin:0}

/* ===================== חגיגה ===================== */
.celebrate{position:fixed;inset:0;z-index:65;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 45%,rgba(198,242,78,.16),rgba(6,7,9,.92) 62%);
  animation:fade .3s var(--ease)}
.cel-ring{width:150px;height:150px;stroke:var(--lime);fill:none}
.cel-circle{stroke-width:3;stroke-dasharray:290;stroke-dashoffset:290;opacity:.4;
  animation:draw .7s var(--ease) forwards;transform:rotate(-90deg);transform-origin:center}
.cel-check{stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:80;stroke-dashoffset:80;
  animation:draw .5s .38s var(--spring) forwards;filter:drop-shadow(0 0 14px rgba(198,242,78,.85))}
.cel-text{position:absolute;margin-top:190px;font-size:26px;font-weight:800;letter-spacing:-.03em;
  animation:rise .5s .6s var(--ease) both}
.confetti{position:fixed;z-index:66;width:9px;height:14px;border-radius:2px;pointer-events:none;
  animation:fall 1.5s cubic-bezier(.3,.7,.5,1) forwards}
@keyframes fall{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(80vh) rotate(720deg)}}

/* ===================== הודעות ===================== */
.toast{position:fixed;z-index:80;bottom:calc(var(--dock-b) + 64px);inset-inline:0;margin:0 auto;width:max-content;
  max-width:88vw;padding:13px 20px;border-radius:999px;background:rgba(28,31,34,.96);
  border:1px solid var(--line-2);font-size:14.5px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 20px 44px -18px rgba(0,0,0,.85);animation:toast-in .35s var(--spring)}
.toast.is-out{animation:toast-out .25s var(--ease) forwards}
.toast.ok{border-color:rgba(198,242,78,.4)}
.toast.bad{border-color:rgba(255,107,107,.45)}
@keyframes toast-in{from{opacity:0;transform:translateY(18px) scale(.94)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateY(10px)}}

.loader{position:fixed;z-index:90;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(6,7,9,.7);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
/* אותו סימן של הלוגו, רק שהווי מסתמן בלולאה */
.mark--loop{width:76px;height:76px}
/* .mk-row בסלקטור כדי לגבור בוודאות על כללי .mk-row--N שלמעלה */
.mark--loop .mk-row .mk-box,.mark--loop .mk-row .mk-line{animation:none;stroke-dashoffset:0;opacity:.85}
.mark--loop .mk-row .mk-tick{animation:mk-loop 1.7s infinite var(--ease)}
.mark--loop .mk-row--2 .mk-tick{animation-delay:.18s}
.mark--loop .mk-row--3 .mk-tick{animation-delay:.36s}
@keyframes mk-loop{
  0%{stroke-dashoffset:17}
  16%,62%{stroke-dashoffset:0;opacity:1}
  76%,100%{stroke-dashoffset:0;opacity:0}
}

/* ===================== מסך רחב ===================== */
@media (min-width:640px){
  .topbar-title{font-size:38px}
  .lists-grid{grid-template-columns:1fr 1fr}
  .screen{padding-inline:24px}
}
@media (min-width:900px){
  body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:2;
    box-shadow:inset 0 0 200px 60px rgba(0,0,0,.4)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}