/* === Reset === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%;scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,'PingFang TC','Noto Sans TC','Microsoft JhengHei',sans-serif;
  background:var(--page-bg);
  color:var(--text);
  min-height:100vh;
  transition:background .3s,color .3s;
}

/* === Light Theme === */
:root{
  --page-bg:#FDF6E3;
  --card-bg:#FFFFFF;
  --text:#1A1A2E;
  --text2:#777788;
  --accent:#C0392B;
  --gold:#D4A017;
  --gold2:#F5D78E;
  --green:#27AE60;
  --green-bg:#EBF9F1;
  --red:#C0392B;
  --red-bg:#FDEDEC;
  --hero-grad:linear-gradient(135deg,#C0392B 0%,#8B2018 100%);
  --shadow:0 2px 12px rgba(0,0,0,.08);
  --shadow-card:0 4px 24px rgba(0,0,0,.07);
  --shadow-hero:0 8px 40px rgba(192,57,43,.35);
  --hdr:56px;
}

/* === Dark Theme === */
[data-theme="dark"]{
  --page-bg:#0D1B2A;
  --card-bg:#162032;
  --text:#E2E8F0;
  --text2:#8899AA;
  --accent:#F87171;
  --gold:#FFD700;
  --gold2:#FFE566;
  --green:#34D399;
  --green-bg:rgba(52,211,153,.12);
  --red:#F87171;
  --red-bg:rgba(248,113,113,.12);
  --hero-grad:linear-gradient(135deg,#1E3A5F 0%,#0D1B2A 100%);
  --shadow:0 2px 12px rgba(0,0,0,.4);
  --shadow-card:0 4px 24px rgba(0,0,0,.3);
  --shadow-hero:0 8px 40px rgba(0,0,0,.6);
}

/* === Header === */
.top-bar{
  position:fixed;top:0;left:0;right:0;
  height:var(--hdr);
  background:var(--accent);
  display:flex;align-items:center;
  padding:0 16px;gap:10px;
  z-index:100;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  transition:background .3s;
}
[data-theme="dark"] .top-bar{background:#1A2744;border-bottom:1px solid rgba(255,255,255,.06)}
.site-logo{font-size:1.4rem}
.site-title{flex:1;color:#fff;font-size:1.2rem;font-weight:700;letter-spacing:3px}
.icon-btn{
  background:rgba(255,255,255,.15);border:none;border-radius:50%;
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;cursor:pointer;
  transition:background .2s,transform .2s;
}
.icon-btn:hover{background:rgba(255,255,255,.25);transform:scale(1.06)}

/* === Page Layout === */
.page{
  max-width:680px;margin:0 auto;
  padding:calc(var(--hdr) + 20px) 16px 44px;
}

/* === Hero Card === */
.hero-card{
  background:var(--hero-grad);
  border-radius:16px;padding:28px 24px;
  margin-bottom:14px;
  box-shadow:var(--shadow-hero);
  text-align:center;position:relative;overflow:hidden;
  animation:heroIn .6s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-card::after{
  content:'☯';
  position:absolute;right:-20px;top:-20px;
  font-size:130px;opacity:.04;pointer-events:none;
  line-height:1;
}
.hero-solar{
  color:var(--gold2);font-size:.88rem;letter-spacing:2px;
  margin-bottom:14px;
  display:flex;justify-content:center;align-items:center;gap:8px;
  opacity:.9;
}
.hero-dot{opacity:.5}
.hero-line{
  width:55%;height:1px;
  background:linear-gradient(to right,transparent,var(--gold2),transparent);
  margin:0 auto 16px;opacity:.45;
}
.hero-lunar{
  display:flex;align-items:baseline;justify-content:center;
  gap:10px;margin-bottom:10px;
}
.hl-month{font-size:2.4rem;font-weight:700;color:#fff;line-height:1}
.hl-day{font-size:4.5rem;font-weight:900;color:#fff;line-height:1;text-shadow:0 2px 10px rgba(0,0,0,.2)}
.hero-ganzhi{color:var(--gold2);font-size:1.2rem;letter-spacing:3px;margin-bottom:10px}
.gz-orn{opacity:.5;font-size:.7rem;margin:0 8px;vertical-align:middle}
.hero-chips{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.chip{
  background:rgba(255,255,255,.12);color:rgba(255,255,255,.85);
  padding:4px 12px;border-radius:20px;font-size:.78rem;
  border:1px solid rgba(255,255,255,.1);
}
.jieqi-tag{
  display:inline-block;margin-top:12px;
  background:rgba(255,215,0,.14);
  border:1px solid rgba(255,215,0,.4);
  color:var(--gold2);padding:4px 14px;
  border-radius:20px;font-size:.85rem;letter-spacing:1px;
}
.hidden{display:none!important}

/* === Info Row === */
.info-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.info-card{
  background:var(--card-bg);border-radius:12px;
  padding:14px 8px 12px;text-align:center;
  box-shadow:var(--shadow-card);transition:transform .2s;
}
.info-card:hover{transform:translateY(-2px)}
.ic-icon{font-size:1.4rem;margin-bottom:4px}
.ic-label{font-size:.62rem;color:var(--text2);margin-bottom:4px;letter-spacing:.5px}
.ic-val{font-size:.88rem;font-weight:700;color:var(--accent);line-height:1.3}

/* === Card === */
.card{background:var(--card-bg);border-radius:16px;padding:20px;margin-bottom:14px;box-shadow:var(--shadow-card)}
.card-head{font-size:.95rem;font-weight:700;color:var(--text);padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid rgba(128,128,128,.1)}
.card-hr{border:none;border-top:1px solid rgba(128,128,128,.08);margin:14px 0}

/* === Yi Ji === */
.yiji-section{margin-bottom:4px}
.yiji-label{display:inline-block;padding:3px 10px;border-radius:5px;font-size:.78rem;font-weight:700;margin-bottom:10px}
.yiji-yi{background:var(--green-bg);color:var(--green)}
.yiji-ji{background:var(--red-bg);color:var(--red)}
.tag-row{display:flex;flex-wrap:wrap;gap:7px}
.tag{
  padding:5px 13px;border-radius:20px;font-size:.82rem;
  cursor:pointer;transition:transform .15s;user-select:none;
}
.tag:hover{transform:scale(1.06)}
.tag:active{transform:scale(.97)}
.tag-yi{background:var(--green-bg);color:var(--green);border:1px solid rgba(39,174,96,.25)}
.tag-ji{background:var(--red-bg);color:var(--red);border:1px solid rgba(192,57,43,.25)}

/* Tooltip */
.tag-tip{
  position:fixed;
  background:rgba(15,15,25,.88);color:#fff;
  padding:7px 13px;border-radius:8px;font-size:.78rem;
  pointer-events:none;z-index:999;
  transform:translate(-50%,-110%);
  max-width:180px;text-align:center;
  white-space:normal;
  backdrop-filter:blur(8px);
  animation:tipIn .15s ease;
}
@keyframes tipIn{from{opacity:0;transform:translate(-50%,-95%)}to{opacity:1;transform:translate(-50%,-110%)}}

/* === Calendar === */
.cal-nav-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cal-title-wrap{display:flex;align-items:center;gap:10px}
.cal-title{font-size:1rem;font-weight:700;color:var(--text)}
.btn-icon{
  background:var(--card-bg);border:1px solid rgba(128,128,128,.2);
  border-radius:8px;padding:6px 12px;cursor:pointer;
  color:var(--accent);font-size:.85rem;transition:background .15s,color .15s;
}
.btn-icon:hover{background:var(--accent);color:#fff}
.btn-today{
  background:var(--accent);color:#fff;border:none;
  border-radius:8px;padding:5px 12px;font-size:.78rem;
  cursor:pointer;letter-spacing:1px;transition:opacity .15s;
}
.btn-today:hover{opacity:.85}
.cal-toggle-row{
  display:flex;border-radius:8px;overflow:hidden;
  border:1px solid rgba(128,128,128,.15);width:fit-content;margin-bottom:14px;
}
.toggle-btn{
  background:none;border:none;padding:7px 18px;font-size:.82rem;
  cursor:pointer;color:var(--text2);transition:background .15s,color .15s;letter-spacing:1px;
}
.toggle-btn.active{background:var(--accent);color:#fff}
.dow-row{
  display:grid;grid-template-columns:repeat(7,1fr);text-align:center;
  border-bottom:1px solid rgba(128,128,128,.08);padding-bottom:6px;margin-bottom:4px;
}
.dow{font-size:.72rem;color:var(--text2);font-weight:600;letter-spacing:.5px}
.dow.sun{color:#E74C3C}
.dow.sat{color:#2980B9}
[data-theme="dark"] .dow.sun{color:#FC8181}
[data-theme="dark"] .dow.sat{color:#63B3ED}
.cal-cells{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.c-cell{
  aspect-ratio:1;min-height:40px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:8px;cursor:pointer;transition:background .15s;padding:2px 1px;
}
.c-cell:not(.c-other):hover{background:rgba(192,57,43,.08)}
[data-theme="dark"] .c-cell:not(.c-other):hover{background:rgba(248,113,113,.08)}
.c-other{opacity:.3;pointer-events:none}
.c-cell.c-today{background:var(--accent)}
.c-cell.c-today .c-num{color:#fff!important;font-weight:900}
.c-cell.c-today .c-sub{color:rgba(255,255,255,.75)!important}
.c-num{font-size:.9rem;font-weight:600;color:var(--text);line-height:1.1}
.c-sub{font-size:.6rem;color:var(--text2);line-height:1.2}
.c-sub.c-nm{color:var(--accent);font-weight:600}
.c-cell.c-today .c-sub.c-nm{color:rgba(255,255,255,.9)!important}
.c-cell.c-sun .c-num{color:#E74C3C}
.c-cell.c-sat .c-num{color:#2980B9}
[data-theme="dark"] .c-cell.c-sun .c-num{color:#FC8181}
[data-theme="dark"] .c-cell.c-sat .c-num{color:#63B3ED}
.c-cell.c-today .c-num{color:#fff!important}

/* === Drawer === */
.drawer-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:200;
  display:flex;align-items:flex-end;justify-content:center;
  backdrop-filter:blur(3px);animation:oFade .2s ease;
}
@keyframes oFade{from{opacity:0}to{opacity:1}}
.drawer{
  background:var(--card-bg);
  border-radius:16px 16px 0 0;
  padding:24px 20px 36px;width:100%;max-width:680px;
  max-height:68vh;overflow-y:auto;position:relative;
  animation:oSlide .25s cubic-bezier(.34,1.56,.64,1);
}
@keyframes oSlide{from{transform:translateY(100%)}to{transform:none}}
.drawer-close{
  position:absolute;top:16px;right:16px;
  width:30px;height:30px;background:rgba(128,128,128,.12);
  border:none;border-radius:50%;cursor:pointer;
  color:var(--text2);font-size:.9rem;
  display:flex;align-items:center;justify-content:center;
}
.drawer-close:hover{background:rgba(128,128,128,.22)}
.d-solar{font-size:1.25rem;font-weight:700;color:var(--text);margin-bottom:5px}
.d-lunar{font-size:.88rem;color:var(--text2);margin-bottom:12px}
.d-gz{
  font-size:.82rem;color:var(--accent);background:var(--red-bg);
  display:inline-block;padding:3px 10px;border-radius:6px;
  margin-bottom:16px;letter-spacing:1px;
}
.d-sec{display:inline-block;padding:3px 10px;border-radius:5px;font-size:.78rem;font-weight:700;margin-bottom:10px}
.d-yi{background:var(--green-bg);color:var(--green)}
.d-ji{background:var(--red-bg);color:var(--red)}
.d-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}

/* === Responsive === */
@media(min-width:480px){
  .hl-day{font-size:5.5rem}.hl-month{font-size:3rem}
  .c-cell{min-height:46px}.c-num{font-size:1rem}.c-sub{font-size:.65rem}
}
@media(min-width:680px){
  .page{padding-top:calc(var(--hdr) + 28px)}
  .hero-card{padding:36px 32px}
  .hl-day{font-size:6.5rem}
}

/* === Best Time List === */
.best-time-list{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.best-time-item{
  display:flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:8px;
  background:rgba(39,174,96,.06);
  border-left:3px solid var(--green);
  font-size:.8rem;color:var(--text);
}
[data-theme="dark"] .best-time-item{background:rgba(52,211,153,.08)}
.bt-name{font-weight:700;color:var(--green);min-width:3em}
.bt-arrow{color:var(--text2);font-size:.7rem}
.bt-time{color:var(--text2);font-size:.78rem}

/* === Zodiac Section === */
.zodiac-section{text-align:center;padding-top:8px}
.zodiac-head{font-size:.88rem;font-weight:700;color:var(--gold);margin-bottom:10px;letter-spacing:1px}
.zodiac-sign{
  display:inline-block;
  font-size:1.6rem;font-weight:900;
  color:var(--accent);
  background:linear-gradient(135deg,rgba(212,160,23,.12),rgba(192,57,43,.1));
  padding:8px 28px;border-radius:12px;
  border:1px solid rgba(212,160,23,.3);
  margin-bottom:8px;
}
[data-theme="dark"] .zodiac-sign{background:linear-gradient(135deg,rgba(255,215,0,.1),rgba(248,113,113,.08))}
.zodiac-reason{
  font-size:.82rem;color:var(--text2);
  line-height:1.6;max-width:320px;margin:0 auto;
}

/* === Ad Popup === */
.ad-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.6);
  z-index:9999;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);
  animation:oFade .3s ease;
}
.ad-popup{
  background:var(--card-bg);
  border-radius:20px;
  padding:32px 28px 24px;
  max-width:360px;width:90%;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
  position:relative;
  animation:adBounce .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes adBounce{from{opacity:0;transform:scale(.8) translateY(20px)}to{opacity:1;transform:none}}
@keyframes adShake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-8px)}
  40%{transform:translateX(8px)}
  60%{transform:translateX(-5px)}
  80%{transform:translateX(5px)}
}
.ad-badge{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,#EE4D2D,#FF6633);
  color:#fff;font-size:.72rem;font-weight:700;
  padding:4px 16px;border-radius:20px;
  letter-spacing:1px;
  box-shadow:0 4px 12px rgba(238,77,45,.4);
}
.ad-title{font-size:1.2rem;font-weight:800;color:var(--text);margin:12px 0 8px;letter-spacing:1px}
.ad-desc{font-size:.84rem;color:var(--text2);margin-bottom:18px;line-height:1.5}
.ad-link{
  display:block;
  background:linear-gradient(135deg,#EE4D2D,#FF6633);
  color:#fff;font-weight:700;font-size:.95rem;
  padding:14px 20px;border-radius:12px;
  text-decoration:none;letter-spacing:1px;
  transition:transform .15s,box-shadow .15s;
  box-shadow:0 4px 16px rgba(238,77,45,.35);
}
.ad-link:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(238,77,45,.45)}
.ad-link:active{transform:scale(.97)}
.ad-hint{font-size:.7rem;color:var(--text2);margin-top:12px;opacity:.7}

/* Scrollbar */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-thumb{background:rgba(128,128,128,.25);border-radius:4px}