:root{
  --paper:#FAF7F2; --ink:#1F2328; --ink2:#5B6169; --ink3:#9AA0A6;
  --line:#ECE6DC; --line2:#F3EEE6;
  --red:#B23A2F; --red-d:#8A2A20; --soft:#FBEFEC;
  --card:#FFFFFF;
  --serif:"Songti SC","STSong","Noto Serif SC",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:#E9E5DD; color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; font-size:15px; line-height:1.6;
}
button{font-family:var(--sans)}
.hidden{display:none !important}
/* .devbar / .tabbar 自己写了 display:flex，会盖掉 hidden 属性带来的 UA 样式；
   真实环境下演示条必须在 DOM 里也真正隐藏，所以统一兜一层 */
[hidden]{display:none !important}

.shell{
  max-width:430px; margin:0 auto; min-height:100vh; background:var(--paper);
  display:flex; flex-direction:column; position:relative;
  box-shadow:0 0 0 1px rgba(0,0,0,.04), 0 12px 40px rgba(60,50,35,.10);
}
.screens{flex:1; padding-bottom:calc(72px + env(safe-area-inset-bottom)); position:relative}
.loading{padding:80px 20px; text-align:center; color:var(--ink3); font-size:13px}

/* ---------- 首页 ---------- */
/* 顶部原来那条「钉钉 · 工作台」已去掉：钉钉自己有导航栏，H5 里再画一条是重复的。
   去掉后 hero 就是页面第一个元素，带上安全区，iPhone 全屏打开时不会被刘海压住 */
.hero{position:relative; padding:calc(38px + env(safe-area-inset-top)) 24px 26px; overflow:hidden}
.hero::before{content:""; position:absolute; inset:11px; border:1px solid rgba(178,58,47,.16); border-radius:10px; pointer-events:none}
.hero::after{content:""; position:absolute; right:-56px; top:-64px; width:200px; height:200px;
  border-radius:50%; background:radial-gradient(circle at 40% 40%,rgba(178,58,47,.10),rgba(178,58,47,0) 68%)}
.seal{position:absolute; right:21px; top:21px; width:34px; height:34px; border:1.5px solid var(--red);
  color:var(--red); display:grid; place-items:center; font-family:var(--serif); font-size:18px;
  border-radius:4px; background:rgba(255,255,255,.65); z-index:1}
.kicker{font-size:10px; color:var(--red); letter-spacing:.22em; margin:0 0 13px}
.hero h1{font-family:var(--serif); font-size:25px; line-height:1.5; margin:0 0 11px; font-weight:500; letter-spacing:.03em}
.hero h1 em{font-style:normal; color:var(--red)}
.hero .sub{font-size:12.5px; color:var(--ink2); margin:0; letter-spacing:.07em}
/* 钉钉登录人的真实姓名，跟在「今天你的 DNA 动了吗？」前面 */
.hero .sub .who{font-family:var(--serif); font-size:14.5px; font-weight:500; color:var(--ink); letter-spacing:.06em}

.lead{
  margin:0 16px 12px; background:#fff; border-left:3px solid var(--red);
  border-radius:0 9px 9px 0; padding:11px 14px; font-size:12.5px; color:var(--ink2); line-height:1.65;
}
.lead b{color:var(--red); font-weight:500}

.cta{
  display:flex; align-items:center; gap:14px; width:calc(100% - 32px); margin:0 16px;
  padding:17px 16px; background:#fff; border:1px solid var(--line); border-radius:16px;
  text-align:left; cursor:pointer; box-shadow:0 6px 16px rgba(70,50,30,.06);
  transition:transform .12s;
}
.cta:active{transform:translateY(1px)}
.cta .ico{width:44px; height:44px; flex:0 0 44px; border-radius:13px; background:var(--soft); color:var(--red);
  display:grid; place-items:center; font-family:var(--serif); font-size:21px}
.cta .body{flex:1; min-width:0}
.cta .tt{display:block; font-size:17px; font-weight:500; letter-spacing:.08em}
.cta .ds{display:block; font-size:11.5px; color:var(--ink3); margin-top:4px}
.cta .ar{margin-left:auto; color:var(--red); font-size:16px}
.cta.dim{opacity:.65}

.stats{display:flex; margin:14px 16px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:13px 0}
.stats > div{flex:1; text-align:center; border-left:1px solid var(--line)}
.stats > div:first-child{border-left:none}
.stats b{display:block; font-family:var(--serif); font-size:18px; font-weight:500}
.stats span{font-size:10px; color:var(--ink3)}

.footnote{text-align:center; font-size:11px; color:var(--ink3); margin:18px 0 0}

.pan-hint{
  display:flex; align-items:center; gap:10px; width:calc(100% - 32px); margin:10px 16px 0;
  padding:12px 14px; background:#fff; border:1px solid var(--line); border-left:3px solid var(--red);
  border-radius:0 11px 11px 0; cursor:pointer; text-align:left;
}
.pan-hint .ph-l{flex:1; min-width:0}
.pan-hint .ph-t{display:block; font-size:13px; color:var(--ink); letter-spacing:.04em}
.pan-hint .ph-d{display:block; font-size:10.5px; color:var(--ink3); margin-top:3px}
.pan-hint .ph-a{color:var(--red); font-size:15px}

/* ---------- 通用页头 ---------- */
.topbar{
  position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:8px;
  padding:12px 16px; background:rgba(250,247,242,.94); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar .back{width:26px; height:26px; border:none; background:none; font-size:20px; color:var(--ink2);
  cursor:pointer; padding:0; line-height:1; display:grid; place-items:center}
.topbar .t{font-size:15px; font-weight:500; letter-spacing:.06em}
.topbar .r{margin-left:auto; font-size:11px; color:var(--ink3)}
.body{padding:20px 16px 0}

.q{font-family:var(--serif); font-size:20px; line-height:1.5; margin:0 0 16px; font-weight:500}
.field{background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 14px 10px}
.field textarea, .field input[type=text]{
  width:100%; border:none; outline:none; resize:none; font-family:var(--sans);
  font-size:15px; line-height:1.7; color:var(--ink); background:transparent; display:block;
}
.field textarea::placeholder, .field input::placeholder{color:#B8B2A8}
.counter{text-align:right; font-size:11px; color:var(--ink3); font-variant-numeric:tabular-nums; margin-top:4px}
.counter.over{color:var(--red)}
.warn{font-size:11.5px; color:var(--red); margin:8px 2px 0}

.label{font-size:12px; color:var(--ink2); margin:20px 2px 10px; letter-spacing:.04em}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chips button{
  font-size:13px; padding:8px 14px; border-radius:999px; border:1px solid var(--line);
  background:#fff; color:var(--ink2); cursor:pointer; font-variant-numeric:tabular-nums;
}
.chips button.on{border-color:var(--red); color:var(--red); background:var(--soft)}
.timerow{display:flex; align-items:center; gap:10px; margin-top:10px}
.timerow input[type=time]{
  flex:1; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:#fff;
  font-family:var(--sans); font-size:15px; color:var(--ink); outline:none;
}
.tip{font-size:11px; color:var(--ink3); margin:8px 2px 0; line-height:1.6}

.btn{
  width:100%; margin-top:24px; padding:15px; border-radius:14px; border:none;
  background:var(--red); color:#fff; font-size:15px; letter-spacing:.1em; cursor:pointer;
}
.btn:disabled{background:#D9CFC7; cursor:not-allowed}
.btn:active:not(:disabled){background:var(--red-d)}
.btn.ghost{background:#fff; color:var(--ink2); border:1px solid var(--line)}

/* 导出：两个按钮并排，窄屏也放得下 */
.exportrow{display:flex; gap:10px; margin-top:20px}
.exportrow .btn{flex:1; margin-top:0; width:auto; padding:13px 8px; font-size:13px; letter-spacing:.06em;
  text-align:center; text-decoration:none; display:block; line-height:1.2}

/* ---------- 验念 ---------- */
.review{background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:22px}
.review .meta{font-size:11px; color:var(--ink3); letter-spacing:.08em; margin-bottom:8px}
.review .txt{font-size:15px; line-height:1.7; font-family:var(--serif)}
.review .plan{font-size:12px; color:var(--ink2); margin-top:10px; padding-top:10px; border-top:1px dashed var(--line)}

.opts{display:flex; gap:10px}
.opts button{
  flex:1; padding:16px 12px; border-radius:14px; border:1px solid var(--line); background:#fff;
  font-size:14px; color:var(--ink2); cursor:pointer; line-height:1.5;
}
.opts button small{display:block; font-size:11px; opacity:.7; margin-top:3px}
.opts button.on{border-color:var(--red); background:var(--soft); color:var(--red-d); font-weight:500}

.result-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px; margin-top:18px}
.result-card .tag{display:inline-block; font-size:11px; color:var(--red); background:var(--soft);
  border-radius:4px; padding:2px 8px; margin-bottom:10px; letter-spacing:.06em}
.result-card .q-text{font-family:var(--serif); font-size:15px; line-height:1.7}
.result-card .s{font-size:13px; color:var(--ink2); margin-top:12px; padding-top:12px; border-top:1px dashed var(--line); line-height:1.7}

/* ---------- 我的念 ---------- */
.statrow{display:flex; gap:10px; margin-bottom:16px}
.statrow > div{flex:1; background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center}
.statrow b{display:block; font-family:var(--serif); font-size:19px; font-weight:500}
.statrow span{font-size:10.5px; color:var(--ink3)}

.cal{background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 12px}
.cal .wk{display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:6px}
.cal .wk span{text-align:center; font-size:10.5px; color:var(--ink3)}
.cal .grid{display:grid; grid-template-columns:repeat(7,1fr); gap:5px 0}
.day{position:relative; aspect-ratio:1/1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; font-size:12px; color:var(--ink2); gap:4px; border-radius:9px}
.day .dot{width:6px; height:6px; border-radius:50%; background:transparent}
.day.done .dot{background:var(--red)}
.day.open .dot{border:1.5px solid #D9CFC7}
.day.supp .dot{background:#C9C3B8}
.day.rest{color:#C9C3B7}
.day.today{background:var(--soft); color:var(--red-d); font-weight:500}
.day.today .dot{border:1.5px dashed var(--red)}
.day.future{color:#D5D1C8}

.legend{display:flex; gap:14px; margin:12px 4px 0; font-size:10.5px; color:var(--ink3); flex-wrap:wrap}
.legend i{display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:5px; vertical-align:middle}
.legend .a{background:var(--red)} .legend .b{border:1.5px solid #D9CFC7} .legend .c{background:#C9C3B8}

.sec-title{font-size:11.5px; color:var(--ink3); letter-spacing:.14em; margin:24px 2px 10px}
.item{background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px; margin-bottom:10px}
.item .c{font-family:var(--serif); font-size:14.5px; line-height:1.7}
.item .m{font-size:11px; color:var(--ink3); margin-top:8px; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.item .m .pill{font-size:10px; padding:1px 6px; border-radius:3px; border:1px solid var(--line); color:var(--ink2)}
.item .m .pill.red{color:var(--red); border-color:rgba(178,58,47,.35)}
.item .s{font-size:12.5px; color:var(--ink2); margin-top:8px; padding-top:8px; border-top:1px dashed var(--line2); line-height:1.7}

.empty{text-align:center; color:var(--ink3); font-size:12.5px; padding:40px 20px}

/* ---------- 周盘 ---------- */
.weeknav{display:flex; align-items:center; gap:6px; padding:14px 14px 12px; border-bottom:1px solid var(--line)}
.weeknav button{
  width:30px; height:30px; flex:0 0 30px; border-radius:50%; border:1px solid var(--line); background:#fff;
  color:var(--ink2); font-size:15px; line-height:1; display:grid; place-items:center; cursor:pointer; padding:0;
}
.weeknav button:disabled{opacity:.28; cursor:default}
.weeknav .wk-mid{flex:1; text-align:center}
.weeknav .wk-mid b{display:block; font-family:var(--serif); font-size:14px; font-weight:500; letter-spacing:.03em}
.weeknav .wk-mid span{font-size:10px; color:var(--ink3); letter-spacing:.1em}

.quotes{display:flex; flex-direction:column; gap:9px}
.quote{
  position:relative; width:100%; text-align:left; background:#fff; border:1px solid var(--line);
  border-radius:13px; padding:13px 14px; cursor:pointer; transition:border-color .15s, background .15s;
}
.quote.on{border-color:var(--red); background:#FFFCFA; box-shadow:0 0 0 1px rgba(178,58,47,.16)}
.quote .t{font-family:var(--serif); font-size:14px; line-height:1.7; color:var(--ink)}
.quote.on .t{color:var(--red-d)}
.quote .m{font-size:10.5px; color:var(--ink3); margin-top:6px; line-height:1.5}
.quote .badges{display:flex; gap:6px; margin-bottom:7px}
.quote .badges:empty{display:none}
.badge{font-size:9.5px; color:#fff; background:var(--red); border-radius:3px; padding:1px 6px; letter-spacing:.08em}
.kind{font-size:9.5px; color:var(--ink3); border:1px solid var(--line); border-radius:3px; padding:1px 6px}

.ainote{
  margin:11px 0 0; padding:11px 13px; background:var(--soft); border-radius:10px;
  display:flex; gap:9px; align-items:flex-start;
}
.ainote .lb{flex:0 0 auto; font-size:9.5px; color:var(--red); border:1px solid rgba(178,58,47,.3);
  border-radius:3px; padding:1px 5px; margin-top:2px; letter-spacing:.06em}
.ainote p{margin:0; font-size:12px; line-height:1.65; color:var(--ink2)}

.check{display:flex; gap:9px; align-items:flex-start; margin:12px 2px 0; font-size:12px;
  color:var(--ink2); cursor:pointer; line-height:1.5}
.check input{width:15px; height:15px; margin:1px 0 0; flex:0 0 auto; accent-color:var(--red)}

.values{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.val{text-align:left; background:#fff; border:1px solid var(--line); border-radius:12px; padding:11px 12px; cursor:pointer}
.val b{display:block; font-family:var(--serif); font-size:15px; font-weight:500; letter-spacing:.1em; color:var(--ink)}
.val span{display:block; font-size:10px; color:var(--ink3); margin-top:3px; line-height:1.5}
.val.on{border-color:var(--red); background:var(--soft)}
.val.on b{color:var(--red)}

.pancard{position:relative; background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px 18px; overflow:hidden}
.pancard::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--red)}
.pancard .mark{font-size:10px; color:var(--red); letter-spacing:.16em; margin-bottom:14px}
.pancard .q{font-family:var(--serif); font-size:17px; line-height:1.75; margin:0; color:var(--ink)}
.pancard .src{font-size:11px; color:var(--ink3); margin-top:8px; line-height:1.5}
.pancard .blk{margin-top:16px; padding-top:14px; border-top:1px dashed var(--line)}
.pancard .blk .k{font-size:10px; color:var(--ink3); letter-spacing:.14em; margin-bottom:7px}
.pancard .blk p{margin:0; font-size:13.5px; line-height:1.75; color:var(--ink2)}
.vchips{display:flex; gap:6px; flex-wrap:wrap}
.vchips span{font-family:var(--serif); font-size:11.5px; color:var(--red); background:var(--soft);
  border-radius:4px; padding:3px 9px; letter-spacing:.08em}
.pancard .pfoot{margin-top:16px; font-size:10.5px; color:var(--ink3)}

.lockcard{background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px 20px; text-align:center}
.lockcard .lbig{font-family:var(--serif); font-size:18px; margin-bottom:10px}
.lockcard p{font-size:12px; color:var(--ink2); line-height:1.8; margin:0}
.lockcard p.small{font-size:11px; color:var(--ink3); margin-top:10px}
.lockcard b{color:var(--red); font-weight:500}

.pastlist{background:#fff; border:1px solid var(--line); border-radius:13px; overflow:hidden}
.pastlist button{display:flex; align-items:center; gap:10px; width:100%; padding:13px 14px;
  background:none; border:none; border-top:1px solid var(--line2); cursor:pointer; text-align:left}
.pastlist button:first-child{border-top:none}
.pastlist .pl{font-family:var(--serif); font-size:12.5px; color:var(--ink)}
.pastlist .pv{margin-left:auto; display:flex; gap:5px}
.pastlist .pv i{font-style:normal; font-size:10px; color:var(--ink3); border:1px solid var(--line); border-radius:3px; padding:1px 5px}
.pastlist .pa{color:var(--ink3); font-size:13px}

/* ---------- 看板 ---------- */
.seg{display:flex; gap:6px; padding:12px 16px 0}
.seg button{flex:1; padding:8px 0; border-radius:9px; border:1px solid var(--line); background:#fff;
  font-size:12.5px; color:var(--ink2); cursor:pointer}
.seg button.on{background:var(--soft); border-color:rgba(178,58,47,.35); color:var(--red); font-weight:500}

/* 观察员跨部门：部门多时用下拉，不占版面 */
.deptpick{display:flex; align-items:center; gap:9px; padding:10px 16px 0}
.deptpick>span{font-size:10.5px; color:var(--ink3); letter-spacing:.08em; flex:0 0 auto}
.deptpick select{flex:1; min-width:0; appearance:none; -webkit-appearance:none;
  border:1px solid var(--line); background-color:#fff; border-radius:9px;
  padding:7px 26px 7px 10px; font-size:12px; color:var(--ink); font-family:inherit;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23999999' stroke-width='1.2'/></svg>");
  background-repeat:no-repeat; background-position:right 9px center; background-size:10px 6px}
.deptpick select:focus{outline:none; border-color:rgba(178,58,47,.45)}

.card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:15px 15px 14px; margin-bottom:12px}
.card-hd{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px}
.card-hd span:first-child{font-size:12px; color:var(--ink2); letter-spacing:.1em}
.card-hd .muted{font-size:10.5px; color:var(--ink3); letter-spacing:0}

.bigrate{display:flex; align-items:baseline; gap:9px; margin-bottom:10px}
.bigrate b{font-family:var(--serif); font-size:34px; font-weight:500; line-height:1; color:var(--red)}
.bigrate b small{font-size:15px; margin-left:1px}
.bigrate span{font-size:11.5px; color:var(--ink3)}
.track{height:5px; border-radius:3px; background:var(--line2); overflow:hidden}
.track i{display:block; height:100%; background:var(--red); border-radius:3px}

.missing{margin-top:14px; padding-top:12px; border-top:1px dashed var(--line);
  display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.missing .mnum{display:flex; align-items:baseline; gap:6px}
.missing .mnum b{font-family:var(--serif); font-size:19px; line-height:1; color:var(--ink)}
.missing .mnum span{font-size:11.5px; color:var(--ink2)}
.missing .mnote{font-size:10.5px; color:var(--ink3)}
.allin{margin-top:12px; font-size:11.5px; color:var(--ink3)}

.bars{display:flex; align-items:flex-end; gap:6px; height:110px; margin-top:2px}
.bcol{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:6px}
.bcol .btrack{width:100%; max-width:34px; height:82px; display:flex; align-items:flex-end}
.bcol .btrack i{width:100%; min-height:3px; border-radius:3px 3px 0 0;
  background:linear-gradient(180deg, rgba(178,58,47,.78), rgba(178,58,47,.4)); transition:height .3s}
.bcol.on .btrack i{background:linear-gradient(180deg, var(--red), rgba(178,58,47,.55))}
.bcol span{font-size:9.5px; color:var(--ink3)}
.bcol.rest span{color:#D5D1C8}
.bcol.future .btrack{opacity:.3}

.kpis{display:flex; margin-top:14px; padding-top:12px; border-top:1px solid var(--line2)}
.kpis > div{flex:1; text-align:center}
.kpis b{display:block; font-family:var(--serif); font-size:16px; font-weight:500}
.kpis span{font-size:10px; color:var(--ink3)}

.vrow{display:flex; align-items:center; gap:10px; margin-bottom:9px}
.vrow:last-child{margin-bottom:0}
.vw{flex:0 0 42px; font-family:var(--serif); font-size:12.5px; color:var(--ink); letter-spacing:.06em}
.vtrack{flex:1; height:6px; background:var(--line2); border-radius:3px; overflow:hidden}
.vtrack i{display:block; height:100%; background:rgba(178,58,47,.55); border-radius:3px}
.vn{flex:0 0 22px; text-align:right; font-size:11px; color:var(--ink3); font-variant-numeric:tabular-nums}

.case{background:#fff; border:1px solid var(--line); border-radius:13px; padding:14px; margin-bottom:10px}
.case .tagline{font-size:10px; color:var(--red); letter-spacing:.08em; margin-bottom:8px}
.case .cq{font-family:var(--serif); font-size:14px; line-height:1.7; color:var(--ink)}
.case .ci{font-size:12.5px; color:var(--ink2); line-height:1.7; margin-top:9px; padding-left:10px; border-left:2px solid var(--line)}
.case .cm{font-size:10.5px; color:var(--ink3); margin-top:9px}

.sec-title .sec-note{font-size:9.5px; color:var(--ink3); letter-spacing:0; margin-left:7px}

.cmp{background:#fff; border:1px solid var(--line); border-radius:13px; padding:4px 14px}
.cmprow{display:flex; align-items:center; gap:10px; padding:11px 0; border-top:1px solid var(--line2)}
.cmprow:first-child{border-top:none}
.cmpl{flex:0 0 106px; min-width:0}
.cmpl b{display:block; font-size:12.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cmpl span{display:block; font-size:9.5px; color:var(--ink3); margin-top:2px}
.cmpbar{flex:1; height:6px; background:var(--line2); border-radius:3px; overflow:hidden}
.cmpbar i{display:block; height:100%; background:var(--red); border-radius:3px}
.cmpv{flex:0 0 34px; text-align:right; font-size:11.5px; color:var(--ink2); font-variant-numeric:tabular-nums}
.cmprow.alert .cmpbar i{background:#C98B32}
.cmprow.alert .cmpv{color:#A9701F}
/* 20 个部门逐行平铺太长：格子里看全貌，排行单独滚 */
.dtiles{display:grid; grid-template-columns:repeat(4,1fr); gap:7px}
.dtile{display:flex; flex-direction:column; gap:2px; min-width:0; text-align:left; cursor:pointer;
  border:1px solid var(--line); border-radius:10px; padding:9px 8px 8px; font-family:inherit;
  transition:transform .15s}
.dtile:active{transform:scale(.97)}
.dtile .dn{font-size:10.5px; color:var(--ink2); letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dtile b{font-family:var(--serif); font-size:17px; font-weight:500; line-height:1.1; color:var(--ink)}
.dtile b i{font-size:9px; font-style:normal; color:var(--ink3); margin-left:1px}
.dtile .dm{font-size:9px; color:var(--ink3)}
.dtile.alert{border-color:#DDB978}
.dtile.alert .dm{color:#A9701F}
.tilefoot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:9px}
.tilefoot>span{font-size:10px; color:var(--ink3); line-height:1.5}
.linkbtn{flex:0 0 auto; font-size:11px; color:var(--red); background:none; border:none;
  padding:5px 0 5px 8px; cursor:pointer; font-family:inherit; letter-spacing:.02em}
.cmpscroll{max-height:min(56vh,430px); overflow-y:auto; -webkit-overflow-scrolling:touch}
.cmpwrap{position:relative}
.cmpwrap::after{content:''; position:absolute; inset:0; border-radius:12px; pointer-events:none;
  transition:opacity .25s; box-shadow:inset 0 -16px 16px -14px rgba(90,60,45,.30)}
.cmpwrap.atend::after{opacity:0}

.alertbox{background:#FDF6E9; border:1px solid #F0E0BE; border-radius:12px; padding:12px 14px; margin-top:16px}
.alertbox b{display:block; font-size:11.5px; color:#8A6A1F; margin-bottom:5px; letter-spacing:.06em}
.alertbox span{font-size:11.5px; color:#7A6220; line-height:1.7}

/* ---------- 登录 ---------- */
.login{padding:40px 24px}
.login h2{font-family:var(--serif); font-size:22px; margin:0 0 8px; font-weight:500}
.login p{font-size:12.5px; color:var(--ink3); margin:0 0 22px}
.userlist button{
  display:flex; width:100%; align-items:center; gap:10px; padding:13px 14px; margin-bottom:8px;
  background:#fff; border:1px solid var(--line); border-radius:12px; cursor:pointer; text-align:left; font-size:14px;
}
.userlist button span.role{font-size:10px; color:var(--red); border:1px solid rgba(178,58,47,.3);
  border-radius:3px; padding:1px 5px; margin-left:auto}
.userlist button small{color:var(--ink3); font-size:11px}

/* ---------- 底部栏 ---------- */
.tabbar{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:430px; height:calc(58px + env(safe-area-inset-bottom)); display:flex;
  background:rgba(255,255,255,.97); backdrop-filter:blur(12px);
  border-top:1px solid var(--line); z-index:10; padding-bottom:env(safe-area-inset-bottom);
}
.tabbar button{
  flex:1; border:none; background:none; font-size:10.5px; color:var(--ink3); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:0;
}
.tabbar button svg{
  width:22px; height:22px; display:block; fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; transition:stroke-width .15s;
}
.tabbar button span{line-height:1; letter-spacing:.03em}
.tabbar button b{width:14px; height:2px; border-radius:2px; background:transparent; transition:background .18s}
.tabbar button.on{color:var(--red)}
.tabbar button.on svg{stroke-width:1.85}
.tabbar button.on b{background:var(--red)}

/* ---------- 通讯录同步状态 ---------- */
.syncline{
  margin-top:20px; padding-top:14px; border-top:1px solid var(--line2);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:11.5px; color:var(--ink3); line-height:1.5;
}
.syncline button{
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--red); font-size:11.5px; white-space:nowrap;
}
.syncline button:disabled{color:var(--ink3); cursor:default}

/* ---------- 演示条 ---------- */
.devbar{
  position:fixed; left:12px; bottom:calc(70px + env(safe-area-inset-bottom)); z-index:30;
  background:rgba(31,35,40,.9); color:#fff;
  border-radius:10px; padding:8px 10px; display:flex; align-items:center; gap:8px;
  font-size:11px; box-shadow:0 6px 20px rgba(0,0,0,.18);
}
.devbar label{opacity:.7; white-space:nowrap}
.devbar select{
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.2);
  border-radius:6px; font-size:11px; padding:3px 6px; outline:none; max-width:110px;
}
.devbar select option{color:#222}
.devbar .chk{display:flex; align-items:center; gap:4px; cursor:pointer}
.devbar input{width:12px; height:12px; accent-color:var(--red)}

.toast{
  position:fixed; left:50%; bottom:84px; transform:translate(-50%,8px);
  background:rgba(31,35,40,.9); color:#fff; font-size:12.5px; padding:9px 16px;
  border-radius:20px; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:40;
}
.toast.on{opacity:1; transform:translate(-50%,0)}

@media (max-width:520px){
  .shell{box-shadow:none}
  .devbar{left:8px; bottom:72px; transform:scale(.92); transform-origin:left bottom}
}