/* Miaomiao website: the app's design system (colors, Baloo 2 + Nunito Sans, 楷体 hanzi, buttons with a bottom edge,
   田字格 boxes). Shared by the landing page (index.html) and the staff dashboard (admin.html). */
:root {
  --paper: #FFF8EC; --ink: #1F2544; --ink2: #5E6382; --muted: #8F887A; --white: #fff;
  --primary: #3D5BD6; --deep: #2B44A8; --tint: #E7ECFF; --grid: #C3CEF7; --grid-dash: #D6DDF8;
  --border: #EADFCB; --edge: #DCCFB6; --sunken: #F1E8D6; --sand: #F7EEDC;
  --ok: #178A55; --ok-tint: #E1F3E9; --ok-ink: #0F6A40;
  --bad: #D23F5E; --bad-tint: #FDE7EC; --bad-ink: #A92C47; --bad-line: #F3B5C3;
  --warn-tint: #FFF2CC; --warn-ink: #8A5A00; --sun: #FFC83D; --fire: #F26B3A; --seal: #E0582A; --peach: #FFE6DA;
  --round: 'Baloo 2', system-ui, sans-serif; --sans: 'Nunito Sans', system-ui, sans-serif; --kai: 'LXGW WenKai', 'Noto Serif SC', 'Kaiti SC', serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 600 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { margin: 0; font-family: var(--round); font-weight: 800; line-height: 1.1; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--primary); }
a:hover { color: var(--deep); }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.hanzi { font-family: var(--kai); font-weight: 400; }
.icon { font-family: 'Material Symbols Rounded'; font-weight: 500; font-size: 24px; line-height: 1; width: 1em; height: 1em; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; flex: none; font-variation-settings: 'FILL' 1; user-select: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } }
@keyframes slide { from { transform: translateX(100%); } }
@keyframes pop { from { opacity: 0; transform: scale(.94); } }
@keyframes bob { 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ── pieces ── */
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 800 24px/1 var(--round); }
.logo:hover { color: var(--ink); }
.seal { width: 40px; height: 40px; border: 3px solid var(--seal); border-radius: 10px; background: var(--paper); color: var(--seal);
  font: 400 24px/1 var(--kai); display: inline-flex; align-items: center; justify-content: center; transform: rotate(-6deg); flex: none; }
.seal.lg { width: 64px; height: 64px; border-width: 4px; border-radius: 14px; font-size: 38px; }
.seal.off { border-style: dashed; border-color: #D8CCB4; color: #C9BFAC; background: #F7EEDC; transform: none; }
.btn { appearance: none; border: 0; cursor: pointer; height: 52px; padding: 0 22px; border-radius: 14px; background: var(--primary); color: #fff;
  box-shadow: 0 4px 0 var(--deep); font: 700 18px/1 var(--round); display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none; white-space: nowrap; transition: transform .08s, box-shadow .08s; }
.btn:hover { color: #fff; filter: brightness(1.05); }
.btn:active { transform: translateY(4px); box-shadow: none; }
.btn.white { background: #fff; color: var(--ink); border: 2px solid var(--border); box-shadow: 0 4px 0 var(--edge); }
.btn.white:hover { color: var(--ink); border-color: var(--edge); }
.btn.ok { background: var(--ok); box-shadow: 0 4px 0 var(--ok-ink); }
.btn.danger { background: var(--bad); box-shadow: 0 4px 0 var(--bad-ink); }
.btn.danger-line { background: #fff; color: var(--bad-ink); border: 2px solid var(--bad-line); box-shadow: 0 4px 0 var(--bad-line); }
.btn.sm { height: 40px; padding: 0 14px; font-size: 15px; border-radius: 12px; box-shadow: 0 3px 0 var(--deep); }
.btn.white.sm { box-shadow: 0 3px 0 var(--edge); }
.btn.lg { height: 58px; padding: 0 26px; font-size: 20px; }
.btn.text { background: none; box-shadow: none; color: var(--primary); padding: 0 6px; }
.btn.text.danger-text { color: var(--bad-ink); }
.btn:disabled { cursor: default; background: #EFE7D7; color: #ADA595; box-shadow: 0 4px 0 #E2D8C4; border-color: transparent; transform: none; filter: none; }
.btn.text:disabled { background: none; box-shadow: none; }
.btn .icon { font-size: 26px; }
.card { background: #fff; border: 2px solid var(--border); border-radius: 22px; }
.tianzi { position: relative; display: inline-flex; background: #fff; border: 3px solid var(--grid); border-radius: 20px; overflow: hidden; }
.tianzi > span { position: relative; width: var(--cell, 120px); height: var(--cell, 120px); display: flex; align-items: center; justify-content: center;
  font: 400 calc(var(--cell, 120px) * .7)/1 var(--kai); }
.tianzi > span + span { border-left: 2px solid var(--grid); }
.tianzi > span::before, .tianzi > span::after { content: ''; position: absolute; border: 0 dashed var(--grid-dash); }
.tianzi > span::before { left: 0; right: 0; top: 50%; border-top-width: 2px; }
.tianzi > span::after { top: 0; bottom: 0; left: 50%; border-left-width: 2px; }
.tianzi > span > i { position: relative; z-index: 1; font-style: normal; }
.eyebrow { display: flex; align-items: center; gap: 8px; font: 800 14px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.lead { font: 600 clamp(17px, 1.5vw, 20px)/1.55 var(--sans); color: var(--ink2); }
.muted { color: var(--ink2); }
.badge { display: inline-flex; align-items: center; gap: 6px; font: 800 12px/1 var(--sans); padding: 6px 9px; border-radius: 8px; white-space: nowrap; }
.input { width: 100%; height: 50px; padding: 0 14px; border-radius: 12px; border: 2px solid var(--border); background: #fff; font: 600 16px/1 var(--sans); outline: none; }
.input:focus { border-color: var(--primary); }
label.field { display: flex; flex-direction: column; gap: 6px; font: 800 14px/1.2 var(--sans); }
.hint { font: 600 13px/1.4 var(--sans); color: var(--ink2); }
.alert { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--bad-tint); color: var(--bad-ink); font: 700 14px/1.4 var(--sans); }
.alert .icon { font-size: 20px; }
.note { display: flex; gap: 8px; align-items: flex-start; padding: 10px 14px; border-radius: 14px; font: 700 14px/1.45 var(--sans); }
.note .icon { font-size: 20px; }
.seg { display: flex; gap: 4px; padding: 4px; background: var(--sunken); border-radius: 14px; }
.seg button { appearance: none; border: 0; cursor: pointer; height: 40px; padding: 0 12px; border-radius: 10px; background: transparent; color: var(--ink2);
  font: 700 15px/1 var(--round); display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.seg button[aria-pressed='true'] { background: #fff; color: var(--ink); box-shadow: 0 2px 0 var(--edge); }
.seg button small { font: 800 12px/1 var(--sans); color: var(--ink2); }
.search { position: relative; display: flex; align-items: center; }
.search .icon { position: absolute; left: 14px; color: var(--muted); font-variation-settings: 'FILL' 0; pointer-events: none; }
.search .input { height: 48px; padding-left: 46px; border-radius: 14px; }