/* CookHub - Hebrew RTL design system */
:root {
  --bg: #FAFAFA; --surface: #ffffff; --surface2: #F4F4F6; --ink: #25211E; --muted: #6F6A66; --line: #ECE9E6;
  --brand: #FF6B35; --brand-d: #CC4514; --brand-soft: #FFEDE4; --accent: #2EC4B6; --green: #12877B; --green-soft: #E1F7F4; --green-line: #8EDDD4;
  --warn: #B7791F; --warn-soft: #FFF4D6; --danger: #D64545; --danger-soft: #FDECEC; --wa: #1FA855;
  --shadow: 0 1px 2px rgba(37, 33, 30, .05), 0 4px 14px rgba(37, 33, 30, .06);
  --shadow-card: 0 2px 6px rgba(37, 33, 30, .05), 0 10px 28px rgba(255, 107, 53, .10);
  --shadow-hover: 0 6px 12px rgba(37, 33, 30, .07), 0 22px 44px rgba(255, 107, 53, .22);
  --shadow-lg: 0 18px 50px rgba(40, 20, 5, .25);
  --r: 16px; --font: 'Heebo', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #151210; --surface: #201B18; --surface2: #2A2421; --ink: #F5EEE8; --muted: #AAA09A; --line: #38302B; --brand: #FF7A4D; --brand-d: #FF9A74; --brand-soft: #3D2216; --accent: #3DD6C6; --green: #4FD9CA; --green-soft: #123330; --green-line: #1F5F58; --warn: #F0B955; --warn-soft: #33260D; --danger: #FF7A6B; --danger-soft: #3A1A17; --shadow: 0 1px 2px #0006, 0 6px 18px #0005; --shadow-card: 0 2px 6px #0006, 0 12px 30px #0006; --shadow-hover: 0 8px 16px #0007, 0 24px 48px rgba(255, 122, 77, .22); }
}* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--ink); line-height: 1.6; font-size: 17px; }
body.modal-open { overflow: hidden; }
a { color: var(--brand-d); text-decoration: none; } a:hover { text-decoration: underline; }
img { max-width: 100%; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; } h1 { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; } h2 { font-size: 1.25rem; font-weight: 700; } h3 { font-size: 1.05rem; } h4 { margin: 1em 0 .4em; }
p { margin: 0 0 .8em; } small, .fine { font-size: .82rem; color: var(--muted); } .muted { color: var(--muted); } .hidden { display: none !important; } .grow { flex: 1; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 60%, transparent); outline-offset: 2px; border-radius: 6px; }
.fatal { padding: 3rem; text-align: center; font-size: 1.2rem; }
.spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- controls ---------- */
.btn { font: inherit; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: .4em; padding: .55em 1em; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; transition: transform .1s, background .15s, border-color .15s, box-shadow .15s; text-decoration: none !important; white-space: nowrap; min-height: 40px; max-width: 100%; }
/* a handful of buttons across the app carry a full sentence as their label ("🤖 הצע מתכונים חדשים לפי הטעם שלי", the party
   planner's menu-confirm button...). white-space:nowrap is right for the common case (short labels, own line), but forces
   those specific buttons wider than their card on a phone - and since RTL overflows toward the START (the right edge sits
   still; the box grows past the card's LEFT edge), that silently pushes the whole page into horizontal scroll rather than
   visibly clipping. Letting text wrap below this width removes the overflow at its source, everywhere, instead of patching
   each long-label button's container one at a time. */
@media (max-width: 480px) { .btn { white-space: normal; text-align: center; } }
.btn:hover { border-color: var(--brand); background: var(--brand-soft); } .btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(135deg, #FF6B35, #F0531F); color: #fff; border-color: transparent; font-weight: 600; box-shadow: 0 4px 12px rgba(255, 107, 53, .28); } .btn.primary:hover { background: linear-gradient(135deg, #F0531F, #DB4513); border-color: transparent; box-shadow: 0 6px 18px rgba(255, 107, 53, .38); transform: translateY(-1px); }
.btn.danger { background: var(--danger); color: #fff; border-color: var(--danger); } .btn.danger-o { color: var(--danger); } .btn.danger-o:hover { background: var(--danger-soft); border-color: var(--danger); }
.btn.ghost { background: transparent; border-color: transparent; } .btn.on { background: var(--brand-soft); border-color: var(--brand); }
.btn.whatsapp { background: var(--wa); color: #fff; border-color: var(--wa); } .btn.whatsapp:hover { filter: brightness(.92); background: var(--wa); }
.btn.sm { padding: .3em .8em; font-size: .88rem; min-height: 34px; } .btn.lg { padding: .8em 1.5em; font-size: 1.05rem; } .btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.icon-btn { font: inherit; border: 0; background: transparent; color: inherit; cursor: pointer; width: 38px; height: 38px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 1.1rem; } .icon-btn:hover { background: var(--surface2); }
.icon-btn.sm { width: 30px; height: 30px; font-size: .9rem; } .icon-btn.xs { width: 22px; height: 22px; font-size: .7rem; }
.link { background: none; border: 0; color: var(--brand-d); cursor: pointer; font: inherit; font-size: .85rem; text-decoration: underline; padding: 0 .3em; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: 10px; padding: .55em .8em; width: 100%; min-height: 42px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
input[type=checkbox], input[type=radio] { width: auto; min-height: 0; accent-color: var(--brand); transform: scale(1.15); }
textarea { resize: vertical; }
.field { display: block; margin-bottom: 1em; } .field > span { display: block; font-size: .88rem; font-weight: 500; margin-bottom: .3em; color: var(--muted); }
.check { display: flex; gap: .5em; align-items: center; cursor: pointer; margin: .3em 0; }
.inline { display: flex; gap: .5em; align-items: center; flex-wrap: wrap; } .inline > input, .inline > select { flex: 1; min-width: 150px; }
.form-err { color: var(--danger); font-size: .9rem; min-height: 1.2em; margin: 0 0 .6em; } .ok { color: var(--green); }
.status { margin-top: .6em; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: .45em; margin: .4em 0; }
.chip { font: inherit; font-size: .9rem; padding: .3em .85em; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; text-decoration: none !important; display: inline-block; }
.chip:hover { border-color: var(--brand); } .chip.on { background: var(--brand); border-color: var(--brand); color: #fff; } .chip.on.danger { background: var(--danger); border-color: var(--danger); }
.chip.tagc { color: var(--muted); } .chip.tagc.on { color: #fff; }
.tags-drawer { display: contents; } .tags-drawer > summary { list-style: none; cursor: pointer; user-select: none; } .tags-drawer > summary::-webkit-details-marker { display: none; }
.tags-inner { display: flex; flex-wrap: wrap; gap: .45em; margin-top: .4em; }
.tag { font-size: .75rem; padding: .1em .6em; border-radius: 999px; background: var(--surface2); color: var(--muted); } .tag.warn { background: var(--warn-soft); color: var(--warn); }
.tabs { display: flex; gap: .3em; border-bottom: 2px solid var(--line); margin-bottom: 1em; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tabs > * { font: inherit; background: none; border: 0; padding: .6em 1.1em; cursor: pointer; color: var(--muted); font-weight: 500; border-bottom: 3px solid transparent; margin-bottom: -2px; text-decoration: none !important; white-space: nowrap; }
.tabs > .on { color: var(--brand-d); border-bottom-color: var(--brand); } .tabs em { font-style: normal; font-size: .75rem; background: var(--surface2); padding: 0 .5em; border-radius: 99px; margin-inline-start: .3em; }
.switch { display: flex; align-items: center; gap: .6em; cursor: pointer; } .switch input { position: absolute; opacity: 0; width: 0; }
.slider { position: relative; width: 44px; height: 26px; background: var(--line); border-radius: 99px; flex: none; transition: background .2s; }
.slider::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px #0004; }
.switch input:checked + .slider { background: var(--accent); } .switch input:checked + .slider::after { transform: translateX(-18px); }
.switch input:focus-visible + .slider { outline: 3px solid var(--brand-soft); }
.hint { font-size: .75rem; color: var(--warn); font-style: normal; }
.alert { padding: .7em 1em; border-radius: 10px; margin: .6em 0; border: 1px solid var(--line); } .alert.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; } .alert.small { font-size: .88rem; }
.avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: inline-grid; place-items: center; background: hsl(var(--h, 20) 60% 45%); color: #fff; font-weight: 700; font-size: .8rem; flex: none; }

/* ---------- shell ---------- */
/* one row, RTL: brand (right) | main navigation (centre, takes the free space) | import + settings + user (left) */
/* the header has ONE fixed height per layout; the floating import bar, toasts and anchor scrolling are placed from it */
:root { --header-h: 58px; } @media (max-width: 860px) { :root { --header-h: 56px; } }
html { scroll-padding-top: calc(var(--header-h) + 12px); }
.topbar { position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: nowrap; align-items: center; gap: clamp(.5rem, 1.2vw, 1.2rem); height: var(--header-h); box-sizing: border-box; padding: 0 clamp(.8rem, 2vw, 1.6rem); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: .5rem; flex: none; color: var(--ink) !important; text-decoration: none !important; }
.brand .wordmark { font-size: 1.45rem; padding-bottom: .15em; } .brand .logo-svg { width: 36px; height: 36px; }
.logo-mark { width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, var(--brand), #f0a044); display: grid; place-items: center; font-size: 1.8rem; box-shadow: var(--shadow); } .logo-mark.sm { width: 36px; height: 36px; font-size: 1.2rem; border-radius: 11px; }
.topnav { display: flex; align-items: center; justify-content: center; gap: .2rem; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; } .topnav::-webkit-scrollbar { display: none; }
.topnav a { display: inline-flex; align-items: center; gap: .35em; padding: .38em .75em; border-radius: 999px; color: var(--ink); white-space: nowrap; font-size: .9rem; font-weight: 600; line-height: 1.2; text-decoration: none !important; } .topnav a i { font-style: normal; }
.topnav a:hover { background: var(--surface2); } .topnav a.on { background: var(--brand-soft); color: var(--brand-d); font-weight: 700; }
.top-actions { display: flex; align-items: center; gap: .4rem; flex: none; white-space: nowrap; }
/* compact header controls: the import button, settings, avatar and logout are all ~30px tall */
.top-actions .btn { font-size: .82rem; padding: .25em .75em; min-height: 30px; } .top-actions .btn.primary { font-weight: 600; box-shadow: none; }
.top-actions .icon-btn { width: 32px; height: 32px; font-size: 1rem; } .userbox .avatar { width: 30px; height: 30px; font-size: .72rem; } .userbox .btn.ghost { font-size: .8rem; padding: .2em .5em; min-height: 28px; }
.userbox { display: flex; align-items: center; gap: .45rem; padding-inline-start: .6rem; border-inline-start: 1px solid var(--line); white-space: nowrap; }
/* cloud sync state in the header (click = sync now); guests get a small sign-in button instead */
.sync-badge { background: none; border: 0; cursor: pointer; font-size: 1rem; padding: .15em .3em; border-radius: 8px; line-height: 1; min-height: 0; } .sync-badge:hover { background: var(--surface2); }
.sync-badge.s-error { color: var(--danger); } .sync-badge.s-syncing { animation: spin 1.2s linear infinite; } .sync-badge.s-offline, .sync-badge.s-pending { opacity: .75; }
.sync-badge[hidden], .sync-guest[hidden] { display: none; } .userbox .sync-guest { font-size: .78rem; padding: .2em .6em; min-height: 28px; border-color: var(--brand); color: var(--brand-d); }
.form-ok { color: var(--green); font-size: .88rem; margin: .2rem 0; } .form-ok:empty, .form-err:empty { display: none; }
.auth-lead { text-align: center; margin: .2rem 0 .8rem; font-size: .92rem; } .auth-guest { margin: .6rem 0 0; } .auth-guest small { font-size: .75rem; }
.uname { font-weight: 500; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .badge-backup { font-size: .75rem; color: var(--green); } .badge-backup:empty { display: none; }
/* narrower desktops: tighten, then drop the user name, then show the navigation as icons (full name in the tooltip) - never wrap or clip */
@media (max-width: 1500px) { .topnav a { padding: .36em .55em; font-size: .86rem; gap: .3em; } .topnav { gap: .1rem; } .brand .wordmark { font-size: 1.45rem; } .uname { display: none; } .top-actions .lbl-x { display: none; } }
@media (max-width: 1200px) { .topnav a span { display: none; } .topnav a { font-size: 1.1rem; padding: .25em .5em; } .top-actions .btn.primary .lbl { display: none; } }
.view { width: 95% !important; max-width: 1700px !important; margin: 0 auto !important; padding: 1.2rem 1rem 6rem; outline: none; }
.page-head { margin-bottom: 1rem; } .page-head .sub { color: var(--muted); margin: 0; } .page-head { display: flex; flex-wrap: wrap; align-items: end; gap: .3rem 1rem; justify-content: space-between; } .page-head > h1 { margin: 0; } .page-head .sub { flex-basis: 100%; }
.page.wide { max-width: none; }
.bottomnav { display: none; }
.fab { display: none; }
@media (max-width: 860px) {
  .topnav { display: none; } .topbar { padding: 0 .8rem; } .brand { flex: 1; } .brand .logo-svg { width: 34px; height: 34px; } .brand .wordmark { font-size: 1.35rem; } .top-actions { flex: 0; } .uname { display: none; } .top-actions .btn.primary { padding: .3em .7em; }
  .bottomnav { display: flex; position: fixed; bottom: 0; inset-inline: 0; z-index: 60; background: var(--surface); border-top: 1px solid var(--line); padding: .25rem .2rem calc(.25rem + env(safe-area-inset-bottom)); }
  /* min-width:0 overrides the flex default (min-width:auto), which otherwise refuses to shrink a label below its own
     text's intrinsic width - with 6 items sharing 375px that alone is enough to push the whole bar past the viewport
     (and everything else on the page along with it, since it's position:fixed and full-width). The label itself then
     ellipsizes instead of forcing the bar wider. */
  .bottomnav a { flex: 1; min-width: 0; display: grid; justify-items: center; gap: 0; font-size: .68rem; color: var(--muted); padding: .2rem 0; text-decoration: none !important; } .bottomnav a i { font-style: normal; font-size: 1.25rem; } .bottomnav a span { min-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bottomnav a.on { color: var(--brand-d); font-weight: 700; }
  .view { padding: 1rem .9rem 6.5rem; }
  .fab { display: flex; align-items: center; justify-content: center; position: fixed; inset-inline-end: 1rem; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 55; width: 52px; height: 52px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 1.6rem; line-height: 1; border: none; box-shadow: 0 4px 16px rgba(255,107,53,.45); cursor: pointer; }
  .fab:active { transform: scale(.93); }
  .top-actions .btn.primary { display: none; } /* hide topbar import on mobile – FAB replaces it */
}

@media (max-width: 600px) { .top-actions .btn.primary .lbl { display: none; } .top-actions .btn.primary { width: 38px; padding: 0; font-size: 1.2rem; } .topbar { gap: .4rem; } .userbox { gap: .3rem; padding-inline-start: .3rem; } .userbox .btn.ghost { padding: .2em .5em; } .page-head h1 { font-size: 1.5rem; } }
.topbar { box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(255, 107, 53, .05); }
.logo-svg { flex: none; border-radius: 12px; display: block; } .brand .logo-svg { filter: drop-shadow(0 3px 6px rgba(255, 107, 53, .35)); transition: transform .25s; } .brand:hover .logo-svg { transform: rotate(-6deg) scale(1.06); }
.wordmark { font-family: 'Pacifico', cursive; font-weight: 400; letter-spacing: .01em; color: #1a1a1a; unicode-bidi: isolate; direction: ltr; line-height: 1; } .wordmark b { color: var(--brand); font-weight: 400; font-style: normal; }
@media (max-width: 380px) { .brand .wordmark { font-size: 1.15rem; } .brand .logo-svg { width: 30px; height: 30px; } }
/* ---------- import progress widget (floating, draggable, collapsible) ---------- */
/* bottom-left corner (the timer tray owns bottom-right): never over the header, the page tabs or the toolbar */
.import-widget { position: fixed; bottom: calc(1rem + env(safe-area-inset-bottom)); left: 1rem; z-index: 9999; display: flex; flex-direction: column; background: var(--surface); border: 1px solid rgba(255, 107, 53, .38); border-radius: 14px; box-shadow: 0 4px 20px rgba(0,0,0,.13), 0 1px 4px rgba(255,107,53,.15); font-size: .84rem; color: var(--ink); overflow: hidden; user-select: none; min-width: 260px; max-width: min(420px, calc(100vw - 2rem)); }
.import-widget.hidden { display: none !important; }
.iw-row { display: flex; align-items: stretch; min-width: 0; }
.iw-handle { flex: none; display: flex; align-items: center; padding: 0 .4rem; cursor: grab; color: var(--muted); background: var(--brand-soft); border-left: 1px solid rgba(255, 107, 53, .22); font-size: 1rem; line-height: 1; }
.iw-handle:active { cursor: grabbing; }
.iw-body { flex: 1; display: flex; align-items: center; gap: .5rem; padding: .35rem .45rem .35rem .6rem; overflow: hidden; min-width: 0; }
.iw-body .is-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.iw-body .is-bar { width: 72px; height: 5px; border-radius: 9px; background: rgba(255, 107, 53, .18); overflow: hidden; display: inline-block; flex-shrink: 0; } .iw-body .is-bar i { display: block; height: 100%; background: linear-gradient(90deg, #FF6B35, #FF9F1C); border-radius: 9px; transition: width .35s; }
.iw-body .is-text em { font-style: normal; font-size: .78rem; color: var(--muted); }
.iw-body .is-bar.paused i { background: var(--muted); }
.iw-pause { flex: none; background: none; border: 1px solid rgba(255, 107, 53, .3); border-radius: 50%; width: 26px; height: 26px; cursor: pointer; font-size: .75rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.iw-pause:hover { background: var(--brand-soft); }
.iw-min { flex: none; background: none; border: none; border-right: 1px solid rgba(255, 107, 53, .22); cursor: pointer; padding: 0 .55rem; font-size: .82rem; color: var(--muted); align-self: stretch; display: flex; align-items: center; transition: color .15s, background .15s, transform .22s; }
.iw-min:hover { color: var(--brand); background: var(--brand-soft); }
.import-widget.expanded .iw-min { transform: rotate(180deg); color: var(--brand); }
.iw-panel { max-height: 0; overflow: hidden; transition: max-height .28s ease; border-top: 0px solid rgba(255, 107, 53, .18); }
.import-widget.expanded .iw-panel { max-height: 340px; border-top-width: 1px; overflow-y: auto; }
.iw-panel-inner { padding: .6rem .75rem .55rem; display: flex; flex-direction: column; gap: .5rem; }
.iw-panel-inner p { margin: 0; font-size: .83rem; }
.iw-panel-files { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .18rem; max-height: 120px; overflow-y: auto; }
.iw-panel-files li { font-size: .76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: .1rem 0; }
.iw-panel-actions { display: flex; gap: .4rem; flex-wrap: wrap; padding-top: .25rem; }
@media (max-width: 860px) { .import-widget { bottom: calc(130px + env(safe-area-inset-bottom)); } } /* above the bottom tab bar and the ＋ button */
@media (max-width: 600px) { .import-widget { left: .5rem; min-width: 200px; max-width: calc(100vw - 1rem); } .iw-body .is-text b { font-size: .82rem; } .iw-body .is-bar { width: 44px; } }
/* .brand-name hide rule removed — header now uses .brand-logo-img */
/* ---------- fallback modal (blocked / private URL) ---------- */
.fb-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.52); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.fb-modal { background: var(--bg); border-radius: 16px; max-width: 520px; width: 100%; box-shadow: 0 12px 48px rgba(0,0,0,.28); overflow: hidden; direction: rtl; }
.fb-modal-header { display: flex; align-items: flex-start; gap: .75rem; padding: 1.1rem 1.2rem .6rem; }
.fb-modal-header strong { font-size: 1.05rem; display: block; }
.fb-modal-url { font-size: .78rem; color: var(--muted); margin-top: .15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-modal-desc { margin: 0 1.2rem .7rem; font-size: .88rem; color: var(--ink); }
.fb-modal-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); padding: 0 1.2rem; }
.fb-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: .45rem .9rem; font-size: .86rem; cursor: pointer; color: var(--muted); margin-bottom: -1px; transition: color .15s, border-color .15s; }
.fb-tab.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.fb-tab-content { padding: .8rem 1.2rem; }
.fb-tab-content.hidden { display: none; }
.fb-textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; padding: .6rem .75rem; font-size: .88rem; font-family: inherit; resize: vertical; background: var(--surface); color: var(--ink); }
.fb-textarea:focus { outline: 2px solid var(--brand); border-color: transparent; }
.fb-drop-zone { border: 2px dashed var(--line); border-radius: 10px; padding: 1.4rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.fb-drop-zone:hover, .fb-drop-zone.drag-over, .fb-drop-zone:focus { border-color: var(--brand); background: var(--brand-soft); outline: none; }
.fb-drop-hint { margin: 0; font-size: .85rem; color: var(--muted); }
.fb-modal-actions { display: flex; gap: .6rem; padding: .7rem 1.2rem 1.1rem; flex-wrap: wrap; }
.fb-modal-status { padding: .4rem 1.2rem .8rem; font-size: .86rem; color: var(--muted); }
/* ---------- toolbar / filters ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .8rem 0; } .toolbar .search { flex: 1; min-width: 220px; } .toolbar select { width: auto; }
.filters { margin-bottom: 1rem; } .row-between { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; } .row-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.selbar { position: sticky; top: 62px; z-index: 20; display: flex; align-items: center; gap: .6rem; background: var(--brand-soft); border: 1px solid var(--brand); padding: .5rem .9rem; border-radius: 12px; margin-bottom: 1rem; }
.head-actions { display: flex; gap: .5rem; }

/* ---------- cards & grid ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 1.1rem; } .grid.small { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.card { position: relative; background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column; border: 2px solid transparent; transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, border-color .2s; }
.card:hover, .card:focus-within { transform: translateY(-5px); box-shadow: var(--shadow-hover); } .card.sel { border-color: var(--brand); } .card .cover { transition: transform .55s cubic-bezier(.2, .8, .2, 1); } .card:hover .cover { transform: scale(1.06); } .fav { transition: transform .15s; } .fav:hover { transform: scale(1.14); }
.card-cover { display: block; position: relative; aspect-ratio: 4/3; background: var(--surface2); overflow: hidden; }
.cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover.ph { display: grid; place-items: center; background: linear-gradient(135deg, hsl(var(--h) 92% 88%), hsl(calc(var(--h) + 14) 90% 74%)); } .cover.ph span { font-size: 3.2rem; filter: drop-shadow(0 2px 4px #0003); }
@media (prefers-color-scheme: dark) { .cover.ph { background: linear-gradient(135deg, hsl(var(--h) 35% 28%), hsl(calc(var(--h) + 40) 35% 22%)); } }
.flag { position: absolute; bottom: 8px; inset-inline-start: 8px; font-size: .75rem; padding: .15em .6em; border-radius: 99px; background: rgba(0, 0, 0, .65); color: #fff; } .flag.warn { background: var(--warn); } .flag.cat { inset-inline-start: auto; inset-inline-end: 8px; background: var(--green); }
.fav { position: absolute; top: 8px; inset-inline-end: 8px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); font-size: 1.15rem; cursor: pointer; box-shadow: var(--shadow); color: #888; } .fav.on { color: #e74c3c; }
.card.nfm { opacity: .55; } .card.nfm:hover { opacity: .85; } .card-actions .btn[data-act="like"].on { background: var(--green-soft, #e8f5e9); border-color: var(--green, #27ae60); color: var(--green, #27ae60); } .card-actions .btn[data-act="nfm"].on { background: var(--warn-bg, #fff3cd); border-color: var(--warn, #e67e22); color: var(--warn, #e67e22); }
.card-sel { position: absolute; top: 8px; inset-inline-start: 8px; background: #fff; border-radius: 8px; padding: 6px 7px 3px; box-shadow: var(--shadow); }
.card-body { padding: .8rem .9rem .9rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; } .card-body h3 { margin: 0; font-size: 1.08rem; } .card-body h3 a { color: var(--ink); }
.creator { font-size: .86rem; color: var(--muted); } .meta { display: flex; flex-wrap: wrap; gap: .25rem .8rem; font-size: .86rem; color: var(--muted); } .meta.big { font-size: 1rem; }
.k-meat { color: #b03a2e; } .k-dairy { color: #2874a6; } .k-parve { color: var(--green); } .k-mixed { color: var(--muted); }
.stars, .star.on { color: #f5a623; letter-spacing: 1px; } .tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.card-actions { margin-top: auto; padding-top: .5rem; display: flex; flex-wrap: wrap; gap: .3rem; } .card-actions .btn { padding: .25em .6em; font-size: .78rem; min-height: 30px; }
.pm { display: flex; flex-direction: column; gap: .15rem; } .match { font-weight: 700; font-size: .85rem; } .match.g { color: var(--green); } .match.y { color: var(--warn); } .miss { color: var(--muted); }
.empty { text-align: center; padding: 3rem 1rem; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); } .empty.small { padding: 1.5rem; } .empty-art { font-size: 4rem; } .empty-cta { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap; margin: 1.2rem 0; }
.empty-tips { list-style: none; padding: 0; margin: 1.5rem auto 0; max-width: 520px; text-align: start; color: var(--muted); display: grid; gap: .4rem; }
.card-box { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); padding: 1.1rem 1.2rem; margin-bottom: 1.1rem; } .card-box h2 small { font-weight: 400; color: var(--muted); font-size: .8rem; margin-inline-start: .4em; }
.sec { margin: 1.4rem 0 .8rem; }
.ai-actions { margin-top: .8rem; }

/* ---------- recipe page ---------- */
.crumbs { margin-bottom: .6rem; font-size: .9rem; }
/* image dialog: web search results (with "more"), live camera */
.im-search { border: 1px solid var(--line); border-radius: 12px; padding: .6rem; margin: .6rem 0; display: flex; flex-direction: column; gap: .5rem; } .im-search[hidden] { display: none; }
.im-search .inline { display: flex; gap: .4rem; } .im-search .inline input { flex: 1; min-width: 0; } .im-q-chips .chip { font-size: .8rem; }
.im-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .4rem; max-height: 330px; overflow-y: auto; }
.im-hit { padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--surface2); aspect-ratio: 4 / 3; } .im-hit:hover, .im-hit:focus-visible { border-color: var(--brand); }
.im-hit img { width: 100%; height: 100%; object-fit: cover; display: block; } .im-more { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.img-ops .btn.primary { order: -1; }
.cam-wrap video { width: 100%; max-height: 60vh; border-radius: 12px; background: #000; display: block; }
.q-lead { font-size: 1rem; margin: 0 0 .6rem; }
/* the kosher "בשרי" image icon sits inline like an emoji */
.k-icon { width: 1.25em; height: 1.25em; object-fit: contain; vertical-align: -.25em; display: inline-block; }
.q-fish { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .5rem; padding: .45rem .6rem; border-radius: 10px; background: var(--surface2); }
.resume-list { margin: .2rem 0 .6rem; padding-inline-start: 1.2rem; font-size: .82rem; color: var(--muted); } .resume-list li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* video-link recipes: a play badge on the picture, the video on the recipe page */
.video-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; border-radius: 50%; background: rgba(0, 0, 0, .58); color: #fff; display: grid; place-items: center; font-size: 1.45rem; padding-inline-start: .15em; box-shadow: 0 2px 12px rgba(0, 0, 0, .35); border: 2px solid rgba(255, 255, 255, .85); pointer-events: none; }
.grid.as-list .video-badge { width: 36px; height: 36px; font-size: 1rem; }
.hero-img .video-badge { width: 72px; height: 72px; font-size: 2rem; }
.vid-tag { color: #c2185b; font-weight: 600; }
.video-card h2 { margin: 0 0 .6rem; } .video-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.video-frame { position: relative; width: 100%; max-width: 720px; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; }
.video-frame.tall { max-width: 360px; aspect-ratio: 9 / 16; max-height: 75vh; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.recipe-page.vid-bare .tools, .recipe-page.vid-bare .adapters, .recipe-page.vid-bare .cols, .recipe-page.vid-bare .nutrition { display: none; }
.video-toggle { background: color-mix(in srgb, #e91e63 10%, transparent); border-radius: 10px; padding: .5rem .7rem; }
/* view switch: cards / list */
.view-switch { display: inline-flex; border: 1.5px solid var(--line); border-radius: 999px; overflow: hidden; flex: none; }
.view-switch button { font: inherit; font-size: .85rem; border: 0; background: var(--surface); color: var(--ink); padding: .35em .8em; cursor: pointer; min-height: 34px; }
.view-switch button + button { border-inline-start: 1.5px solid var(--line); } .view-switch button.on { background: var(--brand-soft); color: var(--brand-d); font-weight: 700; }
@media (max-width: 600px) { .view-switch span { display: none; } }
/* list view: one row per recipe - a small picture beside the details, the same card content */
.grid.as-list { grid-template-columns: 1fr; gap: .6rem; }
.grid.as-list .card { flex-direction: row; align-items: stretch; border-radius: 14px; }
.grid.as-list .card:hover, .grid.as-list .card:focus-within { transform: none; }
.grid.as-list .card-cover { flex: none; width: 150px; aspect-ratio: auto; min-height: 118px; }
.grid.as-list .card:hover .cover { transform: none; }
.grid.as-list .card-body { padding: .55rem .9rem; gap: .25rem; min-width: 0; }
.grid.as-list .card-body h3 { font-size: 1rem; } .grid.as-list .tags { display: none; }
.grid.as-list .card-actions { padding-top: .3rem; } .grid.as-list .card-actions .btn { font-size: .74rem; min-height: 28px; padding: .15em .55em; }
.grid.as-list .flag { font-size: .66rem; bottom: 5px; inset-inline-start: 5px; max-width: calc(100% - 10px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid.as-list .flag.cat { display: none; }
@media (max-width: 600px) { .grid.as-list .card-cover { width: 96px; min-height: 96px; } .grid.as-list .card-actions { display: none; } .grid.as-list .meta span:nth-child(n+4) { display: none; } }
/* allergens: red, stronger than the ⚠️ of disliked ingredients */
.flag.alg { background: var(--danger, #c62828) !important; color: #fff !important; font-weight: 700; }
.banner.alg { background: color-mix(in srgb, var(--danger, #c62828) 12%, transparent); color: var(--danger, #c62828); border: 1.5px solid var(--danger, #c62828); }
.banner.alg small { color: inherit; opacity: .85; }
.ing.alg .ing-text { color: var(--danger, #c62828); font-weight: 600; } .flag-inline.alg { color: var(--danger, #c62828); font-size: .78rem; font-weight: 700; white-space: nowrap; }
/* library: the kosher filter is its own group, apart from the dish categories */
.chip-group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem; padding-inline-start: .6rem; margin-inline-start: .2rem; border-inline-start: 1px solid var(--line); } .chip-lbl { font-size: .8rem; color: var(--muted); }
/* recipe page: where the recipe came from */
.rsource { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .88rem; color: var(--muted); margin: .2rem 0 .4rem; } .rsource a, .rsource .link { font-size: .88rem; } .rsource a { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
/* import summary: one row per link that was not imported - what happened and what to do */
.sum-links { margin-top: .8rem; border: 1px solid var(--line); border-radius: 12px; padding: .4rem .7rem; } .sum-links > summary { cursor: pointer; font-weight: 600; font-size: .9rem; padding: .2rem 0; }
.sum-links ul { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; max-height: 300px; overflow-y: auto; }
.sum-link { display: flex; align-items: center; gap: .5rem; } .sl-ic { flex: none; font-size: 1.1rem; } .sl-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sl-body a { font-size: .82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; } .sl-body small { color: var(--muted); font-size: .78rem; } .sl-body small b { color: var(--ink); font-weight: 600; }
.sum-link .btn { flex: none; }
/* recipe page: back to the list it came from + previous / next recipe */
.rnav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .8rem; }
.rnav-bottom { margin: 1.4rem 0 .4rem; padding-top: .9rem; border-top: 1px solid var(--line, rgba(0,0,0,.1)); }
.rnav-steps { display: flex; align-items: center; gap: .5rem; flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
.rnav-step { display: inline-flex; align-items: center; gap: .3rem; max-width: 42%; min-width: 0; white-space: nowrap; }
.rnav-step.off { visibility: hidden; flex: 0 1 42%; }
.rnav-lbl { color: var(--muted); font-weight: 400; }
.rnav-lbl::after { content: ':'; }
.rnav-t { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rnav-pos { font-size: .85rem; color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) { .rnav-steps { width: 100%; justify-content: space-between; } .rnav-step { max-width: 44%; } .rnav-lbl { display: none; } }
.hero { display: grid; grid-template-columns: minmax(280px, 42%) 1fr; gap: 1.5rem; background: var(--surface); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; margin-bottom: 1rem; }
.hero-img { position: relative; min-height: 260px; } .hero-cover { position: absolute; inset: 0; height: 100%; } .hero-img .img-btn { position: absolute; bottom: 12px; inset-inline-end: 12px; background: rgba(255, 255, 255, .95); }
.hero-info { padding: 1.4rem 1.4rem 1.4rem 1rem; display: flex; flex-direction: column; gap: .7rem; justify-content: center; } .rtitle { margin: 0; }
.src { font-weight: 500; } .rdesc { color: var(--muted); margin: 0; font-size: 1.02rem; } .rating { display: flex; align-items: center; gap: .1rem; } .star { font-size: 1.7rem; background: none; border: 0; color: var(--line); cursor: pointer; padding: 0 .05em; line-height: 1; } .star:hover { transform: scale(1.15); }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; }
@media (max-width: 760px) { .hero { grid-template-columns: 1fr; } .hero-img { min-height: 0; aspect-ratio: 16/10; } .hero-info { padding: 1rem; } }
.banner { padding: .7em 1em; border-radius: 12px; margin-bottom: .8rem; background: var(--surface2); display: flex; flex-wrap: wrap; gap: .6em; align-items: center; }
.ed-paste { border: 1.5px dashed var(--brand); border-radius: 12px; padding: .5rem .9rem; background: var(--brand-soft); }
.ed-paste > summary { cursor: pointer; font-weight: 700; padding: .2rem 0; }
.ed-paste-body { display: flex; flex-direction: column; gap: .5rem; padding-top: .4rem; }
.ed-paste-body textarea { width: 100%; }
.ed-paste-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; } .banner.warn { background: var(--warn-soft); color: var(--warn); } .banner.kosher { background: var(--brand-soft); }
.tools { display: flex; flex-wrap: wrap; gap: .8rem 1.5rem; align-items: center; background: var(--surface); padding: .8rem 1.1rem; border-radius: var(--r); box-shadow: var(--shadow); margin-bottom: .8rem; }
.tool select { width: auto; min-height: 38px; } .scaler { display: flex; align-items: center; gap: .6rem; } .serv-edit { display: inline-flex; align-items: center; gap: .45rem; flex-wrap: wrap; } .serv-edit label { font-size: .9rem; color: var(--muted); } .serv-edit input { width: 86px; min-height: 36px; text-align: center; } .link.fix { font-weight: 600; } .dish-info em { color: var(--warn); font-style: normal; } .serv-label { font-size: 1.05rem; min-width: 96px; text-align: center; } .serv-label em { font-size: .75rem; color: var(--warn); font-style: normal; }
.step-btn { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--brand); background: var(--surface); color: var(--brand-d); font-size: 1.3rem; cursor: pointer; line-height: 1; font-family: inherit; } .step-btn:hover { background: var(--brand); color: #fff; }
.adapters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; } .adapters .lbl { font-weight: 500; color: var(--muted); } .modinfo { color: var(--green); font-weight: 500; }
.cols { display: grid; grid-template-columns: minmax(280px, 5fr) 7fr; gap: 1.2rem; align-items: start; margin-bottom: 1.1rem; } @media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }
.col { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); padding: 1.1rem 1.2rem; }
.ing-list, .step-list { list-style: none; margin: 0; padding: 0; }
.ing { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; padding: .45rem .5rem; border-radius: 10px; border-bottom: 1px dashed var(--line); } .ing label { display: flex; gap: .6em; align-items: flex-start; cursor: pointer; flex: 1; min-width: 0; }
.ing .q { color: var(--brand-d); } .ing.done .ing-text { text-decoration: line-through; color: var(--muted); } .ing.modded { background: var(--green-soft); border-bottom-color: var(--green-line); } .ing.dis { background: var(--warn-soft); }
.ing-head { font-weight: 700; font-size: .9rem; margin: 1.2rem 0 .3rem; color: var(--brand-d); padding-bottom: .25rem; border-bottom: 2px solid var(--brand); letter-spacing: .01em; list-style: none; text-transform: none; } .conv { color: var(--muted); font-size: .75rem; } .flag-inline { cursor: help; }
.sub-btn { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; cursor: pointer; padding: .05em .4em; font-size: .9rem; } .sub-btn:hover { background: var(--brand-soft); }
.mod-note { flex-basis: 100%; font-size: .82rem; color: var(--green); padding-inline-start: 1.9rem; }
.step { display: flex; gap: .8rem; padding: .75rem .8rem; margin-bottom: .5rem; border-radius: 12px; background: var(--surface2); cursor: pointer; border: 2px solid transparent; transition: background .2s; }
.step .num { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .9rem; } .step-text { flex: 1; font-size: 1.02rem; line-height: 1.7; }
.step.done { background: var(--green-soft); border-color: var(--green-line); } .step.done .step-text { text-decoration: line-through; color: var(--muted); } .step.done .num { background: var(--green); }
.timer-badge { font: inherit; font-size: .88rem; font-weight: 700; border: 1.5px solid var(--brand); background: var(--brand-soft); color: var(--brand-d); border-radius: 99px; padding: .05em .7em; cursor: pointer; margin: 0 .15em; } .timer-badge:hover, .timer-badge.running { background: var(--brand); color: #fff; }
.macros { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; text-align: center; } .macros > div { background: var(--surface2); border-radius: 12px; padding: .7rem .3rem; } .macros b { display: block; font-size: 1.5rem; color: var(--brand-d); } .macros b small { font-size: .7rem; } .macros span { font-size: .8rem; color: var(--muted); }
.variants { margin-top: .8rem; } .more { text-align: center; margin: 1.5rem 0; }
.notes textarea { min-height: 100px; }
.rp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-bottom: 16px; }
.rp-thumb { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 1; cursor: pointer; }
.rp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rp-del { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,.6); color: #fff; border: none; border-radius: 50%; width: 24px; height: 24px; cursor: pointer; font-size: 14px; line-height: 24px; text-align: center; }
.rp-date { position: absolute; bottom: 4px; right: 4px; background: rgba(0,0,0,.5); color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 6px; }
.rp-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.rp-preview { text-align: center; margin-bottom: 16px; }
.rp-preview img { max-width: 100%; max-height: 300px; border-radius: 12px; object-fit: contain; }
.rp-preview-btns { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
.alts { display: flex; flex-wrap: wrap; gap: .5rem; } .alt { font: inherit; text-align: start; border: 1.5px solid var(--line); background: var(--surface); border-radius: 12px; padding: .5em .9em; cursor: pointer; display: grid; gap: 0; } .alt:hover { border-color: var(--green); background: var(--green-soft); } .alt em { font-size: .72rem; color: var(--green); font-style: normal; }
.alt-group h4 { margin-top: .6em; } .ai-more { margin-top: 1rem; padding-top: .8rem; border-top: 1px dashed var(--line); display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.img-prev { aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; margin-bottom: 1rem; background: var(--surface2); } .img-ops { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: .4rem; max-height: 48vh; overflow-y: auto; padding: .1rem 0; }
.gal-item { font: inherit; border: 2px solid transparent; background: var(--surface2); border-radius: 10px; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 0 0 .35rem; text-align: center; transition: border-color .15s; }
.gal-item:hover { border-color: var(--brand); } .gal-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; } .gal-item span { font-size: .68rem; padding: .25em .3em 0; color: var(--muted); line-height: 1.2; }
.gal-head { font-size: .82rem; font-weight: 600; margin: .7rem 0 .3rem; color: var(--muted); } .gal-section + .gal-section { margin-top: .5rem; border-top: 1px solid var(--line); padding-top: .5rem; }
.gal-item-wrap { position: relative; } .gal-item-wrap > .gal-item { width: 100%; }
.gal-item-del { position: absolute; top: 3px; inset-inline-end: 3px; width: 20px; height: 20px; border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff; font-size: .75rem; cursor: pointer; display: none; z-index: 2; padding: 0; align-items: center; justify-content: center; }
.gal-item-wrap:hover .gal-item-del, .gal-item-wrap:focus-within .gal-item-del { display: flex; }
.cat-pick-list { display: grid; gap: .35rem; max-height: 55vh; overflow-y: auto; } .cat-pick-item { font: inherit; text-align: start; background: var(--surface2); border: 1.5px solid transparent; padding: .5em .8em; border-radius: 10px; cursor: pointer; display: flex; align-items: center; gap: .5em; } .cat-pick-item.on { border-color: var(--brand); background: var(--green-soft); } .cat-pick-item small { color: var(--muted); margin-inline-start: auto; }

/* timers tray */
#timer-tray { position: fixed; bottom: 12px; inset-inline-start: 12px; z-index: 90; display: flex; flex-direction: column; gap: .4rem; max-width: calc(100vw - 24px); }
@media (max-width: 860px) { #timer-tray { bottom: 74px; } }
.timer { display: flex; align-items: center; gap: .6rem; background: var(--ink); color: var(--bg); padding: .4rem .5rem .4rem .9rem; border-radius: 99px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; }
.timer::before { content: ''; position: absolute; inset: 0; width: var(--p); background: color-mix(in srgb, var(--brand) 55%, transparent); z-index: 0; transition: width 1s linear; } .timer > * { position: relative; z-index: 1; }
.timer .icon-btn { color: inherit; } .t-clock { font-variant-numeric: tabular-nums; font-size: 1.15rem; } .timer.done { background: var(--danger); color: #fff; animation: pulse 1s infinite; } @keyframes pulse { 50% { transform: scale(1.04); } }
#toast-root { position: fixed; top: calc(var(--header-h, 64px) + 10px); inset-inline: 0; display: grid; justify-items: center; gap: .4rem; z-index: 300; pointer-events: none; padding: 0 1rem; }
.toast { background: var(--ink); color: var(--bg); padding: .6em 1.2em; border-radius: 99px; box-shadow: var(--shadow-lg); animation: tin .25s; max-width: 92vw; font-size: .95rem; } .toast.err { background: var(--danger); color: #fff; } .toast.ok { background: var(--green); color: #fff; } .toast.out { opacity: 0; transition: opacity .3s; } @keyframes tin { from { transform: translateY(-10px); opacity: 0; } }
.toast-resume { pointer-events: all; background: var(--surface2); color: var(--fg); border: 2px solid var(--brand); border-radius: 12px; padding: .75em 1.1em; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .92rem; box-shadow: var(--shadow-lg); }

/* ---------- modals ---------- */
.modal-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(30, 15, 5, .55); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 1rem; animation: fin .15s; } @keyframes fin { from { opacity: 0; } }
.modal { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-lg); width: 100%; max-width: 560px; max-height: calc(100vh - 2rem); display: flex; flex-direction: column; animation: pop .2s; }
@keyframes pop { from { transform: translateY(14px) scale(.98); opacity: 0; } }
.modal.sm { max-width: 420px; } .modal.md { max-width: 620px; } .modal.lg { max-width: 820px; } .modal.xl { max-width: 980px; } .modal.auth { max-width: 440px; }
.modal > header { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.2rem .3rem; } .modal > header h2 { margin: 0; font-size: 1.2rem; }
.modal-head-btns { display: flex; align-items: center; gap: .3rem; flex-shrink: 0; } /* minimize + close sit together as one group, never split apart by justify-content: space-between */
.modal-body { padding: .6rem 1.2rem 1rem; overflow-y: auto; flex: 1; } .modal > footer { display: flex; gap: .5rem; justify-content: flex-end; align-items: center; padding: .8rem 1.2rem; border-top: 1px solid var(--line); flex-wrap: wrap; }
.locked .modal > header .icon-btn { display: none; }
@media (max-width: 600px) { .modal-backdrop { padding: 0; align-items: end; } .modal { max-height: 94vh; border-radius: 20px 20px 0 0; max-width: 100% !important; } }
.confirm-msg { font-size: 1.05rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; } .form-grid .span2 { grid-column: 1 / -1; } @media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
.tag-add { display: flex; gap: .4rem; margin-top: .4rem; } .tag-add input { max-width: 240px; }
.cat-pick { display: flex; flex-wrap: wrap; gap: .5rem; }
.pick-list { display: grid; gap: .4rem; max-height: 55vh; overflow: auto; margin-top: .6rem; } .pick { font: inherit; text-align: start; background: var(--surface2); border: 1.5px solid transparent; padding: .6em .9em; border-radius: 10px; cursor: pointer; } .pick:hover { border-color: var(--brand); } .pick small { color: var(--muted); }
.gen-list { display: grid; gap: .5rem; margin: .8rem 0; } .gen-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--surface2); padding: .5rem .8rem; border-radius: 10px; } .gen-row input { width: 76px; min-height: 36px; display: inline-block; } .radio-row { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.steps-help { padding-inline-start: 1.2rem; color: var(--muted); font-size: .92rem; } code { background: var(--surface2); padding: .1em .4em; border-radius: 6px; font-size: .85em; }

/* auth */
.auth-backdrop { background: radial-gradient(circle at 15% 10%, #FFD9C7, transparent 45%), radial-gradient(circle at 90% 90%, #CFF3EF, transparent 45%), #FAFAFA; } @media (prefers-color-scheme: dark) { .auth-backdrop { background: radial-gradient(circle at 15% 10%, #4a2415, transparent 45%), radial-gradient(circle at 90% 90%, #0f3733, transparent 45%), #151210; } }
.auth-backdrop .modal > header { display: none; } .auth-brand { text-align: center; margin-bottom: 1rem; padding-top: .9rem; } .auth-brand .logo-svg { margin: .3rem auto .2rem; display: block; filter: drop-shadow(0 8px 16px rgba(255, 107, 53, .35)); } .auth-brand h1 { margin: .1em 0; font-size: 2.3rem; } .auth-brand p { color: var(--muted); } .auth-logo-img { width: min(320px, 88%); height: auto; display: block; margin: .4rem auto 0; border-radius: 8px; }
.auth-social { display: grid; gap: .6rem; } .btn.social { width: 100%; min-height: 46px; font-weight: 500; } .btn.social.facebook { background: #1877f2; color: #fff; border-color: #1877f2; } .gicon { font-weight: 800; background: #fff; color: #4285f4; width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .85rem; } .facebook .gicon { color: #1877f2; }
.g-slot { display: grid; justify-items: center; min-height: 46px; } .divider { display: flex; align-items: center; gap: .8rem; color: var(--muted); font-size: .85rem; margin: 1rem 0; } .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-tabs { margin-bottom: 1rem; } .auth-tabs > * { flex: 1; }

/* import */
.imp-tabs { display: flex; gap: 4px; margin-bottom: .9rem; border-bottom: 2px solid var(--line); padding-bottom: 0; } .imp-tab { background: none; border: none; padding: .45rem .85rem; font-size: .9rem; border-radius: 8px 8px 0 0; cursor: pointer; color: var(--muted); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; } .imp-tab:hover { color: var(--fg); background: var(--surface2); } .imp-tab.active { color: var(--brand-d); border-bottom-color: var(--brand); background: var(--surface2); } .imp-panel { } .field-hint { font-size: .8rem; color: var(--muted); margin: .2rem 0 0; }
.dropzone { border: 2.5px dashed var(--line); border-radius: 16px; padding: 1.6rem 1rem; text-align: center; cursor: pointer; display: grid; gap: .2rem; background: var(--surface2); transition: .15s; } .dropzone:hover, .dropzone.over { border-color: var(--brand); background: var(--brand-soft); } .dz-icon { font-size: 2.2rem; } .dropzone span { color: var(--muted); font-size: .9rem; }
.imp-img-mode { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; padding: .6rem .2rem .2rem; font-size: .9rem; } .imp-img-mode label { display: flex; align-items: center; gap: .4rem; cursor: pointer; color: var(--fg); } .imp-img-mode input[type=radio] { accent-color: var(--brand); }
.rv-toolbar { display: flex; align-items: center; gap: .6rem; padding: .4rem 0 .8rem; } .rv-toolbar #rv-count-top { font-size: .85rem; color: var(--muted); margin-inline-start: auto; }
.rv-list { display: grid; gap: .7rem; } .rv-row { display: grid; grid-template-columns: auto 78px 1fr 150px; gap: .8rem; align-items: start; padding: .7rem; border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); } .rv-row.dup, .rv-row.dis { opacity: .7; }
.rv-img { width: 78px; height: 78px; border-radius: 12px; object-fit: cover; display: grid; place-items: center; font-size: 1.8rem; } .rv-img.ph { background: linear-gradient(135deg, hsl(var(--h) 92% 88%), hsl(calc(var(--h) + 14) 90% 74%)); }
.rv-title { font-weight: 700; margin-bottom: .2rem; } .rv-meta { display: flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .82rem; color: var(--muted); } .rv-warn { font-size: .82rem; color: var(--warn); margin-top: .2rem; }
.rv-prev { font-size: .88rem; max-height: 220px; overflow: auto; padding-top: .4rem; } .rv-prev ul, .rv-prev ol { margin: .2rem 0 .6rem; padding-inline-start: 1.2rem; } details summary { cursor: pointer; color: var(--brand-d); font-size: .85rem; margin-top: .3rem; }
@media (max-width: 700px) { .rv-row { grid-template-columns: auto 60px 1fr; } .rv-cat { grid-column: 2 / -1; } .rv-img { width: 60px; height: 60px; } }

/* shopping */
.progress { position: relative; height: 26px; background: var(--surface2); border-radius: 99px; overflow: hidden; margin-bottom: 1rem; } .progress i { position: absolute; inset: 0 0 0 auto; background: var(--green-soft); border-inline-start: 0; height: 100%; display: block; transition: width .3s; background: color-mix(in srgb, var(--green) 35%, transparent); inset-inline-start: 0; inset-inline-end: auto; } .progress span { position: relative; display: block; text-align: center; font-size: .82rem; line-height: 26px; }
.aisles { columns: 2 320px; column-gap: 1.2rem; } .aisle { break-inside: avoid; background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); padding: .8rem 1rem; margin-bottom: 1rem; } .aisle h3 em { font-style: normal; font-size: .75rem; background: var(--surface2); padding: 0 .5em; border-radius: 99px; color: var(--muted); }
.aisle ul { list-style: none; margin: 0; padding: 0; } .aisle li { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; border-bottom: 1px dashed var(--line); } .aisle li label { display: flex; gap: .6em; align-items: center; flex: 1; cursor: pointer; } .aisle li.done span { text-decoration: line-through; color: var(--muted); } .from { color: var(--muted); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foot-actions { display: flex; gap: .5rem; margin-top: 1rem; }

/* planner */
.planner { display: grid; grid-template-columns: 220px 1fr; gap: 1rem; align-items: start; } @media (max-width: 1000px) { .planner { grid-template-columns: 1fr; } .plan-side { display: none; } }
.plan-side { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); padding: .8rem; position: sticky; top: 74px; max-height: calc(100vh - 100px); overflow: auto; } .plan-item { padding: .45rem .6rem; border-radius: 10px; background: var(--surface2); margin-top: .4rem; cursor: grab; display: flex; gap: .5rem; align-items: center; font-size: .92rem; } .plan-item:active { cursor: grabbing; } .dot { width: 10px; height: 10px; border-radius: 50%; background: hsl(var(--h) 65% 55%); flex: none; }
.pgrid { display: grid; grid-template-columns: 70px repeat(7, minmax(110px, 1fr)); gap: 6px; overflow-x: auto; } .phead { text-align: center; padding: .5rem; background: var(--surface); border-radius: 10px; display: grid; } .phead.today { background: var(--brand); color: #fff; } .phead span { font-size: .78rem; opacity: .8; } .prow { display: grid; place-items: center; font-size: .82rem; text-align: center; color: var(--muted); }
.pcell { min-height: 92px; background: var(--surface); border-radius: 10px; padding: 5px; display: flex; flex-direction: column; gap: 4px; border: 2px dashed transparent; } .pcell.over { border-color: var(--brand); background: var(--brand-soft); }
.pchip { display: flex; align-items: center; justify-content: space-between; gap: 2px; background: var(--brand-soft); border-radius: 8px; padding: 3px 4px 3px 6px; font-size: .82rem; } .pchip a { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.padd { margin-top: auto; border: 1.5px dashed var(--line); background: transparent; border-radius: 8px; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1.2; } .padd:hover { border-color: var(--brand); color: var(--brand); } .range { min-width: 190px; text-align: center; }

/* pantry / party / onboarding / settings */
.pantry .chip { font-size: .95rem; } .moods .chip { font-size: 1rem; padding: .45em 1em; }
.cnts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem; } .cnt { display: flex; justify-content: space-between; align-items: center; background: var(--surface2); border-radius: 12px; padding: .5rem .8rem; } .stepper { display: flex; align-items: center; gap: .6rem; } .stepper b { min-width: 1.5em; text-align: center; font-size: 1.1rem; }
.party-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.2rem; align-items: start; } @media (max-width: 960px) { .party-grid { grid-template-columns: 1fr; } }
.course { background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow); padding: 1rem 1.1rem; margin-bottom: 1rem; } .course h3 small { font-weight: 400; color: var(--muted); }
.dish { display: flex; gap: .8rem; align-items: center; padding: .5rem 0; border-bottom: 1px dashed var(--line); } .dish-img { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; flex: none; } .dish-info { flex: 1; display: grid; } .dish-actions { display: flex; }
.phase h4 { color: var(--brand-d); margin-top: 1rem; } .cl { display: flex; gap: .6em; align-items: flex-start; padding: .3rem 0; cursor: pointer; } .cl.done span { text-decoration: line-through; color: var(--muted); } .cl em { font-style: normal; font-size: .78rem; color: var(--muted); margin-inline-start: auto; white-space: nowrap; }
.mini-list { margin: .2rem 0 .6rem; padding-inline-start: 1.2rem; font-size: .92rem; }
.q-steps { display: flex; gap: .4rem; margin-bottom: 1rem; font-size: .78rem; color: var(--muted); } .q-steps span { flex: 1; text-align: center; padding-bottom: .5rem; border-bottom: 3px solid var(--line); display: grid; justify-items: center; gap: .1rem; } .q-steps i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; background: var(--line); display: grid; place-items: center; color: var(--ink); font-weight: 700; } .q-steps .on { color: var(--brand-d); border-color: var(--brand); font-weight: 700; } .q-steps .on i, .q-steps .done i { background: var(--brand); color: #fff; } .q-steps .done { border-color: var(--brand); }
.q-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .stepper.big { flex-direction: column; background: var(--surface2); border-radius: 16px; padding: 1rem; } .stepper.big > div { display: flex; align-items: center; gap: 1rem; } .stepper.big b { font-size: 2rem; } .q-out { text-align: center; margin-top: 1rem; font-size: 1.05rem; } .q-out b { color: var(--brand-d); font-size: 1.4rem; }
.opt-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; } .opt { font: inherit; background: var(--surface2); border: 2px solid transparent; border-radius: 16px; padding: 1rem; cursor: pointer; display: grid; gap: .2rem; justify-items: center; text-align: center; color: var(--ink); } .opt i { font-style: normal; font-size: 2.2rem; } .opt.on { border-color: var(--brand); background: var(--brand-soft); }
.radio-col { display: grid; gap: .4rem; } .radio { display: flex; gap: .6em; align-items: center; padding: .55rem .8rem; background: var(--surface2); border-radius: 10px; cursor: pointer; }
.set-grid { display: grid; gap: 1.2rem; } .set-grid section { padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); } .set-grid section:last-child { border: 0; } .btn-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; } .danger-zone h3 { color: var(--danger); }

/* ---------- print: clean recipe printout ---------- */
@media print {
  @page { margin: 1.5cm; }
  body { background: #fff !important; color: #000 !important; font-size: 12pt; }
  .no-print, .topbar, .bottomnav, #toast-root, #timer-tray, .modal-backdrop, .crumbs, .sub-btn { display: none !important; }
  .view { padding: 0 !important; max-width: none; }
  .hero { display: block !important; box-shadow: none !important; border-radius: 0 !important; margin-bottom: .5cm; background: none !important; }
  .hero-img { display: none !important; } .hero-info { padding: 0 !important; }
  .card-box, .col, .tools, .aisle, .course { box-shadow: none !important; border: 0 !important; background: none !important; padding: 0 !important; }
  .cols { display: block !important; } .col { margin-bottom: .6cm; break-inside: avoid; }
  .ing, .step { background: none !important; border-color: #ccc !important; break-inside: avoid; } .ing input, .step .num { display: none !important; } .ing::before { content: '☐'; margin-inline-end: .4em; }
  .step { counter-increment: st; } .step::before { content: counter(st) '.'; font-weight: 700; margin-inline-end: .5em; } .step-list { counter-reset: st; }
  .ing.done .ing-text, .step.done .step-text { text-decoration: none !important; color: #000 !important; }
  .rtitle { font-size: 22pt; } .src::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; } a { color: #000 !important; }
  .aisles { columns: 2; } .aisle li label input { display: none; } .aisle li::before { content: '☐'; }
  .macros > div { background: none !important; border: 1px solid #ccc; } .banner { display: none !important; }
  .timer-badge { border: 0 !important; background: none !important; color: #000 !important; padding: 0 !important; font-weight: 400 !important; }
  .party-grid { display: block !important; } textarea { border: 1px solid #ccc !important; }
}

/* ---- bulk selection, duplicates, social links, AI-title flag, image credit, failed links ---- */
.selbar.hidden { display: none; } .selbar.sticky { flex-wrap: wrap; box-shadow: var(--shadow); }
.selbar .btn { white-space: nowrap; } .card-sel input { width: 18px; height: 18px; cursor: pointer; accent-color: var(--brand); } .card.sel { outline: 3px solid var(--brand); }
.flag.ai { background: #7c4dff; } .flag.ok { background: var(--green); }
.dev-fl code { font-size: .78rem; word-break: break-all; color: var(--brand); } .dev-fl details { margin-bottom: .5rem; } .dev-fl summary { cursor: pointer; padding: .3em 0; font-size: .9rem; }
/* ── Dev Panel ────────────────────────────────────────────────────────── */
.dev-panel { border: 1.5px dashed var(--brand); background: var(--surface2); border-radius: 12px; }
.dev-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dev-toggle-wrap { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.dev-toggle-label { font-size: .82rem; color: var(--muted); white-space: nowrap; }
.dev-toggle { position: relative; display: inline-block; width: 2.6rem; height: 1.4rem; flex-shrink: 0; } .dev-toggle input { opacity: 0; width: 0; height: 0; position: absolute; } .dev-thumb { position: absolute; inset: 0; background: var(--border); border-radius: 99px; transition: background .2s; } .dev-thumb::after { content: ''; position: absolute; top: .15rem; inset-inline-start: .15rem; width: 1.1rem; height: 1.1rem; background: #fff; border-radius: 50%; transition: transform .2s; } .dev-toggle.on .dev-thumb { background: var(--brand); } .dev-toggle.on .dev-thumb::after { transform: translateX(1.2rem); }
.dev-tools { margin-top: .8rem; }
.dev-tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .4rem; }
.dev-btn { background: var(--surface); border: 1.5px solid var(--border); font-size: .8rem; text-align: start; justify-content: flex-start; }
.dev-output { margin-top: .6rem; padding: .6rem .8rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; font-size: .82rem; line-height: 1.6; }
.dev-table { width: 100%; border-collapse: collapse; font-size: .82rem; } .dev-table td { padding: .25em .4em; } .dev-table tr:not(:last-child) td { border-bottom: 1px solid var(--border); } .dev-table td:last-child { text-align: start; font-weight: 600; }
.rv-cats { display: block; color: var(--muted); font-size: .75rem; }
.chip .x { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: .8rem; padding: 0 .2em; }
.dup-list, .soc-list, .fl-list { display: grid; gap: .9rem; max-height: 60vh; overflow: auto; padding: 0; margin: .6rem 0; list-style: none; }
.dup-group { border: 1px solid var(--line); border-radius: 12px; padding: .6rem .8rem; background: var(--surface); } .dup-head { font-weight: 700; margin-bottom: .4rem; color: var(--brand-d); }
.dup-opt { display: block; padding: .45rem .6rem; border-radius: 10px; cursor: pointer; border: 1px solid transparent; } .dup-opt.on { background: var(--brand-soft); border-color: var(--brand); } .dup-opt input { margin-inline-end: .4rem; } .dup-opt small { color: var(--muted); font-size: .78em; }
.dup-tag { font-size: .72rem; padding: .1em .55em; border-radius: 99px; background: var(--accent, #2EC4B6); color: #fff; } .dup-tag.new { background: var(--brand); }
.dup-compare { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: .6rem; margin: .35rem 0; } @media (max-width: 640px) { .dup-compare { grid-template-columns: 1fr; } }
.dup-side { padding: .5rem .65rem; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); display: flex; flex-direction: column; gap: .25rem; transition: opacity .2s, border-color .2s; }
.dup-side.dup-lib { border-color: var(--brand); } .dup-side.dup-new { border-color: var(--ok, #22c55e); }
.dup-modal .dup-list { max-height: 68vh; } .dc-cover { position: relative; height: 130px; margin: -.5rem -.65rem .3rem; border-radius: 8px 8px 0 0; overflow: hidden; background: var(--line); } .dc-cover .cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.dc-open { font-weight: 400; margin-inline-start: .3rem; } .dup-side .rsource { font-size: .76rem; margin: .1rem 0; overflow-wrap: anywhere; }
.dc-sec { font-size: .82rem; margin-top: .25rem; } .dc-list { margin: .2rem 0 0; padding-inline-start: 1.2rem; max-height: 210px; overflow: auto; line-height: 1.45; } .dc-list li { margin: .1rem 0; } .dc-list .dc-h { list-style: none; font-weight: 700; margin-inline-start: -1rem; color: var(--brand-d); }
.dc-only, .dc-only-key { background: #fff3c4; color: #7a5200; border-radius: 4px; padding: 0 .2em; font-weight: 600; } .dc-btns { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: auto; padding-top: .4rem; } .dc-btns .btn { font-size: .75rem; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dc-only, :root:not([data-theme="light"]) .dc-only-key { background: #4a3a10; color: #ffe08a; } }
:root[data-theme="dark"] .dc-only, :root[data-theme="dark"] .dc-only-key { background: #4a3a10; color: #ffe08a; }
.dup-badge { font-size: .7rem; font-weight: 700; margin-bottom: .05rem; opacity: .85; } .dup-side.dup-lib .dup-badge { color: var(--brand); } .dup-side.dup-new .dup-badge { color: var(--ok, #16a34a); }
.dup-title-line { font-weight: 600; font-size: .92rem; } .dup-meta-line { font-size: .76rem; color: var(--muted); }
.dup-actions { display: flex; gap: .38rem; margin-top: .55rem; flex-wrap: wrap; }
.dup-chosen-note { font-size: .75rem; color: var(--muted); margin-top: .2rem; min-height: 1em; }
.dup-group.dup-resolved { opacity: .5; transition: opacity .3s; } .dup-group.dup-resolved .dup-chosen-note { color: var(--ok, #16a34a); font-weight: 600; }
.sum-grid { display: grid; gap: .42rem; margin: .4rem 0 .7rem; }
.sum-row { display: grid; grid-template-columns: 1.7rem 1fr auto; align-items: center; gap: .5rem; padding: .42rem .65rem; border-radius: 8px; background: var(--surface); }
.sum-row.ok { background: var(--ok-soft, #f0fdf4); } .sum-row.warn { background: var(--warn-soft, #fefce8); }
.sum-icon { text-align: center; font-size: 1rem; line-height: 1; } .sum-label { font-size: .87rem; } .sum-val { font-weight: 700; font-size: 1.05rem; min-width: 2rem; text-align: end; }
.sum-retry { margin-top: .55rem; }
.soc-row { border: 1px solid var(--line); border-radius: 12px; padding: .7rem .8rem; display: grid; gap: .5rem; } .soc-row textarea { width: 100%; } .soc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.fl-row { border-bottom: 1px solid var(--line); padding-bottom: .4rem; } .fl-row a { word-break: break-all; }
.img-credit { margin-top: .3rem; color: var(--muted); }

/* ---- POTLUCK BOARD ---- */
.hh-list { display: flex; flex-wrap: wrap; gap: .5rem; padding: .2rem 0; }
.hh-chip { display: inline-flex; align-items: center; gap: .35rem; background: var(--surface); border: 1px solid var(--line); border-radius: 99px; padding: .3rem .75rem; font-size: .88rem; }
.hh-chip .icon-btn.xs { font-size: .72rem; width: 1.1rem; height: 1.1rem; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
.pl-summary { background: var(--surface); border-radius: 10px; padding: .7rem .9rem; margin-top: .5rem; display: grid; gap: .25rem; }
.pl-title-row { font-size: 1.05rem; font-weight: 700; }
.pl-guests { font-size: .9rem; }
.task-group { margin-bottom: 1rem; }
.task-group h4 { font-size: .88rem; color: var(--muted); margin: 0 0 .4rem; font-weight: 600; }
.task-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; padding: .5rem .7rem; border-radius: 8px; background: var(--surface); margin-bottom: .35rem; border: 1px solid var(--line); }
.task-row.claimed { border-color: var(--ok, #22c55e); background: var(--ok-soft, #f0fdf4); }
.task-row-guest { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; padding: .5rem .7rem; border-radius: 8px; background: var(--surface); margin-bottom: .35rem; border: 1px solid var(--line); }
.task-row-guest.claimed { border-color: var(--ok, #22c55e); background: var(--ok-soft, #f0fdf4); }
.task-main { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.task-lbl { font-weight: 600; font-size: .92rem; }
.task-acts { display: flex; gap: .35rem; align-items: center; flex-shrink: 0; }
.task-badge { display: inline-flex; align-items: center; font-size: .75rem; padding: .15rem .55rem; border-radius: 99px; font-weight: 600; white-space: nowrap; }
.claimed-badge { background: #d1fae5; color: #065f46; }
.free-badge { background: var(--surface2, #f1f5f9); color: var(--muted); }
.share-row { display: flex; gap: .5rem; align-items: center; margin-top: .5rem; }
.share-input { flex: 1; font-family: monospace; font-size: .78rem; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.stepper-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.stepper { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .55rem .8rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.stepper span { font-size: .88rem; flex: 1; }
.stepper div { display: flex; align-items: center; gap: .5rem; }
.stepper b { min-width: 1.8rem; text-align: center; font-size: 1.05rem; }
.step-btn { border: 1px solid var(--line); border-radius: 99px; width: 1.8rem; height: 1.8rem; background: var(--bg); cursor: pointer; font-size: 1rem; font-weight: 700; color: var(--text); display: flex; align-items: center; justify-content: center; }
.step-btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
@media (max-width: 540px) { .stepper-grid { grid-template-columns: 1fr; } }

/* ---- GUEST BOARD ---- */
.guest-board { min-height: 100dvh; background: var(--bg); font-family: inherit; direction: rtl; }
.guest-header { background: var(--brand); color: #fff; padding: 1.2rem 1rem .9rem; text-align: center; }
.guest-brand { display: flex; align-items: center; justify-content: center; gap: .4rem; font-weight: 700; font-size: 1rem; margin-bottom: .5rem; }
.guest-header h1 { margin: 0 0 .2rem; font-size: 1.35rem; }
.guest-sub { margin: 0; opacity: .88; font-size: .88rem; }
.guest-body { max-width: 680px; margin: 0 auto; padding: .9rem .8rem 2rem; display: grid; gap: .9rem; }
.gb-hh-section { border: 2px solid var(--brand-soft, #e8d5ff); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.chip.gb-hh-chip { border: 1.5px solid var(--line); border-radius: 99px; padding: .35rem .9rem; font-size: .88rem; background: var(--surface); cursor: pointer; transition: background .15s, border-color .15s; }
.chip.gb-hh-chip.on, .chip.gb-hh-chip:focus { background: var(--brand-soft); border-color: var(--brand); outline: none; }
.gb-selected-hh { display: flex; align-items: center; gap: .5rem; background: var(--ok-soft, #f0fdf4); border: 1px solid var(--ok, #22c55e); border-radius: 8px; padding: .45rem .7rem; font-size: .88rem; margin-top: .5rem; }
.gb-selected-hh.hidden { display: none; }
.gb-my-claims { border-color: var(--ok, #22c55e); }
#gb-my-wrap.hidden { display: none; }
.claim-item { padding: .35rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.claim-item:last-child { border-bottom: 0; }
.guest-cta { background: linear-gradient(135deg, var(--brand-soft) 0%, var(--surface) 100%); border: 1px solid var(--brand-soft); text-align: center; }
.suggestion-panel { padding: .2rem .7rem .5rem; }
.suggestion-box { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .8rem; font-size: .88rem; }
.suggestion-ings { color: var(--muted); font-size: .8rem; margin-top: .3rem; }
.btn.whatsapp { background: #25d366; color: #fff; border-color: #25d366; }
.btn.whatsapp:hover { background: #1fbd5b; border-color: #1fbd5b; }
.tag-add { display: flex; gap: .4rem; align-items: center; }
.tag-add input { flex: 1; }
.link { background: none; border: 0; color: var(--brand); cursor: pointer; text-decoration: underline; font-size: inherit; padding: 0; }

/* ---- HOSTING WIZARD ---- */
.wiz-role-card { border: 2px solid var(--brand-soft, #e8d5ff); }
.role-chips { display: flex; gap: .7rem; flex-wrap: wrap; }
.role-chip { flex: 1; min-width: 150px; padding: .75rem 1rem; border: 2px solid var(--line); border-radius: 12px; background: var(--surface); font-size: .97rem; font-weight: 600; cursor: pointer; text-align: center; transition: border-color .15s, background .15s, color .15s; }
.role-chip.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); }
.role-chip:hover:not(.on) { border-color: var(--brand); }
.wiz-step { border-right: 3px solid var(--brand-soft, #e8d5ff); }
.wiz-step-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; }
.wiz-step-head h2 { margin: 0; }
.wiz-num { display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--brand); color: #fff; font-size: .82rem; font-weight: 700; flex-shrink: 0; }
.wiz-expand { border-top: 2px dashed var(--line); }
.cook-mode-chips { display: flex; gap: .6rem; flex-direction: column; }
.cook-chip { padding: .7rem 1rem; border: 2px solid var(--line); border-radius: 10px; background: var(--surface); font-size: .92rem; font-weight: 600; cursor: pointer; text-align: start; transition: border-color .15s, background .15s; }
.cook-chip.on { border-color: var(--brand); background: var(--brand-soft); }
.cook-chip:hover:not(.on) { border-color: var(--brand); }
.wiz-guest-total { font-size: .87rem; }

/* ---- Guest accordion steps ---- */
.acc-step { transition: box-shadow .15s; }
.acc-head { display:flex; align-items:center; gap:.55rem; width:100%; background:none; border:none; cursor:pointer; padding:0; font:inherit; color:inherit; text-align:right; }
.acc-head:disabled { cursor:default; opacity:.55; }
.acc-step-title { font-size:1.01em; font-weight:600; flex:1; }
.acc-summary { font-size:.82em; color:var(--muted); font-weight:400; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acc-chevron { color:var(--muted); font-size:.92em; flex-shrink:0; }
.acc-body { margin-top:.75em; }
.acc-nav { display:flex; gap:.5rem; justify-content:flex-end; margin-top:.9em; }
.wiz-num.wiz-done { background:var(--ok,#2c7a2c); }
/* Inline step-4 sub-sections */
.g-inline-sub { margin-top:.85em; border-top:1px solid var(--line,#e5e5e5); padding-top:.75em; }
.g-inline-sub-head { display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none; }
.g-inline-sub-head h3 { margin:0; font-size:.97em; }
.g-shop-list { margin-top:.5em; columns:2; column-gap:1em; font-size:.87em; list-style:none; padding:0; margin-bottom:0; }
.g-shop-list li { break-inside:avoid; padding:.15em 0; }
.g-shop-list li b { margin-inline-end:.2em; }

/* ---- Unified Dashboard ---- */
.ud-courses { display: flex; flex-direction: column; gap: .25rem; }
.ud-course-row { display: flex; align-items: center; gap: .7rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
.ud-course-row:last-child { border-bottom: none; }
.ud-course-label { flex: 1; font-weight: 500; font-size: .94rem; }
.ud-suggest-btn { white-space: nowrap; flex-shrink: 0; }
.stepper.mini { gap: .4rem; background: none; border: none; padding: 0; }
.stepper.mini b { min-width: 1.4em; font-size: 1rem; }
.party-side-full { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
@media (max-width: 700px) { .party-side-full { grid-template-columns: 1fr; } }
.party-menu { margin-top: .5rem; }

/* ---- Party: approval bar + two-column approved layout ---- */
.menu-approval-bar { margin-top: 1.2rem; background: var(--brand-soft); border: 2px solid var(--brand); border-radius: 14px; padding: 1rem 1.2rem; text-align: center; }
.menu-approval-bar p { margin: 0 0 .7em; color: var(--ink); font-size: .93rem; }
/* the confirm button's label is a full sentence ("✅ אני מאשר/ת את התפריט — צור רשימות") - .btn defaults to white-space:nowrap,
   which on a narrow phone forces the button wider than this centered bar and pushes the whole page into horizontal overflow
   (the bar - and everything else on the page - then renders visibly shifted off-center). Letting it wrap keeps it inside the bar. */
.menu-approval-bar .btn { max-width: 100%; white-space: normal; }
.party-side-layout { display: flex; flex-direction: row; gap: 1.2rem; align-items: start; margin-top: .5rem; }
.party-menu-col { flex: 3; min-width: 0; }
.party-side-col { flex: 2; min-width: 0; }
@media (max-width: 900px) { .party-side-layout { flex-direction: column; } .party-side-col, .party-menu-col { flex: none; width: 100%; } }

/* ---- Party: menu source row ---- */
.menu-src-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.menu-src-row .fine { color: var(--muted); font-size: .82rem; }
.menu-src-row .radio { display: flex; align-items: center; gap: .3rem; font-size: .88rem; cursor: pointer; }

/* ---- Guests table ---- */
.guests-table-wrap { overflow-x: auto; margin-top: .5rem; }
.guests-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.guests-table th, .guests-table td { padding: .4rem .6rem; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.guests-table thead th { font-weight: 600; background: var(--surface2); }
.guests-table tfoot td { font-weight: 600; background: var(--surface); border-top: 2px solid var(--line); }
.guest-name-cell { display: flex; align-items: center; gap: .4rem; }
.stepper.micro { display: flex; align-items: center; gap: .3rem; background: none; border: none; padding: 0; min-width: 4.5rem; }
.stepper.micro span { min-width: 1.4em; text-align: center; font-size: .9rem; font-weight: 600; }
.stepper.micro button { border: 1px solid var(--line); border-radius: 99px; width: 1.4rem; height: 1.4rem; background: var(--bg); cursor: pointer; font-size: .9rem; font-weight: 700; color: var(--text); display: flex; align-items: center; justify-content: center; line-height: 1; }
.assign-cell { min-width: 16rem; }
.assign-list { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .35rem; }
.assign-row { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.assign-cat { font: inherit; font-size: .82rem; padding: .2rem .4rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); max-width: 8rem; }
.assign-dish { font: inherit; font-size: .82rem; padding: .2rem .5rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); max-width: 8rem; }
.assign-note { font: inherit; font-size: .78rem; padding: .2rem .4rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--muted); max-width: 7rem; }
.assign-guest-choice { font-size: .8rem; color: var(--muted); font-style: italic; flex: 1; }

/* ---- shopping list: title field, merged badge, free-text section, from-recipe tag, manual merge (checkbox select + drag/drop) ---- */
.merged-n { color: var(--brand-d); font-weight: 700; } .aisle.manual h3 { color: var(--brand-d); } .toolbar .field.grow { flex: 1; margin: 0; }
.from-tag { display: block; font-size: .72rem; color: var(--muted); }
.aisle li[data-drag-shop] { cursor: grab; } .aisle li.drop-target { outline: 2px dashed var(--brand); outline-offset: 2px; border-radius: 8px; background: var(--brand-soft); }
.sel-chk { margin-inline-start: .3rem; }
.pool-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } .pool-row .field { margin: 0; } @media (max-width: 480px) { .pool-row { grid-template-columns: 1fr; } }
/* ---------- voice cooking mode (js/voicecook.js) ---------- */
.voice-cta { display: inline-flex; align-items: center; gap: .4rem; font-size: 1.05rem; padding: .7rem 1.2rem; margin: .5rem 0 .2rem; border-radius: 999px; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }
.voice-mini { font-size: .8rem; vertical-align: middle; margin-inline-start: .4rem; }
body.vc-open { overflow: hidden; }
.vc { position: fixed; inset: 0; z-index: 3000; background: var(--bg); color: var(--ink, inherit); display: grid; grid-template-rows: auto auto auto 1fr auto auto auto; padding: max(12px, env(safe-area-inset-top)) 16px max(14px, env(safe-area-inset-bottom)); }
.vc-top { display: flex; align-items: center; gap: .5rem; }
.vc-title { flex: 1; font-weight: 700; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.vc-x, .vc-tgl { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); font-size: 1.3rem; cursor: pointer; color: inherit; flex: none; }
.vc-prog { height: 6px; border-radius: 99px; background: var(--line); margin: .7rem 0 .4rem; overflow: hidden; } .vc-prog i { display: block; height: 100%; width: 0; background: var(--brand); transition: width .35s ease; }
.vc-count { font-weight: 800; color: var(--brand-d, var(--brand)); font-size: 1.1rem; text-align: center; }
.vc-body { overflow: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 1rem 0; gap: 1rem; }
.vc-step { font-size: clamp(1.6rem, 4.6vw, 2.6rem); line-height: 1.45; font-weight: 600; text-align: center; max-width: 900px; outline: none; }
.vc-step.long { font-size: clamp(1.25rem, 3.4vw, 2rem); }
.vc-step .timer-badge { font-size: .7em; vertical-align: middle; }
.vc-step.vc-done { font-size: clamp(2.2rem, 7vw, 3.6rem); } .vc-step.vc-done small { display: block; font-size: 1rem; color: var(--muted); font-weight: 400; margin: .4rem 0 1rem; }
.vc-body.show-ings .vc-step { font-size: clamp(1.1rem, 3vw, 1.6rem); opacity: .75; }
.vc-ings { width: min(100%, 640px); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: .6rem 1rem; font-size: 1.15rem; }
.vc-ings h3 { margin: .2rem 0 .4rem; } .vc-ings ul { margin: 0; padding-inline-start: 1.2rem; line-height: 1.6; } .vc-ings .h { list-style: none; font-weight: 700; margin-inline-start: -1rem; }
.vc-status { text-align: center; color: var(--muted); font-size: .95rem; min-height: 2.6em; position: relative; }
.vc-status[data-heard]::after { content: attr(data-heard); display: block; font-size: .85rem; color: var(--brand-d, var(--brand)); }
.vc.listening .vc-status::before { content: ''; display: inline-block; width: .6em; height: .6em; border-radius: 50%; background: #e53935; margin-inline-end: .4em; animation: vcPulse 1.2s infinite; vertical-align: middle; }
.vc.speaking .vc-count::after { content: ' 🔊'; }
@keyframes vcPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .vc.listening .vc-status::before { animation: none; } .vc-prog i { transition: none; } }
.vc-nav { display: grid; grid-template-columns: 1fr auto 1.4fr; gap: .6rem; }
.vc-btn { min-height: 64px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: inherit; font-size: 1.2rem; font-weight: 700; cursor: pointer; padding: 0 1rem; }
.vc-btn:disabled { opacity: .35; cursor: default; }
.vc-next, .vc-finish { background: var(--brand); border-color: var(--brand); color: #fff; }
.vc-finish { display: inline-block; font-size: 1.1rem; min-height: 56px; padding: 0 1.6rem; }
.vc-ingbtn { justify-self: center; margin-top: .6rem; background: none; border: 0; color: var(--brand-d, var(--brand)); font-size: 1rem; cursor: pointer; padding: .4rem .8rem; }
@media (max-width: 480px) { .vc-nav { grid-template-columns: 1fr 1fr; } .vc-mid { order: 3; grid-column: 1 / -1; min-height: 48px; } }
@media print { .vc { display: none; } }
/* ---------- import from a link (js/linkimport.js) ---------- */
.li-url-wrap { display: flex; flex-direction: column; gap: .5rem; }
.li-url-wrap textarea { width: 100%; box-sizing: border-box; font-size: .95rem; font-family: inherit; resize: vertical; min-height: 60px; direction: ltr; }
.li-url-acts { display: flex; gap: .4rem; justify-content: flex-end; }
.li-tip { margin-top: .8rem; } .li-bm { display: inline-block; padding: .1rem .55rem; border-radius: 99px; background: var(--brand-soft); border: 1px dashed var(--brand); color: var(--brand-d); text-decoration: none; cursor: grab; }
.li-shared summary { cursor: pointer; color: var(--muted); font-size: .85rem; } .li-shared p { font-size: .85rem; white-space: pre-wrap; }
.li-spin { display: flex; align-items: center; gap: .6rem; font-size: 1.05rem; padding: 1.2rem 0 .4rem; }
.li-busy-acts { display: flex; gap: .5rem; margin-top: .5rem; }
/* generic "minimize this modal to a floating corner badge" support - any modal can use it (see CH.importLink, CH.editRecipe) */
.modal-backdrop.chb-minimized { display: none !important; }
.chb-mini-badge { position: fixed; bottom: calc(1rem + env(safe-area-inset-bottom)); right: 1rem; left: auto; z-index: 9999; display: flex; align-items: center; gap: .5rem; padding: .55rem .9rem; cursor: pointer; font: inherit; font-size: .84rem; color: var(--ink); }
.chb-mini-badge ~ .chb-mini-badge { bottom: calc(4.2rem + env(safe-area-inset-bottom)); } /* a second minimized modal stacks above the first instead of overlapping it */
@media (max-width: 860px) { .chb-mini-badge { bottom: calc(130px + env(safe-area-inset-bottom)); } .chb-mini-badge ~ .chb-mini-badge { bottom: calc(184px + env(safe-area-inset-bottom)); } }
.li-acts { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; }
#li-fail textarea { width: 100%; box-sizing: border-box; }
.li-many { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-bottom: .6rem; font-size: .9rem; }
.li-grid { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: .9rem; align-items: start; }
.li-img { display: flex; flex-direction: column; gap: .3rem; } .li-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: var(--line); }
.li-img.none::before { content: '🖼️'; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 12px; background: var(--surface2); font-size: 2rem; }
.li-img small { color: var(--muted); font-size: .76rem; }
.li-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.li-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; } .li-cols textarea { width: 100%; box-sizing: border-box; line-height: 1.5; }
.li-warn { margin-top: .4rem; }
@media (max-width: 640px) { .li-grid, .li-cols { grid-template-columns: 1fr; } }
/* ---------- מאגר CookHub admin editor (js/catalogadmin.js) ---------- */
.ca-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; padding: .55rem .8rem; margin: .4rem 0 .8rem; border-radius: 12px; background: var(--warn-soft); border: 1px solid var(--warn); font-size: .9rem; }
.card { position: relative; } .card-admin { position: absolute; top: .5rem; inset-inline-start: .5rem; z-index: 3; padding: .35rem .75rem; border-radius: 999px; border: 2px solid #fff; background: var(--brand); color: #fff; font-weight: 700; font-size: .85rem; box-shadow: 0 3px 10px rgba(0, 0, 0, .25); cursor: pointer; }
.card-admin:hover, .card-admin:focus-visible { background: var(--brand-d); outline: none; } .ca-setup { display: block; } .ca-setup .fine { margin: .3rem 0; }
.ca-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.ca-cur img, .ca-none { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: var(--surface2); display: grid; place-items: center; font-size: 2rem; }
.ca-cur small { display: block; color: var(--muted); font-size: .78rem; margin: .25rem 0 .4rem; }
.ca-img .inline { gap: .35rem; } .ca-img input { flex: 1; min-width: 0; }
.ca-pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: .35rem; max-height: 260px; overflow: auto; margin: .45rem 0; padding: .2rem; }
.ca-pf { border: 2px solid transparent; border-radius: 10px; padding: 0; background: var(--surface); cursor: pointer; overflow: hidden; display: flex; flex-direction: column; }
.ca-pf img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; } .ca-pf span { font-size: .62rem; padding: .1rem .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.ca-pf.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }
.ca-up { cursor: pointer; }
.ca-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .5rem; }
.ca-cols { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; } .ca-cols textarea { width: 100%; box-sizing: border-box; line-height: 1.5; }
.ca-hidden { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; } .ca-hidden li { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
@media (max-width: 720px) { .ca-grid, .ca-cols { grid-template-columns: 1fr; } .ca-row { grid-template-columns: 1fr 1fr; } .ca-row .field:first-child { grid-column: 1 / -1; } }
/* ---------- voice settings (js/voicecook.js) ---------- */
.vcs-radios { display: flex; flex-wrap: wrap; gap: .9rem; } .vcs-radios label { display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
.vcs-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; } .vcs-row input[type=range] { width: 100%; }
.vcs-acts { display: flex; flex-wrap: wrap; gap: .45rem; } #vcs-voice { max-width: 100%; }
@media (max-width: 560px) { .vcs-row { grid-template-columns: 1fr; } }
.ca-src { margin: .5rem 0 .4rem; gap: .3rem; } .ca-pane { margin-bottom: .4rem; } .ca-pane .inline { gap: .35rem; } .ca-pane input { flex: 1; min-width: 0; }
.ca-pane small { display: block; margin-top: .25rem; }
.ca-cand { border: 2px dashed var(--brand); border-radius: 12px; padding: .5rem; margin: .4rem 0; background: var(--brand-soft); }
.ca-cand img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; } .ca-cand .field { margin: .4rem 0; } .ca-cand .inline { gap: .35rem; flex-wrap: wrap; }
.ca-pf.busy { opacity: .5; pointer-events: none; } .ca-web { max-height: 300px; }

/* ---- language switch (עברית / EN) ---- */
.lang-btn { display: inline-flex; align-items: center; gap: .25em; height: 30px; padding: 0 .6em; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; white-space: nowrap; direction: ltr; }
.lang-btn:hover { border-color: var(--brand); }
.auth-lang { display: flex; justify-content: flex-end; margin-bottom: .4rem; }
@media (max-width: 600px) { .lang-btn { height: 28px; padding: 0 .45em; font-size: .74rem; } }
/* English labels are longer: the top navigation stays on one line */
@media (max-width: 1500px) { html.lang-en .topnav a { font-size: .8rem; padding: .34em .45em; } }
.translate-cta { margin-inline-end: .5em; margin-bottom: .5em; }
/* header auto-fit (CH.fitHeader): applied only when the row would not fit */
.topbar.hdr-tight { gap: .4rem; padding: 0 .7rem; }
.topbar.hdr-tight .topnav { gap: 0; }
.topbar.hdr-tight .topnav a { padding: .36em .5em; font-size: .86rem; gap: .28em; }
.topbar.hdr-tight .top-actions { gap: .3rem; }
.topbar.hdr-tight .uname, .topbar.hdr-tight .lbl-x { display: none; }
.topbar.hdr-tight .lang-btn { padding: 0 .5em; font-size: .75rem; }
.topbar.hdr-icons .topnav a span { display: none; }
.topbar.hdr-icons .topnav a { font-size: 1.1rem; padding: .25em .5em; }
.topbar.hdr-min .top-actions .btn.primary .lbl { display: none; }
.topbar.hdr-min .brand .wordmark { display: none; }
/* unified import menu ("📥 ייבוא") */
.imp-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .6rem; }
.imp-opt { display: flex; align-items: center; gap: .75rem; padding: .8rem .9rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); font: inherit; text-align: start; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.imp-opt:hover, .imp-opt:focus-visible { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-1px); }
.imp-opt .imp-ic { font-size: 1.6rem; flex: none; width: 2.4rem; text-align: center; }
.imp-opt .imp-txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.imp-opt b { font-size: .98rem; } .imp-opt small { color: var(--muted); font-size: .8rem; line-height: 1.35; }
@media (max-width: 600px) { .imp-menu { grid-template-columns: 1fr; gap: .45rem; } .imp-opt { padding: .65rem .75rem; } }
/* desktop header: roomier, more legible menu items (CH.fitHeader compacts them only when the row would not fit) */
@media (min-width: 1201px) {
  .topnav { gap: .35rem; }
  .topnav a { font-size: 1rem; padding: .5em .95em; gap: .45em; }
  .topnav a i { font-size: 1.08em; }
  .top-actions { gap: .5rem; }
  .top-actions .btn { font-size: .88rem; padding: .3em .9em; min-height: 34px; }
  .top-actions .icon-btn { width: 36px; height: 36px; }
  .lang-btn { height: 34px; font-size: .85rem; padding: 0 .8em; }
}
@media (min-width: 1201px) and (max-width: 1500px) {
  .topnav { gap: .2rem; }
  .topnav a { font-size: .94rem; padding: .44em .62em; }
  html.lang-en .topnav a { font-size: .9rem; padding: .42em .6em; }
}
/* first auto-fit step: only the padding shrinks, the letters keep their size */
.topbar.hdr-snug .topnav { gap: .1rem; }
.topbar.hdr-snug .topnav a { padding-inline: .5em; }
.topbar.hdr-snug .top-actions { gap: .35rem; }
/* desktop header balance: the menu items share the whole space between the logo and the buttons (no empty blocks at its two ends),
   and the bar sits closer to the window edges */
@media (min-width: 1201px) {
  .topbar { padding: 0 clamp(.75rem, 1vw, 1.1rem); gap: clamp(.6rem, 1vw, 1rem); }
  .topnav { justify-content: space-evenly; }
  .topbar.hdr-snug .topnav, .topbar.hdr-tight .topnav { justify-content: space-between; }
}