/* 内心页激素部分的样式（配合 pages/assets/desire-hormones.js）。夜色主题，字一律用白色深浅，颜色只给线和点 */

/* ── 五条 ── */
.hbars{display:grid;gap:13px;margin:22px 0 6px;padding:0 2px}
.hb-hd{display:flex;align-items:baseline;gap:6px;margin-bottom:7px}
.hb-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;transform:translateY(-1px)}
.hb-name{font-size:13px;color:rgba(255,255,255,.72)}
.hb-gloss{font-size:11px;color:rgba(255,255,255,.36)}
.hb-val{margin-left:auto;font-size:12px;color:rgba(255,255,255,.82);font-variant-numeric:tabular-nums}
.hb-tr{display:inline-block;width:14px;text-align:center;margin-left:3px;color:rgba(255,255,255,.3)}
.hb-tr.up,.hb-tr.dn{color:rgba(255,255,255,.8)}
.hb-track{position:relative;height:4px;border-radius:2px;background:rgba(255,255,255,.08)}
.hb-fill{position:absolute;left:0;top:0;bottom:0;border-radius:2px;transition:width .8s ease}
.hb-base{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;border-radius:1px;background:rgba(255,255,255,.55)}
.hb-note{margin-top:2px;font-size:10.5px;color:rgba(255,255,255,.28);text-align:right}

/* ── 此刻 ── */
#hNow p{font-family:"Songti SC","STSong","Noto Serif SC",serif;font-size:14px;line-height:1.8;color:rgba(255,255,255,.78)}
#hNow p+p{margin-top:4px}
.now-at{font-size:11px;color:rgba(255,255,255,.35);margin-bottom:8px}

/* ── 曲线图 ── */
.rng{float:right;display:flex;gap:4px;margin-top:-3px}
.rng button{font:inherit;font-size:11px;letter-spacing:0;padding:3px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:none;color:rgba(255,255,255,.5)}
.rng button.on{background:rgba(255,255,255,.12);color:rgba(255,255,255,.9)}
.lg{display:flex;flex-wrap:wrap;gap:6px 10px;margin-bottom:12px}
.lg-i{font:inherit;font-size:11.5px;display:flex;align-items:center;gap:5px;padding:2px 0;border:0;background:none;color:rgba(255,255,255,.75)}
.lg-i i{width:10px;height:2px;border-radius:1px}
.lg-i.off{color:rgba(255,255,255,.28)}
.lg-i.off i{opacity:.25}
.hc-wrap{position:relative;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.hc{display:block;width:100%;height:170px;overflow:visible}
.hc-grid{stroke:rgba(255,255,255,.06);stroke-width:1}
.hc-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.hc-x{stroke:rgba(255,255,255,.4);stroke-width:1}
/* 事件点：外面一圈底色描边，跟线叠在一起也分得开；点的范围比圆点大，好按 */
.hc-ev{stroke:#17131e;stroke-width:2;paint-order:stroke;cursor:pointer}
.hc-ticks{display:flex;justify-content:space-between;font-size:10px;color:rgba(255,255,255,.3);margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,.05)}
.hc-tip{position:absolute;top:18px;min-width:120px;max-width:230px;padding:9px 11px;border-radius:12px;background:rgba(26,22,33,.96);border:1px solid rgba(255,255,255,.1);font-size:11.5px;line-height:1.7;color:rgba(255,255,255,.85);pointer-events:none;z-index:3;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.hc-tip b{display:block;font-weight:500;color:#fff;margin-bottom:2px}
.hc-tip div{display:flex;align-items:center;gap:6px}
.hc-tip div i{width:7px;height:7px;border-radius:50%}
.hc-tip div span{margin-left:auto;padding-left:12px;font-variant-numeric:tabular-nums}
.tip-why{color:rgba(255,255,255,.55);display:block!important}

/* ── 事件动了哪几样 ── */
.dcs{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:4px}
.dc{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:rgba(255,255,255,.55);font-variant-numeric:tabular-nums}
.dc i{width:6px;height:6px;border-radius:50%}

/* 心情图顶上那句：此刻是什么状态、这段时间多半是什么 */
.hc-note{font-size:11.5px;color:rgba(255,255,255,.45);margin-bottom:10px}
.hc-note b{font-weight:500;color:rgba(255,255,255,.85)}

/* 占比清单：每一档 / 每种心情都列，条长 = 占比（单色，跟最多的那档比），后面百分比和待了多久 */
.dl-hd{margin-top:16px;margin-bottom:8px;font-size:11.5px;color:rgba(255,255,255,.45)}
.dl{display:grid;gap:7px}
.dl-r{display:grid;grid-template-columns:44px 1fr 44px 70px;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums}
.dl-r.on .dl-n{color:#fff}
.dl-r.zero{color:rgba(255,255,255,.28)}
.dl-n{white-space:nowrap}
.dl-t{height:4px;border-radius:2px;background:rgba(255,255,255,.06);overflow:hidden}
.dl-t i{display:block;height:100%;border-radius:2px;min-width:0}
.dl-r.on .dl-t i{filter:brightness(1.3)}
.dl-p{text-align:right}
.dl-d{text-align:right;font-size:11px;color:rgba(255,255,255,.38)}
.hc-lane{font-size:10.5px;color:rgba(255,255,255,.32);margin:-4px 0 2px}