:root { --bg:#FFF5E6; --text:#333; --accent:#D35400; --card:#FFF; --border:#E0E0E0;
  --hl:#FFEFCC; --shadow:rgba(0,0,0,.1); --acc-soft:rgba(211,84,0,.07); }
@media (prefers-color-scheme: dark) {
  :root { --bg:#1A1A1A; --text:#E0E0E0; --accent:#FF914D; --card:#2E2E2E; --border:#444;
    --hl:#3B2E23; --shadow:rgba(0,0,0,.45); --acc-soft:rgba(255,145,77,.12); }
}
.cat-khichdi { --cat:#D35400; }
.cat-tahri { --cat:#C0392B; }
.cat-rice { --cat:#B8860B; }
.cat-upma { --cat:#E67E22; }
.cat-idli { --cat:#5D8AA8; }
.cat-uttapam-dosa { --cat:#A52A2A; }
.cat-chilla { --cat:#6B8E23; }
.cat-dal-kadhi { --cat:#FF8F00; }
.cat-paneer { --cat:#B0508C; }
.cat-soups { --cat:#2E8B57; }
@media (prefers-color-scheme: dark) {
  .cat-khichdi { --cat:#FF914D; }
  .cat-tahri { --cat:#E74C3C; }
  .cat-rice { --cat:#F7DC6F; }
  .cat-upma { --cat:#F5B041; }
  .cat-idli { --cat:#8FB8D8; }
  .cat-uttapam-dosa { --cat:#CD5C5C; }
  .cat-chilla { --cat:#A8D967; }
  .cat-dal-kadhi { --cat:#FFB300; }
  .cat-paneer { --cat:#E58BC5; }
  .cat-soups { --cat:#66BB6A; }
}
* { box-sizing: border-box; }
body { font-family: system-ui,-apple-system,'Segoe UI',Roboto,'Noto Sans','Noto Sans Devanagari',sans-serif;
  margin:0; padding:0; background:var(--bg); color:var(--text); font-size:17px;
  line-height:1.55; -webkit-font-smoothing:antialiased; }
#app { max-width:680px; margin:0 auto; padding:0 1rem 1.5rem; min-height:100vh;
  display:flex; flex-direction:column; }
h1,h2,h3 { line-height:1.3; margin-top:0; color:var(--cat,var(--accent)); }
p { margin:.5rem 0; }
a { -webkit-tap-highlight-color: transparent; }

/* home header */
.home h1 { font-size:2.1rem; text-align:center; margin:1.2rem 0 .3rem; }
.home .tagline { text-align:center; font-size:1.05rem; opacity:.75; margin:0 0 1.2rem; }

/* search */
#search-section { margin:.3rem 0 1.4rem; }
#q { width:100%; padding:.75rem 1rem; min-height:52px; border:1.5px solid var(--border);
  border-radius:14px; font-size:1.1rem; background:var(--card); color:var(--text);
  outline:none; box-shadow:inset 0 1px 3px var(--shadow); }
#q:focus { border-color:var(--accent); }
#results { margin-top:.8rem; background:var(--card); border-radius:14px;
  box-shadow:0 4px 10px var(--shadow); overflow:hidden; }
.result-item { display:flex; justify-content:space-between; align-items:center; gap:.6rem;
  padding:.8rem 1rem; text-decoration:none; color:var(--text); min-height:52px;
  border-bottom:1px solid var(--border); }
.result-item:last-child { border-bottom:none; }
.result-item:active { background:var(--acc-soft); }
.result-item-name { font-weight:600; }
.result-item-category { font-size:.78rem; opacity:.65; text-transform:uppercase;
  letter-spacing:.03em; white-space:nowrap; }

/* category tiles */
#category-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:.9rem; }
@media (max-width:359px){ #category-grid { grid-template-columns:1fr; } }
.tile { background:var(--card); border-radius:16px; box-shadow:0 3px 8px var(--shadow);
  text-decoration:none; color:var(--text); padding:1.3rem .8rem; display:flex;
  flex-direction:column; align-items:center; text-align:center; min-height:120px;
  border-top:4px solid var(--cat,var(--accent)); }
.tile:active { transform:scale(.98); }
.tile-emoji { font-size:2.4rem; line-height:1.2; margin-bottom:.4rem; }
.tile-name { font-size:1.15rem; font-weight:700; color:var(--cat,var(--accent)); }
.tile-count { font-size:.85rem; opacity:.65; margin-top:.2rem; }
footer { margin-top:auto; padding-top:2rem; text-align:center; font-size:.88rem; opacity:.65; }

/* app bar */
.app-bar { position:sticky; top:0; z-index:100; background:var(--bg); min-height:56px;
  padding:.4rem .5rem; box-shadow:0 2px 5px var(--shadow); display:flex;
  justify-content:space-between; align-items:center; margin:0 -1rem .5rem; }
.app-bar h1 { margin:0; font-size:1.25rem; flex:1; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-bar a { color:var(--text); text-decoration:none; padding:.5rem .7rem; border-radius:10px;
  font-size:1rem; font-weight:500; min-height:48px; min-width:48px; display:flex;
  align-items:center; justify-content:center; white-space:nowrap; }
.app-bar a:active { background:var(--acc-soft); }

/* category page */
.intro-text { font-size:1rem; opacity:.85; margin:1rem 0 1.2rem; }
.notes { background:var(--card); border:1px solid var(--border); border-radius:12px;
  margin-bottom:1.5rem; box-shadow:0 2px 5px var(--shadow); }
.notes summary { display:block; padding:1rem 2.6rem 1rem 1.1rem; cursor:pointer;
  font-weight:700; color:var(--cat,var(--accent)); min-height:48px; position:relative;
  list-style:none; }
.notes summary::-webkit-details-marker { display:none; }
.notes summary::after { content:'+'; position:absolute; right:1.1rem; top:50%;
  transform:translateY(-50%); font-size:1.5rem; opacity:.6; }
.notes[open] summary::after { content:'\2212'; }
.notes-content { padding:0 1.1rem 1.1rem; border-top:1px solid var(--border);
  font-size:.97rem; }
.notes-content ul { padding-left:1.2rem; margin:.6rem 0; }
.notes-content li { margin-bottom:.55rem; }
.notes-content h3 { font-size:1.05rem; margin:.9rem 0 .3rem; }
.rcard { display:block; background:var(--card); border-radius:14px;
  box-shadow:0 3px 8px var(--shadow); text-decoration:none; color:var(--text);
  padding:1.1rem 1rem; margin-bottom:.9rem; border-left:4px solid var(--cat,var(--accent)); }
.rcard:active { transform:scale(.99); }
.rcard-header { display:flex; align-items:flex-start; gap:.6rem; margin-bottom:.55rem; }
.rcard-number { font-weight:700; color:var(--cat,var(--accent)); min-width:1.5em; }
.rcard-name { font-size:1.13rem; font-weight:700; line-height:1.35; }
.rcard-chips { display:flex; flex-wrap:wrap; gap:.45rem; font-size:.87rem; }
.rcard-chip { background:var(--hl); padding:.28em .7em; border-radius:8px; white-space:nowrap; }
.chip-gentle { background:#E3F3E6; color:#1E7B34; font-weight:600; }
@media (prefers-color-scheme: dark) { .chip-gentle { background:#22392A; color:#8ADB9C; } }

/* recipe page */
.recipe h1 { font-size:1.8rem; margin:1rem 0 .2rem; text-align:center; }
.subtitle { text-align:center; font-size:1.1rem; opacity:.75; margin:0 0 1.2rem; }
.meta-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem;
  margin-bottom:1.6rem; }
.meta-chip { background:var(--hl); padding:.55rem .9rem; border-radius:12px;
  font-size:.93rem; display:flex; align-items:center; }
.recipe h2 { font-size:1.35rem; margin:1.6rem 0 .7rem; }
.ingredients-list ul { list-style:none; padding:0; margin:0; }
.ing { display:flex; align-items:center; padding:.55rem 0; min-height:50px;
  border-bottom:1px dashed var(--border); cursor:pointer; }
.ingredients-list li:last-child .ing { border-bottom:none; }
.ing input[type=checkbox] { -webkit-appearance:none; appearance:none; width:28px; height:28px;
  border:2px solid var(--cat,var(--accent)); border-radius:7px; margin-right:.9rem;
  flex-shrink:0; position:relative; cursor:pointer; }
.ing input[type=checkbox]:checked { background:var(--cat,var(--accent)); }
.ing input[type=checkbox]:checked::before { content:'\2714'; position:absolute; top:50%;
  left:50%; transform:translate(-50%,-50%); font-size:1.15rem; color:#FFF; }
.ing span { flex:1; font-size:1.03rem; line-height:1.45; }
.ing input[type=checkbox]:checked + span { text-decoration:line-through; opacity:.55; }
.steps-list { padding:0; margin:0; list-style:none; counter-reset:step; }
.steps-list li { position:relative; margin-bottom:1.3rem; font-size:1.04rem; line-height:1.6;
  padding-left:2.6rem; min-height:2rem; }
.steps-list li::before { content:counter(step); counter-increment:step; position:absolute;
  left:0; top:.1rem; background:var(--cat,var(--accent)); color:#FFF; width:1.85em;
  height:1.85em; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.92em; }
.callout { background:var(--hl); border-left:5px solid var(--cat,var(--accent));
  border-radius:10px; padding:1rem 1.1rem; margin:1.4rem 0; font-size:.98rem; }
.callout strong { color:var(--cat,var(--accent)); }
.bottom-nav { display:flex; gap:.8rem; margin-top:2.2rem; }
.bottom-nav a { flex:1; background:var(--card); border:1px solid var(--border);
  border-radius:12px; text-decoration:none; color:var(--text); padding:.9rem .5rem;
  text-align:center; font-weight:500; min-height:52px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; box-shadow:0 2px 5px var(--shadow);
  font-size:.95rem; }
.bottom-nav a:active { background:var(--acc-soft); }
.bottom-nav .nav-label { font-size:.78rem; opacity:.6; }

@media print {
  body { background:#FFF; color:#000; font-size:11pt; }
  .app-bar,.bottom-nav,#search-section { display:none !important; }
  #app { max-width:none; padding:0; }
  h1,h2,h3 { color:#333 !important; }
  .rcard,.notes,.callout { box-shadow:none !important; border:1px solid #CCC !important;
    break-inside:avoid; }
  .ing input[type=checkbox] { display:none; }
  .ing span { text-decoration:none !important; opacity:1 !important; }
  .steps-list li::before { background:#333 !important; }
}