/* ============================================================================
   面包钟 · oven.css
   ----------------------------------------------------------------------------
   本款的尺度（自定，全应用只用这一套）：
     字号 12 / 14 / 17 / 22 / 32　间距 6 / 10 / 16 / 26
     圆角 3（弧段端点）/ 14（覆盖层上沿）/ 胶囊（按钮与开关）；其余一律直角
     分隔：**不用线** —— 全应用的分隔都由"刻度点"承担（15 分钟一个点）
   色名（自命名，面包房语义）：
     crumb 面包瓤（页底）/ crust 面包皮（盘面与正文）/ scorch 烤痕金（要动手的弧与主色）
     rye 黑麦（在等的弧）/ dust 面粉灰（刻度与次要字）/ night 夜（睡觉环带）/ ember 火（冲突）
   ========================================================================== */
:root {
  --crumb: #f3ece0;
  --paper: #faf6ee;
  --crust: #4a2f1c;
  --crust-deep: #2c1c10;
  --scorch: #c8761f;
  --scorch-hi: #e9a03c;
  --rye: #7d8f6a;
  --dust: #9c8a72;
  --night: #21313f;
  --ember: #c33f22;
  --fs1: 12px; --fs2: 14px; --fs3: 17px; --fs4: 22px; --fs5: 32px;
  --sp1: 6px; --sp2: 10px; --sp3: 16px; --sp4: 26px;
  --serif: Georgia, 'Times New Roman', 'Songti SC', 'SimSun', serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
[hidden] { display: none !important; }
body {
  background: var(--crumb); color: var(--crust);
  font: var(--fs2)/1.5 -apple-system, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  display: flex; flex-direction: column; overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-tap-highlight-color: transparent;
}
b, .rt, .rd b { font-variant-numeric: tabular-nums; }

/* ---------- 顶部读数带 ---------- */
#bar {
  display: flex; gap: 1px; padding: var(--sp1) var(--sp2) 0; background: var(--crumb);
  border-bottom: 0; flex: 0 0 auto;
}
.rd {
  flex: 1 1 0; position: relative; padding: var(--sp1) var(--sp1) var(--sp2);
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.rd .rl { font-size: var(--fs1); color: var(--dust); white-space: nowrap; }
.rd .rl i { font-style: normal; color: var(--scorch); }
.rd b { font: 600 15px/1.2 var(--serif); letter-spacing: .01em; white-space: nowrap; }
.rd#rdOutBox b, .rd.now b { font-size: var(--fs3); }
.rd .stp { display: flex; gap: 3px; margin-top: 3px; }
.rd .stp button {
  width: 26px; height: 24px; font-size: var(--fs2); line-height: 1; cursor: pointer;
  border: 1px solid var(--dust); background: var(--paper); color: var(--crust); border-radius: 3px;
}
.rd .stp button:active { background: var(--scorch); border-color: var(--scorch); color: #fff; }
.rd.now b { color: var(--scorch); }
#rdSleepBox { cursor: pointer; }
#rdSleepBox:active { background: #eae1d1; }

/* ---------- 盘 ---------- */
#stage { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; padding-top: var(--sp1); }
#dialHost { width: min(88vw, 34vh); max-width: 340px; touch-action: none; }
#dialHost svg { display: block; width: 100%; height: auto; }
.face { stroke: var(--crust-deep); }
.face-ring { fill: none; stroke: #d9cdb8; stroke-width: 1.5; }
.h-num { font: 600 18px var(--serif); fill: #cdbba1; }
.t-min { fill: #6f5c46; }
.t-hour { fill: #9c8a72; }
.t-six { fill: #e3d3b6; }
.band { fill: none; stroke: var(--night); opacity: .42; }
.band-label { font-size: 13px; fill: #9fb3c4; letter-spacing: .18em; }
.arc { fill: none; }
.a-fire { stroke: #d4661f; }
.a-hand { stroke: var(--scorch-hi); }
.a-wait { stroke: var(--rye); }
.a-par { stroke: #6f7f96; }
.arc.quick { stroke: #f7dfa2; stroke-dasharray: 6 5; }
.arc-hot, .hot { stroke: #fff; }
.arc-hit { fill: none; stroke: transparent; cursor: pointer; }
.p-out { stroke: var(--scorch-hi); stroke-width: 3; }
.p-start { stroke: #e6d6bb; stroke-width: 2; opacity: .8; }
.p-start.locked { opacity: .38; stroke-dasharray: 5 6; }
.p-now { stroke: #fff; stroke-width: 1.6; opacity: .85; }
.p-now-dot { fill: #fff; }
.p-label { font: 600 14px var(--serif); }
.l-out { fill: var(--scorch-hi); }
.l-start { fill: #e6d6bb; opacity: .85; }
.l-start.locked { opacity: .5; }
.knob-nib { fill: var(--paper); stroke: var(--crust); stroke-width: 3; }
.kn-out { fill: var(--scorch-hi); }
.kn-start { fill: #e6d6bb; }
.knob-hit { fill: transparent; cursor: grab; }
.mid-big { font: 600 var(--fs4) var(--serif); fill: var(--paper); }
.mid-name { font: 600 17px var(--serif); fill: #e3d3b6; }
.mid-sub { font-size: 13px; fill: #b9a68c; }

/* ---------- 下一步 / 提示条 ---------- */
#next {
  margin: var(--sp1) var(--sp3) 0; font-size: var(--fs3); min-height: 2.1em;
  text-align: center; color: var(--crust);
}
#next.k-hand { color: var(--ember); font-weight: 600; }
#next.k-done { color: var(--scorch); font-weight: 600; }
#flag {
  margin: 2px var(--sp3) 0; font-size: var(--fs1); color: var(--dust); text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
#flag.warn { color: var(--ember); }
#flag.late { color: var(--scorch); }
#flag.calm { color: var(--rye); }
#flagBtn { display: flex; gap: var(--sp1); justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.mini {
  font-size: var(--fs1); padding: 5px 9px; cursor: pointer; background: var(--paper);
  color: var(--crust); border: 1px solid var(--dust); border-radius: 3px;
}
.mini:active { background: var(--scorch); color: #fff; border-color: var(--scorch); }

/* ---------- 首屏那一处广告位（规则 10：位置摆首屏，文案别像推销） ---------- */
#adRow { display: flex; align-items: center; gap: var(--sp2); flex-wrap: wrap; margin: var(--sp1) var(--sp3) 0; position: relative; }
#adRow[hidden] { display: none !important; }
.adwrap { display: flex; align-items: center; gap: var(--sp1); position: relative; }
.adbadge {
  position: absolute; top: -7px; right: -4px; z-index: 2; font-size: 10px; line-height: 1;
  padding: 2px 4px; border-radius: 2px; background: var(--scorch-hi); color: #fff; letter-spacing: .04em;
}
.adbtn {
  font-size: var(--fs1); padding: 7px 11px; cursor: pointer; background: var(--paper);
  color: var(--crust); border: 1px dashed var(--scorch); border-radius: 3px;
}
.adbtn:active { background: var(--scorch); color: #fff; }
.adbtn:disabled { opacity: .5; }
#bMore { border-color: var(--scorch); }
.adhint { font-size: var(--fs1); color: var(--dust); flex: 0 1 auto; }

/* ---------- 清单（分隔靠刻度点，不靠线） ---------- */
#list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-top: var(--sp1);
  padding: 0 var(--sp2) var(--sp2);
  background-image: radial-gradient(circle, var(--dust) 1px, transparent 1.4px);
  background-size: 10px 10px; background-position: 0 0; background-repeat: repeat-x;
  -webkit-overflow-scrolling: touch;
}
.lhead { position: sticky; top: 0; display: flex; justify-content: space-between; font-size: var(--fs1); color: var(--dust); padding: var(--sp1) 2px; background: var(--crumb); }
.row {
  display: grid; grid-template-columns: 52px 1fr auto auto; gap: var(--sp1); align-items: baseline;
  padding: var(--sp1) 2px; cursor: pointer; border-radius: 3px;
  background-image: radial-gradient(circle, #d5c8b2 1px, transparent 1.4px);
  background-size: 9px 9px; background-position: 0 0; background-repeat: repeat-x;
}
.row .rt { font: 600 var(--fs2) var(--serif); color: var(--crust); }
.row .rn { font-size: var(--fs2); }
.row .rm { font-size: var(--fs1); color: var(--dust); }
.row .rc { font-size: var(--fs1); color: var(--rye); white-space: nowrap; }
.row.is-hand .rc { color: var(--scorch); }
.row.is-quick .rc { color: #b98f3e; }
.row.is-fire .rn { font-weight: 600; }
.row.picked { background: #ece2cf; }
.empt { padding: var(--sp4) var(--sp3); text-align: center; }
.empt .e1 { font: 600 var(--fs4) var(--serif); margin: 0 0 var(--sp1); }
.empt .e2 { color: var(--dust); margin: 0 0 var(--sp2); font-size: var(--fs2); }
.empt.err .e1 { color: var(--ember); }
.quick { display: flex; flex-direction: column; gap: var(--sp1); margin-top: var(--sp2); }
.qcard {
  text-align: left; padding: var(--sp2); background: var(--paper); border: 1px solid var(--dust);
  border-radius: 3px; cursor: pointer; display: flex; flex-direction: column; gap: 2px;
}
.qcard b { font: 600 var(--fs3) var(--serif); }
.qcard span { font-size: var(--fs1); color: var(--dust); }

/* ---------- 底部动作带 ---------- */
#acts { flex: 0 0 auto; display: flex; gap: var(--sp1); padding: var(--sp1) var(--sp2); background: var(--crumb); }
.act {
  flex: 1 1 0; padding: var(--sp2) 4px; font-size: var(--fs2); cursor: pointer; background: var(--paper);
  color: var(--crust); border: 1px solid var(--dust); border-radius: 3px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.act.main { flex: 1.6 1 0; background: var(--scorch); border-color: var(--scorch); color: #fff; border-radius: 999px; font-weight: 600; }
.act:active { transform: translateY(1px); }
.ic { display: block; width: 15px; height: 15px; background-repeat: no-repeat; background-size: 15px 15px; }
.i-recipe { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%234a2f1c' stroke-width='1.8'%3E%3Cpath d='M3 5h14M3 10h14M3 15h9'/%3E%3C/svg%3E"); }
.i-note { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%234a2f1c' stroke-width='1.8'%3E%3Crect x='4' y='3' width='12' height='14'/%3E%3Cpath d='M7 7h6M7 10h6M7 13h3'/%3E%3C/svg%3E"); }
.i-about { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%234a2f1c' stroke-width='1.8'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='M10 9v5M10 6.4v.2'/%3E%3C/svg%3E"); }
#foot { flex: 0 0 auto; margin: 0; padding: 0 var(--sp2) var(--sp1); font-size: var(--fs1); color: var(--dust); text-align: center; }
#foot.bad { color: var(--ember); }

/* ---------- 首屏那一行 ---------- */
#consent { flex: 0 0 auto; display: flex; gap: var(--sp1); align-items: flex-start; padding: 0 var(--sp3) var(--sp2); pointer-events: auto; }
#consent input { margin: 2px 0 0; width: 15px; height: 15px; accent-color: var(--scorch); flex: 0 0 auto; }
#consent label { font-size: var(--fs1); color: var(--dust); }

/* ---------- 覆盖层 ---------- */
.mask { position: fixed; inset: 0; background: rgba(44, 28, 16, .42); display: flex; align-items: flex-end; z-index: 40; }
.sheet {
  width: 100%; max-height: 88vh; overflow-y: auto; background: var(--paper);
  border-top: 1px solid var(--crust); border-radius: 14px 14px 0 0;
  padding: var(--sp3) var(--sp3) calc(var(--sp4) + env(safe-area-inset-bottom));
  animation: up .18s ease-out;
}
@keyframes up { from { transform: translateY(14px); opacity: .6; } to { transform: none; opacity: 1; } }
.ovclose {
  float: right; font-size: var(--fs1); padding: 4px 10px; border: 1px solid var(--dust);
  background: none; color: var(--dust); border-radius: 3px; cursor: pointer;
}
.ovhead { margin-bottom: var(--sp2); }
.ovhead h2 { font: 600 var(--fs4) var(--serif); margin: 0 0 4px; }
.ovsub { font-size: var(--fs1); color: var(--dust); margin: var(--sp1) 0; }
.ovsub.slow { color: var(--scorch); }
.rcard, .alt, .nrow, .kvr, .srow {
  padding: var(--sp2) 0; border-top: 0;
  background-image: radial-gradient(circle, #d9cdb8 1px, transparent 1.4px);
  background-size: 9px 9px; background-repeat: repeat-x;
}
.rcard, .alt { cursor: pointer; }
.rcard.cur { border-left: 3px solid var(--scorch); padding-left: var(--sp2); }
.rh { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp1); }
.rh b { font: 600 var(--fs3) var(--serif); }
.rstyle { font-size: var(--fs1); color: var(--scorch); }
.rmix { font-size: var(--fs1); color: var(--dust); margin: 4px 0; }
.rstat { font-size: var(--fs1); color: var(--rye); margin: 2px 0; }
.rtip { font-size: var(--fs1); color: var(--dust); margin: 2px 0; }
.nadd { padding: var(--sp2) 0 var(--sp1); }
.nmon { font-size: var(--fs1); color: var(--dust); letter-spacing: .1em; padding-top: var(--sp2); }
.nrow { display: grid; grid-template-columns: 84px 1fr auto auto 26px; gap: var(--sp1); align-items: baseline; }
.nrow .rstars { color: var(--scorch); font-size: var(--fs1); }
.nrow .rmeta, .nrow .rnote { font-size: var(--fs1); color: var(--dust); }
.nrow .x { border: 1px solid #d9cdb8; background: none; color: var(--dust); border-radius: 3px; font-size: var(--fs1); cursor: pointer; padding: 2px 0; }
.nform { background: var(--crumb); padding: var(--sp2); border-radius: 3px; margin-bottom: var(--sp2); }
.stars { display: flex; gap: var(--sp1); margin: var(--sp1) 0; }
.star { font-size: var(--fs4); background: none; border: 0; color: #ded2bc; cursor: pointer; padding: 0; }
.star.on { color: var(--scorch); }
.tags { display: flex; gap: var(--sp1); flex-wrap: wrap; margin-bottom: var(--sp2); }
.tag { font-size: var(--fs1); padding: 4px 9px; border: 1px solid var(--dust); background: var(--paper); border-radius: 3px; cursor: pointer; }
.tag.on { background: var(--scorch); border-color: var(--scorch); color: #fff; }
.main {
  width: 100%; padding: var(--sp2); font-size: var(--fs2); font-weight: 600; cursor: pointer;
  background: var(--scorch); color: #fff; border: 1px solid var(--scorch); border-radius: 999px;
}
.skel { padding: var(--sp2) 0; color: var(--scorch); }

/* 方案 */
.alt { padding: var(--sp2) 0; }
.alt.best { border-left: 3px solid var(--scorch); padding-left: var(--sp2); }
.ah { display: flex; justify-content: space-between; align-items: baseline; }
.ah b { font: 600 var(--fs2) var(--serif); }
.acost { font-size: var(--fs1); color: var(--dust); }
.anote { font-size: var(--fs1); color: var(--dust); margin: 3px 0; }
.aline { font-size: var(--fs1); color: var(--rye); margin: 5px 0; }
.more { padding-top: var(--sp2); }
.adm {
  width: 100%; text-align: left; font-size: var(--fs1); padding: 9px var(--sp2); cursor: pointer;
  background: none; color: var(--dust); border: 1px dashed var(--dust); border-radius: 3px;
}
.adm:active { color: var(--crust); }
.kv { margin-bottom: var(--sp2); }
.kvr { display: flex; gap: var(--sp2); }
.kvr.bad .kv2 { color: var(--ember); }
.kk { flex: 0 0 34%; color: var(--dust); font-size: var(--fs1); }
.kv2 { font-size: var(--fs1); }
.sw { display: flex; gap: var(--sp2); align-items: flex-start; padding: var(--sp2) 0; background-image: radial-gradient(circle, #d9cdb8 1px, transparent 1.4px); background-size: 9px 9px; background-repeat: repeat-x; }
.switch {
  flex: 0 0 auto; min-width: 62px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--dust); background: var(--paper); color: var(--dust); font-size: var(--fs1);
}
.switch.on { background: var(--scorch); border-color: var(--scorch); color: #fff; }
.swl { font-size: var(--fs1); color: var(--dust); }
.obtns { display: flex; gap: var(--sp1); flex-wrap: wrap; }
.sd { margin: var(--sp2) 0; }
.srow { display: flex; align-items: center; gap: var(--sp2); padding: var(--sp2) 0; }
.sl { flex: 1 1 auto; font-size: var(--fs2); }
.sv { font: 600 var(--fs3) var(--serif); min-width: 76px; text-align: center; }
.stp, .srow button { width: 34px; height: 30px; font-size: var(--fs4); line-height: 1; cursor: pointer; background: var(--paper); color: var(--crust); border: 1px solid var(--dust); border-radius: 3px; }

/* ---------- 轻提示 ---------- */
#toast {
  position: fixed; left: 50%; top: 92px; transform: translateX(-50%);
  max-width: 86vw; padding: 9px var(--sp3); font-size: var(--fs2); text-align: center;
  background: var(--crust-deep); color: var(--crumb); border-radius: 3px; z-index: 60;
}
#toast.on { animation: fade .16s ease-out; }
#toast.ok { background: #3f5c3a; }
#toast.bad { background: var(--ember); }
#toast.info { background: #3b4a5c; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 启动过程 ---------- */
#boot { position: fixed; inset: 0; background: var(--crumb); display: flex; align-items: center; justify-content: center; z-index: 90; transition: opacity .3s; }
#boot.gone { opacity: 0; }
.bootbox { width: min(84vw, 360px); text-align: center; }
.bootbox h1 { font: 600 var(--fs4) var(--serif); margin: var(--sp2) 0 var(--sp1); }
.bootbox p { font-size: var(--fs1); color: var(--dust); margin: var(--sp1) 0; }
.bootbox .bar { height: 2px; background: #ded2bc; margin: var(--sp3) 0; }
.bootbox .bar i { display: block; height: 2px; width: 0; background: var(--scorch); transition: width .16s linear; }
.bootfoot { letter-spacing: .04em; }
#bootErr { color: var(--ember); }
.mark { display: flex; gap: 6px; justify-content: center; }
.mark i { width: 10px; height: 10px; background: var(--scorch); border-radius: 50%; animation: rise 1.05s infinite ease-in-out; }
.mark i:nth-child(2) { animation-delay: .16s; background: var(--scorch-hi); }
.mark i:nth-child(3) { animation-delay: .32s; background: var(--rye); }
@keyframes rise { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-7px); opacity: 1; } }