:root {
  --bg: #f5f2fa;
  --surface: #faf8fd;
  --card: #ffffff;
  --accent: #7c4daa;
  --accent2: #b8860b;
  --accent3: #e8c840;
  --charcoal: #2a1f3d;
  --mid: #7a6e90;
  --border: #ddd4f0;
  --shadow: 0 4px 20px rgba(100,70,160,0.10);
  --danger: #c04060;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Outfit',sans-serif; background:var(--bg); color:var(--charcoal); min-height:100vh; -webkit-tap-highlight-color:transparent; }

/* TOPBAR (hlavička + taby jako jeden sticky celek — výškově nezávislé) */
.topbar { position:sticky; top:0; z-index:100; }

/* HEADER */
header {
  background: linear-gradient(135deg, #3d1f6e 0%, #6a3098 100%);
  padding:18px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border-bottom:3px solid var(--accent3);
}
header h1 { font-family:'Fraunces',serif; font-size:1.4rem; color:#fff; letter-spacing:0.3px; }
header h1 span { color:var(--accent3); font-style:italic; }
.header-sub { font-size:0.7rem; color:#d4bbf0; text-transform:uppercase; letter-spacing:1.5px; font-weight:300; }
.header-right { display:flex; align-items:center; gap:10px; }
.badge { background:var(--accent3); color:var(--charcoal); font-size:0.72rem; padding:4px 6px 4px 12px; border-radius:20px; font-weight:600; white-space:nowrap; align-items:center; gap:6px; }
.badge-x { background:rgba(0,0,0,0.16); color:var(--charcoal); border:none; width:17px; height:17px; border-radius:50%; font-size:0.62rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; flex-shrink:0; }
.badge-x:hover { background:rgba(0,0,0,0.4); color:#fff; }
.btn-logout { background:rgba(255,255,255,0.12); color:#fff; border:none; border-radius:8px; padding:7px 12px; font-family:'Outfit',sans-serif; font-size:0.78rem; cursor:pointer; transition:background 0.15s; }
.btn-logout:hover { background:rgba(255,255,255,0.24); }

/* TABS */
.tabs { display:flex; background:var(--surface); border-bottom:1px solid var(--border); }
.tab { flex:1; padding:13px 8px; text-align:center; cursor:pointer; font-size:0.82rem; font-weight:500; color:var(--mid); border-bottom:3px solid transparent; transition:all 0.2s; letter-spacing:0.3px; user-select:none; }
.tab.active { color:var(--accent); border-bottom-color:var(--accent); background:white; }
.tab:hover:not(.active) { color:var(--charcoal); background:#f0eaf8; }

/* PANELS */
.panel { display:none; padding:22px; }
.panel.active { display:block; }
.panel-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:12px; }
.panel-title { font-family:'Fraunces',serif; font-size:1.2rem; }
.panel-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.muted { font-size:0.8rem; color:var(--mid); }

/* SEARCH */
.search { width:100%; max-width:340px; border:1.5px solid var(--border); border-radius:8px; padding:9px 12px; font-family:'Outfit',sans-serif; font-size:0.88rem; background:white; outline:none; transition:border-color 0.15s; }
.search:focus { border-color:var(--accent); }

/* FILTRY (kuchyně) */
.filters { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }
.filter-chip { background:white; border:1.5px solid var(--border); color:var(--mid); border-radius:18px; padding:6px 13px; font-family:'Outfit',sans-serif; font-size:0.8rem; cursor:pointer; transition:all 0.15s; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.filter-chip:hover { border-color:var(--accent); color:var(--charcoal); }
.filter-chip.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.filter-chip .fc-n { font-size:0.7rem; opacity:0.65; font-variant-numeric:tabular-nums; }
.filter-chip.active .fc-n { opacity:0.85; }
.filter-more { background:none; border:1.5px dashed var(--border); color:var(--accent); border-radius:18px; padding:6px 13px; font-family:'Outfit',sans-serif; font-size:0.78rem; cursor:pointer; transition:all 0.15s; white-space:nowrap; }
.filter-more:hover { border-color:var(--accent); background:#f5f0ff; }

/* BUTTONS */
.btn { border:none; border-radius:8px; padding:10px 18px; font-family:'Outfit',sans-serif; font-size:0.86rem; font-weight:500; cursor:pointer; transition:all 0.18s; letter-spacing:0.2px; }
.btn-prim { background:var(--accent); color:white; }
.btn-prim:hover { background:#5a2a8a; }
.btn-prim:disabled { background:var(--border); color:var(--mid); cursor:not-allowed; }
.btn-gold { background:var(--accent2); color:white; }
.btn-gold:hover { background:#9a6f09; }
.btn-gold:disabled { background:var(--border); color:var(--mid); cursor:not-allowed; }
.btn-outline { background:none; border:1.5px solid var(--border); color:var(--mid); padding:9px 14px; border-radius:8px; font-family:'Outfit',sans-serif; font-size:0.84rem; cursor:pointer; transition:all 0.15s; }
.btn-outline:hover { border-color:var(--mid); color:var(--charcoal); }
.btn-danger { background:none; border:1.5px solid var(--border); color:var(--danger); padding:9px 14px; border-radius:8px; font-family:'Outfit',sans-serif; font-size:0.84rem; cursor:pointer; transition:all 0.15s; }
.btn-danger:hover { border-color:var(--danger); background:#fdf0f3; }

/* RECIPE GRID */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:13px; }
.grid > * { min-width:0; } /* zabrání grid-blowoutu (min-content roztáhne 1fr) */
.recipe-card {
  background:var(--card); border:2px solid var(--border); border-radius:14px;
  padding:0; overflow:hidden; cursor:pointer; transition:all 0.18s; position:relative; user-select:none;
}
.recipe-img { height:120px; background-size:cover; background-position:center; background-color:#efeaf6; }
.recipe-body { padding:14px; }
.recipe-badges { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:8px; }
.recipe-badges .recipe-tag { margin:0; }
.badge-sm { font-size:0.62rem; text-transform:uppercase; letter-spacing:0.6px; font-weight:600; padding:2px 7px; border-radius:5px; line-height:1.5; }
.bt-time { background:#eadff6; color:#6a3098; }
.bt-cal.cal-low { background:#e3f3e6; color:#3a7d4a; }
.bt-cal.cal-mid { background:#fff2da; color:#9a6f09; }
.bt-cal.cal-high { background:#fde6ec; color:#b03b5a; }
.recipe-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow); }
.recipe-card.selected { border-color:var(--accent); background:#f5f0ff; }
.recipe-card.selected::after {
  content:'✓'; position:absolute; top:10px; right:12px;
  background:var(--accent); color:white; width:22px; height:22px; border-radius:50%;
  font-size:0.72rem; font-weight:700; display:flex; align-items:center; justify-content:center;
}
.recipe-name { font-family:'Fraunces',serif; font-size:1rem; margin-bottom:6px; line-height:1.3; padding-right:26px; overflow-wrap:anywhere; }
.recipe-tag { font-size:0.66rem; text-transform:uppercase; letter-spacing:0.8px; color:var(--mid); background:var(--bg); padding:2px 7px; border-radius:4px; display:inline-block; margin-bottom:8px; font-weight:500; }
.recipe-meta { font-size:0.76rem; color:var(--mid); }
.recipe-actions { position:absolute; bottom:9px; right:9px; display:flex; gap:4px; opacity:0; transition:opacity 0.15s; }
.recipe-card:hover .recipe-actions { opacity:1; }
.btn-icon { background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:3px 7px; font-size:0.72rem; cursor:pointer; color:var(--mid); transition:all 0.15s; }
.btn-icon:hover { background:var(--accent); color:white; border-color:var(--accent); }
.btn-icon.danger:hover { background:var(--danger); border-color:var(--danger); }
.add-card {
  background:none; border:2px dashed var(--border); border-radius:14px; padding:16px;
  cursor:pointer; color:var(--mid); font-family:'Outfit',sans-serif; font-size:0.88rem;
  transition:all 0.18s; display:flex; align-items:center; justify-content:center; gap:8px; min-height:96px;
}
.add-card:hover { border-color:var(--accent); color:var(--accent); background:#f5f0ff; }

/* SHOPPING LIST */
.shop-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; align-items:start; }
.cat-block { background:white; border-radius:12px; padding:15px; border:1px solid var(--border); }
.cat-header { display:flex; align-items:center; gap:8px; margin-bottom:10px; padding-bottom:9px; border-bottom:1px solid var(--border); }
.cat-name { font-size:0.72rem; text-transform:uppercase; letter-spacing:1.1px; font-weight:600; color:white; padding:4px 10px; border-radius:6px; }
.cat-count { font-size:0.72rem; color:var(--mid); margin-left:auto; }
.cat-add { background:var(--bg); border:1px solid var(--border); color:var(--accent); width:24px; height:24px; border-radius:7px; cursor:pointer; font-size:0.95rem; line-height:1; display:flex; align-items:center; justify-content:center; transition:all 0.15s; flex-shrink:0; padding:0; }
.cat-add:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.shop-item { display:flex; align-items:flex-start; gap:9px; padding:7px 4px; border-radius:6px; transition:background 0.1s; }
.shop-item:hover { background:var(--bg); }
.shop-item input[type=checkbox] { accent-color:var(--accent2); width:17px; height:17px; cursor:pointer; flex-shrink:0; margin-top:2px; }
.shop-item .si-body { flex:1; cursor:pointer; display:block; min-width:0; }
.shop-item .si-line { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.shop-item .iname { font-size:0.88rem; line-height:1.3; }
.shop-item .count { background:var(--accent2); color:#fff; font-size:0.66rem; font-weight:700; padding:1px 6px; border-radius:10px; line-height:1.5; }
.shop-item .qty { font-size:0.74rem; color:var(--mid); }
.shop-item .from { font-size:0.72rem; color:var(--mid); margin-top:2px; line-height:1.35; }
.shop-item.checked .si-line { text-decoration:line-through; opacity:0.45; }
.shop-item.checked .from { opacity:0.4; }
.shop-item .rm { background:none; border:none; cursor:pointer; font-size:0.7rem; color:var(--mid); opacity:0; transition:opacity 0.15s; padding:2px 5px; align-self:center; }
.shop-item:hover .rm { opacity:0.7; }
.shop-item .rm:hover { color:var(--danger); opacity:1; }

/* CATALOG */
.cat-section { background:white; border:1px solid var(--border); border-radius:12px; margin-bottom:14px; overflow:hidden; }
.cat-section-head { display:flex; align-items:center; gap:10px; padding:12px 15px; background:var(--surface); border-bottom:1px solid var(--border); }
.cat-dot { width:14px; height:14px; border-radius:50%; flex-shrink:0; }
.cat-section-name { font-weight:600; font-size:0.95rem; }
.cat-section-actions { margin-left:auto; display:flex; gap:6px; }
.prod-row { display:flex; align-items:center; gap:8px; padding:8px 15px; border-bottom:1px solid #f0ecf8; }
.prod-row:last-child { border-bottom:none; }
.prod-row .pname { flex:1; font-size:0.88rem; }
.prod-row .usedin { background:#f0eaf8; border:1px solid var(--border); color:var(--accent); font-size:0.72rem; padding:2px 9px; border-radius:12px; cursor:pointer; white-space:nowrap; font-family:'Outfit',sans-serif; transition:all 0.15s; }
.prod-row .usedin:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.prod-row .pactions { display:flex; gap:5px; opacity:0; transition:opacity 0.15s; }
.prod-row:hover .pactions { opacity:1; }
.prod-meals { padding:2px 15px 11px 15px; display:flex; flex-wrap:wrap; gap:6px; border-bottom:1px solid #f0ecf8; }
.prod-meals .pm-chip { background:var(--bg); border:1px solid var(--border); border-radius:7px; padding:3px 9px; font-size:0.78rem; }
.prod-add { padding:10px 15px; }

/* EMPTY */
.empty { text-align:center; padding:54px 20px; color:var(--mid); grid-column:1/-1; }
.empty .ico { font-size:2.6rem; margin-bottom:12px; }
.empty p { font-size:0.9rem; line-height:1.7; }

/* MODALS */
.overlay { position:fixed; inset:0; background:rgba(30,25,40,0.62); backdrop-filter:blur(4px); z-index:200; display:flex; align-items:center; justify-content:center; padding:14px; opacity:0; pointer-events:none; transition:opacity 0.2s; }
.overlay.open { opacity:1; pointer-events:all; }
.modal { background:white; border-radius:16px; padding:24px; width:100%; max-width:520px; max-height:90vh; overflow-y:auto; transform:translateY(12px); transition:transform 0.2s; box-shadow:0 24px 64px rgba(0,0,0,0.22); }
.overlay.open .modal { transform:translateY(0); }
.modal h2 { font-family:'Fraunces',serif; font-size:1.25rem; margin-bottom:18px; }
.fg { margin-bottom:13px; }
.fg label { display:block; font-size:0.74rem; font-weight:600; text-transform:uppercase; letter-spacing:0.8px; color:var(--mid); margin-bottom:5px; }
.fg input, .fg select, .fg textarea { width:100%; border:1.5px solid var(--border); border-radius:8px; padding:9px 12px; font-family:'Outfit',sans-serif; font-size:0.88rem; color:var(--charcoal); background:var(--bg); outline:none; transition:border-color 0.15s; }
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color:var(--accent); }
.fg .hint { font-size:0.72rem; color:var(--mid); margin-top:3px; }
.fg-row { display:flex; gap:10px; }
.fg-row .fg { flex:1; }

/* upload fotky v editaci jídla */
.img-upload { display:flex; align-items:center; gap:12px; }
.img-preview { width:84px; height:84px; border-radius:10px; border:1.5px solid var(--border); background:var(--bg); background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; font-size:1.7rem; color:var(--mid); cursor:pointer; flex-shrink:0; }
.img-preview.has-img { border-style:solid; border-color:var(--accent); }
.img-actions { display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.modal-btns { display:flex; gap:10px; margin-top:18px; }
.modal-btns .btn-prim { flex:1; }

/* PRODUCT PICKER (v editaci jídla) */
.linked { border:1.5px solid var(--border); border-radius:10px; padding:8px; background:var(--bg); max-height:230px; overflow-y:auto; margin-bottom:8px; }
.linked-empty { font-size:0.82rem; color:var(--mid); padding:8px; text-align:center; }
.link-row { display:flex; align-items:center; gap:8px; padding:5px 4px; }
.link-row .lname { flex:1; font-size:0.86rem; }
.link-row .lsec { font-size:0.66rem; color:#fff; padding:1px 6px; border-radius:4px; }
.link-row .lqty { width:90px; border:1.5px solid var(--border); border-radius:6px; padding:5px 7px; font-size:0.78rem; font-family:'Outfit',sans-serif; background:white; }
.link-row .rm { background:none; border:none; cursor:pointer; color:var(--mid); font-size:0.8rem; padding:2px 6px; }
.link-row .rm:hover { color:var(--danger); }
.picker { position:relative; }
.picker-results { position:absolute; left:0; right:0; top:100%; background:white; border:1.5px solid var(--border); border-top:none; border-radius:0 0 8px 8px; max-height:220px; overflow-y:auto; z-index:5; box-shadow:var(--shadow); display:none; }
.picker-results.open { display:block; }
.picker-opt { padding:8px 12px; font-size:0.85rem; cursor:pointer; display:flex; align-items:center; gap:8px; }
.picker-opt:hover, .picker-opt.active { background:#f5f0ff; }
.picker-opt .osec { font-size:0.64rem; color:#fff; padding:1px 6px; border-radius:4px; margin-left:auto; }
.picker-opt.create { color:var(--accent); font-weight:500; }

/* loading + toast */
.spinner { width:18px; height:18px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin 0.7s linear infinite; flex-shrink:0; display:inline-block; vertical-align:middle; }
@keyframes spin { to { transform:rotate(360deg); } }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px); background:var(--charcoal); color:white; padding:11px 18px; border-radius:10px; font-size:0.85rem; opacity:0; pointer-events:none; transition:all 0.25s; z-index:300; box-shadow:0 8px 30px rgba(0,0,0,0.3); max-width:90vw; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast.err { background:var(--danger); }

/* LOGIN */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; background:linear-gradient(135deg,#3d1f6e 0%,#6a3098 100%); }
.login-card { background:white; border-radius:18px; padding:32px 28px; width:100%; max-width:360px; box-shadow:0 24px 64px rgba(0,0,0,0.28); }
.login-card h1 { font-family:'Fraunces',serif; font-size:1.6rem; margin-bottom:4px; }
.login-card h1 span { color:var(--accent2); font-style:italic; }
.login-card .sub { font-size:0.74rem; color:var(--mid); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:22px; }
.login-err { background:#fdf0f3; color:var(--danger); border:1px solid #f0c6d2; border-radius:8px; padding:9px 12px; font-size:0.82rem; margin-bottom:14px; }
.login-notice { background:#fff8e6; color:#8a6d0b; border:1px solid #f0e0a8; border-radius:8px; padding:9px 12px; font-size:0.8rem; margin-bottom:14px; }

/* Na dotykových (a malých) zařízeních nejsou hover akce dostupné → vždy viditelné */
@media (hover: none), (max-width: 640px) {
  .recipe-card .recipe-actions { opacity:1; }
  .prod-row .pactions { opacity:1; }
  .shop-item .rm { opacity:0.55; }
}

@media(max-width:640px) {
  .grid { grid-template-columns:1fr 1fr; }
  .shop-list { grid-template-columns:1fr; }
  /* Větší dotykové cíle */
  .btn-icon { padding:5px 9px; font-size:0.82rem; }
  .shop-item input[type=checkbox] { width:20px; height:20px; }
  .recipe-body { padding-bottom:30px; } /* místo pro vždy viditelné akce */
}

@media(max-width:400px) {
  .header-sub { display:none; }
}

/* TISK */
@media print {
  header, .tabs, .panel-actions, .btn, .shop-item .rm, .add-card { display:none !important; }
  body { background:white; }
  .panel { display:none !important; }
  #panel-shopping { display:block !important; padding:0; }
  .shop-list { display:block; }
  .cat-block { break-inside:avoid; border:none; padding:6px 0; }
  .shop-item input { -webkit-print-color-adjust:exact; }
}