/* 一起来泡茶 · bailu-pages 趣味场景互动
   基调：暖茶褐（变量集中在此，换基调只改变量） */

:root{
  --bg:#f6f1e7;
  --card:#fffdf6;
  --ink:#3d3226;
  --muted:#7a6a54;
  --primary:#9a6b44;
  --deep:#6f4a2e;
  --seal:#b5442e;
  --green:#5f7f58;
  --amber:#c98a3d;
  --line:#e6dac3;
  --soft:#f0e7d6;
  --zone:rgba(95,127,88,.3);
  --serif:Georgia,"Times New Roman","Songti SC","STSong","SimSun",serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
  font-size:16px;
  line-height:1.6;
  min-height:100vh;
}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

#app{max-width:520px;margin:0 auto;padding:14px 16px 44px}

/* 顶栏与进度 */
.app-top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.brand{font-size:13px;color:var(--muted);letter-spacing:1px}
.chip{font-size:13px;background:var(--soft);color:var(--deep);border-radius:999px;padding:3px 12px;white-space:nowrap}
.bar{height:4px;background:var(--soft);border-radius:3px;margin-top:10px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--primary);border-radius:3px;transition:width .4s}
.backlink{font-size:13px;color:var(--primary);text-decoration:none}

/* 屏主体 */
.screen-body{padding:16px 0 8px;display:flex;flex-direction:column;gap:12px}
.banner{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:9px 13px;font-size:14px;color:var(--deep)}
.h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.h b{font-size:22px;font-weight:600}
.s-chip{font-size:13px;color:var(--deep);background:var(--soft);padding:3px 11px;border-radius:999px;white-space:nowrap}
.tip{font-size:15px;color:var(--muted);line-height:1.55}
.sec{font-size:16px;color:var(--deep);font-weight:600;margin-top:4px}
.tiny{font-size:13px;color:var(--muted);line-height:1.5}

/* 按钮 */
.btn{display:block;width:100%;text-align:center;background:var(--primary);color:#fff;border:none;
  border-radius:999px;padding:14px 0;font-size:17px;letter-spacing:3px;cursor:pointer;
  min-height:52px;transition:filter .15s}
.btn:active{filter:brightness(.93)}
.btn[disabled]{opacity:.45;cursor:default}
.btn2{display:block;width:100%;text-align:center;background:var(--card);color:var(--deep);
  border:2px solid var(--line);border-radius:999px;padding:12px 0;font-size:16px;cursor:pointer;min-height:48px}
.linky{display:block;width:100%;background:none;border:none;color:var(--primary);font-size:14px;
  text-align:center;cursor:pointer;padding:10px 0;min-height:44px}
.linky:hover{text-decoration:underline}

/* 插画位 */
.ph{border:2px dashed var(--primary);background:var(--card);border-radius:16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  color:var(--muted);font-size:13px;text-align:center;padding:12px;line-height:1.5}
.ph .ph-t{font-size:15px;color:var(--deep)}
.ph.real{border:2px solid var(--line);padding:0;overflow:hidden;background:var(--soft)}
.ph.real img{width:100%;height:100%;object-fit:cover;display:block}
.mini-real{height:58px;border-radius:12px;overflow:hidden;background:#f0e7d6}
.mini-real img{width:100%;height:100%;object-fit:contain;display:block}

/* 知识卡与反馈 */
.kcard{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--primary);
  border-radius:14px;padding:12px 14px}
.ktag{display:inline-block;font-size:12px;color:var(--primary);border:1px solid var(--line);
  border-radius:999px;padding:1px 10px;margin-bottom:6px;background:var(--bg)}
.kcard b{font-size:16px;font-weight:600;display:block}
.kcard p{font-size:14px;color:var(--muted);line-height:1.65;margin-top:4px}
.fb{background:var(--soft);border-radius:14px;padding:10px 14px;font-size:15px;line-height:1.6;color:var(--deep)}
.fb .ok{color:var(--green);font-weight:600}
.fb .re{color:var(--primary);font-weight:600}

/* 组切换与点选 */
.gchips{display:flex;gap:10px}
.g{flex:1;border:2px solid var(--line);background:var(--card);border-radius:999px;padding:10px 0;
  font-size:15px;text-align:center;color:var(--muted);cursor:pointer;min-height:48px}
.g.on{background:var(--primary);border-color:var(--primary);color:#fff}
.opt{display:flex;flex-wrap:wrap;gap:10px}
.o{border:2px solid var(--line);background:var(--card);border-radius:14px;padding:10px 16px;
  font-size:16px;color:var(--ink);cursor:pointer;min-height:48px}
.o.on{background:var(--primary);border-color:var(--primary);color:#fff}
.o.did{background:var(--soft);border-color:var(--soft);color:var(--muted)}
.o[disabled]{opacity:.5;cursor:default}

/* 茶品卡 */
.tea-card{width:100%;text-align:left;background:var(--card);border:2px solid var(--line);
  border-radius:16px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;
  gap:10px;cursor:pointer;min-height:64px}
.tea-card.on{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.tc-name{font-size:16px;font-weight:600}
.tc-line{font-size:13px;color:var(--muted);margin-top:2px}
.tc-ck{color:var(--primary);font-size:20px;flex:none}
.tc-link{font-size:12px;color:var(--primary);text-decoration:none;margin-left:8px;white-space:nowrap}

/* 器具格 */
.ut-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ut-card{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:10px;
  text-align:center;cursor:pointer}
.ut-card.on{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.ut-card .ph-mini{height:58px;border-radius:12px;padding:6px}
.ut-card b{font-size:16px;font-weight:600;display:block;margin-top:6px}
.ut-card em{font-style:normal;font-size:13px;color:var(--muted);display:block}

/* 称量面板 */
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.bigNum{font-size:44px;font-weight:600;color:var(--deep);line-height:1;font-variant-numeric:tabular-nums}
.unit{font-size:15px;color:var(--muted);margin-left:4px;font-weight:400}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.chip2{font-size:13px;color:var(--deep);background:var(--soft);border-radius:999px;padding:3px 11px;white-space:nowrap}
.chip2.zn{background:var(--zone)}
.scale{position:relative;height:16px;border-radius:9px;background:var(--soft);margin:14px 2px 4px}
.scale .band{position:absolute;top:0;bottom:0;border-radius:9px;background:var(--zone)}
.scale .mark{position:absolute;top:-4px;width:5px;height:24px;border-radius:3px;background:var(--deep);margin-left:-2px}
.scaleLbl{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}

/* 演示区 */
.demoRow{display:flex;gap:16px;align-items:center}
.vd{font-size:14px;line-height:1.55;color:var(--deep);min-height:44px}
.trk{stroke:var(--soft)}
.zoneArc{stroke:var(--green);opacity:.85}
.needle{stroke:var(--deep)}
.hubF{fill:var(--deep)}
.lbl{fill:var(--muted);font-size:12px}
.gTrk{fill:var(--soft)}
.gZone{fill:var(--green);opacity:.85}
.gFill{fill:var(--amber)}
.gFill.hot{fill:var(--green)}

/* 茶汤杯 */
.soup{width:84px;height:72px;border:3px solid var(--line);border-radius:8px 8px 20px 20px;
  position:relative;overflow:hidden;background:var(--card);flex:none}
.soup .tea{position:absolute;left:0;right:0;bottom:0;background:var(--amber);transition:opacity .5s}
.soup .hl{position:absolute;top:10%;left:12%;width:10px;height:34%;background:rgba(255,255,255,.4);border-radius:5px}

/* 结算 */
.resRow{display:flex;gap:14px;align-items:center}
.rScore{font-size:52px;font-weight:600;color:var(--deep);line-height:1;font-variant-numeric:tabular-nums}
.tchip{background:var(--seal);color:#fff;border-radius:999px;padding:3px 14px;font-size:15px;display:inline-block;margin-top:8px}
.rWords{font-size:14px;color:var(--muted);margin-top:6px}
.stlist{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.st{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);
  border-bottom:1px dashed var(--line);padding:5px 0}
.st .tn{font-variant-numeric:tabular-nums}
.badges{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bdg{width:38px;height:38px;border-radius:50%;border:2px dashed var(--line);
  display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--muted);flex:none}
.bdg.got{background:var(--seal);border:2px solid var(--seal);color:#fff}
.bTxt{font-size:13px;color:var(--muted);margin-left:4px}

/* 证书 */
.cert{background:var(--card);border:2px solid var(--seal);outline:1px solid var(--line);
  outline-offset:4px;border-radius:8px;padding:22px 16px 20px;text-align:center;position:relative;margin:6px 2px}
.c-brand{font-size:13px;letter-spacing:8px;color:var(--muted)}
.c-title{font-size:30px;letter-spacing:14px;margin:10px 0 12px;font-weight:600;font-family:var(--serif)}
.c-line{font-size:15px;line-height:1.7}
.c-score{font-size:17px;color:var(--deep);margin-top:10px}
.c-date{font-size:13px;color:var(--muted);margin-top:12px}
.c-seal{position:absolute;right:18px;bottom:16px;width:54px;height:54px;border:3px solid var(--seal);
  border-radius:50%;color:var(--seal);display:flex;align-items:center;justify-content:center;
  font-size:24px;transform:rotate(-12deg);opacity:.9}
.cvn{width:100%;height:auto;border-radius:8px;display:block}

/* 首屏 */
.hero{text-align:center;padding:14px 0 2px}
.hero .h0{font-size:14px;letter-spacing:6px;color:var(--muted)}
.hero .h1{font-size:30px;letter-spacing:8px;font-weight:600;font-family:var(--serif);margin-top:6px}

/* 覆盖层（配置加载失败） */
.overlay{position:fixed;inset:0;background:rgba(61,50,38,.55);display:flex;align-items:center;
  justify-content:center;padding:24px;z-index:10}
.overlay .box{background:var(--card);border-radius:16px;padding:24px 20px;max-width:320px;
  text-align:center;display:flex;flex-direction:column;gap:14px}

/* PC 横版（≥760px）：内容列居中，两侧自动填充背景色——
   两侧铺略深一档的茶色底＋极淡茶圈纹样，内容列保持纸色并加细边线 */
@media (min-width: 760px){
  body{
    background-color:#ece2cf;
    background-image:
      radial-gradient(circle at 10% 16%, rgba(154,107,68,.07) 0 46px, transparent 47px),
      radial-gradient(circle at 90% 28%, rgba(154,107,68,.06) 0 62px, transparent 63px),
      radial-gradient(circle at 6% 68%, rgba(95,127,88,.06) 0 40px, transparent 41px),
      radial-gradient(circle at 93% 84%, rgba(154,107,68,.07) 0 52px, transparent 53px),
      radial-gradient(circle at 15% 46%, rgba(154,107,68,.04) 0 28px, transparent 29px),
      radial-gradient(circle at 85% 60%, rgba(95,127,88,.05) 0 34px, transparent 35px);
  }
  #app{
    background:var(--bg);
    min-height:100vh;
    border-left:1px solid var(--line);
    border-right:1px solid var(--line);
    box-shadow:0 0 44px rgba(90,60,30,.10);
    padding:22px 26px 60px;
  }
}

@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}