:root{
  --bg: var(--tg-theme-bg-color, #ffffff);
  --text: var(--tg-theme-text-color, #1a1a1a);
  --hint: var(--tg-theme-hint-color, #8a8a8e);
  --link: var(--tg-theme-link-color, #d4548a);
  --card: var(--tg-theme-secondary-bg-color, #f3f3f6);
  --accent: #d4548a;
  --radius: 14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,Roboto,Segoe UI,Helvetica,Arial,sans-serif;font-size:16px}
img{display:block;max-width:100%}
a{color:var(--link)}

#topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;
  padding:12px 14px;background:var(--bg);border-bottom:1px solid rgba(128,128,128,.15)}
#title{font-weight:700;font-size:18px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icon-btn{border:0;background:transparent;color:var(--accent);font-size:26px;line-height:1;
  width:32px;height:32px;cursor:pointer}

#searchWrap{position:sticky;top:57px;z-index:19;padding:8px 14px;background:var(--bg)}
#search{width:100%;padding:11px 14px;border-radius:12px;border:0;background:var(--card);
  color:var(--text);font-size:15px;outline:none}

#app{padding:8px 14px 40px;max-width:760px;margin:0 auto}
.loader{padding:40px;text-align:center;color:var(--hint)}

/* banners */
.banners{display:flex;gap:10px;overflow-x:auto;padding:6px 0 12px;scroll-snap-type:x mandatory}
.banner{flex:0 0 86%;scroll-snap-align:start;border-radius:var(--radius);overflow:hidden;
  position:relative;background:var(--card);cursor:pointer}
.banner img{width:100%;height:150px;object-fit:cover}
.banner .cap{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;color:#fff;
  background:linear-gradient(transparent,rgba(0,0,0,.75));font-weight:600;font-size:14px}

.section-title{font-weight:700;font-size:15px;margin:14px 2px 8px;color:var(--hint);
  text-transform:uppercase;letter-spacing:.4px}

/* category / recipe grid */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{background:var(--card);border-radius:var(--radius);overflow:hidden;cursor:pointer;
  display:flex;flex-direction:column}
.tile img{width:100%;aspect-ratio:1/1;object-fit:cover;background:#ddd}
.tile .t-body{padding:9px 10px}
.tile .t-title{font-weight:600;font-size:14px;line-height:1.25}
.tile .t-meta{color:var(--hint);font-size:12px;margin-top:4px}
.tile.placeholder img{display:flex;align-items:center;justify-content:center;color:var(--hint);font-size:30px}

.crumbs{font-size:13px;color:var(--hint);margin:2px 0 10px}
.empty{padding:30px;text-align:center;color:var(--hint)}

/* ---------- recipe detail ---------- */
.recipe-hero{border-radius:var(--radius);overflow:hidden;margin-bottom:6px}
.recipe-hero img{width:100%;max-height:320px;object-fit:cover}
.recipe-h1{font-size:22px;font-weight:800;margin:12px 2px 4px}
.recipe-time{color:var(--hint);font-size:14px;margin:0 2px 10px}
.recipe-time b{color:var(--accent)}

.blk{margin:10px 0;line-height:1.5}
.blk p{margin:6px 0}
.blk-header{font-weight:800;margin:16px 0 6px}
.blk-header.h1{font-size:21px}.blk-header.h2{font-size:19px}.blk-header.h3{font-size:17px}
.blk ul,.blk ol{margin:6px 0;padding-left:22px}
.blk li{margin:3px 0}

/* container = collapsible section */
.section{border-radius:12px;overflow:hidden;margin:12px 0;border:1px solid rgba(128,128,128,.18)}
.section>.sec-head{display:flex;align-items:center;gap:8px;padding:11px 14px;cursor:pointer;
  font-weight:700;background:var(--card);user-select:none}
.section.bg-blue>.sec-head{background:rgba(64,140,220,.14)}
.section.bg-gray>.sec-head{background:var(--card)}
.section>.sec-head .chev{margin-left:auto;transition:transform .2s;color:var(--hint)}
.section.collapsed>.sec-head .chev{transform:rotate(-90deg)}
.section>.sec-body{padding:4px 14px 10px}
.section.collapsed>.sec-body{display:none}
.section.no-collapse>.sec-head{cursor:default}
.section.no-collapse>.sec-head .chev{display:none}

/* slider / gallery */
.gallery{display:flex;gap:8px;overflow-x:auto;margin:10px 0;scroll-snap-type:x mandatory;
  border-radius:12px}
.gallery img{flex:0 0 auto;max-height:300px;border-radius:12px;scroll-snap-align:center;object-fit:cover}
.gallery.single img{width:100%;flex:1}

/* video placeholder */
.video-ph{margin:12px 0;border-radius:12px;border:1px dashed var(--accent);
  background:rgba(212,84,138,.07);padding:18px 16px;text-align:center}
.video-ph .ic{font-size:30px}
.video-ph .vt{font-weight:700;margin:6px 0 2px}
.video-ph .vs{color:var(--hint);font-size:13px;margin-bottom:10px}
.video-ph a{display:inline-block;padding:9px 16px;border-radius:10px;background:var(--accent);
  color:#fff;text-decoration:none;font-weight:600;font-size:14px}

.guide-link{display:block;margin:14px 0;padding:13px 16px;border-radius:12px;background:var(--card);
  font-weight:600;text-decoration:none;color:var(--text)}
.guide-link::before{content:"📄  "}