/* ============================================================
   神秘学日历（timing/calendar.css）
   只作用于 #tool-calendar
   ============================================================ */

#tool-calendar{
  --cal-gold:   #d9b36c;
  --cal-red:    #c06a6a;
  --cal-green:  #7fae86;
  --cal-blue:   #6f9dd6;
  --cal-violet: #a48bd9;
  --cal-teal:   #6fb3a8;
}

/* ---------- 工具条 ---------- */
#tool-calendar .cal-toolbar{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 10px 14px;
  padding: 12px;
  border: 2px solid var(--silver-dim);
  background: var(--bg-deep);
  margin: 14px 0 10px;
}
#tool-calendar .cal-nav{
  display: flex;
  align-items: center;
  gap: 6px;
}
#tool-calendar .cal-nav .btn{
  padding: 7px 12px;
  box-shadow: 3px 3px 0 var(--shadow);
}
#tool-calendar #cal-month{
  min-width: 138px;
  text-align: center;
  font-size: 20px;
  letter-spacing: 2px;
  color: var(--silver);
}
#tool-calendar .cal-field{
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--ink-dim);
}
#tool-calendar select{
  font: inherit;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--ink);
  background: var(--panel);
  border: 2px solid var(--silver-dim);
  padding: 6px 8px;
  min-height: 34px;
  color-scheme: dark;
}
#tool-calendar select:focus{
  outline: none;
  border-color: var(--silver);
}

#tool-calendar .cal-legend{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--ink-dim);
  margin: 0 0 8px;
}
#tool-calendar .cal-legend i{
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border: 1px solid rgba(0,0,0,.4);
  vertical-align: -1px;
}

/* ---------- 月历 ---------- */
#tool-calendar .cal-weekdays{
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin-top: 8px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--ink-dim);
}
#tool-calendar .cal-grid{
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin-top: 4px;
}
#tool-calendar .cal-blank{
  min-height: 86px;
  border: 1px dashed rgba(59,67,85,.45);
  background: rgba(0,0,0,.12);
}
#tool-calendar .cal-day{
  position: relative;
  min-height: 86px;
  padding: 5px 6px 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: var(--bg-deep);
  border: 2px solid var(--silver-dim);
  cursor: pointer;
  overflow: hidden;
}
#tool-calendar .cal-day:hover{ border-color: var(--ink-dim); }
#tool-calendar .cal-day.good{ background: linear-gradient(180deg, rgba(217,179,108,.09), transparent 70%), var(--bg-deep); }
#tool-calendar .cal-day.bad{ background: linear-gradient(180deg, rgba(192,106,106,.09), transparent 70%), var(--bg-deep); }
#tool-calendar .cal-day.today{ box-shadow: inset 0 0 0 2px var(--cal-gold); }
#tool-calendar .cal-day.selected{ border-color: var(--silver); background: var(--panel-2); }
#tool-calendar .cal-day.past{ opacity: .38; }
#tool-calendar .cal-day.past.selected{ opacity: .72; }
#tool-calendar .cal-num{
  font-size: 18px;
  line-height: 1.1;
  color: var(--silver);
}
#tool-calendar .cal-lunar{
  font-size: 10px;
  line-height: 1.3;
  color: var(--ink-dim);
  letter-spacing: 1px;
}
#tool-calendar .cal-tag{
  max-width: 100%;
  font-size: 9px;
  line-height: 1.3;
  color: var(--note);
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#tool-calendar .cal-score{
  position: absolute;
  top: auto;
  right: 6px;
  bottom: 7px;
  font-size: 15px;
  line-height: 1;
}
#tool-calendar .cal-score.good{ color: var(--cal-gold); }
#tool-calendar .cal-score.mid{ color: var(--silver); }
#tool-calendar .cal-score.low{ color: var(--ink-dim); }
#tool-calendar .cal-score.bad{ color: var(--cal-red); }
#tool-calendar .cal-bar{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: #161a24;
}
#tool-calendar .cal-bar > i{
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2b3d63, var(--cal-blue), var(--silver));
}
#tool-calendar .cal-day.good .cal-bar > i{ background: linear-gradient(90deg, #5a3a2e, var(--cal-gold), #f0d9a8); }
#tool-calendar .cal-day.bad .cal-bar > i{ background: linear-gradient(90deg, #3a2228, var(--cal-red)); }
#tool-calendar .cal-day.today .cal-num{ color: var(--cal-gold); }

/* ---------- 日详情 ---------- */
#tool-calendar .cal-detail-meta{
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 1px;
  color: var(--ink-dim);
  margin: 0 0 12px;
}
#tool-calendar .cal-detail-meta b{ color: var(--ink); font-weight: normal; }
#tool-calendar .cal-detail-date{
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--silver);
  margin: 2px 0 8px;
}
#tool-calendar .cal-badge{
  display: inline-block;
  font-size: 10px;
  letter-spacing: 1px;
  padding: 1px 6px;
  border: 1px solid var(--silver-dim);
  color: var(--ink-dim);
  vertical-align: 1px;
}
#tool-calendar .cal-badge.best{ color: #0d0a07; background: var(--cal-gold); border-color: var(--cal-gold); }
#tool-calendar .cal-badge.good{ color: #0d0a07; background: var(--cal-green); border-color: var(--cal-green); }
#tool-calendar .cal-badge.ok{ color: #0d0a07; background: var(--cal-teal); border-color: var(--cal-teal); }
#tool-calendar .cal-badge.bad{ color: #e6c9c9; border-color: rgba(192,106,106,.6); }
#tool-calendar .cal-badge.worst{ color: #fff; background: var(--cal-red); border-color: var(--cal-red); }

#tool-calendar .cal-warnings{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
#tool-calendar .cal-warn{
  border-left: 4px solid var(--cal-gold);
  background: rgba(217,179,108,.07);
  padding: 7px 10px;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--ink);
}
#tool-calendar .cal-warn.bad{
  border-left-color: var(--cal-red);
  background: rgba(192,106,106,.09);
}

#tool-calendar .cal-recs{
  display: grid;
  margin-top: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
#tool-calendar .cal-rec{
  border: 2px solid var(--silver-dim);
  background: var(--bg-deep);
  padding: 9px 10px 10px;
  min-width: 0;
}
#tool-calendar .cal-rec.selected{
  border-color: var(--silver);
  box-shadow: inset 0 0 0 1px rgba(207,215,228,.25);
}
#tool-calendar .cal-rec-top{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--ink);
}
#tool-calendar .cal-rec-top b{
  font-size: 19px;
  line-height: 1;
  font-weight: normal;
}
#tool-calendar .cal-rec-top b.good{ color: var(--cal-gold); }
#tool-calendar .cal-rec-top b.mid{ color: var(--silver); }
#tool-calendar .cal-rec-top b.low{ color: var(--ink-dim); }
#tool-calendar .cal-rec-top b.bad{ color: var(--cal-red); }
#tool-calendar .cal-rec-meta{
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--note);
  margin: 2px 0 6px;
}
#tool-calendar .cal-rec .cal-bar{
  position: relative;
  height: 5px;
  border: 1px solid var(--silver-dim);
  background: #161a24;
  margin-bottom: 6px;
}
#tool-calendar .cal-why{
  display: flex;
  flex-wrap: wrap;
  gap: 3px 8px;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--ink-dim);
}
#tool-calendar .cal-why .plus{ color: #9fc3a5; }
#tool-calendar .cal-why .minus{ color: #c99090; }

/* ---------- 移动端 ---------- */
@media (max-width: 760px){
  #tool-calendar{ width: 100%; max-width: 100%; overflow-x: hidden; }
  #tool-calendar .cal-toolbar{ align-items: stretch; padding: 8px; gap: 8px; }
  #tool-calendar .cal-nav{ width: 100%; justify-content: space-between; }
  #tool-calendar .cal-nav .btn{ padding: 4px 10px; min-height: 30px; }
  #tool-calendar #cal-month{ flex: 1 1 auto; min-width: 0; font-size: 16px; letter-spacing: 1px; }
  #tool-calendar .cal-field{ flex: 1 1 calc(50% - 4px); min-width: 0; }
  #tool-calendar .cal-field select{ font-size: 12px; min-height: 30px; padding: 4px 6px; }
  #tool-calendar select{ width: 100%; min-width: 0; }
  #tool-calendar .cal-day{ min-height: 58px; padding: 3px 4px 7px; }
  #tool-calendar .cal-num{ font-size: 15px; }
  #tool-calendar .cal-lunar{ font-size: 9px; }
  #tool-calendar .cal-tag{ display: none; }
  #tool-calendar .cal-score{ top: auto; bottom: 5px; right: 4px; font-size: 12px; }
  #tool-calendar .cal-blank{ min-height: 58px; }
  #tool-calendar .cal-weekdays{ font-size: 9px; letter-spacing: 0; }
  #tool-calendar .cal-recs{ grid-template-columns: 1fr; }
}
@media (max-width: 380px){
  #tool-calendar .cal-field{ flex-basis: 100%; }
}