/* 禅绕之家 V2.0 · 白噪音播放器样式（独立于冻结的 zen-base.css）
   配色严格沿用设计 token：宣纸暖白 / 黛绿 / 赭石 / 印章红 / 金；直角化。 */
.zs-panel{
  background:rgba(247,244,237,.82);backdrop-filter:blur(8px);
  border:1px solid var(--ink-5);border-radius:0;
  padding:16px 18px 14px;max-width:360px;
  box-shadow:0 10px 34px rgba(38,36,31,.10);
}
.zs-panel.compact{padding:12px 14px}
.zs-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.zs-title{font-family:var(--serif);font-size:14px;letter-spacing:.22em;color:var(--ink-1)}
.zs-stop{border:1px solid var(--ink-4);background:transparent;color:var(--ink-3);
  width:26px;height:26px;line-height:1;font-size:11px;border-radius:0;cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .4s,color .4s,border-color .4s}
.zs-stop.show{opacity:1;pointer-events:auto}
.zs-stop:hover{color:var(--seal);border-color:var(--seal)}
.zs-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.zs-chip{display:flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 6px;border:1px solid var(--ink-5);background:transparent;
  font-family:var(--sans);font-size:13px;letter-spacing:.12em;color:var(--ink-3);
  border-radius:0;cursor:pointer;transition:all .45s}
.zs-chip .zs-dot{width:7px;height:7px;background:var(--ink-5);border-radius:0;transition:all .45s}
.zs-chip:hover{border-color:var(--dai);color:var(--dai)}
.zs-chip.on{border-color:var(--seal);color:var(--seal);background:var(--seal-soft)}
.zs-chip.on .zs-dot{background:var(--seal);box-shadow:0 0 0 3px rgba(194,91,78,.12)}
.zs-vol{display:flex;align-items:center;gap:10px;margin-top:12px;font-size:11px;letter-spacing:.1em;color:var(--ink-4)}
.zs-range{flex:1;-webkit-appearance:none;appearance:none;height:2px;background:var(--ink-5);border-radius:0;outline:none}
.zs-range::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;background:var(--dai);border-radius:0;cursor:pointer}
.zs-range::-moz-range-thumb{width:13px;height:13px;background:var(--dai);border:0;border-radius:0;cursor:pointer}
@media(max-width:680px){
  .zs-panel{max-width:none;width:100%}
  .zs-chips{grid-template-columns:repeat(3,1fr)}
}

/* ===== 静心计时创作（trace 扩展） ===== */
.calm-timer{display:flex;align-items:center;justify-content:center;gap:28px;
  flex-wrap:wrap;margin:18px 0 8px}
.calm-clock{font-family:var(--serif);font-size:clamp(42px,9vw,68px);font-weight:600;
  letter-spacing:.06em;color:var(--ink-1);font-variant-numeric:tabular-nums;min-width:200px;text-align:center}
.calm-ctrl{display:flex;gap:12px}
.calm-sound-box{margin-top:14px;display:flex;justify-content:center}
.flow-result{margin-top:26px;text-align:center}
.flow-viz{width:min(320px,72vw);height:auto;margin:0 auto 14px;display:block}
.flow-poem{font-family:var(--kai);font-size:clamp(16px,2.4vw,20px);color:var(--ink-2);
  letter-spacing:.1em;line-height:2;max-width:24em;margin:0 auto}
.flow-meta{margin-top:14px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;
  font-size:12px;letter-spacing:.14em;color:var(--ink-4)}
.flow-card{border:1px solid var(--ink-5);border-radius:0;padding:18px;margin:14px 0;
  display:flex;gap:16px;align-items:flex-start;background:var(--paper)}
.flow-card .fc-viz{width:96px;height:96px;flex:0 0 96px;border:1px solid var(--ink-5)}
.flow-card .fc-body{flex:1}
.flow-card .fc-poem{font-family:var(--kai);font-size:15px;color:var(--ink-2);line-height:1.9}
.flow-card .fc-meta{margin-top:8px;font-size:12px;color:var(--ink-4);letter-spacing:.1em}

/* ===== 情绪天气（calm.html） ===== */
.mood-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin:8px 0 6px}
.mood-opt{border:1px solid var(--ink-5);border-radius:0;background:transparent;cursor:pointer;
  padding:18px 10px;text-align:center;transition:all .45s;font-family:var(--sans)}
.mood-opt .m-ico{font-size:30px;line-height:1;margin-bottom:10px;display:block}
.mood-opt .m-name{font-size:13px;letter-spacing:.16em;color:var(--ink-3)}
.mood-opt:hover{border-color:var(--dai);color:var(--dai)}
.mood-opt.on{border-color:var(--seal);color:var(--seal);background:var(--seal-soft)}
.emotion-wrap{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.emotion-pill{border:1px solid var(--ink-5);border-radius:0;background:transparent;cursor:pointer;
  padding:7px 14px;font-size:13px;letter-spacing:.1em;color:var(--ink-3);transition:all .4s}
.emotion-pill:hover{border-color:var(--dai);color:var(--dai)}
.emotion-pill.on{border-color:var(--seal);color:var(--seal);background:var(--seal-soft)}

/* ===== 会员订阅（membership.html） ===== */
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:10px 0}
.plan-card{border:1px solid var(--ink-5);border-radius:0;padding:28px 24px;background:var(--paper);
  display:flex;flex-direction:column;transition:border-color .5s,transform .5s}
.plan-card:hover{transform:translateY(-4px);border-color:var(--dai)}
.plan-card.feature{border-color:var(--seal);box-shadow:0 12px 40px rgba(194,91,78,.12)}
.plan-card .p-name{font-family:var(--serif);font-size:20px;letter-spacing:.16em;color:var(--ink-1)}
.plan-card .p-tag{font-size:12px;letter-spacing:.2em;color:var(--seal);margin-top:4px}
.plan-card .p-price{font-family:var(--serif);font-size:30px;color:var(--ink-1);margin:18px 0 4px}
.plan-card .p-price small{font-size:13px;color:var(--ink-4);font-family:var(--sans);letter-spacing:.1em}
.plan-card .p-desc{font-size:13px;color:var(--ink-4);letter-spacing:.06em;margin-bottom:18px;min-height:3em}
.plan-card ul{list-style:none;flex:1}
.plan-card li{padding:8px 0;font-size:13.5px;color:var(--ink-2);border-bottom:1px dashed var(--ink-5);
  display:flex;gap:8px;align-items:baseline}
.plan-card li::before{content:"·";color:var(--zhe);font-weight:700}
.plan-card .p-btn{margin-top:20px;padding:12px 0;border:1px solid var(--ink-3);background:transparent;
  color:var(--ink-1);font-family:var(--sans);font-size:14px;letter-spacing:.18em;border-radius:0;
  cursor:pointer;transition:all .45s}
.plan-card .p-btn:hover{border-color:var(--seal);color:var(--seal)}
.plan-card.feature .p-btn{background:var(--seal);color:var(--paper);border-color:var(--seal)}
.plan-card.feature .p-btn:hover{opacity:.9}
.plan-card .p-btn:disabled{opacity:.4;cursor:not-allowed}
.mb-state{margin:18px 0;padding:16px 18px;border:1px solid var(--ink-5);border-radius:0;font-size:14px;color:var(--ink-2);letter-spacing:.08em}
.mb-state b{color:var(--seal);font-weight:600}