/* almanac.css - 万年历模块 Apple HIG 样式 v5.0 */

/* ================================================================
   主卡片
   ================================================================ */
.alm-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  box-shadow: var(--card-shadow);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  transition: box-shadow 0.2s var(--ease-in-out);
}
.alm-card:hover { box-shadow: var(--card-shadow-hover); }

.alm-header { text-align: center; margin-bottom: var(--space-sm); }

/* 日期导航行 */
.alm-header-row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xs);
}
.alm-header-row2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xs);
}
.alm-header-row3 {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-size: var(--fs-body);
}

.alm-date-text { font-size: var(--fs-title); font-weight: var(--weight-medium); color: var(--text-primary); }

/* 导航箭头 */
.alm-nav-btn {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}
.alm-nav-btn:hover { color: var(--text-primary); background: var(--hover-bg); }
.alm-nav-btn svg { width: 24px; height: 24px; }

.alm-date-pick-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.2s;
}
.alm-date-pick-btn:hover { color: var(--text-primary); }

.alm-lunar-text {
  color: var(--text-primary);
  font-weight: var(--weight-regular);
  font-size: 20px;
  letter-spacing: 2px;
}
.alm-shengxiao { color: var(--text-secondary); font-size: var(--fs-meta); }
.alm-week { color: var(--text-tertiary); font-size: var(--fs-meta); }

.alm-source-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--text-tertiary);
  font-size: var(--fs-caption);
  cursor: pointer;
}

.alm-jieqi-inline {
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border-radius: var(--radius-badge);
  padding: var(--space-xs) var(--space-sm);
}
.alm-jq-fest-line {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}
.alm-festival-tag {
  font-size: var(--fs-caption);
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--separator);
  border-radius: var(--radius-badge);
  color: var(--text-secondary);
  background: var(--bg-secondary);
}

/* ================================================================
   四神方块
   ================================================================ */
.alm-shen-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}
.alm-shen-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  text-align: center;
  gap: var(--space-xs);
}
.alm-shen-block-tag {
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  letter-spacing: 0.5px;
}
.alm-shen-block-val {
  font-size: var(--fs-meta);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

/* ================================================================
   宜忌区
   ================================================================ */
.alm-yiji-area {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}
.alm-yi-row, .alm-ji-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: transparent;
  cursor: pointer;
  transition: color 0.2s;
}
.alm-yi-row:hover, .alm-ji-row:hover { color: var(--text-secondary); }

.alm-yiji-scroll-wrap { flex: 1; min-width: 0; }
.alm-yiji-scroll-text { display: block; white-space: normal; word-break: break-all; line-height: 1.5; }

.alm-yi-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-meta);
  font-weight: var(--weight-semibold);
  color: var(--yi-green);
  flex-shrink: 0;
}
.alm-yi-label::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--yi-green);
}
.alm-ji-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-meta);
  font-weight: var(--weight-semibold);
  color: var(--ji-red);
  flex-shrink: 0;
}
.alm-ji-label::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ji-red);
}
.alm-yi-content, .alm-ji-content {
  font-size: var(--fs-meta);
  color: var(--text-primary);
  line-height: 1.5;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* ================================================================
   更多信息折叠面板
   ================================================================ */
.alm-more-info {
  margin-bottom: 0;
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.alm-mi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  background: transparent;
  cursor: pointer;
  user-select: none;
  font-size: var(--fs-body);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  transition: color 0.2s;
}
.alm-mi-header:hover { color: var(--text-secondary); }
.alm-mi-arrow { transition: transform 0.3s var(--ease-spring); }
.alm-more-info.alm-mi-open .alm-mi-arrow { transform: rotate(180deg); }

.alm-mi-content-wrapper {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-spring), opacity 0.3s;
  opacity: 0;
}
.alm-more-info.alm-mi-open .alm-mi-content-wrapper {
  max-height: 3000px;
  opacity: 1;
}
.alm-mi-content { padding: var(--space-md); }

.alm-mi-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.alm-mi-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.alm-mi-full-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
.alm-mi-item {
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  gap: var(--space-sm);
}
.alm-mi-label {
  font-size: var(--fs-secondary);
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: color 0.2s;
}
.alm-mi-label:hover { color: var(--text-primary); }
.alm-mi-value {
  font-size: var(--fs-secondary);
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  line-height: 1.5;
  word-break: break-all;
}
.alm-mi-value--clickable { cursor: pointer; transition: color 0.2s; }
.alm-mi-value--clickable:hover { color: var(--text-secondary); }

/* ================================================================
   弹窗遮罩
   ================================================================ */
.alm-tt-overlay, .alm-src-overlay, .alm-dp-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9500;
  touch-action: none;
  animation: fadeIn 0.25s var(--ease-in-out) both;
}
.alm-tt-overlay.closing,
.alm-src-overlay.closing,
.alm-dp-overlay.closing { animation: fadeOut 0.2s var(--ease-exit) both; }

/* ================================================================
   注释弹窗 / 数据来源弹窗 / 日期选择弹窗
   ================================================================ */
.alm-tt-popup, .alm-src-popup, .alm-dp-popup {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--popup-shadow);
  z-index: 9501;
  animation: popupEnter 0.3s var(--ease-spring) both;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}
.alm-tt-popup { max-width: 420px; }
.alm-src-popup { max-width: 380px; }
.alm-dp-popup { max-width: 340px; }
.alm-src-popup--wide { max-width: 440px; }
.alm-tt-popup.closing,
.alm-src-popup.closing,
.alm-dp-popup.closing { animation: popupExit 0.2s var(--ease-exit) both; }

.alm-tt-header, .alm-src-header, .alm-dp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg);
  border-bottom: 1px solid var(--separator);
  flex-shrink: 0;
}
.alm-tt-title {
  font-size: 17px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.alm-tt-close, .alm-src-close, .alm-dp-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: transparent;
  border: none;
  color: var(--modal-close-text);
  cursor: pointer;
  transition: color 0.2s;
}
.alm-tt-close:hover, .alm-src-close:hover, .alm-dp-close:hover {
  color: var(--text-primary);
}

.alm-tt-body, .alm-src-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-lg);
  color: var(--text-primary);
  font-size: var(--fs-meta);
  line-height: 1.7;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.alm-tt-body::-webkit-scrollbar,
.alm-src-body::-webkit-scrollbar { display: none; }

.alm-dp-body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: center;
}
.alm-dp-input {
  width: 100%;
  padding: var(--space-md);
  border: 1px solid var(--separator);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: var(--fs-body);
  font-family: var(--font-sans);
  outline: none;
  transition: border-color 0.2s;
}
.alm-dp-input:focus { border-color: var(--text-secondary); }

.alm-dp-confirm {
  width: 100%;
  padding: var(--space-sm) 0;
  background: transparent;
  color: var(--btn-text);
  border: none;
  font-size: 17px;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: color 0.2s;
}
.alm-dp-confirm:hover { color: var(--btn-hover-text); }

/* 数据源选项 */
.alm-src-hint {
  font-size: var(--fs-caption);
  color: var(--text-tertiary);
  margin-bottom: var(--space-md);
  text-align: center;
}
.alm-src-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
  border: none;
  background: transparent;
  cursor: pointer;
  transition: color 0.2s;
}
.alm-src-option:hover { color: var(--text-primary); }
.alm-src-option--active { color: var(--text-primary); }
.alm-src-option-radio { width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--text-primary); }
.alm-src-option-info { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.alm-src-option-name { font-size: var(--fs-meta); font-weight: var(--weight-semibold); }
.alm-src-option-meta { font-size: var(--fs-caption); color: var(--text-secondary); }
.alm-src-option-desc { font-size: var(--fs-caption); color: var(--text-secondary); line-height: 1.5; }

/* ================================================================
   当前时辰强调卡片
   ================================================================ */
.alm-shichen-current {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
  border: 2px solid transparent;
  transition: border-color 0.2s;
}
.alm-shichen-current.alm-scc-active { border-color: var(--separator); }

.alm-scc-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--separator);
  flex-wrap: wrap;
}
.alm-scc-name {
  font-size: var(--fs-body);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}
.alm-scc-gz {
  font-size: var(--fs-meta);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.alm-scc-time { font-size: var(--fs-caption); color: var(--text-tertiary); }
.alm-scc-detail {
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  line-height: 1.5;
  flex: 1 1 auto;
  min-width: 0;
}
.alm-scc-yi, .alm-scc-ji {
  font-size: var(--fs-meta);
  color: var(--text-primary);
  line-height: 1.5;
  display: flex;
  gap: var(--space-sm);
  align-items: baseline;
}
.alm-scc-yi .alm-scc-label,
.alm-scc-ji .alm-scc-label {
  font-weight: var(--weight-bold);
  flex-shrink: 0;
  color: var(--text-secondary);
}

/* 时辰提醒按钮行 */
.alm-scc-reminder-row {
  display: flex;
  align-items: center;
  gap: 0;
  padding-top: var(--space-sm);
  width: 100%;
}
.alm-scc-reminder,
.alm-scc-reminder-plus {
  flex: 0 0 50%;
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: var(--fs-caption);
  color: var(--btn-text);
  min-height: 32px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s;
}
.alm-scc-reminder:hover,
.alm-scc-reminder-plus:hover {
  color: var(--btn-hover-text);
}
.alm-scc-reminder--on {
  color: var(--text-primary);
}
.alm-scc-reminder-plus--visible { opacity: 0.4; pointer-events: none; }
.alm-scc-reminder--on ~ .alm-scc-reminder-plus { opacity: 1; pointer-events: auto; }
.alm-scc-reminder-icon { flex-shrink: 0; color: inherit; }
.alm-scc-reminder-count { font-size: var(--fs-caption); color: inherit; }

/* ================================================================
   八字表格
   ================================================================ */
.alm-bazi-table { margin-bottom: var(--space-sm); }
.alm-grid {
  margin-bottom: var(--space-sm);
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.alm-row {
  display: grid;
  grid-template-columns: 48px repeat(4, 1fr);
  border-bottom: 1px solid var(--separator);
}
.alm-row:last-child { border-bottom: none; }
.alm-row > * {
  padding: var(--space-sm);
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--text-primary);
  border-right: 1px solid var(--separator);
}
.alm-row > *:last-child { border-right: none; }
.alm-row-head > * {
  background: var(--bg-secondary);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}
.alm-label {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary) !important;
  font-size: var(--fs-caption) !important;
}
.alm-value { font-weight: var(--weight-medium); }
.alm-value.highlight {
  font-size: var(--fs-body);
  color: var(--accent-color);
  font-weight: var(--weight-bold);
}
.alm-row-nayin { border-top: 1px solid var(--separator); }

/* ================================================================
   神煞/星宿
   ================================================================ */
.alm-ss-inline {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.alm-ss-inline:hover { opacity: 0.7; }
.alm-ss-sep { color: var(--text-tertiary); margin: 0 2px; }

/* 宜忌弹窗标签 */
.alm-yiji-popup { max-width: 500px; }
.alm-yiji-general-desc { margin: 0 0 var(--space-md); color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.6; }
.alm-yiji-tags-wrap { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.alm-yiji-tag {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  background: transparent;
  border: none;
  font-size: var(--fs-meta);
  color: var(--text-primary);
  cursor: pointer;
  transition: color 0.2s;
}
.alm-yiji-tag:hover { color: var(--text-secondary); }
.alm-yiji-back-btn {
  display: inline-block;
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: none;
  font-size: var(--fs-caption);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: color 0.2s;
}
.alm-yiji-back-btn:hover { color: var(--text-primary); }

/* ================================================================
   时辰通知条
   ================================================================ */
.shichen-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 8900;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  padding-top: max(var(--space-md), env(safe-area-inset-top));
  background: var(--bg-card);
  border-bottom: 1px solid var(--separator);
  box-shadow: var(--card-shadow);
  transform: translateY(-100%);
  transition: transform 0.35s var(--ease-spring);
}
.shichen-banner--show { transform: translateY(0); }
.shichen-banner--hide { transform: translateY(-100%); opacity: 0; transition: transform 0.25s, opacity 0.25s; }
.shichen-banner-icon { flex-shrink: 0; color: var(--text-secondary); }
.shichen-banner-content { flex: 1; min-width: 0; display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: baseline; }
.shichen-banner-name { font-size: var(--fs-body); font-weight: var(--weight-bold); color: var(--text-primary); }
.shichen-banner-time { font-size: var(--fs-caption); color: var(--text-secondary); }
.shichen-banner-channel { font-size: var(--fs-meta); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; }
.shichen-banner-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 0.2s;
}
.shichen-banner-close:hover { color: var(--text-primary); }

/* ================================================================
   Footer 弹窗（反馈/关于）
   ================================================================ */
.ftr-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9600;
  animation: fadeIn 0.25s var(--ease-in-out) both;
  touch-action: none;
}
.ftr-overlay.closing { animation: fadeOut 0.2s var(--ease-exit) both; }

.ftr-popup {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  max-width: 440px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--popup-shadow);
  z-index: 9601;
  animation: popupEnter 0.3s var(--ease-spring) both;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
}
.ftr-popup.closing { animation: popupExit 0.2s var(--ease-exit) both; }
.ftr-popup--about { max-width: 560px; }

.ftr-popup-header {
  display: flex;
  align-items: center;
  padding: var(--space-lg) var(--space-lg) 0;
  border-bottom: 1px solid var(--separator);
  flex-shrink: 0;
  position: relative;
}
.ftr-popup-title {
  font-size: 22px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.ftr-popup-close {
  position: absolute;
  top: var(--space-lg); right: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  background: transparent;
  border: none;
  color: var(--modal-close-text);
  cursor: pointer;
  z-index: 2;
  transition: background 0.2s;
}
.ftr-popup-close:hover { color: var(--text-primary); }

.ftr-popup-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-lg);
  color: var(--text-primary);
  font-size: var(--fs-body);
  line-height: 1.6;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ftr-popup-body::-webkit-scrollbar { display: none; }

.ftr-about-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-lg);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ftr-about-body::-webkit-scrollbar { display: none; }

/* 反馈表单 */
.ftr-fb-intro { margin: 0 0 12px; font-size: var(--fs-body); color: var(--text-secondary); }
.ftr-fb-textarea {
  width: 100%;
  min-height: 100px;
  padding: var(--space-md);
  border: 1px solid var(--separator);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: var(--fs-body);
  font-family: var(--font-sans);
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
}
.ftr-fb-textarea:focus { border-color: var(--text-secondary); }
.ftr-fb-contact {
  width: 100%;
  padding: var(--space-md);
  border: 1px solid var(--separator);
  border-radius: var(--radius-sm);
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: var(--fs-meta);
  font-family: var(--font-sans);
  outline: none;
  margin-top: 12px;
  transition: border-color 0.2s;
}
.ftr-fb-contact:focus { border-color: var(--text-secondary); }
.ftr-fb-char-count { text-align: right; font-size: var(--fs-caption); color: var(--text-muted); margin-top: var(--space-xs); }
.ftr-fb-submit {
  width: 100%;
  margin-top: var(--space-md);
  padding: var(--space-sm) 0;
  background: transparent;
  color: var(--btn-text);
  border: none;
  font-size: 17px;
  font-weight: var(--weight-semibold);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: color 0.2s;
}
.ftr-fb-submit:hover { color: var(--btn-hover-text); }
.ftr-fb-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.ftr-fb-note { margin: 12px 0 0; font-size: var(--fs-caption); color: var(--text-muted); text-align: center; }

/* 关于内容 */
.ftr-about-content h1 { font-size: 22px; font-weight: var(--weight-semibold); margin: 0 0 24px; }
.ftr-about-content h2 { font-size: 17px; font-weight: var(--weight-medium); margin: 24px 0 12px; }
.ftr-about-content h3 { font-size: var(--fs-body); font-weight: var(--weight-semibold); color: var(--text-secondary); margin: 24px 0 12px; }
.ftr-about-content p { margin: 0 0 16px; color: var(--text-secondary); line-height: 1.6; }
.ftr-about-content p:last-child { margin-bottom: 0; }
.ftr-about-content strong { color: var(--text-primary); }
.ftr-about-content ul { margin: 16px 0 24px; padding-left: 20px; }
.ftr-about-content li { margin: 8px 0; color: var(--text-secondary); line-height: 1.6; }
.ftr-about-content a { color: var(--accent-color); text-decoration: underline; text-underline-offset: 2px; }
.ftr-about-content a:hover { opacity: 0.75; }
.ftr-about-content blockquote {
  margin: 16px 0;
  padding: 12px 16px;
  border-left: 4px solid var(--separator);
  background: var(--bg-secondary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ================================================================
   骨架屏 & 错误
   ================================================================ */
.alm-skeleton { padding: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); }
.alm-sk-line { height: 14px; border-radius: var(--radius-badge); background: var(--separator); animation: skeletonPulse 1.5s var(--ease-in-out) infinite; }
.almanac-error { padding: var(--space-xl); text-align: center; }
.almanac-error p { color: var(--text-secondary); margin-bottom: var(--space-md); }
.retry-btn {
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  color: var(--btn-text);
  border: none;
  cursor: pointer;
  font-size: var(--fs-meta);
  font-family: var(--font-sans);
  transition: color 0.2s;
}
.retry-btn:hover { color: var(--btn-hover-text); }

/* ================================================================
   响应式
   ================================================================ */
@media (max-width: 767px) {
  .alm-card { padding: var(--space-md); }
  .alm-date-text { font-size: var(--fs-body); }
  .alm-lunar-text { font-size: 17px; letter-spacing: 1px; }
  .alm-shen-grid { grid-template-columns: repeat(2, 1fr); }
  .alm-mi-row { grid-template-columns: 1fr; }
  .alm-tt-popup, .alm-src-popup, .alm-dp-popup { width: 92vw; max-width: 92vw; }
  .alm-src-popup--wide { max-width: 92vw; }
  .alm-tt-header, .alm-src-header, .alm-dp-header { padding: var(--space-md); }
  .alm-tt-body, .alm-src-body, .alm-dp-body { padding: var(--space-md); }
  .ftr-popup { width: 95vw; max-width: 95vw; }
  .ftr-popup--about { max-height: 75vh; }
  .ftr-popup-header { padding: var(--space-md) var(--space-md) 0; }
  .ftr-popup-title { font-size: 20px; }
  .ftr-popup-close { top: var(--space-md); right: var(--space-md); }
  .ftr-popup-body, .ftr-about-body { padding: var(--space-md); }
  .shichen-banner { padding: var(--space-md); }
}

/* Tablet/Desktop: more-info 多列 */
@media (min-width: 768px) {
  .alm-mi-rows { display: flex; flex-wrap: wrap; gap: var(--space-md); }
  .alm-mi-row, .alm-mi-full-row { display: contents; }
  .alm-mi-rows .alm-mi-item { flex: 1 1 calc(50% - 12px); min-width: 160px; }
}

/* Device class fallbacks */
.device-phone .alm-card { padding: var(--space-md); }
.device-phone .alm-date-text { font-size: var(--fs-body); }
.device-phone .alm-lunar-text { font-size: 17px; letter-spacing: 1px; }
.device-phone .alm-shen-grid { grid-template-columns: repeat(2, 1fr); }
.device-phone .alm-mi-row { grid-template-columns: 1fr; }
.device-phone .alm-tt-popup, .device-phone .alm-src-popup, .device-phone .alm-dp-popup { width: 92vw; max-width: 92vw; }
.device-phone .alm-tt-header, .device-phone .alm-src-header, .device-phone .alm-dp-header { padding: var(--space-md); }
.device-phone .alm-tt-body, .device-phone .alm-src-body, .device-phone .alm-dp-body { padding: var(--space-md); }
.device-phone .ftr-popup { width: 95vw; max-width: 95vw; }
.device-phone .ftr-popup--about { max-height: 75vh; }
.device-phone .ftr-popup-header { padding: var(--space-md) var(--space-md) 0; }
.device-phone .ftr-popup-title { font-size: 20px; }
.device-phone .ftr-popup-close { top: var(--space-md); right: var(--space-md); }
.device-phone .ftr-popup-body, .device-phone .ftr-about-body { padding: var(--space-md); }
.device-phone .shichen-banner { padding: var(--space-md); }

.device-tablet .alm-mi-rows,
.device-desktop .alm-mi-rows { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.device-tablet .alm-mi-row,
.device-desktop .alm-mi-row,
.device-tablet .alm-mi-full-row,
.device-desktop .alm-mi-full-row { display: contents; }
.device-tablet .alm-mi-rows .alm-mi-item,
.device-desktop .alm-mi-rows .alm-mi-item { flex: 1 1 calc(50% - 12px); min-width: 160px; }