@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;600;700&display=swap');
/* 2Lynk — עיצוב הכרטיס המלא (תוכנית full). הצבעים מגיעים מהפלטה דרך אותם 6 משתני CSS כמו card.css.
   כל האנימציות הן transform/opacity בלבד, וכבויות תחת prefers-reduced-motion. */
.tf{
  --bg:#1A1A1A; --text:#FFFFFF; --soft:#C9CDC2; --accent:#F7CF12; --accent2:#8CBF2B; --on:#1A1A1A;
  --hair:color-mix(in srgb, var(--text) 13%, transparent);
  --wash:color-mix(in srgb, var(--text) 5%, transparent);
  width:min(100%,392px); margin:0 auto; direction:rtl;
  font-family:"Assistant",-apple-system,"Segoe UI",system-ui,"Noto Sans",sans-serif; color:inherit;
}
.tf[dir=ltr]{direction:ltr;}
.tf *{box-sizing:border-box;}
.tf button{font-family:inherit;}

/* שני הפנים מונחים זה על זה; ההיפוך הוא סיבוב בלבד */
.tf-flip{display:grid; perspective:1600px; transform-style:preserve-3d;}
.tf-face{
  grid-area:1 / 1; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  transition:transform .62s cubic-bezier(.4,.05,.2,1);
  background:var(--bg); color:var(--text);
  border:1px solid color-mix(in srgb, var(--text) 9%, transparent); border-radius:24px;
  height:min(82vh,740px); min-height:600px; padding:20px 20px 14px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:10px;
  box-shadow:0 2px 4px rgba(0,0,0,.2), 0 26px 56px -26px rgba(0,0,0,.7);
}
.tf-face::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 70% at 100% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%);}
.tf-front{transform:rotateY(0deg);}
.tf-back{transform:rotateY(180deg); pointer-events:none;}
.tf-flip.on .tf-front{transform:rotateY(-180deg); pointer-events:none;}
.tf-flip.on .tf-back{transform:rotateY(0deg); pointer-events:auto;}

/* כותרת: לוגו (אם יש), תמונה/אות, שם, תפקיד, עסק */
.tf-qrbtn{
  position:absolute; top:16px; inset-inline-end:16px; z-index:3; width:38px; height:38px; padding:0; border-radius:11px; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--accent) 38%, transparent); background:color-mix(in srgb, var(--accent) 8%, transparent);
  color:var(--accent); display:grid; place-items:center; transition:transform .16s ease, opacity .16s ease;
}
.tf-qrbtn:hover{transform:translateY(-1px);} .tf-qrbtn svg{width:19px; height:19px;}
.tf-logo{flex:none; align-self:flex-start; height:38px; padding:4px 9px; border-radius:9px; background:#fff; margin-inline-end:48px; position:relative;}
.tf-logo img{height:100%; max-width:150px; object-fit:contain; display:block;}
.tf-head{display:flex; align-items:center; gap:13px; padding-inline-end:46px; position:relative;}
.tf-ava{
  width:58px; height:58px; flex:none; border-radius:16px; overflow:hidden; display:grid; place-items:center;
  background:linear-gradient(150deg, var(--accent), color-mix(in srgb, var(--accent) 78%, #000)); color:var(--on);
  font-size:26px; font-weight:800; line-height:1;
}
.tf-ava img{width:100%; height:100%; object-fit:cover; display:block;}
.tf-id{min-width:0;}
.tf-name{font-size:25px; font-weight:800; line-height:1.12; letter-spacing:-.01em; overflow-wrap:anywhere;}
.tf-title{color:var(--accent); font-size:15px; font-weight:600; margin-top:1px; line-height:1.3;}
.tf-org{color:var(--soft); font-size:14px; font-weight:600; margin-top:1px; letter-spacing:.02em;}

/* באנר אירוע ורצועת מבצע */
.tf-event{
  flex:none; display:flex; align-items:center; gap:9px; padding:8px 12px; border-radius:11px; position:relative;
  background:color-mix(in srgb, var(--accent) 14%, transparent); border:1px solid color-mix(in srgb, var(--accent) 38%, transparent);
}
.tf-event svg{width:16px; height:16px; color:var(--accent); flex:none;}
.tf-event .n{font-weight:700; font-size:13.5px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tf-event .w{font-size:12px; color:var(--accent); flex:none; font-weight:700; letter-spacing:.04em;}
.tf-promo{
  flex:none; display:flex; align-items:center; gap:9px; padding:7px 12px; border-radius:11px; position:relative;
  background:var(--accent2); color:var(--on); font-size:13.5px; line-height:1.35;
}
.tf-promo svg{width:16px; height:16px; flex:none;}
.tf-promo b{font-weight:800; flex:none;} .tf-promo span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* שורת הרשתות ושורת הקישורים הנוספים */
.tf-social{display:flex; gap:7px; flex-wrap:wrap; flex:none; position:relative;}
.tf-social a, .tf-social button{
  width:38px; height:38px; flex:none; border-radius:10px; padding:0; cursor:pointer; display:grid; place-items:center; text-decoration:none;
  border:1px solid var(--hair); background:var(--wash); color:var(--soft); transition:color .16s ease, border-color .16s ease, transform .16s ease;
}
.tf-social a:hover, .tf-social button:hover{color:var(--accent); border-color:color-mix(in srgb, var(--accent) 50%, transparent); transform:translateY(-1px);}
.tf-social svg{width:18px; height:18px;}
.tf-extras{display:flex; gap:7px; flex-wrap:wrap; flex:none; position:relative;}
.tf-extras a, .tf-extras button{
  display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 12px; border-radius:99px; cursor:pointer; text-decoration:none;
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); background:color-mix(in srgb, var(--accent) 9%, transparent); color:var(--accent);
  font-size:13.5px; font-weight:700; white-space:nowrap; transition:transform .16s ease;
}
.tf-extras a:hover, .tf-extras button:hover{transform:translateY(-1px);}
.tf-extras svg{width:16px; height:16px;}

/* אזור הדפים: פרטים (המנוע) / מוצרים */
.tf-pages{flex:1; min-height:0; display:flex; position:relative;}
.tf-page{flex:1; min-height:0; display:flex; flex-direction:column;}
.tf-page[hidden]{display:none;}

/* מנוע 1: אקורדיון אנכי (v) או אופקי (h) */
.tf-eng{flex:1; min-height:0; display:flex; border-top:1px solid var(--hair);}
.tf-eng.v{flex-direction:column;}
.tf-eng.h{flex-direction:row;}
.tf-sec{display:flex; min-height:0; min-width:0;}
.tf-eng.v .tf-sec{flex-direction:column; border-bottom:1px solid var(--hair);}
.tf-eng.h .tf-sec{flex-direction:row; border-inline-start:1px solid var(--hair);}
.tf-eng.h .tf-sec:first-child{border-inline-start:none;}
.tf-sec.open{flex:1;}
.tf-eng.v .tf-sec:not(.open){flex:none;}
.tf-eng.h .tf-sec:not(.open){flex:none; width:42px;}
.tf-shead{cursor:pointer; background:none; border:0; padding:0; color:inherit; display:flex; align-items:center; gap:11px; flex:none;}
.tf-eng.v .tf-shead{flex-direction:row; padding:11px 0; width:100%;}
.tf-eng.h .tf-shead{flex-direction:column; width:42px; padding:14px 0 0; gap:12px; align-self:stretch;}
.tf-shead .ico{color:var(--accent); display:grid; place-items:center; flex:none;}
.tf-shead .ico svg{width:19px; height:19px;}
.tf-shead .lbl{font-size:15px; font-weight:700; color:var(--soft); letter-spacing:.01em;}
.tf-eng.h .tf-shead .lbl{writing-mode:vertical-rl; text-orientation:mixed;}
.tf-sec.open .tf-shead .lbl, .tf-shead:hover .lbl{color:var(--text);}
.tf-sbody{display:none; min-width:0; min-height:0; overflow:auto; flex:1;}
.tf-sec.open > .tf-sbody{display:block; animation:tf-in .22s ease both;}
.tf-eng.v .tf-sbody{padding:0 0 12px;}
.tf-eng.h .tf-sbody{padding:14px 10px 12px 2px;}
.tf-sub{font-size:19px; font-weight:800; line-height:1.25;}
.tf-copy{margin:5px 0 8px; font-size:14.5px; line-height:1.55; color:var(--soft); overflow-wrap:anywhere;}
.tf-act{display:block; padding:9px 0; border-top:1px solid var(--hair); color:var(--accent); font-weight:700; font-size:16px; text-decoration:none; unicode-bidi:plaintext; overflow-wrap:anywhere;}
.tf-act:hover{color:var(--accent2);}
.tf-act.ghost{color:var(--soft);} .tf-act.ghost:hover{color:var(--text);}

/* מנוע 2: אפליקציות (a) — כמו מסך הבית של טלפון */
.tf-eng.a{flex-direction:column; padding-top:14px; gap:12px;}
.tf-apps{display:grid; grid-template-columns:repeat(4,1fr); gap:12px 8px; align-content:start; animation:tf-in .22s ease both;}
.tf-app{background:none; border:0; padding:0; cursor:pointer; color:inherit; display:flex; flex-direction:column; align-items:center; gap:7px;}
.tf-appic{
  width:58px; height:58px; border-radius:17px; display:grid; place-items:center; color:var(--accent);
  background:linear-gradient(150deg, color-mix(in srgb, var(--accent) 17%, transparent), color-mix(in srgb, var(--accent2) 10%, transparent));
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); transition:transform .16s ease;
}
.tf-appic svg{width:26px; height:26px;}
.tf-app:hover .tf-appic{transform:translateY(-2px);}
.tf-applbl{font-size:12px; font-weight:600; color:var(--soft); text-align:center; line-height:1.25;}
.tf-appdetail{display:flex; flex-direction:column; min-height:0; flex:1; gap:4px; animation:tf-in .22s ease both;}
.tf-appdetail .tf-sbody{display:block;}
.tf-backb{align-self:flex-start; background:none; border:0; cursor:pointer; padding:0 0 6px; color:var(--accent); font-size:14.5px; font-weight:700; display:inline-flex; align-items:center; gap:6px;}
.tf-backb svg{width:16px; height:16px;}
.tf[dir=ltr] .tf-backb svg{transform:scaleX(-1);}

/* מנוע 3: דפדוף (p) — חצים, נקודות והחלקה */
.tf-eng.p{flex-direction:column;}
.tf-slide{flex:1; min-height:0; overflow:auto; padding-top:12px; touch-action:pan-y; animation:tf-slide .26s ease both;}
.tf-slide.rev{animation-name:tf-slide-rev;}
.tf-slide .tf-sbody{display:block; overflow:visible;}
.tf-ptitle{display:flex; align-items:center; gap:10px; padding-bottom:2px;}
.tf-ptitle .ico{color:var(--accent); display:grid; place-items:center;} .tf-ptitle .ico svg{width:19px; height:19px;}
.tf-ptitle .lbl{font-size:15px; font-weight:700; color:var(--soft);}
.tf-pctl{display:flex; align-items:center; justify-content:center; gap:16px; padding-top:10px; border-top:1px solid var(--hair); flex:none;}
.tf-parrow{width:36px; height:36px; border-radius:50%; padding:0; cursor:pointer; border:1px solid var(--hair); background:var(--wash); color:var(--accent); display:grid; place-items:center;}
.tf-parrow svg{width:18px; height:18px;}
.tf[dir=ltr] .tf-parrow svg{transform:scaleX(-1);}
.tf-parrow:hover{border-color:var(--accent);}
.tf-pdots{display:flex; gap:7px;}
.tf-pdot{width:8px; height:8px; border-radius:50%; border:0; padding:0; cursor:pointer; background:color-mix(in srgb, var(--text) 25%, transparent); transition:transform .16s ease;}
.tf-pdot.on{background:var(--accent); transform:scale(1.25);}

/* עמוד המוצרים */
.tf-pgrid{display:grid; grid-template-columns:1fr 1fr; gap:9px; overflow:auto; align-content:start; padding:12px 0 4px; animation:tf-in .22s ease both;}
.tf-pcard{
  padding:0; cursor:pointer; text-align:inherit; color:inherit; background:var(--wash); border:1px solid var(--hair);
  border-radius:12px; overflow:hidden; display:flex; flex-direction:column; transition:border-color .16s ease, transform .16s ease;
}
.tf-pcard:hover{border-color:var(--accent); transform:translateY(-2px);}
.tf-pcard .pic{height:92px; display:grid; place-items:center; overflow:hidden; color:var(--accent); background:color-mix(in srgb, var(--text) 8%, transparent);}
.tf-pcard .pic img{width:100%; height:100%; object-fit:cover; display:block;}
.tf-pcard .pic svg{width:38px; height:38px; opacity:.8;}
.tf-pcard .cap{font-size:13px; font-weight:600; padding:7px 8px; line-height:1.35; color:var(--text); border-top:1px solid var(--hair);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.tf-pempty{grid-column:1 / -1; color:var(--soft); font-size:14px; padding:20px 0; text-align:center;}

/* שמירה, שיתוף, ניווט בין הדפים, קרדיט */
.tf-saverow{display:flex; gap:8px; flex:none; position:relative;}
.tf-save{
  flex:1; padding:11px; border-radius:11px; cursor:pointer; font-size:15px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--accent2); background:var(--accent2); color:var(--on); transition:transform .16s ease, filter .16s ease;
}
.tf-save:hover{filter:brightness(1.06);} .tf-save svg{width:18px; height:18px;}
.tf-share{flex:0 0 46px; border-radius:11px; cursor:pointer; border:1px solid var(--hair); background:var(--wash); color:var(--text); display:grid; place-items:center; transition:transform .16s ease;}
.tf-share:hover{transform:translateY(-1px);} .tf-share svg{width:18px; height:18px;}
.tf-nav{display:flex; gap:6px; border-top:1px solid var(--hair); padding-top:10px; flex:none; position:relative;}
.tf-navb{flex:1; padding:9px 6px; border-radius:9px; cursor:pointer; font-size:14px; font-weight:700; border:1px solid transparent; background:var(--wash); color:var(--soft); transition:color .16s ease;}
.tf-navb:hover{color:var(--text);}
.tf-navb[aria-pressed="true"]{background:var(--accent); color:var(--on);}
.tf-credit{flex:none; text-align:center; font-size:11px; letter-spacing:.14em; padding-top:2px; position:relative;}
.tf-credit a{color:var(--soft); text-decoration:none; font-weight:800; opacity:.75;}
.tf-credit a:hover{opacity:1; color:var(--accent);}

/* גב הכרטיס: QR */
.tf-back{justify-content:center; align-items:center; text-align:center; gap:16px; cursor:pointer;}
.tf-scan{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); font-weight:700; position:relative;}
.tf-qrplate{background:#fff; padding:14px; border-radius:14px; line-height:0; border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); position:relative;}
.tf-qrplate canvas{width:196px; height:196px; display:block; image-rendering:pixelated;}
.tf-bid{display:flex; flex-direction:column; gap:3px; position:relative;}
.tf-bid b{font-size:20px; font-weight:800;} .tf-bid span{font-size:13px; color:var(--soft);}
.tf-tap{font-size:12.5px; color:var(--soft); position:relative;}

/* גיליון תחתון: מוצר / וויצ'אט / השארת פרטים */
.tf-sheet{
  position:absolute; inset:0; z-index:4; padding:26px 22px; display:flex; flex-direction:column; gap:14px; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; transform:translateY(16px); transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.tf-sheet.on{opacity:1; visibility:visible; transform:none; transition-delay:0s;}
.tf-sheet-x{position:absolute; top:14px; inset-inline-end:14px; width:34px; height:34px; padding:0; border-radius:9px; cursor:pointer;
  background:var(--wash); border:1px solid color-mix(in srgb, var(--text) 15%, transparent); color:var(--soft); display:grid; place-items:center;}
.tf-sheet-x svg{width:16px; height:16px;}
.tf-sheet-pic{width:100%; max-width:210px; aspect-ratio:1; border-radius:14px; overflow:hidden; display:grid; place-items:center;
  background:var(--wash); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); color:var(--accent);}
.tf-sheet-pic img{width:100%; height:100%; object-fit:cover;} .tf-sheet-pic svg{width:76px; height:76px;}
.tf-sheet-pic[hidden]{display:none;}
.tf-sheet-name{font-size:21px; font-weight:800; text-align:center; line-height:1.25;}
.tf-sheet-desc{font-size:14.5px; line-height:1.55; color:var(--soft); text-align:center; margin-top:-6px; overflow-wrap:anywhere; max-height:7.8em; overflow:auto;}
.tf-sheet-desc[hidden]{display:none;}
.tf-sheet-id{font-size:18px; letter-spacing:.06em; color:var(--accent); direction:ltr; word-break:break-all; text-align:center; font-weight:700;}
.tf-sheet-cta{width:100%; text-align:center; padding:12px; border-radius:11px; text-decoration:none; cursor:pointer; border:0;
  background:var(--accent); color:var(--on); font-weight:700; font-size:15.5px; display:inline-flex; align-items:center; justify-content:center; gap:8px;}
.tf-sheet-cta svg{width:18px; height:18px;}
.tf-sheet-cta[hidden]{display:none;}
.tf-sheet-form{width:100%; display:flex; flex-direction:column; gap:9px;}
.tf-sheet-form input, .tf-sheet-form textarea{
  width:100%; font-family:inherit; font-size:16px; line-height:1.5; padding:11px 12px; border-radius:11px; color:var(--text);
  background:color-mix(in srgb, var(--text) 7%, transparent); border:1px solid var(--hair); unicode-bidi:plaintext;
}
.tf-sheet-form textarea{min-height:96px; resize:vertical;}
.tf-sheet-form input:focus, .tf-sheet-form textarea:focus{outline:2px solid var(--accent); outline-offset:1px;}

/* שורת השפות מתחת לכרטיס — צבעי העמוד, לא הפלטה */
.tf-langs{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:12px;}
.tf-lang{font-size:13px; font-weight:600; padding:6px 12px; border-radius:99px; cursor:pointer; color:inherit; background:transparent;
  border:1px solid color-mix(in srgb, currentColor 28%, transparent); transition:transform .16s ease;}
.tf-lang:hover{transform:translateY(-1px);}
.tf-lang[aria-pressed="true"]{background:var(--accent); color:var(--on); border-color:var(--accent);}
.tf-note{text-align:center; font-size:12.5px; opacity:.65; margin-top:8px; line-height:1.5;}

.tf :focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

@keyframes tf-in{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
@keyframes tf-slide{from{opacity:0; transform:translateX(-18px);} to{opacity:1; transform:none;}}
@keyframes tf-slide-rev{from{opacity:0; transform:translateX(18px);} to{opacity:1; transform:none;}}
/* אודות, כפתור מלא בתוך סעיף, רמז בטופס, גלריית דוגמאות (דף הבית) */
.tf-about{white-space:pre-line; color:var(--text); font-size:15px;}
.tf-cta{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin:10px 0 4px; padding:12px; border-radius:11px; border:0; cursor:pointer;
  background:var(--accent); color:var(--on); font-weight:800; font-size:16px; text-decoration:none; transition:transform .16s ease;}
.tf-cta:hover{transform:translateY(-1px);} .tf-cta svg{width:18px; height:18px;}
.tf-cta.ghost{background:transparent; color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); margin-top:6px;}
.tf-sheet-hint{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--soft);} .tf-sheet-hint svg{width:15px; height:15px; flex:none;}
.tf-exgrid{display:grid; grid-template-columns:1fr 1fr; gap:9px; padding:10px 0 4px;}
.tf-ex{display:block; text-decoration:none; color:inherit; border-radius:14px; transition:transform .16s ease;}
.tf-ex:hover{transform:translateY(-2px);}
.tf-ex .tc-mini{padding:10px 10px 9px; border-radius:12px;} .tf-ex .tc-mini .m-name{font-size:13.5px;} .tf-ex .tc-mini .m-title{font-size:11px;}
.tf-ex .cap{display:block; font-size:12px; color:var(--soft); padding:5px 2px 0; line-height:1.3;}
.tf-price{width:100%; border-collapse:collapse; margin:8px 0 4px; font-size:15px;}
.tf-price td{padding:8px 0; border-top:1px solid var(--hair);} .tf-price td:last-child{text-align:end; font-weight:800; color:var(--accent); white-space:nowrap;}
.tf-price tr.total td{font-weight:800; font-size:16px;} .tf-price tr.total td:last-child{font-size:20px;}
.tf-list{margin:6px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px; font-size:14px; color:var(--soft);}
.tf-list li{display:flex; gap:8px; align-items:baseline;} .tf-list li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--accent2); flex:none; transform:translateY(-2px);}
.tf-qrpage{display:flex; flex-direction:column; align-items:center; gap:12px; padding-top:8px;}
.tf-qrpage .tf-qrplate canvas{width:168px; height:168px;}
/* רינדור חוזר במחולל (כל הקשה) לא מנגן שוב את אנימציות הכניסה */
.tf.still .tf-sbody, .tf.still .tf-apps, .tf.still .tf-appdetail, .tf.still .tf-slide, .tf.still .tf-pgrid{animation:none;}
@media (prefers-reduced-motion:reduce){
  .tf *, .tf-face, .tf-sheet{transition:none !important; animation:none !important;}
}
@media (max-width:360px){
  .tf-face{padding:18px 16px 12px;}
  .tf-name{font-size:23px;}
  .tf-apps{gap:10px 6px;}
}
.tf-credit .tc-wm{height:12px;width:auto;vertical-align:-2px;display:inline-block}

/* ערבית: פונט עם גליפים ערביים; Assistant אין לו */
.tf[lang="ar"], .tf[lang="ar"] button, .tf[lang="ar"] input, .tf[lang="ar"] textarea{font-family:"Noto Sans Arabic","Assistant",-apple-system,"Segoe UI",system-ui,sans-serif;}

/* מנוע 5: אריחים (t) — כמו מסך אנשי הקשר בסמסונג. צבעי האריחים (--t0a..--t2b, --ink) מחושבים ב-JS מהפלטה (tileVars) */
.tf-eng.t{flex-direction:column; border-top:0; overflow:auto; padding:2px 0 6px; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.tf-eng.t::-webkit-scrollbar{display:none;}
.tf-tgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; align-content:start; animation:tf-in .22s ease both;}
.tf-tile{
  position:relative; min-width:0; aspect-ratio:1; border:0; margin:0; border-radius:22px; padding:8px 5px; cursor:pointer; text-decoration:none;
  color:var(--ink); font-family:inherit; --ta:var(--t0a); --tb:var(--t0b); background:linear-gradient(145deg, var(--ta), var(--tb));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  box-shadow:inset 0 1px rgba(255,255,255,.5), 0 8px 22px -6px rgba(0,0,0,.22); -webkit-tap-highlight-color:transparent; transition:transform .18s ease;
}
.tf-tile.c1{--ta:var(--t1a); --tb:var(--t1b);} .tf-tile.c2{--ta:var(--t2a); --tb:var(--t2b);}
.tf-tile:hover{transform:translateY(-2px);} .tf-tile:active{transform:scale(.96);}
.tf-tile b{font-size:13.5px; font-weight:700; line-height:1.15; max-width:100%; text-align:center; padding:0 2px; overflow:hidden; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}   /* תווית ארוכה (ערבית, גרמנית) יורדת לשורה שנייה, לא נקטעת */
.tf-tring{width:44px; height:44px; border-radius:50%; display:grid; place-items:center; flex:none; background:rgba(255,255,255,.28); border:1px solid color-mix(in srgb, var(--ink) 22%, transparent);}
.tf-tring svg{width:22px; height:22px;}
.tf-tile.w2{grid-column:span 2; aspect-ratio:auto;} .tf-tile.w3{grid-column:span 3; aspect-ratio:auto; min-height:76px; flex-direction:row; gap:12px;}
.tf-tile.own{grid-column:span 3; aspect-ratio:auto; min-height:98px; flex-direction:row; justify-content:flex-start; gap:12px; padding:14px 16px; cursor:default; text-align:start;}
.tf-tile.own:hover, .tf-tile.own:active{transform:none;}
.tf-tava{width:54px; height:54px; flex:none; border-radius:50%; overflow:hidden; display:grid; place-items:center; background:var(--ink); color:#fff; font-size:22px; font-weight:800;}
.tf-tava img{width:100%; height:100%; object-fit:cover; display:block;}
.tf-tid{min-width:0; flex:1; display:flex; flex-direction:column; gap:1px;}
.tf-tid b{font-size:18px; font-weight:800; line-height:1.15; overflow-wrap:anywhere;} .tf-tid span{font-size:13px; font-weight:600; line-height:1.3;} .tf-tid em{font-size:12px; font-style:normal; opacity:.72;}
.tf-tlogo{flex:none; height:34px; padding:3px 7px; border-radius:9px; background:#fff;} .tf-tlogo img{height:100%; max-width:96px; object-fit:contain; display:block;}
/* הפאנל: יושב על כל הפנים ומתרחב מהאריח (transform inline מה-JS; .on מחזיר ל-none) */
.tf-tpanel{
  position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; gap:6px; padding:18px 18px 16px; overflow:auto; border-radius:24px;
  background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, var(--bg)), var(--bg)); color:var(--text); transform-origin:0 0;
  opacity:0; visibility:hidden; transition:transform .28s cubic-bezier(.2,.82,.25,1), opacity .2s ease, visibility 0s linear .28s;
}
.tf-tpanel[hidden]{display:none;}
.tf-tpanel.on{opacity:1; visibility:visible; transform:none !important; transition-delay:0s;}
.tf-tpanel .tf-sbody{display:block; overflow:visible; flex:1;}
.tf-thead{display:flex; align-items:center; gap:10px; flex:none; padding-bottom:6px; border-bottom:1px solid var(--hair);}
.tf-thead .tf-tring{width:36px; height:36px; color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); border-color:color-mix(in srgb, var(--accent) 35%, transparent);} .tf-thead .tf-tring svg{width:19px; height:19px;}
.tf-thead .lbl{flex:1; min-width:0; font-size:15px; font-weight:700; color:var(--soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tf-tclose{width:36px; height:36px; flex:none; padding:0; border-radius:50%; cursor:pointer; background:var(--wash); border:1px solid color-mix(in srgb, var(--text) 15%, transparent); color:var(--text); display:grid; place-items:center;}
.tf-tclose svg{width:16px; height:16px;}
button.tf-act{width:100%; text-align:start; background:none; border-left:0; border-right:0; border-bottom:0; cursor:pointer; font-family:inherit;}
.tf-tvideo{aspect-ratio:16/9; border-radius:14px; overflow:hidden; background:#000; margin-top:8px;} .tf-tvideo iframe{width:100%; height:100%; border:0; display:block;}
.tf-tpanel .tf-tlangs{margin-top:8px; justify-content:flex-start;}
.tf-tpanel .tf-sheet-form{margin-top:8px;} .tf-tpanel .tf-sheet-name{text-align:start; font-size:19px;}
/* הפס הצף: שמור · שתף · QR */
.tf-tdock{
  flex:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:5px; border-radius:20px; position:relative;
  border:1px solid var(--hair); background:color-mix(in srgb, var(--text) 7%, var(--bg)); box-shadow:0 10px 28px -12px rgba(0,0,0,.45);
}
.tf-tdock button{
  min-width:0; min-height:50px; border:0; border-radius:15px; padding:4px 6px; cursor:pointer; background:transparent; color:var(--text);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:11.5px; font-weight:700; transition:transform .16s ease;
}
.tf-tdock button span{max-width:100%; overflow:hidden; line-height:1.15; text-align:center; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.tf-tdock button svg{width:19px; height:19px;} .tf-tdock button:hover{transform:translateY(-1px);}
.tf-tdock .tf-tsave{background:var(--accent2); color:var(--on);}
.tf.still .tf-tgrid{animation:none;}
@media (max-width:360px){ .tf-tgrid{gap:7px;} .tf-tile{border-radius:18px;} .tf-tile b{font-size:12.5px;} .tf-tring{width:40px; height:40px;} .tf-tile.own{padding:12px 13px;} }

/* מנוע 6: מערכת השמש (o) — השמש (הבעלים) במרכז, הבועות על מסלולים אליפטיים, גרירה מסובבת. המיקומים ב-transform מה-JS (buildOrbit).
   הצבעים: אותם משתני פסטל של האריחים (tileVars), הרקע --bg, המסלולים קווים דקים ב---soft */
.tf-ohead{display:flex; align-items:center; gap:10px; flex:none; position:relative; min-height:34px;}
.tf-oid{min-width:0; flex:1; display:flex; flex-direction:column; gap:1px;}
.tf-oid b{font-size:19px; font-weight:800; line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tf-oid span{font-size:13px; font-weight:600; color:var(--soft); line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tf-eng.o{flex-direction:column; border-top:0; overflow:hidden; position:relative; min-height:300px;}
.tf-space{position:absolute; inset:0; touch-action:pan-y;   /* גרירה אופקית מסובבת, החלקה אנכית עדיין גוללת את הדף (שורת השפות מתחת לכרטיס) */ user-select:none; -webkit-user-select:none; cursor:grab;}
.tf-space:active{cursor:grabbing;}
.tf-orbit{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  border:1px solid color-mix(in srgb, var(--soft) 38%, transparent); transition:opacity .25s ease;}
.tf-sun{
  position:absolute; z-index:3; left:50%; top:50%; width:64px; height:64px; padding:0; margin:-32px 0 0 -32px; border:0; border-radius:50%; cursor:pointer; overflow:hidden;
  background:linear-gradient(145deg, var(--accent2), var(--accent)); color:var(--on); display:grid; place-items:center;
  box-shadow:0 0 0 7px color-mix(in srgb, var(--accent) 14%, transparent), 0 10px 30px -6px color-mix(in srgb, var(--accent) 70%, transparent);
  -webkit-tap-highlight-color:transparent; transition:opacity .25s ease, transform .18s ease;
}
.tf-sun img{width:100%; height:100%; object-fit:cover; display:block;}
.tf-sun b{font-size:27px; font-weight:800; line-height:1;}
.tf-sun:active{transform:scale(.94);}
.tf-planet{
  position:absolute; z-index:2; left:0; top:0; width:68px; padding:0; margin:0; border:0; background:transparent; color:var(--text); text-decoration:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:3px; will-change:transform; -webkit-tap-highlight-color:transparent; transition:opacity .25s ease;
}
.tf-planet b{max-width:64px; font-size:11px; font-weight:700; line-height:1.1; text-align:center; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.tf-orb{
  width:36px; height:36px; flex:none; border-radius:50%; display:grid; place-items:center; color:var(--ink);
  --ta:var(--t0a); --tb:var(--t0b); background:linear-gradient(145deg, var(--ta), var(--tb));
  box-shadow:inset 0 1px rgba(255,255,255,.5), 0 6px 16px -4px rgba(0,0,0,.35); transition:transform .18s ease;
}
.tf-orb.c1{--ta:var(--t1a); --tb:var(--t1b);} .tf-orb.c2{--ta:var(--t2a); --tb:var(--t2b);}
.tf-orb svg{width:17px; height:17px;}
.tf-planet:active .tf-orb{transform:scale(.9);}
/* בזמן שבועה פתוחה: השאר מתעמעמים, המקור נעלם (הפאנל "הוא" הבועה) */
.tf-eng.o.dim .tf-planet, .tf-eng.o.dim .tf-sun, .tf-eng.o.dim .tf-orbit{opacity:.22; pointer-events:none;}
.tf-eng.o.dim .src{opacity:0;}
/* הפאנל של מערכת השמש: ריבוע מעוגל בתוך הפנים, שגדל מהבועה (transform+border-radius בלבד); ::before = צבע הבועה שנעלם כשהתוכן מופיע */
.tf-opanel{
  inset:10px; border-radius:50%; opacity:1; border:1px solid var(--hair); box-shadow:0 18px 50px -14px rgba(0,0,0,.55); padding:16px 16px 14px; gap:6px;
  transition:transform .3s cubic-bezier(.22,.82,.24,1), border-radius .3s cubic-bezier(.22,.82,.24,1), visibility 0s linear .3s;
}
.tf-opanel::before{content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:var(--bub, var(--accent)); opacity:1; transition:opacity .16s ease;}
.tf-opanel.on{border-radius:24px;}
.tf-opanel.on::before{opacity:0; transition-delay:.1s;}
.tf-opanel > *{opacity:0; transition:opacity .16s ease;}
.tf-opanel.on > *{opacity:1; transition-delay:.14s;}
.tf.still .tf-opanel.on > *, .tf.still .tf-opanel.on::before{transition:none;}
@media (prefers-reduced-motion:reduce){ .tf-opanel, .tf-opanel::before, .tf-opanel > *{transition:none !important;} .tf-opanel{border-radius:24px;} }
@media (max-width:360px){ .tf-oid b{font-size:17px;} .tf-opanel{inset:8px;} }

/* מנוע 7: כוורת (x) — משושים אמיתיים (clip-path) צמודים בסריג, הבעלים בתא המרכזי. המיקומים והגודל (--hw = רוחב תא) מה-JS (buildComb).
   הצבעים: אותם משתני פסטל של האריחים (tileVars); הפאנל = פאנל מערכת השמש, רק שהוא מתחיל כמשושה */
.tf-xhead{min-height:0;} .tf-xhead .tf-oid span{font-size:13.5px;}
.tf-eng.x{flex-direction:column; border-top:0; overflow:auto; position:relative; padding:4px 0 6px; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.tf-eng.x::-webkit-scrollbar{display:none;}
.tf-comb{position:relative; flex:none; margin:auto; --hw:84px; filter:drop-shadow(0 8px 14px rgba(0,0,0,.18)); animation:tf-in .22s ease both;}
.tf-hex{
  position:absolute; left:0; top:0; margin:0; padding:0 calc(var(--hw) * .1); border:0;   /* אחוזים היו נמדדים מרוחב הכוורת, לא התא */ cursor:pointer; text-decoration:none; font-family:inherit; color:var(--ink);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  --ta:var(--t0a); --tb:var(--t0b); background:linear-gradient(150deg, var(--ta), var(--tb));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(var(--hw) * .04);
  -webkit-tap-highlight-color:transparent; transition:transform .18s ease, opacity .25s ease;
}
.tf-hex.c1{--ta:var(--t1a); --tb:var(--t1b);} .tf-hex.c2{--ta:var(--t2a); --tb:var(--t2b);}
.tf-hex:active{transform:scale(.94);}
.tf-hex b{font-size:clamp(11px, calc(var(--hw) * .14), 13px); font-weight:700; line-height:1.12; max-width:100%; text-align:center; overflow:hidden; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}   /* תווית ארוכה (ערבית, גרמנית) יורדת לשורה שנייה */
.tf-hring{width:clamp(26px, calc(var(--hw) * .34), 40px); height:clamp(26px, calc(var(--hw) * .34), 40px); border-radius:50%; display:grid; place-items:center; flex:none;
  background:rgba(255,255,255,.3); border:1px solid color-mix(in srgb, var(--ink) 22%, transparent);}
.tf-hring svg{width:56%; height:56%;}
.tf-hex.own{background:linear-gradient(150deg, var(--accent2), var(--accent)); color:var(--on);}
.tf-hava{width:clamp(30px, calc(var(--hw) * .42), 52px); height:clamp(30px, calc(var(--hw) * .42), 52px); border-radius:50%; overflow:hidden; flex:none; display:grid; place-items:center;
  background:color-mix(in srgb, var(--on) 16%, transparent); border:2px solid color-mix(in srgb, var(--on) 55%, transparent); font-size:clamp(14px, calc(var(--hw) * .2), 24px); font-weight:800; line-height:1;}
.tf-hava img{width:100%; height:100%; object-fit:cover; display:block;}
.tf-hex.own b{font-size:clamp(11px, calc(var(--hw) * .14), 14px); font-weight:800;}
/* תא פתוח: השאר מתעמעמים, המקור נעלם (הפאנל "הוא" התא) */
.tf-eng.x.dim .tf-hex{opacity:.22; pointer-events:none;}
.tf-eng.x.dim .src{opacity:0;}
/* הפאנל מתחיל כמשושה ומתיישר למלבן — שניהם מצולעים בעלי 6 נקודות, לכן המעבר רציף. הפינות המעוגלות מ-border-radius; הצל נחתך ע"י clip-path ולכן מבוטל */
.tf-xpanel{border-radius:24px; clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); box-shadow:none;
  transition:transform .3s cubic-bezier(.22,.82,.24,1), clip-path .3s cubic-bezier(.22,.82,.24,1), visibility 0s linear .3s;}
.tf-xpanel.on{clip-path:polygon(50% 0,100% 0,100% 100%,50% 100%,0 100%,0 0);}
.tf.still .tf-comb{animation:none;}

/* מנוע 8: מרכזייה (s) — מרכזיית טלפון ישנה. לוח שקעים ממוספרים בשתי עמודות, התקע (הבעלים) למטה, כבל SVG מהתקע אל השקע (buildSwitch).
   הצבעים: הלוח כהה/בהיר לפי --bg, השקעים ב---soft עם חור ב---ink (הכהה שבפלטה, מ-tileVars), הכבל והנורית ב---accent. המצב "מחובר" = .dim על המנוע */
.tf-lamp{flex:none; display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--soft); white-space:nowrap;}
.tf-lamp i{width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent), 0 0 10px var(--accent);}
.tf-eng.s{flex-direction:column; border-top:0; overflow:auto; padding:2px 0 6px; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.tf-eng.s::-webkit-scrollbar{display:none;}
.tf-board{
  position:relative; flex:1; min-height:100%; display:flex; flex-direction:column; border-radius:22px; padding:6px 10px 12px; animation:tf-in .22s ease both;
  border:1px solid var(--hair); background:repeating-linear-gradient(0deg, color-mix(in srgb, var(--text) 3%, transparent) 0 1px, transparent 1px 8px), color-mix(in srgb, var(--text) 5%, var(--bg));
  box-shadow:inset 0 0 36px color-mix(in srgb, var(--ink) 22%, transparent);
}
.tf-srows{flex:1; display:flex; flex-direction:column;}
.tf-srow{flex:1; max-height:72px; display:grid; grid-template-columns:minmax(0,1fr) 20px 20px minmax(0,1fr); gap:4px; align-items:center; min-height:46px; border-bottom:1px solid var(--hair);}
.tf-srow:last-child{border-bottom:0;}
.tf-port{
  display:flex; align-items:center; justify-content:space-between; gap:6px; min-width:0; margin:0; padding:5px 2px; border:0; background:transparent; color:var(--text);
  text-decoration:none; cursor:pointer; font-family:inherit; text-align:start; -webkit-tap-highlight-color:transparent; transition:opacity .25s ease;
}
.tf-port.r{flex-direction:row-reverse;}   /* העמודה השנייה: השקע ליד המספר, התווית בקצה */
.tf-port b{min-width:0; font-size:13.5px; font-weight:700; line-height:1.15; overflow:hidden; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}   /* תווית ארוכה (ערבית, גרמנית) יורדת לשורה שנייה */
.tf-socket{
  width:32px; height:32px; flex:none; border-radius:50%; display:grid; place-items:center; color:var(--soft);
  border:4px solid color-mix(in srgb, var(--soft) 60%, var(--bg)); background:var(--ink); box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 80%, #000), 0 1px 0 color-mix(in srgb, var(--text) 10%, transparent);
  transition:background .2s ease, box-shadow .2s ease, color .2s ease;
}
.tf-socket svg{width:14px; height:14px; opacity:.8;}
.tf-port:active .tf-socket{transform:scale(.94);}
.tf-snum{text-align:center; font-size:11px; font-weight:600; color:var(--soft); opacity:.75; font-variant-numeric:tabular-nums;}
.tf-cable{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; z-index:2;}
.tf-cable path{fill:none; stroke:var(--accent); stroke-width:6; stroke-linecap:round; filter:drop-shadow(0 3px 3px rgba(0,0,0,.4));
  stroke-dasharray:var(--len, 0px); stroke-dashoffset:var(--len, 0px); transition:stroke-dashoffset .3s ease;}   /* --len = אורך הנתיב מה-JS; שלוף = offset מלא, מחובר = 0 */
.tf-eng.s.dim .tf-cable path{stroke-dashoffset:0px;}
.tf-plug{
  position:relative; z-index:3; align-self:center; flex:none; margin:8px 0 0; width:56px; height:62px; padding:0; border:0; cursor:pointer; border-radius:16px 16px 22px 22px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 65%, var(--ink)), var(--accent), color-mix(in srgb, var(--accent) 65%, var(--ink)));
  color:var(--on); display:grid; place-items:center; box-shadow:0 8px 18px -4px rgba(0,0,0,.5); -webkit-tap-highlight-color:transparent; transition:transform .18s ease, opacity .25s ease;
}
.tf-plug::before{content:""; position:absolute; top:-7px; left:50%; width:22px; height:7px; margin-left:-11px; border-radius:3px 3px 0 0; background:color-mix(in srgb, var(--accent) 70%, var(--ink));}   /* צוואר הכבל */
.tf-plug:active{transform:scale(.95);}
.tf-pava{width:40px; height:40px; border-radius:50%; overflow:hidden; display:grid; place-items:center; font-size:19px; font-weight:800; line-height:1;
  background:color-mix(in srgb, var(--on) 16%, transparent); border:2px solid color-mix(in srgb, var(--on) 55%, transparent);}
.tf-pava img{width:100%; height:100%; object-fit:cover; display:block;}
/* מחובר: שאר השקעים מתעמעמים, השקע שנבחר נדלק ב---accent (בהשהיה קטנה — אחרי שהכבל הגיע) */
.tf-eng.s.dim .tf-port:not(.src){opacity:.3; pointer-events:none;}
.tf-eng.s.dim .tf-plug:not(.src){opacity:.75;}
.tf-eng.s.dim .tf-port.src .tf-socket{background:var(--accent); color:var(--on); border-color:color-mix(in srgb, var(--accent) 45%, var(--bg));
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent), 0 0 16px var(--accent); transition-delay:.22s;}
.tf-eng.s.dim .tf-port.src .tf-socket svg{opacity:1;}
.tf-eng.s.dim .tf-port.src b{color:var(--accent);}
/* הגיליון: הפאנל הרגיל, רק שהוא צמוד לתחתית ועולה מלמטה (transform מה-CSS; .on = במקום). ה-tf-tpanel הבסיסי נותן את שאר העיצוב */
.tf-spanel{
  top:auto; max-height:calc(100% - 60px); min-height:40%; opacity:1; border-radius:26px 26px 0 0; padding:10px 18px 18px; border-top:1px solid var(--hair);
  box-shadow:0 -18px 50px -14px rgba(0,0,0,.55); transform:translateY(102%); transition:transform .3s cubic-bezier(.22,.82,.24,1), visibility 0s linear .3s;
}
.tf-spanel::before{content:""; flex:none; width:40px; height:4px; border-radius:2px; margin:0 auto 4px; background:color-mix(in srgb, var(--text) 22%, transparent);}   /* ידית הגיליון */
.tf.still .tf-spanel, .tf.still .tf-cable path, .tf.still .tf-socket{transition:none;}
.tf.still .tf-board{animation:none;}
@media (prefers-reduced-motion:reduce){ .tf-spanel{transition:none !important;} }
@media (max-width:360px){ .tf-board{padding:4px 7px 10px;} .tf-srow{grid-template-columns:minmax(0,1fr) 18px 18px minmax(0,1fr); gap:3px;} .tf-port b{font-size:12.5px;} .tf-socket{width:30px; height:30px;} .tf-ohead:has(.tf-tlogo) .tf-lamp span{display:none;} }

/* מנוע 9: פילם (f) — סרט צילום אנכי שנגלל בתוך הכרטיס (buildFilm). הכותרת: שני גלגלים (מסתובבים עם הגלילה, transform מה-JS) והמונה "03/14".
   חורי הפילם בצדדים ב---soft (על הסרט, נגללים איתו); כל פיצ'ר פריים נמוך (--fh מה-JS, כ-18% מגובה הפנים) בצבעי הפסטל של האריחים (tileVars);
   הבעלים = הפריים הראשון בצבעי המבטא. הפאנל = פאנל האריחים (.tf-tpanel), מתרחב מהפריים */
.tf-fhead{display:flex; align-items:center; gap:10px; flex:none; min-height:44px; position:relative;}
.tf-reel{width:42px; height:42px; flex:none; border-radius:50%; position:relative; border:6px solid color-mix(in srgb, var(--soft) 72%, var(--bg)); background:var(--ink);
  box-shadow:0 3px 10px rgba(0,0,0,.35), inset 0 0 0 2px color-mix(in srgb, var(--ink) 60%, #000); will-change:transform;}
.tf-reel::before, .tf-reel::after{content:""; position:absolute; inset:12px -2px; border-radius:3px; background:color-mix(in srgb, var(--soft) 72%, var(--bg));}   /* חישורי הגלגל */
.tf-reel::after{transform:rotate(90deg);}
.tf-fcount{flex:none; font-size:13px; font-weight:700; color:var(--soft); letter-spacing:.1em; font-variant-numeric:tabular-nums;}
.tf-fmid{flex:1; min-width:0; display:flex; justify-content:center;}
.tf-eng.f{flex-direction:column; border-top:0; overflow-y:auto; overflow-x:hidden; padding:0; -webkit-overflow-scrolling:touch; scrollbar-width:none; scroll-snap-type:y proximity; --fh:120px;}
.tf-eng.f::-webkit-scrollbar{display:none;}
.tf-strip{position:relative; flex:none; display:flex; flex-direction:column; gap:8px; padding:6px 30px 10px; animation:tf-in .22s ease both;}
.tf-strip::before, .tf-strip::after{content:""; position:absolute; top:0; bottom:0; width:22px; border-radius:4px; pointer-events:none;
  background:repeating-linear-gradient(0deg, var(--soft) 0 10px, transparent 10px 22px) center 6px / 11px calc(100% - 12px) no-repeat, color-mix(in srgb, var(--ink) 55%, var(--bg));}
.tf-strip::before{inset-inline-start:2px;} .tf-strip::after{inset-inline-end:2px;}
.tf-frame{
  position:relative; flex:none; width:100%; height:var(--fh); min-width:0; margin:0; padding:10px 14px; border-radius:10px; cursor:pointer; text-decoration:none; text-align:start;
  border:3px solid color-mix(in srgb, var(--ink) 40%, var(--bg)); color:var(--ink); font-family:inherit; --ta:var(--t0a); --tb:var(--t0b); background:linear-gradient(135deg, var(--ta), var(--tb));
  display:flex; align-items:center; gap:12px; scroll-snap-align:start; scroll-margin-top:6px;
  box-shadow:inset 0 1px rgba(255,255,255,.45), 0 8px 20px -8px rgba(0,0,0,.35); -webkit-tap-highlight-color:transparent; transition:transform .18s ease;
}
.tf-frame.c1{--ta:var(--t1a); --tb:var(--t1b);} .tf-frame.c2{--ta:var(--t2a); --tb:var(--t2b);}
.tf-frame:active{transform:scale(.98);}
.tf-frame .tf-tring{width:46px; height:46px;} .tf-frame .tf-tring svg{width:23px; height:23px;}
.tf-ftx{min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; padding-inline-end:22px;}   /* מקום למספר הפריים */
.tf-ftx b{font-size:19px; font-weight:800; line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tf-ftx small{font-size:13px; font-weight:600; opacity:.78; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; unicode-bidi:plaintext;}   /* טלפון/מייל נשארים משמאל לימין בתוך RTL */
.tf-fno{position:absolute; top:5px; inset-inline-end:9px; font-size:10.5px; font-weight:700; letter-spacing:.1em; opacity:.6; font-variant-numeric:tabular-nums; line-height:1;}
.tf-frame.own{height:calc(var(--fh) + 22px); padding:12px 16px; background:linear-gradient(135deg, var(--accent2), var(--accent)); color:var(--on);}
.tf-frame.own .tf-tava{width:58px; height:58px;} .tf-frame.own .tf-tid b{font-size:20px;} .tf-frame.own .tf-tid{padding-inline-end:22px;}
.tf.still .tf-strip{animation:none;}
@media (prefers-reduced-motion:reduce){ .tf-eng.f{scroll-snap-type:none;} .tf-strip{animation:none;} }
@media (max-width:360px){ .tf-strip{padding-inline:26px;} .tf-strip::before, .tf-strip::after{width:18px;} .tf-frame{padding:8px 12px; gap:10px;} .tf-ftx b{font-size:17px;} .tf-frame .tf-tring{width:42px; height:42px;} .tf-reel{width:38px; height:38px;} }

/* שורת שפות מקופלת: רק הנוכחית + כפתור "שפה" */
.tf-langs.collapsed .tf-lang[aria-pressed="false"]{display:none;}
.tf-langtog{font-size:13px; font-weight:600; padding:6px 12px; border-radius:99px; cursor:pointer; color:inherit; background:transparent; border:1px solid color-mix(in srgb,var(--text) 25%,transparent); display:inline-flex; align-items:center; gap:6px;}
.tf-langtog i{width:7px; height:7px; border-left:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(-45deg); margin-top:-3px; opacity:.7;}
.tf-langs:not(.collapsed) .tf-langtog i{transform:rotate(135deg); margin-top:3px;}

/* מנוע 10: ספר (b) — ערימת דפים תלת-ממדית (buildBook). השדרה בצד inline-start (ימין בעברית/ערבית, שמאל באנגלית): הדף מסתובב סביבה (rotateY, transform-origin),
   בגרירה הזווית וה---sh (הצל ליד השדרה) מגיעים מה-JS; בשחרור/חצים המעבר כאן. הצבעים: הדף --bg, כריכה וקצוות הדפים --soft, המספור --accent */
.tf-eng.b{flex-direction:column; border-top:0; overflow:visible; gap:8px;}
.tf-book{
  position:relative; flex:1; min-height:0; perspective:1500px; isolation:isolate; touch-action:pan-y;   /* גרירה אופקית מדפדפת, אנכית גוללת את הדף */
  user-select:none; -webkit-user-select:none; border-radius:18px; background:color-mix(in srgb, var(--soft) 22%, var(--bg)); animation:tf-in .22s ease both;
}
.tf-book::before{content:""; position:absolute; top:8px; bottom:8px; inset-inline-start:0; width:7px; border-radius:3px; opacity:.75; pointer-events:none;
  background:repeating-linear-gradient(90deg, var(--soft) 0 1px, transparent 1px 3px);}   /* קצוות הדפים ליד השדרה */
.tf-bpage{
  position:absolute; top:0; bottom:0; inset-inline:6px 0; display:flex; flex-direction:column; gap:6px; padding:14px 14px 24px; border-radius:16px; overflow:hidden;
  background:var(--bg); color:var(--text); border:1px solid var(--hair); box-shadow:0 10px 26px -12px rgba(0,0,0,.5);
  transform-origin:right center; backface-visibility:hidden; -webkit-backface-visibility:hidden; will-change:transform; pointer-events:none;
  transition:transform .5s cubic-bezier(.2,.72,.2,1), opacity .25s ease .22s;   /* קדימה: מסתובב, ונעלם רק לקראת הסוף */
}
.tf[dir=ltr] .tf-bpage{transform-origin:left center;}
.tf-bpage.on{pointer-events:auto; transition:transform .5s cubic-bezier(.2,.72,.2,1), opacity .15s ease;}   /* חזרה: מופיע מיד ומסתובב פנימה */
.tf-bpage.past{transform:rotateY(90deg); opacity:0;}
.tf[dir=ltr] .tf-bpage.past{transform:rotateY(-90deg);}
.tf-bpage::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:var(--sh, 0); transition:opacity .3s ease; border-radius:inherit;
  background:linear-gradient(to right, transparent 45%, rgba(0,0,0,.4));}
.tf[dir=ltr] .tf-bpage::after{background:linear-gradient(to left, transparent 45%, rgba(0,0,0,.4));}
.tf-bpage.drag, .tf-bpage.drag::after{transition:none;}
.tf-bpage .tf-sbody{display:block; flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; animation:none; scrollbar-width:none;}
.tf-bpage .tf-sbody::-webkit-scrollbar{display:none;}
.tf-bpage .tf-pgrid{overflow:visible; padding-top:10px; animation:none;}
.tf-bpage .tf-sheet-form{margin-top:8px;} .tf-bpage .tf-sheet-name{text-align:start; font-size:19px;}
.tf-bno{position:absolute; bottom:7px; inset-inline-end:13px; font-size:11px; font-weight:700; color:var(--accent); letter-spacing:.06em; font-variant-numeric:tabular-nums; line-height:1;}
/* דף 1: הבעלים */
.tf-bown{flex:1; min-height:0; overflow:auto; scrollbar-width:none; display:flex; flex-direction:column; align-items:center; text-align:center; gap:3px; padding-top:6px;}
.tf-bown::-webkit-scrollbar{display:none;}
.tf-bown .tf-tlogo{margin-bottom:8px;}
.tf-bava{width:92px; height:92px; flex:none; border-radius:30px; overflow:hidden; display:grid; place-items:center; margin:6px 0 12px; transform:rotate(-3deg);
  background:linear-gradient(145deg, var(--accent2), var(--accent)); color:var(--on); font-size:38px; font-weight:800; line-height:1;
  box-shadow:0 14px 28px -10px color-mix(in srgb, var(--accent) 75%, transparent);}
.tf-bava img{width:100%; height:100%; object-fit:cover; display:block; transform:rotate(3deg) scale(1.08);}
.tf-bname{font-size:26px; font-weight:800; line-height:1.12; overflow-wrap:anywhere;}
.tf-btitle{font-size:15px; font-weight:600; color:var(--accent); line-height:1.3;}
.tf-borg{font-size:13.5px; font-weight:600; color:var(--soft); font-style:normal;}
.tf-bown .tf-social{justify-content:center; margin-top:12px;}
.tf-bacts{display:flex; gap:8px; width:100%; margin-top:auto; padding-top:16px;}
.tf-bact{flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; color:var(--text); font-size:11.5px; font-weight:700; line-height:1.15;}
.tf-bact span{width:48px; height:48px; border-radius:15px; display:grid; place-items:center; color:var(--accent); background:var(--wash);
  border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); transition:transform .16s ease;}
.tf-bact:hover span{transform:translateY(-2px);} .tf-bact svg{width:21px; height:21px;}
.tf-bact b{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
/* הדף האחרון: QR, שמור, שתף */
.tf-bqr{flex:1; min-height:0; overflow:auto; scrollbar-width:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center;}
.tf-bqr::-webkit-scrollbar{display:none;}
.tf-bqr .tf-qrplate canvas{width:160px; height:160px;}
.tf-burl{font-size:12.5px; font-weight:700; color:var(--accent); direction:ltr; overflow-wrap:anywhere;}
.tf-bqr .tf-saverow{width:100%; margin-top:8px;}
/* חצים, נקודות ומונה */
.tf-bctl{border-top:0; padding-top:2px; gap:10px;}
.tf-bmid{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:5px;}
.tf-bctl .tf-pdots{flex-wrap:wrap; justify-content:center; gap:6px;}
.tf-bcount{font-size:12.5px; font-weight:700; color:var(--accent); letter-spacing:.08em; font-variant-numeric:tabular-nums; line-height:1;}
.tf-bctl .tf-parrow:disabled{opacity:.3; cursor:default;}
.tf.still .tf-book{animation:none;}
@media (prefers-reduced-motion:reduce){ .tf-book{animation:none;} .tf-bpage, .tf-bpage::after{transition:none !important;} }
@media (max-width:360px){ .tf-bpage{padding:12px 12px 22px;} .tf-bava{width:80px; height:80px; font-size:33px;} .tf-bname{font-size:23px;} .tf-bact span{width:44px; height:44px;} .tf-bqr .tf-qrplate canvas{width:148px; height:148px;} }

/* מנוע 11: קובייה (c) — גוף תלת-ממדי שמסתובב סביב ציר אנכי (buildCube), כל פאה עמוד: הבעלים · מידע · מוצרים/טופס · QR. הגאומטריה מה-JS: --cd = מרחק הפאה מהציר (חצי הרוחב ב-4 פאות),
   כל פאה ב-rotateY(i·360/N) translateZ(--cd), הגוף ב-translateZ(-cd) rotateY(זווית): בגרירה הזווית inline בלי מעבר (.drag), בשחרור/חצים המעבר כאן.
   הצבעים: הבמה --soft מעורבב ב---bg, הפאה --bg עם קצה --soft, המונה --accent. הפאה האחורית לא נראית דרך הקדמית (backface-visibility) */
.tf-eng.c{flex-direction:column; border-top:0; overflow:visible; gap:8px; --cd:176px;}
.tf-cube{
  position:relative; flex:1; min-height:0; perspective:1100px; touch-action:pan-y;   /* גרירה אופקית מסובבת, אנכית גוללת את הפאה */
  user-select:none; -webkit-user-select:none; border-radius:18px; background:color-mix(in srgb, var(--soft) 22%, var(--bg)); animation:tf-in .22s ease both;
}
.tf-cubox{position:absolute; inset:0; transform-style:preserve-3d; will-change:transform; transition:transform .6s cubic-bezier(.2,.72,.2,1);}
.tf-cubox.drag{transition:none;}
.tf-cface{
  position:absolute; inset:0; display:flex; flex-direction:column; gap:6px; padding:14px 14px 16px; border-radius:16px; overflow:auto; overscroll-behavior:contain; scrollbar-width:none;
  background:var(--bg); color:var(--text); border:1px solid color-mix(in srgb, var(--soft) 60%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--soft) 16%, transparent);
  backface-visibility:hidden; -webkit-backface-visibility:hidden; pointer-events:none;
}
.tf-cface.on{pointer-events:auto;}   /* רק הפאה הקדמית מקבלת הקשות; השאר גם inert (JS) */
.tf-cface::-webkit-scrollbar{display:none;}
.tf-cface .tf-sbody{display:block; flex:none; overflow:visible; animation:none;}
.tf-cface .tf-thead{margin-top:14px;} .tf-cface .tf-thead:first-child{margin-top:0;}   /* פאת המידע: כמה פיצ'רים נערמים, רווח ביניהם */
.tf-cface .tf-pgrid{overflow:visible; padding-top:10px; animation:none;}
.tf-cface .tf-sheet-form{margin-top:8px;} .tf-cface .tf-sheet-name{text-align:start; font-size:19px;}
.tf-cface.own .tf-bown{padding-top:2px;}   /* פאה 1: הבעלים (אותו tf-bown של הספר) */
/* הפאה האחרונה: (הטופס) + QR + שמור/שתף */
.tf-cqr{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; margin:auto 0; padding-top:6px;}
.tf-cface.qr .tf-sheet-form + .tf-cqr{margin-top:18px;}
.tf-cqr .tf-qrplate canvas{width:160px; height:160px;}
.tf-cqr .tf-saverow{width:100%; margin-top:8px;}
/* חצים, נקודות ומונה (כמו בספר) */
.tf-cctl{border-top:0; padding-top:2px; gap:10px;}
.tf-cmid{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:5px;}
.tf-cctl .tf-pdots{flex-wrap:wrap; justify-content:center; gap:6px;}
.tf.still .tf-cube{animation:none;}
@media (prefers-reduced-motion:reduce){ .tf-cube{animation:none;} .tf-cubox{transition:none !important;} }
@media (max-width:360px){ .tf-cface{padding:12px 12px 14px;} .tf-cqr .tf-qrplate canvas{width:148px; height:148px;} }