/* 03 心潮念 */

.mood { padding-bottom: 28px; }
.mood-head { display: flex; align-items: center; gap: 4px; padding: max(48px, env(safe-area-inset-top)) var(--gutter) 0 10px; }
.mood-head .t { display: flex; flex-direction: column; gap: 3px; }
.mood-head h1 { margin: 0; font-size: 24px; font-weight: 300; letter-spacing: .35em; line-height: 1.1; }
.mood-head .t span { font-size: 12px; }
.mood-head .clock { margin-left: auto; font-size: 11px; letter-spacing: .1em; }

/* 表盘：按 390×460 的设计稿等比缩放，标签用百分比定位 */
.mood-stage { position: relative; width: 100%; aspect-ratio: 390 / 460; margin-top: 12px; }
.mood-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mood-stamen { pointer-events: none; }
.dial-nums { font-family: var(--font-latin); font-size: 14px; font-weight: 600; }
.stamen-hit { position: absolute; left: 50%; top: 43.5%; width: 48px; height: 48px; transform: translate(-50%, -50%); border-radius: 50%; }

.dtag {
  position: absolute; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; white-space: nowrap;
  border-radius: var(--r-pill); background: rgba(251, 245, 230, .95); border: 1px solid #C9A77F;
  box-shadow: 0 2px 5px rgba(90, 62, 43, .18);
}
.dtag i { width: 7px; height: 7px; border-radius: 50%; }
.dtag span { font-size: 11px; letter-spacing: .15em; color: #5A3E2B; }
.dtag b { font-size: 12px; font-weight: 600; color: #7A5A40; }
.dtag-s { gap: 3px; padding: 1px 6px; align-items: baseline; box-shadow: none; background: rgba(251, 245, 230, .92); }
.dtag-s span { font-size: 9.5px; letter-spacing: .08em; }
.dtag-s b { font-size: 10px; }

/* 表下面的内容 */
.mood-body { padding: 14px var(--gutter) 0; display: flex; flex-direction: column; gap: 16px; }
.mood-k { display: block; font-size: 11px; letter-spacing: .25em; color: var(--ink-soft); }
.mood-empty { font-size: 13px; }

.mood-marks { display: flex; flex-direction: column; gap: 8px; }
.marks { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
.marks::-webkit-scrollbar { display: none; }
.mark { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; flex: none; white-space: nowrap; border-radius: var(--r-pill); background: var(--paper-card); border: 1px solid var(--rule); }
.mark i { border-radius: 50%; border: 1px solid #C9A77F; flex: none; }
.mark .t { font-size: 11px; letter-spacing: .03em; color: var(--ink-soft); }
.mark .hand { font-size: 13px; }
.mark .n { font-size: 11px; color: var(--accent); }

.mood-now { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mood-now .w { font-size: 18px; letter-spacing: .3em; white-space: nowrap; }
.mood-now .hand { font-size: 12px; white-space: nowrap; }

.mood-rest { width: 100%; height: 32px; display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 11px; color: var(--ink-soft); }
.mood-rest .k { letter-spacing: .25em; flex: none; }
.mood-rest .v { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mood-rest svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; flex: none; }
.mood-rest-list { display: flex; flex-direction: column; padding: 4px 0 2px; }
.mood-rest-list[hidden] { display: none; }
.rest-row { display: grid; grid-template-columns: 52px 1fr 28px; align-items: center; gap: 10px; min-height: 34px; }
.rest-row .song { font-size: 12px; letter-spacing: .12em; }
.rest-row b { font-size: 13px; font-weight: 600; text-align: right; color: var(--ink-soft); }
.bar { display: block; height: 6px; border-radius: 6px; background: #EADFC6; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #E7C9A0, #D4A373); }

.mood-think { position: relative; padding: 6px 16px 10px; border: 1px solid var(--rule); box-shadow: 0 4px 10px rgba(120, 100, 60, .07); margin-top: 4px; background-position: 0 6px; }
.mood-think .mood-k { font-size: 10px; letter-spacing: .3em; line-height: 26px; }
.mood-think .text { display: block; font-size: 14px; line-height: 26px; }
.mood-think .mixed { position: absolute; right: -8px; top: -14px; padding: 5px 10px; background: var(--pink); font-size: 12px; transform: rotate(4deg); box-shadow: 0 3px 6px rgba(120, 90, 100, .12); }

.mood-scraps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.scrap { padding: 10px 12px; background: var(--paper-card); border: 1px solid var(--rule); display: flex; flex-direction: column; gap: 4px; }
.scrap .mood-k { font-size: 10px; letter-spacing: .3em; }
.scrap .hand { font-size: 13px; line-height: 1.55; }
.scrap.a { transform: rotate(-1.5deg); clip-path: polygon(0 4%, 8% 0, 22% 3%, 38% 0, 55% 3%, 72% 0, 88% 2%, 100% 0, 100% 100%, 0 100%); }
.scrap.b { transform: rotate(1.2deg); clip-path: polygon(0 0, 12% 3%, 28% 0, 45% 4%, 62% 0, 80% 3%, 92% 0, 100% 3%, 100% 100%, 0 100%); }

/* 驱力详情面板 */
.drive-big { display: flex; align-items: baseline; gap: 10px; }
.drive-big b { font-size: 44px; font-weight: 500; line-height: 1; }
.drive-big span { font-size: 14px; letter-spacing: .3em; color: var(--ink-soft); }
.drive-bar { height: 8px; }
.drive-note { margin: 0; font-size: 15px; line-height: 1.6; }
.drive-foot { margin: 0; font-size: 12px; line-height: 1.6; }