:root{
  --c-surface: var(--bs-body-bg, #fff);
  --c-subtle:  var(--bs-tertiary-bg, #f8f9fa);
  --c-text:    var(--bs-body-color, #212529);
  --c-text-2:  #495057;
  --c-text-3:  #6c757d;
  --c-border:  var(--bs-border-color, #dee2e6);
  --radius-lg: .75rem;
  --shadow-sm: 0 .125rem .25rem rgba(0,0,0,.05);
}

body {font-size: 1rem;}
/* 外層卡片 */
.smo-bazi-card{ border:1px solid var(--c-border); border-radius:var(--radius-lg); }
.smo-bazi-card .card-title{ color:var(--c-text); }

/* 錯誤訊息 */
.smo-bazi-error{
  margin-top:.75rem; padding:.75rem .875rem; border-radius:.5rem;
  border:1px solid rgba(220,53,69,.25); background:rgba(220,53,69,.08); color:#a1121c;
}

/* 命盤主表 */
.bazi-grid{ width:100%; border-collapse:collapse; font-size:.9375rem; color:var(--c-text-2); background:var(--c-surface);}
.bazi-grid th,.bazi-grid td{ border:1px solid var(--c-border); padding:.5rem .625rem; text-align:center; vertical-align:middle;}
.bazi-grid th{ background:var(--c-subtle); color:var(--c-text); font-weight:600;}
.bazi-grid td.big{ font-size:1.125rem; font-weight:700; color:var(--c-text);}

/* 雷達圖區塊與五行比例/評語 */
.radar-wrap{ margin:.5rem 0 .375rem; padding:.75rem; background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius-lg);}
.radar-wrap { min-height: 260px; }
.radar-wrap canvas { display: block; }

.five-meta{ display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; margin-bottom:.5rem;}
.badge-five{ display:inline-block; padding:.1rem .5rem; border-radius:10rem; background:var(--c-subtle); color:var(--c-text-2); border:1px solid var(--c-border); font-size:.8125rem;}
.five-comment{ margin-left:auto; font-size:.875rem; color:var(--c-text-3);}
@media (max-width:640px){ .five-comment{ flex-basis:100%; margin-left:0; margin-top:.25rem;} }

/* 五行橫向表 */
.five-row{ width:100%; border-collapse:collapse; margin:.5rem 0; font-size:.9375rem; color:var(--c-text-2); background:var(--c-surface);}
.five-row th,.five-row td{ border:1px solid var(--c-border); padding:.5rem; text-align:center;}
.five-row th{ background:var(--c-subtle); color:var(--c-text); font-weight:600;}

/* 藏干 chip（同權重同色） */
.wchip{ display:inline-block; padding:.125rem .5rem; border-radius:.5rem; font-size:.8125rem; line-height:1.6; color:var(--c-text-2); border:1px solid var(--c-border); margin:1px 0; white-space:nowrap;}
.wchip[data-w="0"]{ background:#f4f6f9; color:#495057; border-color:#e7eaf0;}
.wchip[data-w="1"]{ background:#eef1f6; color:#495057; border-color:#e2e6ee;}
.wchip[data-w="2"]{ background:#e3e7ef; color:#343a40; border-color:#d8dde7;}
.wchip[data-w="3"]{ background:#cbd3e1; color:#212529; border-color:#c1cad8;}
.wchip[data-w="4"]{ background:#a7b3c9; color:#fff; border-color:#98a7c0;}
.wchip[data-w="5"]{ background:#7b89a3; color:#fff; border-color:#6c7b94;}

/* 權重圖例（很高在最左） */
.weight-legend{ display:flex; align-items:center; gap:.5rem; margin:.75rem 0 .5rem; flex-wrap:wrap;}
.weight-legend .lab{ font-size:.8125rem; color:var(--c-text-3); margin-right:.25rem;}
.weight-legend .item{ display:inline-flex; align-items:center; gap:.375rem; margin-right:.5rem; font-size:.8125rem; color:var(--c-text-2);}
.weight-legend .swatch{ width:16px; height:12px; border-radius:.25rem; border:1px solid var(--c-border);}
.weight-legend .swatch.w0{ background:#f4f6f9; border-color:#e7eaf0;}
.weight-legend .swatch.w1{ background:#eef1f6; border-color:#e2e6ee;}
.weight-legend .swatch.w2{ background:#e3e7ef; border-color:#d8dde7;}
.weight-legend .swatch.w3{ background:#cbd3e1; border-color:#c1cad8;}
.weight-legend .swatch.w4{ background:#a7b3c9; border-color:#98a7c0;}
.weight-legend .swatch.w5{ background:#7b89a3; border-color:#6c7b94;}

/* 神煞/十神組合卡片 */
.mini-table{ margin:.625rem 0; background:var(--c-surface);}
.mini-title{ font-weight:700; margin:.25rem 0 .375rem; color:var(--c-text);}
.mini-table table{ width:100%; border-collapse:collapse; font-size:.9375rem;}
.mini-table th,.mini-table td{ border:1px solid var(--c-border); padding:.5rem; text-align:left; color:var(--c-text-2);}
.mini-table th{ background:var(--c-subtle); color:var(--c-text);}
.wrap-two{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:.75rem;}
.combo-text{ margin-top:.375rem; color:var(--c-text-2);}

/* 通用卡片（流年等） */
/*.card{ border:1px solid var(--c-border); border-radius:.75rem; padding:.75rem .875rem; margin:.5rem 0; background:var(--c-subtle); color:var(--c-text-2); box-shadow:var(--shadow-sm);}*/
.card{ border:1px solid var(--c-border); border-radius:.75rem; padding:.75rem .875rem; margin:.5rem 0; color:var(--c-text-2); box-shadow:var(--shadow-sm);}
.card b{ color:var(--c-text); }
.card ul{ margin:.375rem 0 0 1.125rem;}

/* 剛好 4 個數字（含內距與邊框，留一點餘量） */
.year-4ch{ width: 9ch; }
@media (max-width: 380px){ .year-4ch{ width: 8.5ch; } }

/* ========= 新增：基本資料 info bar ========= */
#calinfo{
  border:1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-subtle);
  color: var(--c-text-2);
  box-shadow: var(--shadow-sm);
}

/* ========= 新增：流年直排（避免用 JS 動態注入） ========= */
.vtext{ writing-mode: vertical-rl; text-orientation: upright; white-space: nowrap; }
.vtext .vnum{ text-combine-upright: all; }
.vcell{ height: 72px; vertical-align: middle !important; }
.liunian-vert table.table-sm th,
.liunian-vert table.table-sm td{ padding:0px; }
.flag-same{ background:#16a34a !important; color:#fff !important; }
.flag-chg { background:#ef4444 !important; color:#fff !important; }

/* ========= 新增：10 年流年總覽互動 ========= */
#flow-year-table tbody tr{ cursor:pointer; }
#flow-year-table tbody tr:hover{ background: var(--c-subtle); }
#flow-year-detail .card{ background: var(--c-surface); }

/* ============ 手機版命盤表優化（<= 576px） ============ */
@media (max-width: 576px){

  .grid-table{ padding:.25rem; }

  .bazi-grid{
    table-layout: fixed;
    font-size: .875rem;
  }
  .bazi-grid th,
  .bazi-grid td{
    padding: .35rem .4rem;
    line-height: 1.25;
  }
  .bazi-grid td.big{
    font-size: 1rem;
  }

  .bazi-grid tr > :first-child{
    width: 64px;
    white-space: nowrap;
  }

  .wchip{
    font-size: .75rem;
    padding: .1rem .4rem;
    margin: 2px 2px;
    white-space: normal;
  }

  .weight-legend{ gap: .375rem; margin:.5rem 0 .375rem; }
  .weight-legend .item{ font-size:.75rem; margin-right:.375rem; }
  .weight-legend .swatch{ width:14px; height:10px; }

  .badge-five{ font-size:.75rem; padding:.1rem .5rem; }
  .five-comment{ font-size:.8125rem; }

  .bazi-grid th, .bazi-grid td{
    word-break: break-all;
  }
}

/* ===== Palaces (十二宮) ===== */
#palaces-section .card { border-radius: 10px; }
#palaces-section .card-body { padding: 0.9rem 1rem; }
#palaces-section .nav-tabs .nav-link { font-weight: 600; }

.palaces-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.palace-card{
  border:1px solid rgba(0,0,0,.08);
  border-radius:.5rem;
  padding:.5rem .6rem;
  background:#fff;
  height:100%;
}
.palace-hd{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.35rem;
}
.palace-title{ 
  font-weight:600;
  font-size: clamp(18px, 6vw, 22px);
}
.palace-badge{
  background:#f8f9fa; color:#252729; border:1px solid rgba(0,0,0,.08);
  border-radius:999px; padding:.1rem .4rem; font-size:11px; line-height:1;
}
.palace-zhi{
  color:#252729; 
  font-weight:600; text-align:center;
  font-size: clamp(18px, 6vw, 22px);
  margin-bottom:.25rem;
}
.palace-ten{
  font-weight:400;
  font-size: clamp(14px, 6vw, 18px);
}
.palace-notes{ 
  font-weight:400;
  font-size: clamp(14px, 6vw, 18px);
  margin-top:.25rem; 
}

/* 極小螢幕再緊湊一些 */
@media (max-width: 375px){
  .palaces-grid{ gap:8px; padding:8px; }
  .palace-card{ padding:.45rem; }
  .palace-title{ font-size:11px; }
  .palace-badge{ font-size:10px; }
  .palace-ten{ font-size:12px; }
}

/* ===== 10年流年總覽：可展開詳情 ===== */
.year-item{ margin-bottom:.5rem; }
.year-toggle{
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem;
  background:var(--c-surface);
  border:1px solid var(--c-border);
  border-radius:.5rem;
  padding:.5rem .75rem;
  cursor:pointer;
  text-align:left;
}
.year-toggle:focus{ outline:2px solid rgba(13,110,253,.25); outline-offset:2px; }
.year-toggle .yt-left b{ color:var(--c-text); font-weight:700; }
.year-toggle .yt-right{ font-size:.875rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* 手機縮排 */
@media (max-width:576px){
  .year-toggle{ padding:.45rem .6rem; }
}