:root{
  --bg:#f4f7f5; --card:#ffffff; --ink:#1f2d2b; --sub:#5b6b67;
  --brand:#1f9d76; --brand-soft:#e4f5ee; --accent:#f0a23b; --danger:#e0556b;
  --line:#e3ebe7; --shadow:0 6px 22px rgba(31,45,43,.08);
}
*{box-sizing:border-box;}
body{margin:0; font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  background:var(--bg); color:var(--ink); font-size:18px; line-height:1.6;}
header{background:linear-gradient(135deg,#1f9d76,#2bb98c); color:#fff; padding:28px 20px 22px; text-align:center;}
header h1{margin:0; font-size:30px; letter-spacing:1px;}
header p{margin:8px 0 0; font-size:18px; opacity:.95;}
.container{max-width:920px; margin:0 auto; padding:16px;}
.why{background:var(--card); border-radius:16px; padding:18px 20px; margin:16px 0; box-shadow:var(--shadow); font-size:16.5px;}
.tabs{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:14px 0;}
.tab{flex:1 1 140px; min-width:130px; text-align:center; cursor:pointer;
  background:var(--card); border:2px solid var(--line); border-radius:14px;
  padding:14px 8px; font-size:18px; font-weight:600; color:var(--sub); transition:.15s;}
.tab.active{background:var(--brand); color:#fff; border-color:var(--brand);}
.panel{display:none; background:var(--card); border-radius:18px; box-shadow:var(--shadow); padding:22px; margin-bottom:24px;}
.panel.active{display:block;}
.panel h2{margin-top:0; color:var(--brand); font-size:23px;}
label{display:block; font-size:17px; margin:14px 0 6px; color:var(--sub);}
input,select,textarea,button{font-size:18px; font-family:inherit; width:100%; padding:12px 14px;
  border:2px solid var(--line); border-radius:12px; background:#fff; color:var(--ink);}
textarea{resize:vertical; min-height:90px;}
button{background:var(--brand); color:#fff; border:none; font-weight:700; cursor:pointer; margin-top:14px; padding:14px; font-size:19px;}
button.ghost{background:#fff; color:var(--brand); border:2px solid var(--brand);}
button.danger{background:var(--danger);}
button:active{transform:translateY(1px);}
.row{display:flex; gap:10px;}
.row>*{flex:1;}
.list{margin-top:16px;}
.item{background:var(--brand-soft); border-radius:12px; padding:14px 16px; margin:10px 0;
  display:flex; justify-content:space-between; align-items:center; gap:10px;}
.item .meta{font-size:15px; color:var(--sub);}
.item.done{opacity:.55; text-decoration:line-through;}
.pill{display:inline-block; background:var(--accent); color:#fff; border-radius:999px; padding:3px 12px; font-size:14px;}
.chat{height:340px; overflow-y:auto; background:#fafcfa; border:2px solid var(--line); border-radius:14px; padding:14px;}
.msg{max-width:80%; margin:10px 0; padding:12px 16px; border-radius:14px; font-size:17px;}
.msg.bot{background:var(--brand-soft); color:var(--ink); border-bottom-left-radius:4px;}
.msg.me{background:var(--brand); color:#fff; margin-left:auto; border-bottom-right-radius:4px;}
.result{background:#fff; border:2px dashed var(--brand); border-radius:14px; padding:16px; margin-top:16px; display:none;}
.bar{height:14px; background:var(--brand-soft); border-radius:999px; overflow:hidden; margin:6px 0 12px;}
.bar>span{display:block; height:100%; background:var(--brand);}
.hint{font-size:14px; color:var(--sub); margin-top:6px;}
.sos{position:fixed; right:18px; bottom:18px; width:74px; height:74px; border-radius:50%;
  background:var(--danger); color:#fff; border:none; font-size:16px; font-weight:800;
  box-shadow:0 8px 20px rgba(224,85,107,.5); z-index:50; padding:0;}
footer{text-align:center; color:var(--sub); font-size:14px; padding:18px;}
.badge{display:inline-block; background:var(--brand-soft); color:var(--brand); border-radius:8px; padding:2px 10px; font-size:13px; margin-right:6px;}
.io-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.slash{font-size:24px; color:var(--sub); padding:0 2px;}
.stepper{display:flex; align-items:center; gap:6px; flex:1 1 120px;}
.stepper button{width:46px; min-width:46px; height:52px; border-radius:10px; border:2px solid var(--brand-soft);
  background:#fff; color:var(--brand); font-size:28px; font-weight:800; margin:0; padding:0; flex:0 0 auto;}
.stepper button:active{background:var(--brand); color:#fff; border-color:var(--brand);}
.stepper input{flex:1 1 auto; min-width:64px; border:2px solid var(--line); background:#fff; text-align:center;
  font-size:22px; padding:10px 6px; border-radius:10px; width:100%;}
.stepper input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft);}
input[type=number]{appearance:textfield;}
.mic{flex:0 0 56px; height:56px; border-radius:12px; background:var(--accent); color:#fff; font-size:24px;
  border:none; margin:0; padding:0; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:none;}
.mic.on{background:var(--danger); animation:pulse 1s infinite;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.big-voice{width:100%; background:linear-gradient(135deg,var(--accent),#f6b85c); color:#fff; font-size:22px; font-weight:800;
  padding:18px; border-radius:16px; border:none; margin:0; user-select:none; -webkit-user-select:none;
  -webkit-touch-callout:none; touch-action:none; cursor:pointer;}
.big-voice.on{background:var(--danger); animation:pulse 1s infinite;}
/* 识别中（已松手，等待服务端转写） */
.mic.busy,.big-voice.busy{background:var(--accent); animation:pulse 1s infinite;}
.field-voice{display:flex; gap:8px; align-items:stretch;}
.field-voice input{flex:1;}
.field-voice .mic{flex:0 0 56px;}
.toast{position:fixed; left:50%; top:22px; transform:translateX(-50%); background:rgba(31,45,43,.95); color:#fff;
  padding:14px 22px; border-radius:14px; font-size:18px; z-index:99; box-shadow:var(--shadow); opacity:0;
  transition:.25s; pointer-events:none; max-width:92%; text-align:center; line-height:1.5;}
.toast.show{opacity:1; top:34px;}
.dialect-bar{display:flex; align-items:center; gap:10px; background:var(--card); border-radius:14px; padding:12px 16px;
  margin:14px 0 0; box-shadow:var(--shadow);}
.db-label{font-size:17px; font-weight:700; color:var(--brand); white-space:nowrap;}
.dialect-bar select{flex:1; margin-top:0; border-color:var(--brand);}
.photo-actions{display:flex; gap:12px; margin:6px 0 10px;}
.photo-btn{flex:1; font-size:18px; padding:16px 8px; border-radius:14px; background:var(--brand-soft);
  color:var(--brand); border:2px solid var(--brand); font-weight:700; margin-top:0;}
.photo-btn:active{background:var(--brand); color:#fff;}
.meal-preview{display:block; max-width:100%; max-height:220px; border-radius:14px; margin:4px auto 12px; border:2px solid var(--line);}
.exp-tag{display:inline-block; padding:4px 12px; border-radius:999px; font-size:15px; font-weight:800; margin-left:8px;}
.exp-ok{background:#e6f7ec; color:#1a8a4a;}
.exp-warn{background:#fff4e0; color:#c47d00;}
.exp-bad{background:#ffe7e7; color:#c0392b;}
.art{display:inline-block; margin-left:10px; font-size:.95em; animation:bob 2.6s ease-in-out infinite; transform-origin:center;}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg);}50%{transform:translateY(-5px) rotate(3deg);}}
.tab .art{margin-left:6px; font-size:1em; animation:none;}
.brand{display:flex; align-items:center; gap:14px;}
.brand-txt{flex:1; min-width:0; text-align:left;}
.mascot{width:74px; height:74px; flex:0 0 74px; cursor:pointer; animation:floaty 3s ease-in-out infinite; transition:transform .15s; user-select:none;}
.mascot:active{transform:scale(.9);}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}
.mascot .eye{transform-box:fill-box; transform-origin:center; animation:blink 4.2s infinite;}
@keyframes blink{0%,90%,100%{transform:scaleY(1);}95%{transform:scaleY(.08);}}
.bubble{position:fixed; left:50%; bottom:92px; transform:translateX(-50%) translateY(10px); max-width:80vw; background:#fff;
  color:#23314a; border:2px solid var(--brand); border-radius:18px; padding:12px 16px; font-size:16px; line-height:1.5;
  box-shadow:0 10px 26px rgba(0,0,0,.18); z-index:90; opacity:0; transition:opacity .25s, transform .25s;
  pointer-events:none; text-align:center;}
.bubble.show{opacity:1; transform:translateX(-50%) translateY(0);}
.bubble:after{content:''; position:absolute; left:50%; bottom:-12px; transform:translateX(-50%);
  border:8px solid transparent; border-top-color:var(--brand);}
.confetti{position:fixed; top:-24px; width:11px; height:15px; z-index:85; pointer-events:none; border-radius:3px; will-change:transform;}
.fam-actions{display:flex; align-items:center;}
.call-btn{display:inline-block; background:#06d6a0; color:#063b2c; text-decoration:none; padding:9px 16px;
  border-radius:22px; font-size:15px; font-weight:800; white-space:nowrap; box-shadow:0 3px 8px rgba(6,214,160,.4);}
.chips{display:flex; gap:8px; overflow-x:auto; padding:6px 2px 12px; margin:0 -2px;}
.chip{flex:0 0 auto; padding:9px 15px; border-radius:18px; border:2px solid var(--line); background:#fff;
  font-size:15px; white-space:nowrap; cursor:pointer;}
.chip.active{background:var(--brand); color:#fff; border-color:var(--brand);}
.meal-picker{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:8px;}
.dish{display:flex; flex-direction:column; align-items:flex-start; gap:3px; padding:13px 14px; border-radius:14px;
  border:2px solid var(--line); background:#fff; font-size:18px; font-weight:700; color:var(--ink);
  cursor:pointer; text-align:left; line-height:1.3; margin-top:0;}
.dish:active{background:var(--brand-soft); border-color:var(--brand);}
.dish-k{font-size:13px; font-weight:600; color:var(--sub);}
.food-item{display:flex; align-items:center; justify-content:space-between;}
.protein-num{font-size:26px; font-weight:800; color:var(--brand); flex:0 0 auto; margin-left:10px;}
.protein-num span{font-size:14px; margin-left:1px; font-weight:600;}
@keyframes drop{to{transform:translateY(106vh) rotate(680deg); opacity:.15;}}
.home-alert{background:#fff4e6;border:2px solid var(--accent);border-radius:12px;padding:12px 16px;margin-bottom:14px;font-size:17px;color:#8a5a12;line-height:1.5;}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.card{background:var(--card);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow);}
.card h4{margin:0 0 8px;color:var(--brand);font-size:17px;}
.card .big{font-size:22px;font-weight:800;line-height:1.3;}
.card .sub{font-size:14px;color:var(--sub);margin-top:4px;}
.quick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;}
.quick button{margin-top:0;font-size:18px;}
@media(max-width:560px){.grid{grid-template-columns:1fr;}}
.modal-mask{position:fixed; inset:0; background:rgba(20,30,28,.55); display:none; align-items:center;
  justify-content:center; z-index:200; padding:20px; box-sizing:border-box;}
.modal-mask.show{display:flex;}
.modal{background:#fff; border-radius:18px; padding:24px 22px; max-width:440px; width:100%;
  box-shadow:0 14px 44px rgba(0,0,0,.28); box-sizing:border-box;}
.modal h3{margin:0 0 10px; font-size:22px; color:var(--brand);}
.modal p{font-size:17px; line-height:1.6; margin:10px 0; color:var(--ink);}
.modal ol{font-size:17px; line-height:1.95; padding-left:22px; margin:12px 0;}
.modal ol b{color:var(--brand);}
.modal button{margin-top:6px;}
.th-entry{display:flex; align-items:center; justify-content:space-between; gap:12px; background:#f4f8f5;
  border:1px solid #e2ece6; border-radius:14px; padding:12px 14px; margin:6px 0 12px;}
.th-entry .t{font-size:17px; font-weight:700; color:var(--ink);}
.th-entry .h{font-size:13px; color:var(--sub); margin-top:2px;}
.th-entry button{white-space:nowrap; margin-top:0;}
.th-group{margin:14px 0; border:1px solid #eef2ef; border-radius:12px; padding:10px 12px; background:#fafcfb;}
.th-group h4{margin:0 0 8px; font-size:16px; color:var(--brand);}
.th-item{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:8px 0; font-size:15px; color:var(--ink);}
.th-item input{width:84px; padding:8px 10px; border:1px solid #d6e0db; border-radius:10px; font-size:16px; text-align:center;}
.th-note{font-size:13px; color:var(--sub); margin:4px 0 0;}

/* ---------- 管理员端 ---------- */
.admin-nav{display:flex; flex-wrap:wrap; gap:8px; background:#fff; padding:12px 16px; box-shadow:var(--shadow); position:sticky; top:0; z-index:10;}
.admin-nav a{text-decoration:none; color:var(--sub); font-weight:700; font-size:16px; padding:8px 16px; border-radius:10px;}
.admin-nav a.active,.admin-nav a:hover{background:var(--brand); color:#fff;}
table.tbl{width:100%; border-collapse:collapse; background:#fff; border-radius:12px; overflow:hidden; box-shadow:var(--shadow); font-size:15px;}
table.tbl th{background:var(--brand-soft); color:var(--brand); text-align:left; padding:10px 12px; white-space:nowrap;}
table.tbl td{padding:10px 12px; border-top:1px solid var(--line); vertical-align:middle;}
table.tbl .ops{white-space:nowrap;}
table.tbl .ops button,table.tbl .ops a{display:inline-block; width:auto; margin:0 4px 0 0; padding:6px 12px; font-size:14px; border-radius:8px;}
.tag{display:inline-block; padding:2px 10px; border-radius:999px; font-size:13px; font-weight:700;}
.tag-ok{background:#e6f7ec;color:#1a8a4a;} .tag-warn{background:#fff4e0;color:#c47d00;} .tag-bad{background:#ffe7e7;color:#c0392b;}
.stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:16px 0;}
.stat-grid .card .big{font-size:30px; color:var(--brand);}
@media(max-width:760px){.stat-grid{grid-template-columns:1fr 1fr;}}
.inline-form{display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; background:var(--brand-soft);
  border-radius:14px; padding:14px; margin:12px 0;}
.inline-form .f{flex:1 1 140px;}
.inline-form .f label{margin:0 0 4px; font-size:14px;}
.inline-form .f input,.inline-form .f select{padding:9px 10px; font-size:16px;}
.inline-form button{width:auto; margin:0; padding:10px 18px;}
.page-title{display:flex; align-items:center; justify-content:space-between; margin:18px 0 6px;}
.page-title h2{color:var(--brand); margin:0;}