:root {
  --bg: #EFEAD9;
  --surface: #FBF8F0;
  --ink: #332A1D;
  --ink-dim: #7A6E56;
  --border: #DED4B9;
  --accent: #B8752E;
  --accent-ink: #FFF7EA;
  --slot-main: #C98A2B; --slot-main-ink: #3A2308;
  --slot-kids: #A23E48; --slot-kids-ink: #FBEAEA;
  --slot-alt: #52684A; --slot-alt-ink: #EAF0E4;
  --danger: #A23E48;
}

* { box-sizing: border-box; }
button, input, select, textarea { font: inherit; color: inherit; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Segoe UI", Arial, sans-serif;
  line-height: 1.45;
}

a { color: inherit; }

.page {
  width: 100%;
  min-height: 100vh;
  padding-bottom: 4.5rem;
  background: var(--surface);
  display: flex;
  justify-content: center;
}
.page-bare { background: var(--bg); }
.content { width: 100%; max-width: 520px; }
.page-bare .content { display: flex; flex-direction: column; }

.flash {
  background: var(--slot-kids);
  color: var(--slot-kids-ink);
  padding: .6rem 1rem;
  font-size: .85rem;
  font-weight: 700;
}
.flash-inline { color: var(--danger); font-size: .8rem; font-weight: 700; margin: .4rem 0 0; }

/* ---- forms ---- */
label { display: block; font-size: .75rem; font-weight: 700; color: var(--ink-dim); margin-bottom: .9rem; }
label > input, label > select, label > textarea { display: block; width: 100%; margin-top: .3rem; }
input, select, textarea {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .5rem .7rem;
  font-size: .88rem;
  background: var(--surface);
  color: var(--ink);
}
textarea { resize: vertical; }
.form-row { display: flex; gap: 1rem; }
.form-row label { flex: 1; }
.recipe-form { padding: 0 1rem 1.5rem; }

/* ---- buttons ---- */
.surprise-btn, .addplan-btn, .clear-btn {
  display: block; width: 100%; border-radius: 10px; padding: .6rem; text-align: center;
  font-weight: 700; font-size: .82rem; cursor: pointer; text-decoration: none; border: none;
}
.surprise-btn { background: var(--accent); color: var(--accent-ink); }
.addplan-btn { background: var(--accent); color: var(--accent-ink); }
.clear-btn { background: none; border: 1px solid var(--border); color: var(--ink-dim); }
.clear-btn.danger { color: var(--danger); border-color: var(--danger); }
.toolrow { padding: 0 1rem .8rem; }
.rd-actions { display: flex; gap: .6rem; }
.rd-actions .clear-btn, .rd-actions form { flex: 1; }

/* ---- login ---- */
.loginview { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; padding: 3rem 1.5rem; text-align: center; min-height: 100vh; }
.loginview .brand { font-family: "Consolas", "Cascadia Code", monospace; font-size: 1.4rem; font-weight: 800; letter-spacing: .02em; }
.loginview .tagline { font-size: .85rem; opacity: .65; margin-top: -1.2rem; }
.login-form { display: flex; flex-direction: column; align-items: center; width: 100%; }
.wholabel { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; opacity: .55; margin-bottom: .9rem; }
.who { display: flex; flex-wrap: wrap; gap: 1rem .9rem; justify-content: center; max-width: 340px; }
.who-btn { display: flex; flex-direction: column; align-items: center; gap: .5rem; background: none; border: none; cursor: pointer; padding: .3rem; border-radius: 12px; width: 72px; }
.who-btn.active { outline: 2px solid var(--accent); outline-offset: 2px; }
.who-btn .avatar-lg { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.15rem; background: var(--user-color, var(--accent)); color: #fff; }
.who-btn .who-name { font-size: .78rem; font-weight: 700; }

/* ---- pin keypad ---- */
.pin-entry { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; width: 100%; max-width: 300px; }
.pin-entry-label { font-size: .82rem; font-weight: 700; color: var(--ink-dim); }
.pin-dots { display: flex; gap: .9rem; }
.pin-dot { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--border); background: none; transition: background .1s ease, border-color .1s ease; }
.pin-dot.filled { background: var(--accent); border-color: var(--accent); }
.keypad { display: grid; grid-template-columns: repeat(3, 64px); gap: .85rem; justify-content: center; }
.key {
  width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); font-size: 1.3rem; font-weight: 700; color: var(--ink);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.key:active { background: var(--bg); }
.key-ghost { background: none; border: none; color: var(--ink-dim); font-size: 1.1rem; }

/* ---- top bar / pager ---- */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1rem .7rem; }
.pager-btn { appearance: none; border: none; background: none; font-size: 1.1rem; font-weight: 700; width: 34px; height: 34px; border-radius: 50%; text-align: center; text-decoration: none; display: flex; align-items: center; justify-content: center; }
.weeklabel { text-align: center; font-size: .74rem; line-height: 1.25; font-family: "Consolas", "Cascadia Code", monospace; }
.weeklabel strong { display: block; font-size: .92rem; }

/* ---- day list ---- */
.listview { padding: .15rem 1rem 1rem; display: flex; flex-direction: column; gap: .5rem; }
.dayrow { display: flex; align-items: center; gap: .7rem; border-radius: 12px; padding: .7rem .8rem; border: 1px solid var(--border); background: var(--surface); text-decoration: none; color: var(--ink); }
.dnum-wrap { width: 40px; flex: none; text-align: center; }
.dow { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; opacity: .6; display: block; font-family: "Consolas", "Cascadia Code", monospace; }
.dnum { font-size: 1.1rem; font-weight: 800; display: block; }
.mid { flex: 1; min-width: 0; }
.summary { font-size: .84rem; font-weight: 700; margin-bottom: .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chiprow { display: flex; gap: .3rem; flex-wrap: wrap; }
.chip { font-size: .62rem; font-weight: 800; padding: .16rem .45rem; border-radius: 999px; display: inline-flex; align-items: center; gap: .3rem; }
.chip i { width: 13px; height: 13px; border-radius: 50%; font-style: normal; font-size: .52rem; background: rgba(0,0,0,.28); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.chip.main { background: var(--slot-main); color: var(--slot-main-ink); }
.chip.kids { background: var(--slot-kids); color: var(--slot-kids-ink); }
.chip.alt { background: var(--slot-alt); color: var(--slot-alt-ink); }
.chip.empty { opacity: .5; border: 1px dashed var(--ink-dim); background: none; color: var(--ink-dim); }
.arrow { opacity: .35; font-size: .9rem; flex: none; }

/* ---- day detail ---- */
.dtopbar { display: flex; align-items: center; gap: .7rem; padding: 1rem; }
.back { text-decoration: none; font-weight: 700; font-size: .85rem; color: var(--accent); }
.dtopbar h3 { margin: 0; font-size: 1.05rem; font-weight: 800; }
.dslot { border-radius: 12px; padding: .85rem 1rem; margin: 0 1rem .75rem; background: var(--surface); border: 1px solid var(--border); }
.dslot.main { background: var(--slot-main); color: var(--slot-main-ink); border-color: transparent; }
.dslot.kids { background: var(--slot-kids); color: var(--slot-kids-ink); border-color: transparent; }
.dslot.alt { background: var(--slot-alt); color: var(--slot-alt-ink); border-color: transparent; }
.dslot.empty { background: var(--bg); color: var(--ink); }
.dslot-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.dslot-tag { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; opacity: .75; }
.dslot-name { font-size: .92rem; font-weight: 700; flex: 1; }
.cook { width: 21px; height: 21px; border-radius: 50%; font-size: .66rem; font-weight: 800; background: rgba(0,0,0,.28); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.dslot ul { margin: 0 0 .8rem; padding-left: 1.1rem; font-size: .82rem; }
.dslot ul li { margin-bottom: .15rem; }
.slot-form { margin-top: .5rem; }
.slot-form-inline { display: flex; gap: .5rem; align-items: stretch; }
.slot-form-inline select, .slot-form-inline input { flex: 1; min-width: 0; }
.slot-form-inline .addplan-btn { width: auto; padding: .5rem .9rem; }

/* ---- recipes ---- */
.searchbar { padding: 1rem 1rem .5rem; }
.searchbar input { width: 100%; }
.tagfilter { display: flex; gap: .4rem; padding: 0 1rem .8rem; overflow-x: auto; }
.tagchip { flex: none; font-size: .68rem; font-weight: 700; padding: .34rem .75rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-dim); text-decoration: none; }
.tagchip.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.recipelist { padding: 0 1rem 1rem; display: flex; flex-direction: column; gap: .5rem; }
.recipecard { display: flex; gap: .75rem; align-items: center; border-radius: 12px; padding: .6rem; border: 1px solid var(--border); background: var(--surface); text-decoration: none; color: var(--ink); }
.rc-thumb { width: 46px; height: 46px; border-radius: 9px; flex: none; background: linear-gradient(135deg, var(--slot-main), var(--slot-alt)); }
.rc-mid { flex: 1; min-width: 0; }
.rc-name { font-size: .85rem; font-weight: 700; margin-bottom: .2rem; }
.rc-meta { font-size: .68rem; opacity: .6; margin-bottom: .3rem; }
.rc-tags { display: flex; gap: .3rem; flex-wrap: wrap; }
.rc-tags span { font-size: .6rem; font-weight: 700; padding: .1rem .4rem; border-radius: 999px; background: var(--bg); color: var(--ink-dim); }
.rc-arrow { opacity: .35; }
.addrow { padding: 0 1rem 1rem; }
.empty-note { padding: 0 1rem; font-size: .85rem; color: var(--ink-dim); }

/* ---- recipe detail / form ---- */
.rd-hero { height: 130px; margin: 0 1rem .9rem; border-radius: 12px; background: linear-gradient(135deg, var(--slot-main), var(--slot-alt)); }
.rd-tags { display: flex; gap: .35rem; margin: 0 1rem .6rem; flex-wrap: wrap; }
.rd-tags span { font-size: .65rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; background: var(--bg); color: var(--ink-dim); border: 1px solid var(--border); }
.rd-meta { font-size: .78rem; opacity: .6; margin: 0 1rem 1.1rem; font-family: "Consolas", "Cascadia Code", monospace; }
.rd-section { margin: 0 1rem 1.2rem; }
.rd-section h4 { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; opacity: .6; margin: 0 0 .5rem; }
.rd-section ul, .rd-section ol { margin: 0; padding-left: 1.2rem; font-size: .86rem; }
.rd-section li { margin-bottom: .3rem; }
.rd-section input[type="url"] { width: 100%; margin-bottom: .6rem; }

/* ---- grocery ---- */
.groceryview { padding: 1rem 1rem 1.5rem; }
.gv-head { margin-bottom: 1rem; }
.gv-head h3 { margin: 0 0 .2rem; font-size: 1.05rem; }
.gv-head p { margin: 0 0 1rem; font-size: .78rem; opacity: .6; }
.grocery { margin-top: 1rem; }
.grocery ul { list-style: none; margin: 0; padding: 0; }
.grocery li { display: flex; align-items: center; gap: .55rem; padding: .45rem 0; font-size: .85rem; border-bottom: 1px solid var(--border); }
.grocery li:last-child { border-bottom: none; }
.grocery li.done { opacity: .42; text-decoration: line-through; }
.grocery .aisle { font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; opacity: .55; margin: 1rem 0 .3rem; }
.grocery .aisle:first-child { margin-top: 0; }
.toggle-form { margin: 0; }
.box-btn { appearance: none; border: none; background: none; padding: 0; cursor: pointer; }
.box { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--accent); display: block; }
.done .box { background: var(--accent); }
.groceryview form.slot-form-inline { margin-top: 1rem; }
.groceryview > form:first-of-type { margin-bottom: .3rem; }
.groceryview form:last-of-type { margin-top: 1rem; }

/* ---- bottom nav ---- */
.tabbar { display: none; position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 520px; border-top: 1px solid var(--border); background: var(--surface); }
.tabbar.show { display: flex; }
.tabbar a { flex: 1; text-align: center; padding: .75rem 0 .85rem; font-size: .7rem; font-weight: 700; text-decoration: none; color: var(--ink-dim); }
.tabbar a.current { color: var(--accent); }