/* F. 今日此刻 — 状态环 (克制版) */
.now-card{
  margin: 14px 0 22px;
  padding: 16px 4px 18px;
  border: 0;
  border-top: 1px solid rgba(120,108,90,.15);
  border-bottom: 1px solid rgba(120,108,90,.15);
  background: transparent;
  display: grid;
  grid-template-columns: 84px 1fr auto;
  gap: 22px;
  align-items: center;
  position: relative;
  transition: border-color 0.6s ease;
}
/* 时段配色: 只染环 + period 文字 + hint, 卡片本身保持透明 */
.now-card[data-period="dawn"]      .now-period { color:#A8895C; }
.now-card[data-period="morning"]   .now-period { color:#8A7146; }
.now-card[data-period="afternoon"] .now-period { color:#A8895C; }
.now-card[data-period="evening"]   .now-period { color:#B85C2A; }
.now-card[data-period="night"]     .now-period { color:#5A6A8A; }
.now-card[data-period="night"]     { border-color: rgba(80,85,110,.25); }

/* 左:时段环 */
.now-ring-wrap { position: relative; width: 84px; height: 84px; }
.now-ring { width: 84px; height: 84px; transform: rotate(-90deg); }
.now-ring-bg   { fill: none; stroke: rgba(0,0,0,.07); stroke-width: 4; }
.now-ring-prog { fill: none; stroke: #A8895C; stroke-width: 4; stroke-linecap: round;
                 transition: stroke-dashoffset 1s ease; }
.now-card[data-period="evening"] .now-ring-prog { stroke: #B85C2A; }
.now-card[data-period="night"]   .now-ring-prog { stroke: #B8A66A; }
.now-card[data-period="dawn"]    .now-ring-prog { stroke: #C49A55; }

.now-ring-center{
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-feature-settings: "tnum";
}
.now-clock{
  font-size: 20px; letter-spacing: .04em; font-weight: 500; color: #5A524A;
  font-feature-settings: "tnum";
}
.now-period{ font-size: 10px; letter-spacing: .25em; margin-top: 2px; opacity: .85; }

/* 中:话 */
.now-text{ min-width: 0; }
.now-hint{
  font-family: "Crimson Text", serif;
  font-size: 16px; line-height: 1.55; color: #5A524A;
  margin: 0 0 6px; font-style: italic;
}
.now-meta{
  font-size: 12px; color: #9C9388; letter-spacing: .06em;
}
.now-meta b{ color: #6E6457; font-weight: 500; }

/* 右:四颗卫星 (徽章) */
.now-sats{
  display: flex; flex-direction: column; gap: 8px;
  font-size: 12px; min-width: 110px;
}
.now-sat{
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0;
  color: #6E6457; text-decoration: none;
  letter-spacing: .12em;
  border: 0; background: transparent;
  transition: color .2s, transform .15s;
}
.now-sat:hover{ transform: translateX(-2px); color: #2B2A28; }
.now-sat .dot{ width: 5px; height: 5px; border-radius: 50%;
              background: #C9B89A; flex-shrink: 0; }
.now-sat[data-state="active"] .dot{
  background: #A8895C;
  box-shadow: 0 0 0 0 rgba(168,137,92,.55);
  animation: now-pulse 1.8s infinite;
}
.now-sat[data-state="hot"] .dot{
  background: #A8201A;
  box-shadow: 0 0 0 0 rgba(168,32,26,.55);
  animation: now-pulse 1.5s infinite;
}
.now-sat[data-state="done"]{ opacity: .45; }
.now-sat[data-state="done"] .dot{ background: #BBB; }

@keyframes now-pulse{
  0%   { box-shadow: 0 0 0 0   rgba(168,137,92,.55); }
  70%  { box-shadow: 0 0 0 6px rgba(168,137,92,0); }
  100% { box-shadow: 0 0 0 0   rgba(168,137,92,0); }
}

/* G. 心跳弹层 */
.now-heart-pop{
  position: absolute;
  top: calc(100% - 6px);
  right: 0;
  z-index: 30;
  width: 320px;
  max-width: calc(100vw - 24px);
  background: #FBF8EE;
  border: 1px solid rgba(120,108,90,.25);
  border-radius: 4px;
  box-shadow: 0 8px 28px rgba(70,55,30,.15);
  padding: 10px 12px;
  font-size: 13px;
  color: #4A453E;
  animation: hb-fade .18s ease;
}
@keyframes hb-fade { from{ opacity:0; transform: translateY(-4px); } to{ opacity:1; transform:none; } }
.now-heart-pop .hb-head{
  font-size: 11px; letter-spacing: .12em; color: #9C9388;
  padding: 2px 4px 8px; border-bottom: 1px dashed rgba(120,108,90,.18); margin-bottom: 6px;
}
.now-heart-pop .hb-row{ padding: 8px 4px; line-height: 1.6; }
.now-heart-pop .hb-row a{ color:#A8895C; }
.now-heart-pop .hb-item{
  display: flex; gap: 10px; align-items: flex-start;
  padding: 7px 4px; border-radius: 3px; text-decoration: none; color: inherit;
  transition: background .15s;
}
.now-heart-pop .hb-item + .hb-item{ border-top: 1px dashed rgba(120,108,90,.10); }
.now-heart-pop .hb-item:hover{ background: rgba(168,137,92,.08); }
.now-heart-pop .hb-avatar{
  flex-shrink: 0; border-radius: 50%; text-align: center;
  font-family: serif;
}
.now-heart-pop .hb-text{ min-width:0; flex:1; }
.now-heart-pop .hb-name{
  font-size: 12px; color: #6E6457; letter-spacing: .04em;
}
.now-heart-pop .hb-when{ color: #B6AC9D; font-size: 11px; }
.now-heart-pop .hb-sum{
  font-size: 13px; color: #4A453E; line-height: 1.5; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

@media (max-width: 760px){
  .now-card{ grid-template-columns: 72px 1fr; padding: 14px 16px; gap: 14px; }
  .now-ring-wrap, .now-ring{ width: 72px; height: 72px; }
  .now-clock{ font-size: 17px; }
  .now-sats{ grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; min-width: 0; }
  .now-hint{ font-size: 15px; }
  .now-heart-pop{ left: 12px; right: 12px; width: auto; }
}

/* === K. 暗色模式 / 深夜自适应 ============================================= */
[data-theme="dark"] .now-card{
  border-top-color: rgba(180,170,150,.18);
  border-bottom-color: rgba(180,170,150,.18);
}
[data-theme="dark"] .now-card[data-period="night"]{
  border-color: rgba(180,170,150,.28);
}
[data-theme="dark"] .now-ring-bg{ stroke: rgba(220,210,190,.10); }
[data-theme="dark"] .now-clock{ color: #D8CFBF; }
[data-theme="dark"] .now-hint{ color: #BFB6A6; }
[data-theme="dark"] .now-meta{ color: #8B8478; }
[data-theme="dark"] .now-meta b{ color: #C8BFA8; }
[data-theme="dark"] .now-period{ color: #C8B48A !important; }
[data-theme="dark"] .now-sat{ color: #BFB6A6; }
[data-theme="dark"] .now-sat:hover{ color: #F0E8D8; }
[data-theme="dark"] .now-sat .dot{ background: #6E6457; }
[data-theme="dark"] .now-sat[data-state="active"] .dot{ background: #C8B48A; box-shadow: 0 0 0 0 rgba(200,180,138,.55); }
[data-theme="dark"] .now-sat[data-state="hot"] .dot{ background: #D8504A; box-shadow: 0 0 0 0 rgba(216,80,74,.55); }
[data-theme="dark"] .now-sat[data-state="done"] .dot{ background: #555; }

[data-theme="dark"] .now-heart-pop{
  background: #2A2620;
  border-color: rgba(200,180,138,.25);
  box-shadow: 0 12px 36px rgba(0,0,0,.5);
  color: #D8CFBF;
}
[data-theme="dark"] .now-heart-pop .hb-head{ color: #8B8478; border-bottom-color: rgba(200,180,138,.15); }
[data-theme="dark"] .now-heart-pop .hb-row{ color: #BFB6A6; }
[data-theme="dark"] .now-heart-pop .hb-row a{ color: #C8B48A; }
[data-theme="dark"] .now-heart-pop .hb-item + .hb-item{ border-top-color: rgba(200,180,138,.10); }
[data-theme="dark"] .now-heart-pop .hb-item:hover{ background: rgba(200,180,138,.10); }
[data-theme="dark"] .now-heart-pop .hb-name{ color: #C8BFA8; }
[data-theme="dark"] .now-heart-pop .hb-when{ color: #6E6457; }
[data-theme="dark"] .now-heart-pop .hb-sum{ color: #BFB6A6; }

/* 深夜 23:00-5:00 — 即便用户没切 dark, 也自动用暗色调子 */
@media (prefers-color-scheme: dark) {
  .now-card[data-period="night"]{
    background: rgba(20,22,30,.35);
    border-color: rgba(180,170,150,.25);
  }
  .now-card[data-period="night"] .now-clock{ color: #E8DDC4; }
  .now-card[data-period="night"] .now-hint{ color: #C8BFA8; }
  .now-card[data-period="night"] .now-meta{ color: #8B8478; }
}