/* 噜噜食堂 · 应用样式
   离线优先的真 app（无 iPhone 边框、无视角切换器）。 */

@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&family=Noto+Sans+SC:wght@400;500;700&family=Baloo+2:wght@500;700&display=swap');

:root {
  --ink: #5A4A42;
  --ink2: #6E5C51;
  --ink3: #7E6A5E;
  --ink4: #826D60;
  --paper: #FFF7EF;
  --card: #ffffff;
  --lift: #F0E2D4;
  --line: #F5EBE0;
  --clay: #AE5238;
  --clay-d: #8E3E28;
  --olive: #5F7A50;
  --olive-d: #4C6440;
  --olive-t: #F3F7EF;
  --olive-ink: #4F6B41;
  --warm-t: #FDF0E2;
  --warm-ink: #96603E;
  --alert-t: #FBEAE4;
  --alert-ink: #94433A;
  --grey-t: #F3EBE1;
  --sans: 'Noto Sans SC', system-ui, -apple-system, sans-serif;
  --round: 'ZCOOL KuaiLe', cursive;
  --num: 'Baloo 2', cursive;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overscroll-behavior-y: contain; }
body {
  background: var(--paper); color: var(--ink); font-family: var(--sans);
  font-size: 14px; -webkit-font-smoothing: antialiased;
}
input, textarea, button { font-family: inherit; font-size: inherit; color: inherit; }
button { border: 0; background: none; padding: 0; cursor: pointer; }
a { color: var(--clay); }
a:hover { color: var(--clay-d); }
::-webkit-scrollbar { width: 0; height: 0; }

/* ── 骨架 ─────────────────────────────── */
#shell:not([hidden]) { height: 100dvh; display: flex; flex-direction: column; max-width: 520px; margin: 0 auto; position: relative; overflow: hidden; }
#shell[hidden], #gate[hidden] { display: none !important; }
.topbar {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(var(--safe-t) + 14px) 20px 12px; background: var(--paper);
}
.topbar h1 { font-family: var(--round); font-size: 22px; font-weight: 400; margin: 0 0 2px; line-height: 1.2; }
.topbar .sub { font-size: 11px; color: var(--ink3); }
#view { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 20px 24px; }
.stack { display: flex; flex-direction: column; gap: 14px; }

.tabbar {
  flex: none; background: #fff; border-top: 1px solid var(--line);
  padding: 9px 12px calc(var(--safe-b) + 12px); display: flex; gap: 4px;
}
.tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 0; border-radius: 14px; }
.tabbar .glyph { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }
.tabbar span { font-family: var(--round); font-size: 11.5px; color: var(--ink3); }
.tabbar button[aria-current] { background: var(--warm-t); }
.tabbar button[aria-current] span { color: var(--ink); }

.stars { display: flex; gap: 6px; }
.stars button { flex: 1; padding: 12px 0; border-radius: 14px; background: #FBF4EC; font-size: 21px; color: #DCC8B4; line-height: 1; }
.stars button[aria-pressed="true"] { background: var(--warm-t); color: #D79A2B; }

.bootfail { max-width: 340px; margin: 0 auto; padding: calc(var(--safe-t) + 20vh) 24px 24px; display: flex; flex-direction: column; gap: 14px; text-align: center; }
.bootfail h1 { font-family: var(--round); font-size: 26px; font-weight: 400; margin: 0; }
.bootfail p { margin: 0; font-size: 13px; color: var(--ink3); line-height: 1.7; }

/* ── 通用块 ───────────────────────────── */
.card { background: var(--card); border-radius: 24px; padding: 18px; box-shadow: 0 3px 0 var(--lift); display: flex; flex-direction: column; gap: 14px; }
.card.tight { gap: 12px; }
.card.olive { background: var(--olive-t); box-shadow: none; }
.card.warm { background: var(--warm-t); box-shadow: none; }
.card.lilac { background: #F7F1FA; box-shadow: none; }
.sec { font-family: var(--round); font-size: 15px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }
.grow { flex: 1; min-width: 0; }
.muted { font-size: 11.5px; color: var(--ink2); line-height: 1.55; }
.tiny { font-size: 10.5px; color: var(--ink3); }
.num { font-family: var(--num); }
.big { font-family: var(--num); font-size: 30px; color: var(--olive-ink); }
.chev { font-size: 18px; color: #C8B5A6; }
.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link { font-size: 11.5px; color: var(--clay); }
.back { font-size: 12.5px; color: var(--ink3); align-self: flex-start; }

.btn { padding: 13px; border-radius: 18px; text-align: center; font-family: var(--round); font-size: 14px; }
.btn.primary { background: var(--clay); color: #fff; box-shadow: 0 3px 0 var(--clay-d); }
.btn.go { background: var(--olive); color: #fff; box-shadow: 0 3px 0 var(--olive-d); }
.btn.plain { background: #fff; color: var(--ink2); box-shadow: 0 3px 0 var(--lift); }
.btn.dark { background: var(--ink); color: var(--paper); }
.btn.danger { background: var(--alert-t); color: var(--alert-ink); font-family: var(--sans); font-size: 13px; }
.btn.lg { padding: 15px; font-size: 15px; }
.btn.wish { background: #7A5A88; color: #fff; box-shadow: 0 3px 0 #63466F; }
.btn.dash { border: 2px dashed #DCC8B4; color: var(--ink2); background: none; }
.pill { padding: 7px 13px; border-radius: 999px; font-size: 12px; background: var(--grey-t); color: var(--ink2); }
.pill[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.pills { display: flex; gap: 6px; flex-wrap: wrap; }
.seg { display: flex; gap: 6px; background: var(--grey-t); padding: 5px; border-radius: 14px; }
.seg button { flex: 1; padding: 9px; border-radius: 10px; font-size: 12.5px; color: var(--ink2); }
.seg button[aria-pressed="true"] { background: #fff; color: var(--ink); font-family: var(--round); }
.field { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 16px; padding: 11px 14px; box-shadow: 0 3px 0 var(--lift); }
.field input { border: 0; outline: 0; background: none; flex: 1; min-width: 0; font-size: 13px; }
.inp { border: 0; outline: 0; background: #FBF4EC; border-radius: 12px; padding: 11px 12px; font-size: 13px; width: 100%; }
.inp.area { border-radius: 14px; padding: 13px; line-height: 1.7; min-height: 104px; resize: vertical; }
.nameinp { border: 0; outline: 0; width: 100%; background: none; font-family: var(--round); font-size: 20px; border-bottom: 2px solid var(--lift); padding-bottom: 6px; }

.px { display: grid; }
.px > i { display: block; }
.thumb { display: flex; align-items: center; justify-content: center; flex: none; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av { border-radius: 50%; overflow: hidden; flex: none; display: flex; align-items: center; justify-content: center; background-size: cover; background-position: center; }

.badge { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; background: var(--grey-t); color: var(--ink2); }
.badge.today { background: var(--clay); color: #fff; }
.bar { flex: 1; height: 10px; border-radius: 999px; background: var(--grey-t); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; }
.list { background: #fff; border-radius: 22px; box-shadow: 0 3px 0 var(--lift); overflow: hidden; }
.list > div { display: flex; align-items: center; gap: 11px; padding: 12px 14px; }
.list > div + div { border-top: 1px solid var(--line); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* ── 今天 ─────────────────────────────── */
.meal { display: flex; align-items: center; gap: 14px; padding: 10px; margin: 0 -10px; border-radius: 18px; text-align: left; width: calc(100% + 20px); }
.meal:active { background: #FDF4EA; }
.meal .thumb { width: 62px; height: 62px; border-radius: 18px; }
.meal .slot { font-family: var(--num); font-size: 11px; color: var(--ink4); letter-spacing: .5px; }
.meal .nm { font-family: var(--round); font-size: 19px; }

/* ── 菜谱卡 ───────────────────────────── */
.dish { background: #fff; border-radius: 22px; padding: 14px; box-shadow: 0 3px 0 var(--lift); display: flex; flex-direction: column; gap: 10px; text-align: left; }
.dish .hero { height: 84px; border-radius: 16px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.dish .hero img { width: 100%; height: 100%; object-fit: cover; }
.dish .t { position: absolute; top: 7px; right: 7px; font-family: var(--num); font-size: 10px; background: rgba(255,255,255,.85); padding: 1px 7px; border-radius: 999px; }
.dish .nm { font-family: var(--round); font-size: 15px; line-height: 1.2; }
.dot { width: 16px; height: 16px; border-radius: 50%; flex: none; }

/* ── 弹层 ─────────────────────────────── */
.sheet { position: absolute; inset: 0; z-index: 80; display: flex; flex-direction: column; justify-content: flex-end; }
.sheet .veil { position: absolute; inset: 0; background: rgba(60,44,36,.34); }
.sheet .panel {
  position: relative; background: var(--paper); border-radius: 28px 28px 0 0;
  padding: 20px 20px calc(var(--safe-b) + 26px); max-height: 88%; overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px; animation: up .22s ease-out;
}
.sheet .grip { width: 42px; height: 4px; border-radius: 999px; background: #E4D2BE; align-self: center; flex: none; }
.sheet h2 { font-family: var(--round); font-size: 17px; font-weight: 400; margin: 0; }
.sheet label { display: flex; flex-direction: column; gap: 6px; }
.pickrow { display: flex; gap: 8px; flex-wrap: wrap; }
.pickrow .facebtn { width: 50px; height: 50px; border-radius: 16px; border: 2.5px solid transparent; display: flex; align-items: center; justify-content: center; }
.pickrow .facebtn[aria-pressed="true"] { border-color: var(--ink); }
.pickrow .colorbtn { width: 34px; height: 34px; border-radius: 50%; border: 3px solid transparent; }
.pickrow .colorbtn[aria-pressed="true"] { border-color: var(--ink); }

#toast {
  position: absolute; left: 0; right: 0; top: calc(var(--safe-t) + 68px); z-index: 90;
  display: flex; justify-content: center; pointer-events: none;
}
#toast > div {
  background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: 999px;
  font-size: 12.5px; line-height: 1.5; text-align: center; max-width: 80%;
  box-shadow: 0 6px 18px rgba(90,74,66,.28); animation: pop .18s ease-out;
}

/* 同步状态：只在异常时出现 */
#netbar {
  flex: none; padding: 7px 20px; font-size: 11.5px; text-align: center;
  background: var(--warm-t); color: var(--warm-ink);
  cursor: pointer; line-height: 1.5;
}
#netbar.bad { background: #F7E2DE; color: #8E3B2F; text-align: left; }
#netbar[hidden] { display: none; }

/* ── 登录 ─────────────────────────────── */
#gate:not([hidden]) { height: 100dvh; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 28px; max-width: 420px; margin: 0 auto; }
#gate h1 { font-family: var(--round); font-size: 30px; font-weight: 400; margin: 0; letter-spacing: 1px; }
#gate .card { gap: 12px; }
#gate label { font-size: 11.5px; color: var(--ink3); }
#gate .err { font-size: 12px; color: var(--alert-ink); line-height: 1.5; }

/* ── 更新提示 ─────────────────────────── */
#updater { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(60,44,36,.42); }
#updater .box { background: var(--paper); border-radius: 26px; padding: 22px; max-width: 340px; display: flex; flex-direction: column; gap: 14px; animation: pop .2s ease-out; }
#updater h2 { font-family: var(--round); font-size: 19px; font-weight: 400; margin: 0; }
#updater ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ink2); line-height: 1.7; }

@keyframes pop { from { transform: scale(.92); opacity: 0 } to { transform: scale(1); opacity: 1 } }
@keyframes up { from { transform: translateY(16px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }