:root{
  --accent:#e65100;
  --primary:#5d4037;
  --secondary:#fff8e1;
  --wood-oak:#d9b380;
  --wood-oak-d:#c39a63;
  --wood-walnut:#7a4f2c;
  --wood-walnut-d:#5f3c21;
  --wood-maple:#ecc77e;
  --wood-maple-d:#d9ad5c;
  --wood-cherry:#a34a32;
  --wood-cherry-d:#7f3a27;
  --paper:#fdf6e3;
  --ink:#3e2f23;
  --vegan:#2e7d32;
  --veg:#f9a825;
  --gf:#1565c0;
  --meat:#c62828;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--secondary);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
#app-content{
  height:100%;
  max-width:520px;
  margin:0 auto;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 80% 30%, rgba(230,81,0,.06), transparent 60%),
    linear-gradient(#f3e7c9, #ead9b4);
}
#screen{
  position:absolute;inset:0;bottom:76px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:calc(14px + env(safe-area-inset-top)) 16px calc(88px + env(safe-area-inset-bottom));
}
.pane{display:none}
.pane.active{display:block;animation:paneIn .22s ease}

@keyframes paneIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ===== Board platter ===== */
.board-wrap{position:relative;padding-top:8px}
.board-title{
  font-family:Georgia,'Times New Roman',serif;
  font-style:italic;
  font-weight:700;
  font-size:26px;
  color:var(--primary);
  margin:0 0 6px;
}
.board-sub{font-size:13px;color:#7a6a55;margin:0 0 10px}
.platter{
  position:relative;
  width:88%;
  margin:0 auto;
  background:conic-gradient(from 15deg,
    var(--wood-oak) 0%, var(--wood-walnut) 18%, var(--wood-maple) 36%,
    var(--wood-cherry) 54%, var(--wood-oak) 72%, var(--wood-maple) 88%, var(--wood-oak) 100%);
  border-radius:52% 48% 50% 50% / 50% 50% 52% 48%;
  box-shadow:
    inset 0 0 0 10px rgba(93,64,55,.25),
    inset 0 6px 26px rgba(0,0,0,.35),
    inset 0 -8px 20px rgba(255,255,255,.28),
    0 14px 30px rgba(0,0,0,.28);
  padding:20% 14% 22%;
  overflow:hidden;
}
.platter::before{
  content:"";position:absolute;inset:0;
  background:
    repeating-radial-gradient(circle at 38% 42%, transparent 0 16px, rgba(93,64,55,.16) 16px 17px);
  mix-blend-mode:multiply;
}
.platter::after{
  content:"";position:absolute;inset:6%;
  border-radius:inherit;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.18), inset 0 0 22px rgba(93,64,55,.45);
}
.slot{
  position:relative;height:118px;margin-bottom:8px;
  background:
    repeating-linear-gradient(92deg, rgba(93,64,55,.10) 0 2px, transparent 2px 16px);
}
.card{
  position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  width:92%;height:96px;
  background:linear-gradient(160deg,#fffef7,#f6ead0);
  border:1px solid #d8c8a8;
  border-radius:5px;
  box-shadow:0 6px 10px rgba(0,0,0,.22);
  padding:10px 12px;
}
.card.standing{transform:translateX(-50%) rotate(-2deg);bottom:4px}
.card .name{
  font-family:'Snell Roundhand', 'Segoe Script','Comic Sans MS',cursive;
  font-size:19px;line-height:1.1;color:var(--primary);margin:0 0 3px;
}
.card .bringer{font-size:12px;color:#8a7357;margin:0 0 4px}
.card .beads{display:flex;gap:3px;flex-wrap:wrap;margin-top:2px}
.bead{
  width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #d9a25c, #8a5a2b);
  box-shadow:inset 0 -1px 2px rgba(0,0,0,.3);
}
.flag{
  position:absolute;top:-1px;left:50%;width:5px;height:52px;
  transform:translateX(-50%);
  border-radius:3px;box-shadow:0 2px 3px rgba(0,0,0,.25);
}
.flag.vegan{background:var(--vegan)}
.flag.veg{background:var(--veg)}
.flag.gf{background:var(--gf)}
.flag.meat{background:var(--meat)}
.empty-platter{
  color:#7a6a55;font-style:italic;font-size:14px;
  text-align:center;padding:10px 0;
}

/* dashboard counters */
.counters{display:flex;gap:12px;align-items:flex-start;margin:14px 4px 6px;flex-wrap:wrap}
.total-tile{
  width:64px;height:70px;position:relative;
  background:linear-gradient(135deg,#e8d3a4,#caa86e);
  border-radius:7px;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.18), inset 0 3px 6px rgba(255,255,255,.5), 0 4px 8px rgba(0,0,0,.25);
  display:flex;align-items:center;justify-content:center;
}
.total-tile .num{
  font-family:Georgia,serif;font-weight:800;font-size:34px;color:#5d4037;
  text-shadow:0 1px 0 rgba(255,255,255,.4);
  position:relative;z-index:1;
}
.total-tile::after{
  content:"";position:absolute;inset:5px;
  border-radius:4px;
  box-shadow:inset 0 0 0 1px rgba(93,64,55,.35);
}
.counter-caption{font-size:11px;color:#7a6a55;margin-top:6px;text-align:center}
.leaf-chip{
  width:74px;height:60px;position:relative;
  border-radius:50% 0 50% 50% / 46% 12% 58% 52%;
  background:
    radial-gradient(circle at 62% 55%, rgba(46,125,50,.34) 0 42%, rgba(120,180,90,.30) 55% 100%);
  transform:rotate(-12deg);
  box-shadow:inset 0 0 14px rgba(46,125,50,.35), 0 3px 7px rgba(0,0,0,.2);
}
.leaf-chip .num{
  position:absolute;right:8px;top:20px;
  font-family:Georgia,serif;font-weight:800;font-size:22px;color:#234a24;
  text-shadow:0 0 6px rgba(255,255,255,.4);
  transform:rotate(12deg);
}
.leaf-caption{font-size:11px;color:#3f6a3f;margin-top:4px;padding-left:4px;font-style:italic}

/* ===== list / search card ===== */
.list-card{
  position:relative;
  background:linear-gradient(160deg,#fffef7,#f6ead0);
  border:1px solid #d8c8a8;
  border-radius:7px;
  box-shadow:0 4px 8px rgba(0,0,0,.18);
  padding:12px 14px;
  margin-bottom:10px;
  overflow:hidden;
}
.list-card .name{
  font-family:'Snell Roundhand','Segoe Script','Comic Sans MS',cursive;
  font-size:21px;color:var(--primary);margin:0 0 2px;
}
.list-card .bringer{font-size:13px;color:#8a7357;margin:0 0 3px}
.list-card .meta{display:flex;gap:8px;align-items:center;margin-top:4px;font-size:12px;color:#7a6a55}
.tag{font-size:11px;padding:2px 8px;border-radius:12px;color:#fff;font-weight:600}
.tag.vegan{background:var(--vegan)}
.tag.veg{background:var(--veg)}
.tag.gf{background:var(--gf)}
.tag.meat{background:var(--meat)}
.beads.sm .bead{width:7px;height:7px}

/* swipe to delete */
.swipe-wrap{position:relative;margin-bottom:10px}
.delete-bg{
  position:absolute;inset:0;border-radius:7px;
  background:linear-gradient(90deg,#c62828,#e65100);
  color:#fff;display:flex;align-items:center;justify-content:flex-end;
  padding:0 18px;font-size:14px;font-weight:600;
}
.delete-bg .del-label{pointer-events:none}
.swipe-card{position:relative;transition:transform .18s ease}
.swipe-card.removing{transition:transform .25s ease, opacity .25s ease}
.drag-hint{text-align:right;font-size:11px;color:#a08a6a;margin:-6px 0 8px;font-style:italic}

/* ===== form ===== */
.form-card{
  background:linear-gradient(160deg,#fffef7,#f6ead0);
  border:1px solid #d8c8a8;border-radius:9px;
  box-shadow:0 5px 12px rgba(0,0,0,.18);
  padding:18px 16px 20px;
}
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;color:#7a6a55;margin-bottom:6px;font-weight:600}
.field input,.field select{
  width:100%;font-size:18px;padding:15px 14px;
  border:1px solid #cfb993;border-radius:8px;background:#fffdf5;
  color:var(--ink);font-family:inherit;
}
.field input:focus,.field select:focus{outline:2px solid var(--accent);outline-offset:1px}
.save-btn{
  width:100%;padding:17px;font-size:18px;font-weight:700;
  background:linear-gradient(180deg,#e65100,#bf4d0a);
  color:#fff;border:none;border-radius:10px;
  box-shadow:0 5px 10px rgba(230,81,0,.35);
  cursor:pointer;
}
.cancel-btn{width:100%;margin-top:8px;padding:14px;font-size:16px;color:#7a6a55;background:transparent;border:1px solid #cfb993;border-radius:10px;cursor:pointer}
.edit-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.edit-head h2{margin:0;font-family:Georgia,serif;font-style:italic;font-size:22px;color:var(--primary)}
.close-x{font-size:20px;color:#7a6a55;background:none;border:none;cursor:pointer;padding:6px}

/* ===== search ===== */
.search-bar{width:100%;font-size:18px;padding:15px 14px;border:1px solid #cfb993;border-radius:10px;background:#fffdf5;color:var(--ink);margin-bottom:14px}
.search-bar:focus{outline:2px solid var(--accent)}
.search-count{font-size:13px;color:#7a6a55;margin-bottom:10px}

/* ===== bottom tabbar: wooden spoons ===== */
#tabbar{
  position:absolute;left:0;right:0;bottom:0;z-index:20;
  height:76px;
  padding:calc(4px + env(safe-area-inset-bottom)) 4px 8px;
  background:linear-gradient(#f0e2c0,#e4d0a4);
  border-top:2px solid rgba(93,64,55,.35);
  box-shadow:0 -6px 16px rgba(0,0,0,.14);
  display:flex;align-items:flex-end;justify-content:space-around;
}
.tab{
  flex:1;max-width:110px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:none;border:none;cursor:pointer;padding:2px;
  color:#8a6a45;font-size:11px;letter-spacing:.2px;font-weight:600;
}
.spoon{position:relative;width:44px;height:40px;transform-origin:50% 100%}
.spoon .handle{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:10px;height:22px;border-radius:5px 5px 3px 3px;
}
.spoon .bowl{
  position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:40px;height:20px;border-radius:44% 44% 38% 38%;
  box-shadow:inset 0 -3px 4px rgba(0,0,0,.22);
}
.tab.oak .handle,.tab.oak .bowl{background:linear-gradient(180deg,var(--wood-oak),var(--wood-oak-d))}
.tab.walnut .handle,.tab.walnut .bowl{background:linear-gradient(180deg,var(--wood-walnut),var(--wood-walnut-d))}
.tab.maple .handle,.tab.maple .bowl{background:linear-gradient(180deg,var(--wood-maple),var(--wood-maple-d))}
.tab.cherry .handle,.tab.cherry .bowl{background:linear-gradient(180deg,var(--wood-cherry),var(--wood-cherry-d))}
.tab .bowl::before{
  content:"";position:absolute;inset:3px;border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.35), transparent 55%);
  mix-blend-mode:overlay;
}
.tab .bowl::after{
  content:"";position:absolute;inset:1px;border-radius:inherit;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.3), inset 0 -4px 5px rgba(0,0,0,.2);
}
/* texture for inactive spoons */
.tab:not(.active) .bowl::after{
  background:repeating-linear-gradient(96deg, rgba(93,64,55,.14) 0 1px, transparent 1px 5px);
}
.tab:not(.active) .spoon{transform:translateY(0);opacity:.82}
.tab:not(.active) .handle{box-shadow:none}
/* active: glossy varnish, lifted, pencil shadow */
.tab.active .spoon{transform:translateY(-7px);transition:transform .18s ease}
.tab.active .handle,.tab.active .bowl{
  background-image:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 55%);
  background-color:inherit;
}
.tab.active .bowl{
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,.75),
    inset 0 -4px 6px rgba(0,0,0,.18),
    0 2px 1px rgba(0,0,0,.28);
}
.tab.active .handle{
  box-shadow:0 1px 1px rgba(0,0,0,.3);
}
.tab.active .name{color:var(--primary);text-shadow:0 1px 0 rgba(255,255,255,.5)}

/* ===== FAB ladle ===== */
#fab{
  position:absolute;right:18px;bottom:92px;z-index:30;
  width:58px;height:58px;border:none;border-radius:50%;
  background:linear-gradient(180deg,#f2f2f2,#c9c9c9);
  box-shadow:0 5px 12px rgba(0,0,0,.3), inset 0 2px 3px rgba(255,255,255,.8);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;color:#6a6a6a;
}
#fab:active{transform:translateY(2px)}
.ladle-svg{width:28px;height:28px;fill:#e6e6e6;stroke:#a9a9a9;stroke-width:1.4}