/* CHANGER — app.css · סבב 3 (15.9.2026)
   Extends ../blend/blend.css (load blend.css first). Tokens = version 15 "Noir Warm B" (saffron on liquid noir).
   Everything here is shared by all 12 screens; page-only CSS lives inline in each page. */

/* ---------- 15 · Noir Warm B tokens ---------- */
:root{--font-display:"Plus Jakarta Sans",Inter,system-ui,sans-serif;--font-text:"Plus Jakarta Sans",Inter,system-ui,sans-serif;
  --bg:#0B0B0C;--bg2:#141416;--card:#151517;--accent:#F2A93B;--on-accent:#121212;--accent-soft:rgba(242,169,59,.14);--star:#F2A93B;
  --fab-bg:#F2A93B;--fab-fg:#121212;--fab-edge:rgba(255,220,160,.9);--indbg:rgba(242,169,59,.18);--radius:18px;
  --ok:#5BD68A;--warn:#F2A93B;--danger:#FF6B6B;--field:rgba(255,255,255,.06);--field-edge:rgba(255,255,255,.12)}
:root[data-theme="light"]{--bg:#F7F7F5;--bg2:#FFFFFF;--card:#FFFFFF;--accent:#E0951F;--on-accent:#121212;--accent-soft:rgba(242,169,59,.18);--fab-bg:#F2A93B;--fab-fg:#121212;--fab-edge:rgba(200,140,40,.6);--indbg:rgba(242,169,59,.22);
  --ok:#1E9E57;--danger:#D64545;--field:rgba(0,0,0,.04);--field-edge:rgba(0,0,0,.1)}
.hello h1,.sec-titles h2,.page-head h1{font-weight:800;letter-spacing:-.025em}
.wordmark{font-weight:800}
.main::before{content:"";position:absolute;inset:0 0 auto 0;height:440px;pointer-events:none;background:linear-gradient(180deg,rgba(242,169,59,.22),rgba(242,169,59,.06) 55%,transparent);z-index:0}
:root[data-theme="light"] .main::before{background:linear-gradient(180deg,rgba(242,169,59,.34),rgba(242,169,59,.08) 55%,transparent)}
.tab.on svg,.nav-item.on svg{color:var(--accent)}
.fab{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 14px 34px rgba(242,169,59,.35),0 3px 8px rgba(0,0,0,.35)}
.fab::before{background:radial-gradient(24px 13px at 32% 18%,rgba(255,255,255,.55),transparent 70%)}
.pc{background:var(--card)}
.pc-cover{height:108px}
.pc-stats dd svg{color:var(--accent)}
.rc-title a::after,.title a::after{content:"";position:absolute;inset:0;border-radius:18px}
.card[data-id],.tile{cursor:pointer}
.pc-name a::after{content:"";position:absolute;inset:0;z-index:0}
.pc .follow,.pc .pc-av{position:relative;z-index:1}

/* ---------- shell additions ---------- */
.top .back{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--fg);flex:none;position:relative;z-index:1;transition:background .25s}
.top .back:hover{background:var(--hair)}
.top-title{flex:1;min-width:0;position:relative;z-index:1;font-family:var(--font-display);font-weight:700;font-size:15.5px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
.top-title small{display:block;font-weight:500;font-size:11.5px;color:var(--fg3);letter-spacing:0}
.top-actions{display:flex;align-items:center;gap:2px;flex:none;position:relative;z-index:1}
.badge{position:absolute;top:4px;inset-inline-end:4px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:10.5px;font-weight:700;display:grid;place-items:center;line-height:1;box-shadow:0 0 0 2px var(--bg);z-index:2}
.badge:empty{display:none}
.nav-item .badge{position:static;margin-inline-start:auto;box-shadow:none}
.side-user{position:relative}
.side-user .gear{margin-inline-start:auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--fg3);transition:background .2s,color .2s}
.side-user .gear:hover{background:var(--hair);color:var(--fg)}
.side-user .theme-s{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--fg3);flex:none;transition:background .2s,color .2s}
.side-user .theme-s:hover{background:var(--hair);color:var(--fg)}
.side-user .theme-s svg{width:19px;height:19px}
.side-user>a:first-child + .theme-s{margin-inline-start:auto}
.side-user .theme-s + .gear{margin-inline-start:0}

/* מ-4.10: בלי הסרגל העליון (no-top-d במחשב, no-top-m בנייד). בנייד דף עם חזרה מקבל כפתור עגול שנגלל עם הדף */
.fback{display:none}
@media (max-width:1023px){
  .no-top-m .top{display:none}
  .no-top-m .main{padding-top:62px}
  .no-top-m.back-over .main{padding-top:10px}
  .no-top-m .fback{position:absolute;top:12px;inset-inline-start:12px;z-index:31;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:var(--fg)}
  .no-top-m .fback svg{position:relative;z-index:1}
}
@media (min-width:1024px){
  .no-top-d .top{display:none}
  .no-top-d .main{padding-top:12px}
  html.no-top-d .kside,html.no-top-d .op-side.pin,html.no-top-d .wiz-rail,html.no-top-d .nf-pv,html.no-top-d .set-nav{top:20px}
}
.side-user>a{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.side-user>a span{min-width:0}
.side-user>a.gear{flex:none}
.side-nav .ind.off,.tabbar .ind.off{display:none}
.side-user b,.side-user small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tab .badge{top:4px;inset-inline-end:calc(50% - 20px)}
.content{position:relative;z-index:1}
.wrap{padding:0 var(--pad)}
.page-head{padding:18px var(--pad) 6px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.page-head h1{font-size:28px;line-height:1.1}
.page-head .sub{margin-top:4px;font-size:13.5px;color:var(--fg3)}
.page-head .tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
@media (min-width:1024px){ .page-head{padding-top:28px} .page-head h1{font-size:36px} }
.kicker{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg3);font-weight:600}
.muted{color:var(--fg3)} .soft{color:var(--fg2)}
.num{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em}

/* ---------- grids (the same card, in a grid) ---------- */
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:8px var(--pad) 22px}
.grid>*{flex:none;width:auto;min-width:0;animation:rise .6s var(--ease) backwards;animation-delay:calc(var(--i,0)*35ms)}
.grid .card{padding:8px}
.grid .title{font-size:13.5px}
@media (min-width:560px){ .grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)} .grid .card{padding:10px} .grid .title{font-size:14.5px} }
@media (min-width:1024px){ .grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:1360px){ .grid{grid-template-columns:repeat(5,minmax(0,1fr))} }
.grid.p{grid-template-columns:1fr}
@media (min-width:560px){ .grid.p{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .grid.p{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1360px){ .grid.p{grid-template-columns:repeat(4,minmax(0,1fr))} }
.grid.tight{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:1024px){ .grid.tight{grid-template-columns:repeat(3,minmax(0,1fr))} }

/* ---------- buttons ---------- */
.btn{height:44px;padding:0 20px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:14px;color:var(--fg);border:1.5px solid var(--hair);transition:background .25s var(--ease),color .25s,transform .15s,border-color .25s;white-space:nowrap;position:relative}
.btn:hover{background:var(--hair)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:transparent;box-shadow:0 8px 22px rgba(242,169,59,.28),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.primary:hover{background:#F7B44E}
:root[data-theme="light"] .btn.primary:hover{background:#E9A02C}
.btn.line{border-color:var(--accent);color:var(--fg)}
.btn.line:hover{background:var(--accent-soft)}
.btn.ghost{border-color:transparent}
.btn.ghost::before{border-radius:inherit}
.btn.danger{color:var(--danger);border-color:rgba(255,107,107,.35)}
.btn.danger:hover{background:rgba(255,107,107,.1)}
.btn.sm{height:36px;padding:0 14px;font-size:13px}
.btn.lg{height:54px;padding:0 26px;font-size:15.5px}
.btn.block{width:100%}
.btn.icon{width:44px;padding:0}
.btn.icon.sm{width:36px}
.btn[disabled]{opacity:.45;cursor:default;transform:none}
.btn .cnt{margin-inline-start:2px;font-weight:700;color:var(--fg3)}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn-row.end{justify-content:flex-end} .btn-row.between{justify-content:space-between}
.link{color:var(--accent);font-weight:600;text-decoration:none}
.link:hover{text-decoration:underline}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field>label,.label{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg3);font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:8px}
.field .help{font-size:12.5px;color:var(--fg3);margin-top:-2px}
.input{width:100%;height:48px;padding:0 16px;border-radius:14px;background:var(--field);border:1px solid var(--field-edge);color:var(--fg);font:inherit;font-size:15px;outline:0;transition:border-color .2s,box-shadow .2s,background .2s;-webkit-appearance:none;appearance:none}
.input::placeholder{color:var(--fg3)}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
textarea.input{height:auto;min-height:120px;padding:13px 16px;line-height:1.5;resize:vertical}
select.input{padding-inline-end:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.input.sm{height:38px;font-size:13.5px;padding:0 12px;border-radius:11px}
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap>svg{position:absolute;inset-inline-start:14px;color:var(--fg3);pointer-events:none}
.input-wrap>.input{padding-inline-start:42px}
.input-wrap .trail{position:absolute;inset-inline-end:8px}
.at{position:absolute;inset-inline-start:16px;color:var(--fg3);font-weight:600;pointer-events:none}
.input-wrap>.input.at-pad{padding-inline-start:34px}
.counter{font-size:11.5px;color:var(--fg3);text-transform:none;letter-spacing:0;font-weight:500}
.input-error{border-color:var(--danger)}
.form-grid{display:grid;grid-template-columns:1fr;gap:0 14px}
@media (min-width:720px){ .form-grid{grid-template-columns:1fr 1fr} .form-grid .span{grid-column:1/-1} }
/* switch */
.switch{appearance:none;-webkit-appearance:none;width:50px;height:30px;border-radius:999px;background:var(--indbg);border:1px solid var(--field-edge);position:relative;cursor:pointer;transition:background .25s,border-color .25s;flex:none;margin:0}
.switch::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform .3s var(--ease)}
.switch:checked{background:var(--accent);border-color:transparent}
.switch:checked::after{transform:translateX(20px)}
.switch:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
/* range (tone sliders) */
.range{-webkit-appearance:none;appearance:none;width:100%;height:32px;background:none;margin:0;cursor:pointer}
.range::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,var(--accent) var(--pct,50%),var(--indbg) var(--pct,50%))}
[dir="rtl"] .range::-webkit-slider-runnable-track{background:linear-gradient(270deg,var(--accent) var(--pct,50%),var(--indbg) var(--pct,50%))}   /* בעברית הידית נמדדת מימין, אז גם המילוי */
.range::-moz-range-track{height:6px;border-radius:999px;background:var(--indbg)}
.range::-moz-range-progress{height:6px;border-radius:999px;background:var(--accent)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.15);box-shadow:0 2px 8px rgba(0,0,0,.35);margin-top:-9px;transition:transform .2s}
.range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.15);box-shadow:0 2px 8px rgba(0,0,0,.35)}
.range:active::-webkit-slider-thumb{transform:scale(1.12)}
.range:focus-visible{outline:2px solid var(--fg);outline-offset:4px;border-radius:8px}
.range-labels{display:flex;justify-content:space-between;font-size:12px;color:var(--fg3);font-weight:500;margin-top:-4px}
.range-labels b{color:var(--fg2);font-weight:600}
/* segmented control */
.seg{display:inline-flex;padding:4px;border-radius:999px;gap:2px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg::-webkit-scrollbar{display:none}
.seg>button{position:relative;z-index:1;height:34px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:600;color:var(--fg3);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:background .25s,color .25s}
.seg>button:hover{color:var(--fg)}
.seg>button.on{background:var(--accent);color:var(--on-accent)}
.seg.soft>button.on{background:var(--indbg);color:var(--fg)}
.seg>button.icon{width:38px;padding:0;justify-content:center}
/* stepper (servings) */
.stepper{display:inline-flex;align-items:center;height:48px;border-radius:999px;padding:0 4px}
.stepper>*{position:relative;z-index:1}
.stepper button{width:42px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--fg);transition:background .2s}
.stepper button:hover{background:var(--hair)}
.stepper button:disabled{opacity:.3}
.stepper output{min-width:64px;text-align:center;font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:-.02em}
.stepper output small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--fg3);margin-top:-2px}
/* checkbox / radio */
.check{display:flex;align-items:flex-start;gap:12px;cursor:pointer}
.check input{appearance:none;-webkit-appearance:none;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--fg3);margin:0;flex:none;display:grid;place-items:center;transition:background .2s,border-color .2s;background:none}
.check input::after{content:"";width:12px;height:7px;border:2.5px solid var(--on-accent);border-top:0;border-inline-end:0;transform:rotate(-45deg) translate(1px,-1px);opacity:0;transition:opacity .15s}
.check input:checked{background:var(--accent);border-color:var(--accent)}
.check input:checked::after{opacity:1}
.check input.sq{border-radius:7px}
.check input:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
/* choice chips (multi-select) */
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choice{height:38px;padding:0 15px;border-radius:999px;border:1.5px solid var(--hair);font-size:13.5px;font-weight:600;color:var(--fg2);display:inline-flex;align-items:center;gap:6px;transition:background .2s,color .2s,border-color .2s}
.choice:hover{color:var(--fg);border-color:var(--fg3)}
.choice.on,.choice[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:transparent}
.choice.on svg,.choice[aria-pressed="true"] svg{color:inherit}
/* tags */
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px;border-radius:999px;border:1px solid var(--hair);font-size:12px;font-weight:600;color:var(--fg2);white-space:nowrap}
.tag.acc{background:var(--accent-soft);border-color:transparent;color:var(--fg)}
.tag.ai{background:var(--accent-soft);border-color:transparent;color:var(--fg);letter-spacing:.06em;text-transform:uppercase;font-size:10.5px}
.tag.ok{color:var(--ok);border-color:rgba(91,214,138,.35)}
.tag.warn{color:var(--accent);border-color:rgba(242,169,59,.4)}
.tag.big{height:34px;font-size:13px;padding:0 14px}

/* ---------- lists (settings, notifications) ---------- */
.list{border-radius:20px;overflow:hidden;margin:0 var(--pad) 18px}
.list>*{position:relative;z-index:1}
.list-h{padding:14px 16px 4px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg3);font-weight:600}
.row-item{display:flex;align-items:center;gap:13px;padding:13px 16px;min-height:60px;border-top:1px solid var(--hair);color:inherit;text-align:start;width:100%;transition:background .2s}
.list>.row-item:first-child,.list-h+.row-item{border-top:0}
a.row-item:hover,button.row-item:hover{background:var(--hair)}
.row-lead{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--indbg);color:var(--fg2);overflow:hidden;position:relative}
.row-lead img{width:100%;height:100%;object-fit:cover}
.row-lead.acc{background:var(--accent-soft);color:var(--accent)}
.row-lead .mini{position:absolute;inset-inline-end:-2px;bottom:-2px;width:18px;height:18px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;box-shadow:0 0 0 2px var(--bg2)}
.row-body{flex:1;min-width:0}
.row-body b{display:block;font-weight:600;font-size:14.5px;line-height:1.3}
.row-body small{display:block;color:var(--fg3);font-size:12.5px;margin-top:2px;line-height:1.35}
.row-body p{font-size:14px;line-height:1.4}
.row-body p b{display:inline}
.row-trail{flex:none;display:flex;align-items:center;gap:8px;color:var(--fg3);font-size:13px}
.row-item.unread::before{content:"";position:absolute;inset-inline-start:5px;top:50%;width:6px;height:6px;border-radius:50%;background:var(--accent);translate:0 -50%}
.row-thumb{width:48px;height:48px;border-radius:10px;object-fit:cover;flex:none}
@media (min-width:1024px){ .list{margin-inline:var(--pad);max-width:820px} }

/* ---------- sheet (bottom sheet on phone, modal on desktop) ---------- */
.sheet-bd{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;padding:0;animation:fade .25s ease}
.sheet{width:100%;max-height:calc(100vh - 40px);overflow:auto;border-radius:28px 28px 0 0;padding:10px 20px calc(24px + env(safe-area-inset-bottom));animation:up .4s var(--ease);--glass:rgba(22,22,24,.86)}
:root[data-theme="light"] .sheet{--glass:rgba(255,255,255,.9)}
.sheet>*{position:relative;z-index:1}
.sheet-handle{width:40px;height:5px;border-radius:999px;background:var(--fg3);opacity:.5;margin:2px auto 14px}
.sheet h2{font-size:21px;font-weight:800;letter-spacing:-.02em;margin-bottom:4px}
.sheet .lead{color:var(--fg2);font-size:14px;line-height:1.5;margin-bottom:16px}
.sheet-x{position:absolute;top:12px;inset-inline-end:12px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:var(--fg2);background:var(--hair)}
.sheet>.sheet-x{position:absolute;z-index:3}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (min-width:720px){ .sheet-bd{align-items:center;padding:24px} .sheet{max-width:540px;border-radius:26px;padding:26px 26px 24px;max-height:calc(100vh - 48px)} .sheet-handle{display:none} }
body.locked{overflow:hidden}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(max(14px,env(safe-area-inset-bottom)) + 80px);transform:translateX(-50%) translateY(10px);z-index:90;padding:12px 18px;border-radius:999px;font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:8px;opacity:0;transition:opacity .3s,transform .3s var(--ease);pointer-events:none;max-width:calc(100vw - 32px);white-space:nowrap}
.toast>*{position:relative;z-index:1}
.toast.show{opacity:1;transform:translateX(-50%)}
.toast svg{color:var(--accent)}
@media (min-width:1024px){ .toast{bottom:32px;left:calc(50% + 128px)} }

/* ---------- skeleton + empty state ---------- */
.skel{position:relative;overflow:hidden;background:var(--indbg);border-radius:12px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);animation:shimmer 1.4s infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.empty-state{margin:10px var(--pad);padding:34px 20px;border-radius:22px;border:1px dashed var(--hair);text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.empty-state svg{color:var(--fg3);margin-bottom:4px}
.empty-state h3{font-size:17px;font-weight:700}
.empty-state p{color:var(--fg3);font-size:13.5px;max-width:34ch;line-height:1.45}
.empty-state .btn{margin-top:8px}

/* ---------- profile hero ---------- */
.phero{position:relative;margin:0 0 0;isolation:isolate}
.phero-cover{height:190px;overflow:hidden;position:relative;background:var(--bg2)}
.phero-cover img{width:100%;height:100%;object-fit:cover}
.phero-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.35) 70%,var(--bg))}
.phero-body{padding:0 var(--pad) 8px;position:relative}
.phero-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:-46px}
.phero-av{width:96px;height:96px;border-radius:50%;padding:3px;background:var(--rim);box-shadow:0 0 0 4px var(--bg),0 10px 26px rgba(0,0,0,.35);flex:none}
.phero-av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.phero-actions{display:flex;gap:8px;align-items:center;padding-bottom:6px}
.phero h1{font-size:26px;font-weight:800;letter-spacing:-.025em;margin-top:12px;line-height:1.1}
.phero .handle{color:var(--fg3);font-size:13.5px;margin-top:3px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.phero .bio{margin-top:12px;font-size:14.5px;line-height:1.5;color:var(--fg2);max-width:60ch}
.pstats{display:flex;gap:22px;margin:14px 0 10px;flex-wrap:wrap}
.pstats div{display:flex;flex-direction:column}
.pstats dd{margin:0;font-family:var(--font-display);font-size:20px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:center;gap:4px;line-height:1.2}
.pstats dd svg{color:var(--accent)}
.pstats dd small{font-family:var(--font-text);font-size:12px;color:var(--fg3);font-weight:500}
.pstats dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg3);font-weight:600;margin-top:2px}
@media (min-width:1024px){ .phero-cover{height:280px;margin:12px var(--pad) 0;border-radius:var(--radius)} .phero-cover::after{border-radius:var(--radius);background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.45))} .phero-top{margin-top:-58px} .phero-av{width:128px;height:128px;margin-inline-start:14px} .phero h1{font-size:36px} .pstats{gap:34px} .pstats dd{font-size:24px} }

/* ---------- toolbar (sort · filter · view) ---------- */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px var(--pad) 4px;flex-wrap:wrap}
.toolbar .left,.toolbar .right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.toolbar .count{font-size:13px;color:var(--fg3);font-weight:500}

/* ---------- category tiles (Explore, onboarding) ---------- */
.cat-tile{position:relative;display:flex;align-items:flex-end;aspect-ratio:1.55;border-radius:16px;overflow:hidden;background:var(--bg2);isolation:isolate;color:#fff;box-shadow:var(--shadow);transition:transform .25s var(--ease)}
.cat-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.cat-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.05) 65%)}
.cat-tile:hover img{transform:scale(1.05)}
.cat-tile:active{transform:scale(.985)}
.cat-tile span{position:relative;z-index:1;padding:10px 12px;font-weight:700;font-size:13.5px;line-height:1.2;letter-spacing:-.01em;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.cat-tile small{display:block;font-weight:500;font-size:11px;opacity:.75;margin-top:2px}

/* ---------- stars (rating input + display) ---------- */
.stars{display:inline-flex;gap:6px}
.stars button{width:40px;height:40px;display:grid;place-items:center;color:var(--fg3);transition:transform .15s,color .15s}
.stars button.on{color:var(--star)}
.stars button:hover{transform:scale(1.12)}
.stars.sm button{width:26px;height:26px}
.rating-line{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--fg2)}
.rating-line b{font-family:var(--font-display);font-size:18px;color:var(--fg);font-weight:800}
.rating-line svg{color:var(--star)}

/* ---------- inline card list (compact rows for search suggestions) ---------- */
.suggest{position:absolute;inset-inline:0;top:calc(100% + 8px);z-index:40;border-radius:20px;overflow:hidden;padding:6px}
.suggest>*{position:relative;z-index:1}
.suggest .row-item{border-radius:14px;border:0;min-height:52px;padding:8px 10px}
.suggest .row-lead{width:36px;height:36px;border-radius:9px}

/* ---------- progress / wizard steps ---------- */
.steps-bar{display:flex;gap:6px;padding:12px var(--pad) 0}
.steps-bar span{flex:1;height:4px;border-radius:999px;background:var(--indbg);position:relative;overflow:hidden}
.steps-bar span.done{background:var(--accent)}
.steps-bar span.now::after{content:"";position:absolute;inset:0;background:var(--accent);width:50%;animation:none}
.progress{height:8px;border-radius:999px;background:var(--indbg);overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .5s var(--ease)}

/* ---------- panels (glass boxes with padding) ---------- */
.panel{border-radius:20px;padding:16px;margin:0 var(--pad) 14px}
.panel>*{position:relative;z-index:1}
.panel h3{font-size:15.5px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.panel p{font-size:13.5px;color:var(--fg2);line-height:1.5}
.panel.acc{--glass:var(--accent-soft)}
.divider{height:1px;background:var(--hair);margin:12px 0}
.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:6px var(--pad) 12px}
@media (min-width:720px){ .stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
.stat{border-radius:16px;padding:14px 16px;margin:0}
.stat>*{position:relative;z-index:1}
.stat dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg3);font-weight:600}
.stat dd{margin:6px 0 0;font-family:var(--font-display);font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1}
.stat dd small{font-family:var(--font-text);font-size:12px;font-weight:600;margin-inline-start:6px;color:var(--ok)}
.stat dd small.down{color:var(--danger)}

/* ---------- misc ---------- */
.avatar-sm{width:28px;height:28px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--hair)}
.avatar-md{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--hair)}
.inline-chef{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px}
.inline-chef img{width:32px;height:32px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--hair)}
.inline-chef em{font-style:normal;font-weight:500;color:var(--fg3)}
.hide-m{display:none} @media (min-width:1024px){ .hide-m{display:initial} .hide-d{display:none!important} }
.vh{visibility:hidden}
.spin{width:22px;height:22px;border-radius:50%;border:2.5px solid var(--hair);border-top-color:var(--accent);animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.bare .main::before{display:none}

/* ---------- recipe modules (shared): ingredient rows · timer chip · cook mode ---------- */
.ings{list-style:none;margin:6px var(--pad) 0;padding:0}
.ing-g{padding:14px 0 6px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg3);font-weight:700}
.ing{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-top:1px solid var(--hair)}
.ing:first-child,.ing-g+.ing{border-top:0}
.ing .check{margin-top:1px}
.ing-q{flex:0 0 92px;font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:-.01em;line-height:1.35;color:var(--fg)}
.ing-q em{font-style:normal;font-weight:500;font-size:13px;color:var(--fg2);margin-inline-start:3px}
.ing-q i{display:block;font-style:normal;font-size:11px;font-weight:600;color:var(--fg3)}
.ing-t{flex:1;min-width:0;font-size:15px;line-height:1.4}
.ing-t small{color:var(--fg3);font-size:13.5px}
.ing.have .ing-t,.ing.have .ing-q{text-decoration:line-through;color:var(--fg3)}
.ing.have .ing-q em{color:var(--fg3)}
.adj{display:inline-flex;align-items:center;gap:4px;margin-inline-start:6px;height:22px;padding:0 8px;border-radius:999px;background:var(--accent-soft);color:var(--fg);font-size:11px;font-weight:700;letter-spacing:.02em;vertical-align:middle}
.adj svg{color:var(--accent)}
.tm{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px 0 10px;border-radius:999px;border:1.5px solid var(--hair);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;transition:background .2s,border-color .2s,color .2s}
.tm svg{color:var(--accent)}
.tm.run{border-color:var(--accent);background:var(--accent-soft)}
.tm.over{background:var(--accent);color:var(--on-accent);border-color:transparent}
.tm.over svg{color:inherit}
.cook-mode{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;flex-direction:column;animation:fade .3s ease}
.cm-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px var(--pad) 8px;padding-top:max(14px,env(safe-area-inset-top))}
.cm-top .t{min-width:0;flex:1;text-align:center}
.cm-top .t b{display:block;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cm-top .t small{color:var(--fg3);font-size:12px}
.cm-prog{display:flex;gap:4px;padding:0 var(--pad) 8px}
.cm-prog span{flex:1;height:4px;border-radius:999px;background:var(--indbg)}
.cm-prog span.done{background:var(--accent)}
.cm-body{flex:1;overflow:auto;padding:10px var(--pad) 20px;display:flex;flex-direction:column;justify-content:center;max-width:820px;width:100%;margin:0 auto;touch-action:pan-y}
.cm-body .n{font-family:var(--font-display);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:700}
.cm-body p{font-size:26px;line-height:1.35;font-weight:600;letter-spacing:-.015em;margin-top:10px}
.cm-body img{margin-top:18px;border-radius:18px;aspect-ratio:16/9;object-fit:cover;width:100%;max-height:36vh}
.cm-body .row2{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.cm-body .tm{height:44px;font-size:16px;padding:0 16px 0 12px}
.cm-nav{display:flex;align-items:center;gap:8px;padding:10px var(--pad) max(16px,env(safe-area-inset-bottom))}
.cm-nav .btn{height:54px}
.cm-nav .btn.primary{flex:1}
.cm-nav .btn.icon{width:54px}
.cm-ings{padding:0 0 10px}
.cm-ings .ings{margin:0}
@media (min-width:720px){ .cm-body p{font-size:34px} }

/* ---------- שת"פים (סבב 5, קוצץ בסבב 6): לוגו מותג · מה מקבלים · סטטוס · גילוי נאות · כרטיס הזדמנות · שלבים · ציור מוצר ---------- */
.blogo{--s:40px;width:var(--s);height:var(--s);border-radius:50%;display:inline-grid;place-items:center;flex:none;position:relative;overflow:hidden;
  background:radial-gradient(120% 120% at 28% 18%,rgba(255,255,255,.3),transparent 52%),var(--bc,var(--indbg));color:var(--bi,var(--fg));
  font-family:var(--font-display);font-weight:800;font-size:calc(var(--s)*.34);letter-spacing:.02em;line-height:1;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 0 0 1px var(--hair);object-fit:cover}
.blogo b{font-weight:800}
img.blogo{background:var(--bg2)}
.vseal{display:inline-grid;place-items:center;color:var(--accent);flex:none;line-height:0}
.bname{display:inline-flex;align-items:center;gap:5px;min-width:0;font-weight:700;color:var(--fg);max-width:100%}
a.bname:hover{text-decoration:underline}
/* compensation */
.cchips{display:flex;flex-wrap:wrap;gap:6px}
.cchip{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 11px 0 9px;border-radius:999px;background:var(--accent-soft);color:var(--fg);font-size:12.5px;font-weight:700;white-space:nowrap}
.cchip svg{color:var(--accent);flex:none}
.cchip.soft{background:var(--indbg)}
.cchips.sm .cchip{height:24px;padding:0 9px 0 7px;font-size:11.5px}
.cchips.sm .cchip svg{width:12px;height:12px}
.cbigs{display:grid;grid-template-columns:1fr;gap:8px}
@media (min-width:560px){ .cbigs{grid-template-columns:repeat(2,minmax(0,1fr))} }
.cbig{border-radius:16px;padding:14px;display:flex;gap:12px;align-items:flex-start}
.cbig>*{position:relative;z-index:1}
.cbig .ci{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);flex:none}
.cbig .ci svg{width:18px;height:18px}
.cbig b{display:block;font-family:var(--font-display);font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.cbig small{display:block;color:var(--fg3);font-size:12.5px;margin-top:3px;line-height:1.4}
/* status pill */
.spill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap;border:1px solid var(--hair);color:var(--fg2);flex:none}
.spill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.spill.new{background:var(--accent);color:var(--on-accent);border-color:transparent}
.spill.warn{color:var(--accent);border-color:rgba(242,169,59,.45)}
.spill.ok{color:var(--ok);border-color:rgba(91,214,138,.4)}
:root[data-theme="light"] .spill.ok{border-color:rgba(30,158,87,.35)}
.spill.muted{color:var(--fg3)}
.spill.muted::before{display:none}
/* disclosure */
.dlabel{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--fg2);vertical-align:middle}
.dlabel b{color:var(--fg);font-weight:700}
.spon{display:flex;align-items:center;gap:6px;margin:0 0 -1px;font-size:10px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--fg3);min-width:0;line-height:1.2}
.spon .blogo{--s:16px;font-size:6.5px;letter-spacing:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.spon span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* call card (open calls) */
.ccard{display:flex;flex-direction:column;border-radius:18px;padding:10px;position:relative;transition:transform .2s var(--ease);min-width:0}
.ccard>*{position:relative}
.ccard:hover{--glass:var(--tile-hover)}
.ccard:active{transform:scale(.985)}
.cmedia{position:relative;aspect-ratio:16/11;border-radius:12px;overflow:hidden;background:var(--bg2);isolation:isolate}
.cmedia>img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.ccard:hover .cmedia>img{transform:scale(1.04)}
.cmedia::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42),transparent 34%,transparent 58%,rgba(0,0,0,.4));pointer-events:none}
.cmedia .by{position:absolute;inset-inline-start:8px;top:8px;z-index:2;display:inline-flex;align-items:center;gap:6px;height:32px;padding-block:0;padding-inline:4px 10px;border-radius:999px;background:rgba(8,8,10,.46);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);border:1px solid rgba(255,255,255,.22);color:#fff;font-size:12px;font-weight:700;max-width:calc(100% - 16px)}
.cmedia .by .blogo{--s:24px}
.cmedia .by-n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cmedia .cst{position:absolute;inset-inline-start:8px;bottom:8px;z-index:2}
.cmedia .cst .spill{background:rgba(8,8,10,.55);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.cbody{display:flex;flex-direction:column;gap:8px;padding:10px 2px 2px;flex:1}
.ccard h3{font-size:14.5px;font-weight:700;line-height:1.3;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ccard h3 a::after{content:"";position:absolute;inset:0;border-radius:18px;z-index:1}
.cmeta{display:flex;gap:6px 12px;flex-wrap:wrap;color:var(--fg3);font-size:12px;font-weight:500;margin-top:auto}
.cmeta span{display:inline-flex;align-items:center;gap:5px}
.cmeta svg{width:13px;height:13px}
.row-lead.plain{background:none;overflow:visible;width:44px;height:44px}
.row-lead.plain .mini svg{width:11px;height:11px}
/* collab progress card */
.duo{display:inline-flex;align-items:center;flex:none}
.duo>*{box-shadow:0 0 0 2.5px var(--bg2)}
.duo>*+*{margin-inline-start:-12px}
.kbar{display:flex;gap:4px}
.kbar span{flex:1;height:5px;border-radius:999px;background:var(--indbg)}
.kbar span.done{background:var(--accent)}
.kbar span.now{background:linear-gradient(90deg,var(--accent) 45%,var(--indbg) 45%)}
/* rails with collab cards */
.co-rail>.ccard{flex-basis:calc(var(--card-w) + 34px)}
/* stepper (collab page) */
.kflow{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.kflow li{display:flex;align-items:center;gap:12px;min-height:44px;position:relative;color:var(--fg3);font-size:14px;font-weight:600}
.kflow li+li::before{content:"";position:absolute;inset-inline-start:13px;top:-12px;height:24px;width:2px;background:var(--hair)}
.kflow li.done+li::before{background:var(--accent)}
.kflow .dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--hair);display:grid;place-items:center;flex:none;font-size:12px;font-weight:700;background:var(--bg);position:relative;z-index:1}
.kflow li.done{color:var(--fg2)}
.kflow li.done .dot{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.kflow li.now{color:var(--fg)}
.kflow li.now .dot{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 5px var(--accent-soft)}
@media (min-width:1024px){
  .kflow.h{flex-direction:row;align-items:flex-start}
  .kflow.h li{flex:1;flex-direction:column;align-items:center;text-align:center;gap:8px;font-size:12.5px}
  .kflow.h li+li::before{left:calc(-50% + 16px);right:calc(50% + 16px);top:13px;width:auto;height:2px}
}
/* product art + sheets */
.part{display:grid;place-items:center;border-radius:20px;padding:18px;background:radial-gradient(70% 70% at 50% 35%,var(--accent-soft),transparent 72%),var(--bg2)}
.part-svg{display:block;max-width:100%;height:auto}
.sumlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.sumlist li{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--fg2);line-height:1.4}
.sumlist li>svg{color:var(--accent);flex:none;margin-top:2px}
.sumlist b{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg3);font-weight:700;margin-bottom:2px}
.sheet-h{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;margin:16px 0 8px}
.sheet-h svg{color:var(--accent)}
.sheet-h small{color:var(--fg3);font-weight:500}

/* ---------- סבב 6 · שת"פים קלילים (17.9.2026): מצב מותג · כרטיס הזדמנות · שורות הזדמנות ושת"פ · תוצאות · גיליון מותג ---------- */
/* brand mode: no sidebar, tab bar or FAB. A thin top bar with the brand, the bell and Switch to Kobi */
@media (min-width:1024px){ .brand-app{grid-template-columns:minmax(0,1fr)} .brand-mode .toast{left:50%} }
.brand-mode .content{padding-bottom:56px}
.bmode{display:flex;align-items:center;gap:10px;min-width:0;position:relative;z-index:1;color:var(--fg);flex:none;max-width:56%}
.bmode .blogo{--s:32px}
.bmode-t{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.bmode-t b{font-family:var(--font-display);font-weight:800;font-size:14.5px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bmode-t small{font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.bsep{width:1px;height:22px;background:var(--hair);margin:0 4px;flex:none;position:relative;z-index:1}
.top-fill{flex:1}
.bswitch{margin-inline-start:4px;position:relative;z-index:1}
@media (max-width:559px){ .bswitch{width:38px;padding:0;justify-content:center} .bswitch span{display:none} .capsule.has-back .bmode-t,.capsule.has-back #themeBtn{display:none} }
/* a brand name is a button that opens the brand sheet */
button.bname{font:inherit;font-weight:700;text-align:start}
button.bname:hover{text-decoration:underline}
/* the fit line on an opportunity card */
.cfit{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--fg2);min-width:0}
.cfit svg{width:13px;height:13px;color:var(--ok);flex:none}
.cfit span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* rows: an opportunity (brand) and a collab (both sides) */
.opprow .row-thumb{border-radius:12px}
.krow .row-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.krow .row-body b,.krow .row-body small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.krow .kbar{max-width:150px;margin-top:4px}
.krow.turn{box-shadow:inset 3px 0 0 var(--accent)}
.stat-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
/* brand sheet */
.bs-top{display:flex;gap:14px;align-items:flex-start}
.bs-top p{font-size:14.5px;line-height:1.5;color:var(--fg2)}
.bs-prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.bs-prod{display:flex;align-items:center;gap:10px;padding-block:6px;padding-inline:6px 10px;border-radius:14px;border:1px solid var(--hair);text-align:start;transition:border-color .2s}
.bs-prod:hover{border-color:var(--fg3)}
.bs-prod .part{padding:4px;border-radius:12px;flex:none}
.bs-prod b{display:block;font-size:13.5px}
.bs-prod small{display:block;font-size:12px;color:var(--fg3)}
.bs-note{display:flex;gap:8px;align-items:flex-start;margin-top:14px;font-size:12.5px;color:var(--fg3);line-height:1.45}
.bs-note svg{width:15px;height:15px;color:var(--accent);flex:none;margin-top:1px}

/* ===== סבב 7 · מתכונים מסרטון: נגן הווידאו בגיליון ===== */
.vplayer{position:relative;border-radius:16px;overflow:hidden;background:#000;display:grid;place-items:center;max-height:min(64vh,560px)}
.vplayer video{width:100%;max-height:min(64vh,560px);object-fit:contain;display:block;background:#000}

/* ============================================================
   RTL · סבב 8 (17.9.2026)
   מה שמאפיינים לוגיים לא יכולים לבטא: טרנספורמים, מיקום רקע,
   והיסטים שתלויים בצד שבו יושב הסיידבר. וגם פונט עברי אמיתי.
   ============================================================ */

/* הפונט: Plus Jakarta Sans הוא לטיני בלבד. בעברית עוברים ל-Rubik —
   גיאומטרי, חם, ומתיישב על אותו מקצב. נטען רק כשצריך, מתוך i18n.js. */
html[data-lang="he"]{
  --font-display:Rubik,"Plus Jakarta Sans",system-ui,sans-serif;
  --font-text:Rubik,"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
}
html[data-lang="he"] h1,html[data-lang="he"] h2,html[data-lang="he"] h3{letter-spacing:0}
html[data-lang="he"] .wordmark{letter-spacing:.2em}   /* CHANGER נשאר לטיני */

/* מפסק הדלקה: הידית מתחילה מימין וזזה שמאלה */
[dir="rtl"] .switch:checked::after{transform:translateX(-20px)}

/* חץ ה-select עובר לצד השני */
[dir="rtl"] select.input{background-position:left 14px center}

/* חיצים וצ'evronים שמצביעים על כיוון — מתהפכים */
[dir="rtl"] .arrows .arrow svg,
[dir="rtl"] .seeall svg,
[dir="rtl"] .back svg,
[dir="rtl"] .fback svg,
[dir="rtl"] .nback svg,
[dir="rtl"] .topbar .back svg,
[dir="rtl"] .ob-bar .btn svg,
[dir="rtl"] #cmPrev svg,
[dir="rtl"] .chev,
[dir="rtl"] .row-item>svg:last-child{transform:scaleX(-1)}

/* כובע הבישול על הכרטיס נכנס מהצד הנכון */
[dir="rtl"] .tile .cook{transform:translateX(-6px)}
[dir="rtl"] .tile:hover .cook,[dir="rtl"] .tile:focus-within .cook{transform:translateX(0)}

/* מספרים, שעות וכמויות בתוך משפט עברי — מבודדים כדי שה-bidi לא יזיז אותם */
[dir="rtl"] .ing-q,[dir="rtl"] .pstats dd,[dir="rtl"] .stat dd,
[dir="rtl"] .week b,[dir="rtl"] .rate,[dir="rtl"] .tm span,
[dir="rtl"] .meta,[dir="rtl"] .cst{unicode-bidi:isolate}

/* שורת המטא בכרטיס: בעברית "1 שע׳ 30 · עוד 1 ימים · מתקדם" ארוכה מהאנגלית וגלשה מחוץ
   לכרטיס. מרשים לה לרדת שורה במקום לזלוג. */
[dir="rtl"] .meta{flex-wrap:wrap;row-gap:2px}

/* פס המבטא בצד הכרטיס נצבע ב-box-shadow, ול-box-shadow אין גרסה לוגית */
[dir="rtl"] .krow.turn{box-shadow:inset -3px 0 0 var(--accent)}
[dir="rtl"] .who[data-state="picked"]{box-shadow:inset -3px 0 0 var(--ok)}

/* כינויים, כתובות ושמות לטיניים בתוך עברית */
[dir="rtl"] .at,[dir="rtl"] .wordmark,
[dir="rtl"] .url,[dir="rtl"] code{unicode-bidi:isolate;direction:ltr;display:inline-block}

/* שורת הכינוי בפרופיל היא מכל עם כמה פריטים (כינוי · עיר · קישור), ולא רצף לטיני אחד.
   direction:ltr עליה היה מסדר את הפריטים הפוך ושובר את הפריסה; הבידוד נשאר. */
[dir="rtl"] .handle{unicode-bidi:isolate}

/* תחילית ה-@ בשדה שם המשתמש: היא מסומנת direction:ltr בשורה שמעל, ולכן inset-inline נפתח
   לצד הלא נכון. ממקמים אותה פיזית, וגם את הריפוד שמפנה לה מקום בתוך השדה. */
[dir="rtl"] .input-wrap>.at{left:auto;right:16px}

/* טקסט חופשי ארוך: כל פסקה מקבלת כיוון לפי האות הראשונה שלה, אחרת נקודה בסוף משפט
   באנגלית קופצת לתחילת השורה. רק על שדות רב-שורתיים — שדה שורה אחת נשאר מיושר
   לימין כמו כל טופס עברי, גם כשהערך לטיני. */
[dir="rtl"] textarea.input,
[dir="rtl"] .ol-steps li{unicode-bidi:plaintext}

/* הקו שנמתח מתחת לכותרת סקשן צומח מהצד שבו הכותרת מתחילה */
[dir="rtl"] .sec-h h2::after{transform-origin:right}

@media (min-width:1024px){
  /* הסיידבר יושב מימין, אז ההודעה הצפה נעה לצד השני */
  [dir="rtl"] .toast{left:calc(50% - 128px)}
  [dir="rtl"] .fab{inset-inline-end:28px}
}

/* 24.9 · אורח בקישור ששותף: אחרי 30 שניות חייבים להתחבר. בלי סגירה, התוכן מטושטש מאחור */
.peek-bd{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.45);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);animation:fade .35s ease}
.peek{width:100%;max-width:420px;border-radius:26px;padding:28px 24px 22px;text-align:center}
.peek .wordmark{display:inline-block;margin-bottom:14px}
.peek h2{font-size:24px;line-height:1.2;margin:0 0 10px}
.peek p{color:var(--fg2);font-size:14.5px;line-height:1.55;margin:0 0 20px}
.peek .btn .ico{margin-inline-end:8px}
.peek .btn{justify-content:center}
.peek-more{display:grid;gap:8px;margin-top:10px}
.peek .peek-legal{font-size:12px;color:var(--fg3);margin:14px 0 0}

/* ---------- מעבר בין דפים (4.10, גרסה ב׳) ----------
   הדף הקודם מיטשטש ונעלם (View Transitions של הדפדפן, בלי הבהוב לבן), והסרגלים קפואים במקום.
   התוכן של הדף החדש נכנס במעבר קובי, בלוק אחרי בלוק. דפדפן בלי View Transitions מקבל רק את הכניסה. */
@view-transition{navigation:auto}
.side{view-transition-name:side} .tabbar{view-transition-name:tabbar} .fab{view-transition-name:fab}
::view-transition-group(side),::view-transition-group(tabbar),::view-transition-group(fab){animation-duration:0s}
::view-transition-old(side),::view-transition-new(side),::view-transition-old(tabbar),::view-transition-new(tabbar),::view-transition-old(fab),::view-transition-new(fab){animation:none}
::view-transition-old(root){animation:pt-out .32s ease both}
::view-transition-new(root){animation:none}
@keyframes pt-out{to{opacity:0;filter:blur(8px);transform:scale(.985)}}
@keyframes kv-in{from{opacity:0;transform:translateY(28px) scale(.986);filter:blur(7px)}}
.content>*:not(.rb),.rb>.col-l,.rb .col-r>.nav-wrap,.rb .flow>.sec{animation:kv-in 1.05s cubic-bezier(.16,1,.3,1) backwards}
.content>*:nth-child(2){--k:1} .content>*:nth-child(3){--k:2} .content>*:nth-child(4){--k:3} .content>*:nth-child(5){--k:4} .content>*:nth-child(n+6){--k:5}
.content>*:not(.rb){animation-delay:calc(var(--i,var(--k,0)) * 90ms)}
.rb .col-r>.nav-wrap{animation-delay:90ms} .rb .flow>.sec:first-child{animation-delay:180ms} .rb .flow>.sec+.sec{animation-delay:270ms}
/* עד שהשפה נטענת הדף מוסתר — הכניסה מחכה לרגע שרואים אותה */
html[data-i18n="pending"] .content>*,html[data-i18n="pending"] .rb>.col-l,html[data-i18n="pending"] .rb .col-r>.nav-wrap,html[data-i18n="pending"] .rb .flow>.sec{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){ @view-transition{navigation:none} }

/* ---------- עמוד אחד (4.10): מה שהנתב צריך מה-CSS ---------- */
.no-fab .fab{display:none}
#page:focus{outline:none}
.navbar-p{position:fixed;top:0;left:0;right:0;height:2px;z-index:200;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;opacity:0;pointer-events:none}
[dir="rtl"] .navbar-p{transform-origin:100% 50%}
.navbar-p.on{opacity:1;transform:scaleX(.85);transition:transform 8s cubic-bezier(.1,.6,.2,1)}
/* חזרה אחורה: המסך הקודם פשוט שם, במקום שבו עזבנו אותו — רק התבהרות קצרה, בלי כניסה מחדש */
.content.pop{animation:pt-pop .22s ease}
.content.pop>*,.content.pop .rb>.col-l,.content.pop .rb .col-r>.nav-wrap,.content.pop .rb .flow>.sec,.content.pop .reveal{animation:none}
@keyframes pt-pop{from{opacity:0}}

/* ---------- אפליקציה מותקנת (PWA, 5.10) ----------
   חלונית "Install CHANGER": האייקון כמו שהוא ייראה במסך הבית, ושלושה צעדים ממוספרים עם האייקון של הכפתור שמחפשים. */
.inst-app{display:flex;flex-direction:column;align-items:center;gap:7px;margin:2px 0 18px;font-size:12px;font-weight:600;color:var(--fg2)}
.inst-app img{width:64px;height:64px;border-radius:15px;box-shadow:0 10px 26px rgba(0,0,0,.28),0 0 0 1px var(--hair)}
.inst-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.inst-steps li{display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:18px;background:var(--hair)}
.inst-steps li>div{flex:1;min-width:0}
.inst-steps b{display:block;font-size:14.5px;font-weight:700}
.inst-steps small{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--fg2)}
.inst-n{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:13px;font-weight:800;background:var(--accent);color:var(--on-accent)}
.inst-ic{flex:none;color:var(--fg2);display:grid;place-items:center}
.inst-ic svg{width:20px;height:20px}
/* מתוך מסך הבית: מרגיש כמו אפליקציה ולא כמו דף — בלי ריבוע אפור בנגיעה, בלי תצוגה מקדימה של קישור בלחיצה ארוכה, ובלי סימון של סרגלים וכפתורים */
@media (display-mode:standalone){
  html{-webkit-tap-highlight-color:transparent}
  a,img{-webkit-touch-callout:none}
  .tabbar,.side,.top,.fab,.btn,.tab,.nav-item,.chip,.seg{-webkit-user-select:none;user-select:none}
}

/* ---------- ספרי בישול (6.10): הכריכה והאריח, אותו דבר בשמורים, בפרופיל, בבית ובעמוד הספר ----------
   הכריכה = פסיפס של עד ארבע מנות, כמו פלייליסט. אריח = כריכה + שם + שורה קטנה (מי · כמה מתכונים). */
.cb-cover{display:grid;grid-template-columns:1fr 1fr;gap:2px;aspect-ratio:1/1;border-radius:12px;overflow:hidden;background:var(--bg2)}
.cb-cover.one{grid-template-columns:1fr}
.cb-cover.two{grid-template-rows:1fr}
.cb-cover img{width:100%;height:100%;object-fit:cover;display:block;min-height:0}
.cb-cover .ph{display:grid;place-items:center;background:var(--indbg);color:var(--fg3)}
.cb-cover .ph svg{width:30%;height:30%}
.books{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:8px var(--pad) 22px}
@media (min-width:560px){ .books{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)} }
@media (min-width:1024px){ .books{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:1360px){ .books{grid-template-columns:repeat(5,minmax(0,1fr))} }
.books>*{animation:rise .6s var(--ease) backwards;animation-delay:calc(var(--i,0)*35ms)}
.bt{position:relative;display:flex;flex-direction:column;padding:8px;border-radius:18px;color:inherit;transition:transform .2s var(--ease);min-width:0}
.bt>*{position:relative;z-index:1}
.bt:hover{--glass:var(--tile-hover)}
.bt:active{transform:scale(.985)}
.bt b{display:block;font-size:14px;font-weight:600;line-height:1.3;letter-spacing:-.01em;margin:10px 2px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt small{display:block;margin:3px 2px 2px;font-size:12px;color:var(--fg3);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt-line>span+span::before{content:" · "}
.bt-badge{position:absolute;top:14px;inset-inline-end:14px;z-index:2;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(14,14,16,.62);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.bt-badge svg{width:14px;height:14px}
.bt.new{border:1.5px dashed var(--hair);align-items:center;justify-content:center;gap:8px;text-align:center;font-weight:600;font-size:13.5px;color:var(--fg2);min-height:100%}
.bt.new:hover{border-color:var(--accent);color:var(--fg)}
.bt.new .plus{width:44px;height:44px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center}
.bt.new span.h{display:block;font-weight:500;font-size:12px;color:var(--fg3)}
.books-rail>.bt{flex-basis:calc(var(--card-w) * .82)}
/* אריח ספר באזור ההצעות בראש הבית (7.10): פסיפס בגודל התמונה של אריח מתכון, ושם + שורה קטנה */
.tile.bk .cb-cover{width:58px;height:58px;flex:none;border-radius:0;gap:1px;position:relative;z-index:1}
.tile.bk .tbody{position:relative;z-index:1;display:flex;flex-direction:column;gap:2px;min-width:0;padding-inline-end:10px}
.tile.bk .tname{position:static;padding-inline-end:0}
.tile.bk small{display:none}                     /* בנייד השם מקבל שתי שורות, והשורה הקטנה רק במחשב */
.tile.bk .tname::after{z-index:2}
.tile.bk small{font-size:11.5px;font-weight:500;color:var(--fg3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:720px){ .tile.bk .cb-cover{width:64px;height:64px} .tile.bk .tname{-webkit-line-clamp:1} .tile.bk small{display:block} }

/* חזרה בחריץ (7.10): הכפתור בפינת התמונה, והתמונה נחתכת סביבו (A.backNotch). בנייד עיגול עם חץ בלבד */
.nback{position:absolute;z-index:6;display:inline-flex;align-items:center;gap:7px;height:42px;max-width:min(260px,70%);padding:0 16px 0 13px;border-radius:999px;font-size:14px;font-weight:600;color:var(--fg);transition:transform .15s}
.nback:active{transform:scale(.96)}
.nback svg{flex:none;width:18px;height:18px;position:relative;z-index:1}
.nback span{position:relative;z-index:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nback.sm{width:36px;height:36px;padding:0;justify-content:center}
.nback.sm span{display:none}