/* =========================================================
   定量计算器 · 样式（大字号 / 大按钮 / 高对比）
   ========================================================= */
:root{
  --bg:#FFF7EC;
  --ink:#2C1B10;
  --ink-2:#67482F;
  --muted:#9A7C63;
  --line:#EAD7BE;
  --line-2:#F0E1CC;
  --hot:#E23B1E;
  --hot-d:#B92A11;
  --r-l:30px;
  --r-m:22px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;margin:0;}
body{
  background:#FFF7EC;
  background-image:radial-gradient(1100px 620px at 50% -8%, #FFFEF9 0%, #FFF7EC 52%, #FCEDD9 100%);
  color:var(--ink);
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Segoe UI",system-ui,-apple-system,sans-serif;
  font-weight:700;
  overflow:hidden;
  -webkit-user-select:none;user-select:none;
  -webkit-text-size-adjust:100%;
  touch-action:manipulation;
}
img{-webkit-user-drag:none;user-select:none;}
button{font-family:inherit;font-weight:800;color:inherit;border:0;background:none;padding:0;cursor:pointer;touch-action:manipulation;}
button:focus-visible{outline:4px solid #FFC7B4;outline-offset:3px;}
[hidden]{display:none!important;}

.app{
  height:100vh;
  height:100dvh;
  max-width:1040px;
  margin:0 auto;
  padding:calc(8px + env(safe-area-inset-top)) clamp(12px,3vw,26px) calc(10px + env(safe-area-inset-bottom));
  display:flex;
  flex-direction:column;
  gap:clamp(6px,1.2vh,14px);
}

/* ---------------- 顶栏 ---------------- */
.topbar{display:flex;align-items:center;gap:8px;flex:0 0 auto;min-height:42px;}
.brand{flex:1;display:flex;align-items:center;gap:9px;font-size:clamp(14px,3.6vw,17px);font-weight:700;letter-spacing:.16em;color:var(--muted);}
.brand::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--hot);box-shadow:0 0 0 4px #FFE2D7;}
.top-actions{display:flex;gap:8px;}
.icon-btn{
  width:clamp(38px,9.6vw,44px);height:clamp(38px,9.6vw,44px);border-radius:14px;
  background:#fff;border:2px solid var(--line);color:var(--ink-2);
  display:grid;place-items:center;line-height:1;box-shadow:0 3px 0 var(--line-2);
  transition:transform .08s,box-shadow .08s,opacity .2s;
}
.icon-btn svg{width:58%;height:58%;display:block;}
.icon-btn .ic-off{display:none;}
.icon-btn.is-off .ic-on{display:none;}
.icon-btn.is-off .ic-off{display:block;}
.icon-btn.is-off{opacity:.6;}
.icon-btn:active{transform:translateY(3px);box-shadow:0 0 0 var(--line-2);}
.icon-btn:active svg{transform:scale(.92);}

/* ---------------- 屏幕 ---------------- */
#main{flex:1;min-height:0;display:flex;}
.screen{
  display:none;flex:1;min-height:0;flex-direction:column;
  gap:clamp(8px,1.6vh,16px);
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;
}
.screen::-webkit-scrollbar{display:none;}
.screen.is-active{display:flex;}

/* ---------------- 提示语 ---------------- */
.prompt{display:flex;align-items:center;gap:clamp(8px,2vw,12px);flex:0 0 auto;font-size:clamp(21px,5.4vw,30px);line-height:1.2;}
.step{display:inline-grid;place-items:center;min-width:1.95em;height:1.95em;padding:0 .2em;border-radius:.72em;background:#FFE2D7;color:var(--hot);font-size:.7em;}
.prompt-text{flex:1;}
.speak-btn{
  width:clamp(40px,10vw,48px);height:clamp(40px,10vw,48px);border-radius:50%;
  background:#fff;border:2px solid var(--line);color:var(--ink-2);
  display:grid;place-items:center;flex:0 0 auto;box-shadow:0 3px 0 var(--line-2);
}
.speak-btn svg{width:52%;height:52%;display:block;}
.speak-btn:active{transform:translateY(3px);box-shadow:none;}
.chip{background:#FFEFDA;border-radius:999px;padding:.1em .8em;color:var(--ink-2);white-space:nowrap;font-size:.86em;font-weight:700;}
.chip b{font-variant-numeric:tabular-nums;}

/* ---------------- 数字显示 ---------------- */
.readout{
  position:relative;flex:0 0 auto;background:#fff;border:3px solid var(--line);
  border-radius:var(--r-l);box-shadow:0 6px 0 var(--line-2);
  padding:clamp(6px,1.4vh,20px) clamp(14px,4vw,26px);
  display:flex;align-items:baseline;justify-content:center;gap:.1em;overflow:hidden;
}
.readout::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:linear-gradient(90deg,#FFD9C9,#FFF1E2);opacity:.7;}
.readout-value{
  font-size:clamp(54px,17vw,120px);line-height:1.04;font-weight:900;
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
.readout.is-long .readout-value{font-size:clamp(40px,12vw,90px);}
.readout-unit{font-size:clamp(22px,5.6vw,38px);color:var(--muted);font-weight:700;}
.readout.pop .readout-value{animation:pop .15s ease-out;}
@keyframes pop{from{transform:scale(1.07);}to{transform:scale(1);}}
.readout.shake{animation:shake .4s ease-in-out;}
@keyframes shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-9px);}
  40%{transform:translateX(9px);}
  60%{transform:translateX(-5px);}
  80%{transform:translateX(5px);}
}

/* ---------------- 数字键盘 ---------------- */
.keypad{
  flex:1;min-height:clamp(240px,44vh,400px);
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);
  gap:clamp(8px,1.6vw,14px);
}
.key{
  background:#fff;border:2px solid var(--line);border-radius:clamp(18px,4.4vw,26px);
  box-shadow:0 5px 0 var(--line-2);font-size:clamp(26px,8.4vw,48px);font-weight:800;
  display:grid;place-items:center;transition:transform .07s,box-shadow .07s;
}
.key svg{width:44%;height:44%;display:block;}
.key:active{transform:translateY(4px);box-shadow:0 1px 0 var(--line-2);}
.key-fn{background:#FFF1E1;color:var(--ink-2);font-size:clamp(22px,6.4vw,36px);}
.key-dot{font-size:0;}
.key-dot::after{content:"";display:block;width:clamp(12px,3.4vw,18px);height:clamp(12px,3.4vw,18px);border-radius:50%;background:var(--ink-2);}

/* ---------------- 按钮 ---------------- */
.action-row{display:flex;gap:clamp(8px,2vw,14px);flex:0 0 auto;}
.btn{
  height:clamp(56px,8.4vh,76px);border-radius:clamp(18px,4.4vw,26px);
  display:flex;align-items:center;justify-content:center;gap:.4em;
  padding:0 clamp(10px,3vw,22px);font-size:clamp(21px,5.8vw,30px);letter-spacing:.06em;
  transition:transform .07s,box-shadow .07s;
}
.btn-primary{background:linear-gradient(180deg,#F4552F,#DA3218);color:#fff;box-shadow:0 6px 0 var(--hot-d);}
.btn-primary:active{transform:translateY(4px);box-shadow:0 2px 0 var(--hot-d);}
.btn-ghost{background:#fff;border:2px solid var(--line);color:var(--ink-2);box-shadow:0 5px 0 var(--line-2);}
.btn-ghost:active{transform:translateY(4px);box-shadow:0 1px 0 var(--line-2);}
.btn-next{flex:1;}
.btn-clear{flex:0 0 30%;}

/* ---------------- 选择口味 ---------------- */
.choices{flex:1;min-height:0;display:flex;flex-direction:column;gap:clamp(10px,1.8vh,18px);}
.choice{
  position:relative;flex:1;min-height:clamp(130px,27vh,300px);
  display:flex;align-items:center;gap:clamp(10px,3.4vw,24px);
  background:#fff;border:4px solid var(--line);border-radius:calc(var(--r-l) + 4px);
  box-shadow:0 7px 0 var(--line-2);padding:clamp(8px,1.6vh,16px) clamp(12px,3.4vw,24px);
  text-align:left;transition:transform .08s,box-shadow .08s;
}
.choice:active{transform:translateY(4px);box-shadow:0 2px 0 var(--line-2);}
.choice[data-choice="la"]{border-color:#F7BCAB;}
.choice[data-choice="yuan"]{border-color:#F1D3A3;}

.img-wrap{position:relative;display:block;flex:0 0 auto;width:min(34vh,210px);aspect-ratio:1/1;border-radius:var(--r-m);overflow:hidden;background:#FFF3E1;}
.choice[data-choice="la"] .img-wrap{background:#FFEDE7;}
.choice[data-choice="yuan"] .img-wrap{background:#FFF4E2;}
.img-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.img-ph{
  position:absolute;inset:0;display:grid;place-items:center;padding:6px;text-align:center;
  font-size:clamp(18px,4.6vw,26px);color:#CBB094;
  background:repeating-linear-gradient(45deg,#FFF7EA,#FFF7EA 11px,#FFEFDA 11px,#FFEFDA 22px);
}
.choice-name{flex:1;min-width:0;text-align:center;font-size:clamp(32px,9.6vw,56px);font-weight:900;letter-spacing:.08em;line-height:1.1;}
@media (min-width:820px){
  .choices{flex-direction:row;}
  .choice{flex-direction:column;justify-content:center;gap:clamp(8px,1.4vh,18px);}
  .choice .img-wrap{width:min(32vh,320px);}
  .choice-name{flex:0 0 auto;}
}

/* ---------------- 结果 ---------------- */
.result-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;flex:0 0 auto;font-size:clamp(16px,4.4vw,21px);color:var(--ink-2);}
.result-meta b{color:var(--ink);font-size:1.12em;font-variant-numeric:tabular-nums;}
.screen[data-screen="result"] .result-meta{width:100%;max-width:820px;margin:0 auto;}
.screen[data-screen="result"] .prompt{width:100%;max-width:820px;margin:0 auto;}
.screen[data-screen="result"] .action-row{width:100%;max-width:820px;margin:0 auto;}

.cards{
  flex:1;min-height:clamp(260px,44vh,480px);
  display:flex;flex-direction:column;gap:clamp(10px,1.8vh,18px);
  width:100%;max-width:820px;margin:0 auto;
}
.card{
  flex:1;min-height:0;display:flex;align-items:center;text-align:left;
  gap:clamp(12px,3.6vw,28px);
  background:#fff;border:3px solid var(--line);border-radius:var(--r-l);
  box-shadow:0 6px 0 var(--line-2);padding:clamp(10px,1.8vh,20px) clamp(12px,3.6vw,26px);
  overflow:hidden;cursor:pointer;
}
.card:active{transform:translateY(3px);box-shadow:0 2px 0 var(--line-2);}
.card .img-wrap{width:min(28vh,200px);}
.card-body{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(2px,1vh,10px);}
.card-label{
  display:inline-block;font-size:clamp(16px,4.2vw,22px);color:var(--ink-2);
  background:#FFF1DE;border-radius:999px;padding:.06em .8em;letter-spacing:.1em;white-space:nowrap;
}
.card-value{
  display:flex;align-items:baseline;gap:2px;font-size:clamp(44px,12.4vw,88px);
  font-weight:900;font-variant-numeric:tabular-nums;line-height:1.02;white-space:nowrap;
}
.card-value .u{font-size:.38em;color:var(--muted);font-weight:700;}
.card-value.is-sm{font-size:clamp(34px,9.4vw,72px);}
.card-value.is-xs{font-size:clamp(27px,7.4vw,58px);}
.card-value.is-xxs{font-size:clamp(22px,6vw,48px);}
.card-formula{font-size:clamp(11px,2.9vw,14px);color:#C0A98F;font-weight:600;letter-spacing:.02em;}

/* 只有一个结果时：图片在上、数字在下的大卡片 */
.cards.one{align-items:center;justify-content:center;}
.cards.one .card{flex:0 0 auto;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:clamp(6px,1.4vh,14px);}
.cards.one .card .img-wrap{width:min(34vh,300px);}
.cards.one .card-body{align-items:center;}
.cards.one .card-value{font-size:clamp(56px,16vw,110px);}
.cards.one .card-value.is-sm{font-size:clamp(40px,12vw,84px);}
.cards.one .card-value.is-xs{font-size:clamp(32px,9vw,64px);}
.cards.one .card-value.is-xxs{font-size:clamp(27px,7.6vw,56px);}

/* ---------------- 设置弹层 ---------------- */
.overlay{position:fixed;inset:0;z-index:60;background:rgba(44,27,16,.4);display:flex;align-items:flex-end;justify-content:center;}
.sheet{
  width:min(640px,100%);max-height:92dvh;overflow:auto;background:#FFFDF9;
  border-radius:28px 28px 0 0;padding:18px clamp(14px,3vw,22px) calc(18px + env(safe-area-inset-bottom));
  box-shadow:0 -12px 40px rgba(0,0,0,.16);
}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.sheet-head h2{margin:0;font-size:clamp(19px,4.6vw,23px);letter-spacing:.04em;}
.sheet-tip{margin:10px 0 16px;font-size:13.5px;line-height:1.65;color:var(--muted);font-weight:600;}
.img-row{
  display:flex;align-items:center;gap:12px;background:#fff;border:2px solid var(--line);
  border-radius:18px;padding:9px 12px;margin-bottom:9px;cursor:pointer;
}
.img-row:active{background:#FFFCF5;}
.thumb{width:54px;height:54px;border-radius:14px;object-fit:cover;background:#FFF3E1;border:1px solid #F3E4D0;flex:0 0 auto;display:block;}
.img-meta{flex:1;min-width:0;}
.img-name{font-size:15.5px;}
.img-state{font-size:12px;color:var(--muted);font-weight:600;margin-top:2px;}
.btn-small{height:42px;padding:0 15px;border-radius:13px;background:#FFF1E1;border:2px solid var(--line);color:var(--ink-2);font-size:15px;flex:0 0 auto;}
.btn-small:active{transform:translateY(2px);}
.sheet-actions{display:flex;gap:10px;margin-top:16px;}
.sheet-actions .btn{flex:1;height:56px;font-size:18px;letter-spacing:.04em;}
.sheet-actions .btn-ghost{background:#fff;}
@media (min-width:700px){
  .overlay{align-items:center;padding:24px;}
  .sheet{border-radius:28px;}
}

/* ---------------- 矮屏幕适配 ---------------- */
@media (max-height:600px){
  .keypad{min-height:200px;}
  .cards{min-height:210px;}
  .readout-value{font-size:clamp(40px,11vh,84px);}
  .card .img-wrap{width:min(24vh,160px);}
  .choice{min-height:110px;}
  .choice .img-wrap{width:min(28vh,170px);}
}