* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0; padding: 0; }
body {
  font-family: -apple-system, "PingFang SC", "Helvetica Neue", sans-serif;
  background: linear-gradient(180deg, #ffeef2 0%, #fff6ec 50%, #fffaf0 100%);
  background-attachment: fixed;
  color: #3a2a2a;
  line-height: 1.5;
  min-height: 100vh;
}
.wrap { max-width: 480px; margin: 0 auto; padding: 14px 14px 40px; }
.wrap > h1 { font-size: 22px; color: #4a3a3a; margin: 8px 0 16px; }

/* hero */
.hero {
  text-align: center;
  padding: 26px 16px 22px;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 55%, #ffecd2 100%);
  border-radius: 26px;
  box-shadow: 0 10px 28px rgba(255, 122, 156, 0.28);
}
.hero-emoji { font-size: 42px; margin-bottom: 4px; }
.hero h1 { font-size: 27px; color: #fff; font-weight: 700; text-shadow: 0 2px 10px rgba(255,122,156,.35); }
.hero .sub { color: #fff; font-size: 14px; opacity: 0.96; margin-top: 4px; }

/* loading */
.loading { text-align: center; color: #b09b9b; padding: 30px; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.spinner { width: 16px; height: 16px; border: 2px solid #ffd5de; border-top-color: #ff7a9c; border-radius: 50%; animation: spin 0.8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* meal cards */
.meal {
  background: #fff;
  border-radius: 22px;
  padding: 16px 14px;
  margin-bottom: 14px;
  box-shadow: 0 4px 18px rgba(255, 122, 156, 0.09);
}
.meal h2 { font-size: 17px; margin-bottom: 12px; color: #4a3a3a; display: flex; align-items: center; gap: 6px; font-weight: 600; }
.meal h2 span { font-size: 19px; }
.dishes { display: flex; flex-wrap: wrap; gap: 10px; }

.dish {
  border: 2px solid #ffe0e8;
  background: #fffafc;
  border-radius: 16px;
  padding: 10px 16px;
  font-size: 15px;
  color: #5a4a4a;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(.34, 1.56, .64, 1);
}
.dish:active { transform: scale(0.95); }
.dish.sel {
  background: linear-gradient(135deg, #ff7a9c, #ff9a9e);
  border-color: transparent;
  color: #fff;
  transform: scale(1.05);
  box-shadow: 0 5px 14px rgba(255, 122, 156, 0.42);
}
.dish.sel::after { content: " ✓"; font-weight: 700; }
.empty { color: #cbb; font-size: 14px; padding: 8px 0; }

/* note */
.note textarea {
  width: 100%;
  border: 2px solid #ffe0e8;
  border-radius: 16px;
  padding: 12px;
  font-size: 15px;
  font-family: inherit;
  resize: none;
  background: #fffafc;
  color: #3a2a2a;
  transition: border-color 0.2s;
}
.note textarea:focus { outline: none; border-color: #ff7a9c; }

/* submit */
.submit {
  width: 100%;
  border: none;
  background: linear-gradient(135deg, #ff7a9c 0%, #ff9a9e 100%);
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  padding: 15px;
  border-radius: 18px;
  margin-top: 8px;
  cursor: pointer;
  box-shadow: 0 7px 20px rgba(255, 122, 156, 0.38);
  transition: all 0.15s;
}
.submit:active { transform: scale(0.98); box-shadow: 0 3px 10px rgba(255, 122, 156, 0.3); }
.submit:disabled { opacity: 0.6; }

.msg { margin-top: 14px; text-align: center; font-size: 15px; min-height: 20px; }
.msg.ok { color: #ff7a9c; font-weight: 600; }
.msg.err { color: #e34; }
.foot { text-align: center; color: #cbb; font-size: 12px; margin-top: 24px; }

/* admin */
.auth { display: flex; gap: 8px; margin-bottom: 16px; }
.auth input { flex: 1; }
.inp, .auth input, select {
  border: 2px solid #ffe0e8;
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 15px;
  font-family: inherit;
  background: #fffafc;
  color: #3a2a2a;
}
.add-btn {
  border: none;
  background: linear-gradient(135deg, #ff7a9c, #ff9a9e);
  color: #fff;
  border-radius: 14px;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.dishlist { display: flex; flex-direction: column; gap: 8px; }
.dishrow {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fffafc;
  border: 2px solid #ffe0e8;
  border-radius: 14px;
  padding: 10px 14px;
}
.dishrow span { flex: 1; }
.tag {
  background: linear-gradient(135deg, #ffd5de, #ffe4ea);
  color: #ff7a9c;
  border-radius: 8px;
  padding: 3px 10px;
  font-size: 12px;
  flex: 0 0 auto !important;
}
.del {
  border: none;
  background: #fff0f2;
  color: #e34;
  border-radius: 10px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 14px;
}

/* 日期 / 历史点单 */
.today { color: #fff; font-size: 13px; opacity: 0.92; margin-top: 6px; }
.datepick input { width: 100%; }
.history-link { display: block; text-align: center; color: #ff7a9c; font-size: 14px; margin-top: 18px; text-decoration: none; }
.history-link:active { opacity: 0.6; }
.oline { font-size: 14px; color: #5a4a4a; margin-top: 6px; line-height: 1.6; word-break: break-word; }
.order h2 small.ts { font-size: 11px; color: #cbb; font-weight: normal; margin-left: 6px; }
.order-row { flex-direction: column; align-items: stretch; gap: 4px; }