@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Libre+Baskerville:wght@400;700&display=swap');

@media print {
  @page { size: A4 portrait; margin: 8mm; }
  body { background:#fff; }
  .app-shell { padding:0; }
  .calendar-sheet { max-width:none; border:0; border-radius:0; box-shadow:none; }
  .tear-off,.quick-nav,.icon-btn,.date-actions,.bottom-nav,.network-status,.toast { display:none!important; }
  .calendar-sheet::before { display:none; }
}

:root { --green:#116b49; --green-deep:#0b5238; --ink:#163d2b; --gold:#c79b3f; --paper:#f8f6ee; --paper-dark:#eeebdf; --line:#a7b69c; --red:#b63d36; --shadow:0 30px 70px rgba(35,43,31,.22); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:radial-gradient(circle at 50% 0,#e5eee4 0,#cdddcf 46%,#b6cbbd 100%); color:var(--ink); font-family:'DM Sans',system-ui,sans-serif; }
button { font:inherit; }
.app-shell { padding:20px 14px 46px; }
.calendar-sheet { position:relative; max-width:1000px; margin:0 auto; overflow:hidden; border:1px solid rgba(44,73,48,.18); border-radius:18px 18px 28px 28px; background:var(--paper); box-shadow:var(--shadow); isolation:isolate; }
.calendar-sheet::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.26; pointer-events:none; background-image:radial-gradient(rgba(80,83,60,.18) .55px,transparent .7px); background-size:4px 4px; mix-blend-mode:multiply; }
.tear-off { height:48px; display:flex; align-items:center; justify-content:space-evenly; padding:0 10%; background:linear-gradient(#fff,#e6e8e0); border-bottom:1px dashed #98a397; box-shadow:0 5px 14px rgba(48,57,48,.16); }
.tear-off span { width:18px; height:5px; border-radius:50%; background:#7d8c7e; opacity:.55; }
.topbar { min-height:88px; display:flex; align-items:center; gap:18px; padding:18px 34px 14px; border-bottom:1px solid var(--green); }
.brand { display:flex; gap:10px; align-items:center; min-width:220px; color:var(--green-deep); text-decoration:none; font-family:'Libre Baskerville',serif; line-height:1.05; letter-spacing:.05em; }
.brand strong,.brand b { display:block; font-size:16px; }.brand b { font-size:18px; }.brand-mark { display:grid; place-items:center; width:40px; height:40px; border-radius:45% 55% 45% 55%; color:#fff; background:var(--green); font-size:25px; transform:rotate(45deg); }.brand-mark::first-letter { transform:rotate(-45deg); }
.quick-nav { display:flex; justify-content:center; flex:1; flex-wrap:wrap; gap:10px; }.quick-btn,.today-btn { border:1px solid #72947a; border-radius:999px; color:var(--green-deep); background:rgba(255,255,255,.25); padding:7px 15px; cursor:pointer; font-weight:600; font-size:13px; }.quick-btn:hover,.quick-btn.active { color:#fff; background:var(--green); }.icon-btn,.round-btn { border:0; background:#eef0e7; color:var(--ink); cursor:pointer; }.icon-btn { width:42px; height:42px; border-radius:50%; font-size:24px; }
.date-heading { display:grid; grid-template-columns:1fr 2fr 1fr; align-items:center; margin:0 34px; padding:11px 16px 8px; border-bottom:1px solid var(--green); text-align:center; }.date-heading strong { display:block; color:var(--green); font:700 38px/1 'Libre Baskerville',serif; letter-spacing:.04em; }.date-heading span { display:block; color:#9a6f22; font-size:14px; font-weight:600; margin-top:4px; }.script-line,.script-inline,.arabic-card-label { color:#58725a!important; font-family:'Noto Serif Arabic','Noto Serif SC',serif; font-size:12px!important; letter-spacing:0; }.month-block { border-left:1px solid #a6a98e; border-right:1px solid #a6a98e; }.month-block strong { font-size:34px; }.lunar-block strong { font-family:'Noto Serif SC',serif; font-size:32px; }.script-context { display:flex; align-items:center; justify-content:center; gap:10px; min-height:22px; margin-bottom:9px; color:#607663; font-size:11px; font-weight:700; }.script-context span+span { border-left:1px solid #c5ccb9; padding-left:10px; }.script-context span:nth-child(2) { font-family:'Noto Serif Arabic',serif; font-size:14px; }.script-context span:nth-child(3) { font-family:'Noto Serif SC',serif; }.script-inline { display:inline!important; margin-left:4px; }.arabic-card-label { margin-top:4px!important; }
.hero-row { display:grid; grid-template-columns:1fr 1.45fr 1fr; align-items:center; gap:12px; padding:18px 45px 2px; }.hero-illustration { width:150px; height:180px; justify-self:center; border-radius:90px 90px 12px 12px; background-image:url('assets/generated/nusantara-illustration-sheet-v1.png'); background-size:200% 200%; background-repeat:no-repeat; border:3px solid rgba(198,155,59,.72); box-shadow:0 5px 0 rgba(131,103,39,.12); }.hero-illustration.mosque { background-position:0 0; }.hero-illustration.snake { border-radius:50%; background-position:100% 0; }.hero-illustration.bagua { background-position:0 100%; border-radius:16px; }.hero-illustration.wuxing { background-position:100% 100%; border-radius:16px; }.hero-date { text-align:center; }.date-number { display:block; color:var(--green); font:700 clamp(132px,17vw,232px)/.78 'Libre Baskerville',serif; letter-spacing:-.1em; }.date-actions { display:flex; align-items:center; justify-content:center; gap:9px; margin-top:24px; }.round-btn { width:34px; height:34px; border:1px solid #a9b6a0; border-radius:50%; }.round-btn:hover { background:#dbe7d8; }.today-btn { padding:8px 16px; }.visual-caption { margin:6px 0 16px; color:#5e7861; font-size:12px; text-align:center; }
.day-ribbon { display:flex; align-items:center; justify-content:center; gap:23px; width:70%; min-height:58px; margin:0 auto; border-radius:35px; color:#fff; background:var(--green); box-shadow:0 5px 0 rgba(8,66,44,.12); font-family:'Libre Baskerville',serif; }.day-ribbon strong { font-size:32px; letter-spacing:.06em; }.day-ribbon span:not(.ribbon-ornament) { font-size:24px; }.ribbon-ornament { color:#f7df9a; font-size:22px; }.ribbon-divider { color:#bed4b6; }.week-line { display:flex; justify-content:center; gap:18px; padding:9px 0 13px; font-family:'Libre Baskerville',serif; }.week-line span+span { color:#b06435; }
.calendar-grid { display:grid; grid-template-columns:repeat(4,1fr); margin:0 34px; border:1.5px solid var(--green); border-radius:15px 15px 0 0; overflow:hidden; }.calendar-card { min-height:154px; padding:11px 12px 14px; text-align:center; border-right:1px solid #aab9a2; }.calendar-card:last-child { border-right:0; }.calendar-card h2 { margin:0 -12px 11px; padding-bottom:8px; border-bottom:1px solid #b2c0a9; color:var(--green-deep); font:700 16px 'Libre Baskerville',serif; letter-spacing:.04em; }.calendar-card h2 span { color:#a47b2b; }.calendar-card>strong { display:block; color:var(--green); font:700 56px/.96 'Libre Baskerville',serif; }.calendar-card>span { display:block; margin-top:6px; font:700 13px 'Libre Baskerville',serif; }.calendar-card small { display:block; margin-top:9px; color:#708270; font-size:10px; }.jawa-values { display:flex; flex-direction:column; align-items:center; gap:4px; padding-top:7px; }.jawa-values strong { color:var(--green); font:700 23px 'Libre Baskerville',serif; }.jawa-values span { font-size:13px; font-weight:700; }.jawa-values small { margin-top:5px; }.imlek-card>strong { font-size:22px; padding-top:21px; }.imlek-card>span { font-size:15px; }.hijri-card>strong { font-size:58px; }
.insight-grid { display:grid; grid-template-columns:1.2fr .9fr .9fr 1fr 1fr 1.15fr; margin:0 34px; border:1px solid var(--green); border-top:0; }.insight-card { min-height:190px; padding:17px 14px; border-right:1px solid #aab9a2; }.insight-card:last-child { border-right:0; }.insight-title { display:flex; align-items:center; gap:8px; }.mini-visual { flex:none; width:50px; height:50px; border-radius:50%; background-image:url('assets/generated/nusantara-illustration-sheet-v1.png'); background-size:200% 200%; background-position:100% 0; border:1px solid #c9a450; }.insight-title small,.insight-heading { display:block; color:var(--green-deep); font-weight:700; font-size:12px; }.insight-title strong { display:block; color:var(--green); font:700 21px 'Libre Baskerville',serif; margin-top:4px; }.muted-label { margin:18px 0 4px; color:#58725a; font-size:11px; text-transform:uppercase; font-weight:700; }.insight-card>strong { font-size:12px; }.danger-label { color:var(--red); }.insight-heading { display:flex; align-items:center; gap:7px; font-family:'Libre Baskerville',serif; }.insight-heading span { color:var(--gold); font-size:22px; }.time-list { display:grid; gap:6px; margin-top:18px; font-size:12px; font-weight:600; }.direction { display:grid; gap:7px; margin-top:20px; text-align:center; }.direction strong { color:var(--green); font:700 18px 'Libre Baskerville',serif; }.direction span { font-size:11px; }.direction em { color:var(--red); font-size:11px; font-style:normal; }.solar-term { display:grid; gap:7px; margin-top:18px; text-align:center; }.solar-term strong { font:700 14px 'Libre Baskerville',serif; }.solar-term span { font-size:11px; }.mountains { height:35px; margin:4px 14px 0; background:linear-gradient(145deg,transparent 44%,#97aa81 45% 62%,transparent 63%),linear-gradient(35deg,transparent 43%,#c8d29b 44% 62%,transparent 63%); }
.moon-card { cursor:pointer; }.moon-card:focus-visible { outline:3px solid var(--gold); outline-offset:-4px; }.moon-summary { display:grid; gap:8px; margin-top:16px; text-align:center; }.moon-summary strong { color:var(--green); font:700 15px/1.25 'Libre Baskerville',serif; }.moon-summary span,.moon-summary small { color:#607263; font-size:10px; line-height:1.4; }
.wuxing-wheel { position:relative; width:122px; height:122px; margin:10px auto 0; border:1px dashed #97a78f; border-radius:50%; background:conic-gradient(#3d8c61 0 20%,#d1624b 20% 40%,#d3a12c 40% 60%,#8a8d83 60% 80%,#4e9bc0 80% 100%); }.wuxing-wheel::after { content:""; position:absolute; inset:23px; border:1px solid rgba(255,255,255,.72); border-radius:50%; background:rgba(247,244,231,.92); }.wuxing-wheel span,.wuxing-wheel b { position:absolute; z-index:1; font-size:8px; font-weight:800; }.wuxing-wheel .wood { top:3px; left:50%; transform:translateX(-50%); }.wuxing-wheel .fire { top:50%; right:1px; transform:translateY(-50%); }.wuxing-wheel .earth { bottom:4px; right:16px; }.wuxing-wheel .metal { bottom:4px; left:13px; }.wuxing-wheel .water { top:50%; left:0; transform:translateY(-50%); }.wuxing-wheel b { top:50%; left:50%; transform:translate(-50%,-50%); color:var(--green); font:700 17px 'Libre Baskerville',serif; }
.lower-insights { display:grid; grid-template-columns:1.3fr 1fr 1.2fr; margin:0 34px; padding:15px 20px; border:1px solid var(--green); border-top:0; }.lower-insights article { display:flex; gap:12px; align-items:center; min-height:70px; padding:0 16px; border-right:1px solid #abb9a4; }.lower-insights article:last-child { border-right:0; }.lower-insights strong { color:var(--green-deep); font:700 13px 'Libre Baskerville',serif; }.lower-insights p { margin:6px 0 0; font-size:11px; }.lower-insights small { font-size:10px; }.bagua-icon,.nature-icon { display:grid; place-items:center; min-width:52px; height:52px; color:#fff; background:var(--green); border-radius:50%; font-size:28px; }.energy-bars { display:flex; align-items:end; gap:3px; min-width:42px; height:48px; }.energy-bars i { width:8px; background:var(--green); border-radius:4px 4px 0 0; }.energy-bars i:nth-child(1){height:15px}.energy-bars i:nth-child(2){height:25px}.energy-bars i:nth-child(3){height:36px}.energy-bars i:nth-child(4){height:46px}.energy-dots { display:flex; gap:5px; margin-top:7px; }.energy-dots i { width:10px; height:10px; border-radius:50%; background:var(--green); }
.recommendations { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:14px 34px; }.recommend-card { overflow:hidden; border:1px solid #81a184; border-radius:13px; }.recommend-card h2 { margin:0; padding:9px; text-align:center; font:700 16px 'Libre Baskerville',serif; border-bottom:1px solid currentColor; }.recommend-card.good { color:var(--green); }.recommend-card.avoid { color:var(--red); border-color:#cd8c84; }.recommend-items { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:14px; }.recommend-items span { display:flex; align-items:center; gap:7px; font-size:18px; }.recommend-items b { color:var(--ink); font-size:10px; line-height:1.25; }
.bottom-nav { display:grid; grid-template-columns:repeat(9,1fr); gap:8px; margin:18px 34px 30px; }.bottom-btn { min-height:55px; display:flex; justify-content:center; align-items:center; gap:7px; border:1px solid #7f9f82; border-radius:12px; background:#fbfaf4; color:var(--green-deep); cursor:pointer; }.bottom-btn:hover,.bottom-btn.active { color:#fff; background:var(--green); }.bottom-btn span { font-size:21px; }.bottom-btn b { font-size:11px; }
.toast { position:fixed; left:50%; bottom:22px; z-index:20; transform:translate(-50%,20px); padding:10px 16px; border-radius:999px; color:#fff; background:#123d2b; box-shadow:0 7px 24px rgba(0,0,0,.2); opacity:0; pointer-events:none; transition:.22s ease; font-size:13px; }.toast.show { opacity:1; transform:translate(-50%,0); }.info-dialog { width:min(460px,calc(100% - 28px)); border:0; border-radius:18px; padding:26px; color:var(--ink); background:var(--paper); box-shadow:var(--shadow); }.info-dialog::backdrop { background:rgba(8,40,24,.42); backdrop-filter:blur(4px); }.dialog-close { position:absolute; top:12px; right:16px; border:0; background:none; font-size:24px; cursor:pointer; }.info-dialog h2 { margin:0 0 8px; color:var(--green); font-family:'Libre Baskerville',serif; }.info-dialog p { font-size:13px; line-height:1.55; }.method-list { display:grid; gap:8px; margin:16px 0; }.method-list div { display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid #d2d7c8; font-size:12px; }.method-list span { color:#627764; text-align:right; }.dialog-note { color:#7e5e31; font-size:11px!important; }
.converter-dialog { width:min(720px,calc(100% - 24px)); max-width:calc(100vw - 24px); max-height:calc(100vh - 28px); max-height:calc(100dvh - 28px); overflow:auto; overflow-x:hidden; border:1px solid #809a7d; border-radius:12px; padding:0; color:var(--ink); background:var(--paper); box-shadow:var(--shadow); }
.converter-dialog::backdrop { background:rgba(8,40,24,.48); backdrop-filter:blur(5px); }
.converter-dialog .dialog-close { z-index:2; color:var(--green-deep); }
.converter-header { display:flex; align-items:center; gap:15px; padding:22px 28px 18px; border-bottom:2px solid var(--green); background:linear-gradient(180deg,#fff,#f2f1e8); }
.converter-header>span { display:grid; place-items:center; width:48px; height:48px; flex:none; border:1px solid var(--gold); border-radius:50%; color:#fff; background:var(--green); font-size:25px; }
.converter-header small { color:#778270; font-size:9px; font-weight:800; letter-spacing:.14em; }
.converter-header h2 { margin:2px 0 0; color:var(--green-deep); font:700 25px 'Libre Baskerville',serif; }
.converter-header>div { min-width:0; }.converter-header p { margin:3px 0 0; color:#677866; font-size:12px; overflow-wrap:anywhere; }
.converter-section { padding:20px 28px 16px; }
.converter-section>label { display:block; margin-bottom:7px; color:var(--green-deep); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.converter-input-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:9px; }
.converter-input-row input,.reverse-grid input { width:100%; min-height:42px; border:1px solid #91a38b; border-radius:5px; padding:8px 11px; color:var(--ink); background:#fffef8; font:600 14px 'DM Sans',sans-serif; }
.converter-dialog button:not(.dialog-close) { min-height:42px; border:1px solid var(--green); border-radius:5px; padding:8px 17px; color:#fff; background:var(--green); cursor:pointer; font-weight:700; }
.converter-dialog button:not(.dialog-close):hover { background:var(--green-deep); }
.conversion-results { display:grid; grid-template-columns:repeat(2,1fr); margin-top:15px; border:2px solid var(--green); }
.conversion-results article { min-height:92px; padding:12px 14px; border-right:1px solid #a4b49e; border-bottom:1px solid #a4b49e; }
.conversion-results article:nth-child(2n) { border-right:0; }
.conversion-results article:nth-last-child(-n+2) { border-bottom:0; }
.conversion-results small { display:block; color:#927027; font-size:10px; font-weight:800; letter-spacing:.09em; }
.conversion-results strong { display:block; margin-top:7px; color:var(--green-deep); font:700 17px/1.25 'Libre Baskerville',serif; }
.conversion-results span { display:block; margin-top:5px; color:#637463; font-size:11px; }
.show-date-button { width:100%; margin-top:10px; background:#fbfaf3!important; color:var(--green-deep)!important; }
.reverse-converter { margin:0 28px 18px; border-top:1px solid #aab8a3; padding-top:14px; }
.reverse-converter summary { color:var(--green-deep); cursor:pointer; font:700 14px 'Libre Baskerville',serif; }
.reverse-grid { display:grid; grid-template-columns:1.25fr .75fr .75fr 1.2fr; gap:9px; margin:14px 0 10px; }
.reverse-grid-three { grid-template-columns:repeat(3,1fr); }
.reverse-grid label { color:#667866; font-size:10px; font-weight:700; }
.reverse-grid label input { display:block; margin-top:5px; }
.reverse-grid .leap-check { display:flex; align-items:center; gap:7px; padding-top:17px; }
.reverse-grid .leap-check input { width:18px; min-height:18px; margin:0; }
.reverse-converter output { display:block; margin-top:10px; padding:10px 12px; border-left:3px solid var(--gold); color:var(--green-deep); background:#eeeede; font-size:12px; font-weight:700; }
.converter-dialog>.dialog-note { margin:0; padding:12px 28px 17px; border-top:1px dashed #aab8a3; }
.feature-dialog { max-width:720px; }
.feature-results strong { font-size:16px; }
.solar-feature-result { display:grid; gap:8px; margin-top:16px; padding:22px; border:2px solid var(--green); background:#fbfaf3; text-align:center; }
.solar-feature-result small { color:#8c6727; font-size:10px; font-weight:800; letter-spacing:.12em; }
.solar-feature-result strong { color:var(--green-deep); font:700 28px/1.25 'Libre Baskerville',serif; }
.solar-feature-result span { font-size:13px; font-weight:700; }
.solar-feature-result b { color:#6c765f; font-size:11px; font-weight:600; }
.moon-feature-result { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:18px; margin-top:16px; padding:20px; border:2px solid var(--green); background:#fbfaf3; }.moon-disc { display:grid; place-items:center; width:82px; height:82px; border:2px solid var(--gold); border-radius:50%; color:var(--green); background:#f5efd8; font-size:62px; line-height:1; }.moon-feature-result small { display:block; color:#8c6727; font-size:9px; font-weight:800; letter-spacing:.1em; }.moon-feature-result strong { display:block; margin-top:5px; color:var(--green-deep); font:700 26px 'Libre Baskerville',serif; }.moon-feature-result span { display:block; margin-top:7px; color:#617163; font-size:12px; }.moon-timeline { display:grid; grid-template-columns:repeat(5,1fr); margin-top:14px; border:1px solid #9aae94; }.moon-timeline article { min-height:94px; padding:10px 7px; border-right:1px solid #b4c0ad; text-align:center; }.moon-timeline article:last-child { border-right:0; }.moon-timeline article.next-phase { background:#eef2df; box-shadow:inset 0 3px var(--gold); }.moon-timeline article>span { display:block; color:var(--green); font-size:27px; }.moon-timeline strong,.moon-timeline small { display:block; }.moon-timeline strong { color:var(--green-deep); font-size:10px; }.moon-timeline small { margin-top:5px; color:#667468; font-size:9px; line-height:1.35; }
.eclipse-feature-result { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:20px; margin-top:16px; padding:20px; border:2px solid var(--green); background:linear-gradient(135deg,#fbfaf3,#edf1df); }.eclipse-orbit { position:relative; width:86px; height:86px; border:1px solid #bea55e; border-radius:50%; background:#f4d27d; box-shadow:inset -12px -10px 20px rgba(100,70,20,.18); }.eclipse-orbit i { position:absolute; inset:13px; border-radius:50%; background:#173b2b; box-shadow:0 0 0 6px rgba(255,255,255,.35),0 0 28px rgba(141,104,27,.35); }.eclipse-orbit b { position:absolute; width:12px; height:12px; right:-2px; top:36px; border-radius:50%; background:#f8f3df; box-shadow:0 0 0 2px #b79746; }.eclipse-feature-result small { display:block; color:#8c6727; font-size:9px; font-weight:800; letter-spacing:.1em; }.eclipse-feature-result strong { display:block; margin-top:5px; color:var(--green-deep); font:700 25px 'Libre Baskerville',serif; }.eclipse-feature-result span { display:block; margin-top:6px; color:#617163; font-size:12px; }.eclipse-feature-result em { display:inline-block; margin-top:10px; padding:5px 9px; border-radius:999px; font-size:10px; font-style:normal; font-weight:800; }.visible-indonesia { color:#fff; background:var(--green); }.not-visible-indonesia { color:#7c2d26; background:#f4ded7; }.visibility-not-curated { color:#674d17; background:#f4e9bd; }.eclipse-region { margin:12px 0 0; padding:10px 12px; border-left:3px solid var(--gold); color:#56695a; background:rgba(199,155,63,.08); font-size:11px; line-height:1.5; }.eclipse-stages { display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); margin-top:12px; border:1px solid #aab9a2; }.eclipse-stages[hidden] { display:none; }.eclipse-stages span { padding:9px; border-right:1px solid #c3cbbd; text-align:center; }.eclipse-stages b,.eclipse-stages small { display:block; }.eclipse-stages b { color:var(--green-deep); font-size:9px; }.eclipse-stages small { margin-top:4px; color:#68776a; font-size:8px; line-height:1.4; }.eclipse-year-heading { margin:18px 0 8px; color:var(--green-deep); font:700 14px 'Libre Baskerville',serif; }.eclipse-year-list { display:grid; border:1px solid #aab9a2; }.eclipse-year-list:empty { display:none; }.converter-dialog .eclipse-year-list button { display:grid; grid-template-columns:130px 1fr; gap:12px; align-items:center; min-height:0; padding:10px 12px; border:0; border-bottom:1px solid #ccd3c7; border-radius:0; color:var(--ink); background:#fffef8; text-align:left; cursor:pointer; }.converter-dialog .eclipse-year-list button:last-child { border-bottom:0; }.converter-dialog .eclipse-year-list button:hover { color:var(--ink); background:#eef2df; }.eclipse-year-list button>span { color:#8a6420; font-size:10px; font-weight:800; }.eclipse-year-list strong,.eclipse-year-list small { display:block; }.eclipse-year-list strong { color:var(--green-deep); font-size:12px; }.eclipse-year-list small { margin-top:3px; color:#68776a; font-size:9px; }.event-list .eclipse-event { border-color:#657167; color:#243d31; background:linear-gradient(135deg,#edf0e8,#f5e8bd); }.event-list .eclipse-event::before { content:'◒ '; color:#8b651f; }
.heading-picker { display:block; width:100%; padding:0; border:0; color:inherit; background:transparent; cursor:pointer; }
.heading-picker strong { width:max-content; margin:0 auto; padding:2px 8px; border-radius:5px; }
.heading-picker:hover strong,.heading-picker:focus-visible strong { outline:2px solid currentColor; outline-offset:2px; background:rgba(199,155,63,.09); }
.period-dialog { width:min(560px,calc(100% - 24px)); max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); overflow:auto; overflow-x:hidden; padding:0; border:1px solid #82997f; border-radius:14px; color:var(--ink); background:var(--paper); box-shadow:0 24px 70px rgba(25,42,29,.28); }
.period-dialog::backdrop { background:rgba(18,36,24,.58); backdrop-filter:blur(2px); }
.period-dialog header { padding:24px 28px 15px; border-bottom:1px solid #aab8a3; text-align:center; }
.period-dialog header small { color:#8c6727; font-size:10px; font-weight:800; letter-spacing:.13em; }
.period-dialog h2 { margin:6px 0; color:var(--green-deep); font:700 24px 'Libre Baskerville',serif; }
.period-dialog header p { margin:0; color:#68776a; font-size:11px; }
.period-dialog section { padding:20px 28px 26px; }
.period-dialog section>label,.period-dialog legend { color:var(--green-deep); font-size:11px; font-weight:800; }
.period-dialog select { width:100%; min-height:44px; margin:7px 0 17px; padding:8px 10px; border:1px solid #8da18a; border-radius:7px; color:var(--ink); background:#fffefa; font-weight:700; }
.period-dialog fieldset { margin:0; padding:0; border:0; }
.month-choice-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:8px; }
.month-choice-grid button { min-height:38px; padding:6px; border:1px solid #91a28e; border-radius:6px; color:var(--green-deep); background:#fbfaf3; cursor:pointer; font-size:11px; font-weight:700; }
.month-choice-grid button:hover,.month-choice-grid button.active { color:#fff; background:var(--green); border-color:var(--green); }
.apply-period { width:100%; min-height:44px; margin-top:18px; border:0; border-radius:7px; color:#fff; background:var(--green); cursor:pointer; font-weight:800; }
@media (max-width:820px) { .app-shell { padding:0; }.calendar-sheet { border-radius:0; }.topbar { padding:15px 18px 12px; gap:10px; flex-wrap:wrap; }.brand { min-width:180px; }.quick-nav { order:3; flex-basis:100%; justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; padding-bottom:2px; }.quick-btn { flex:none; }.date-heading,.hero-row,.calendar-grid,.insight-grid,.lower-insights,.recommendations { margin-left:18px; margin-right:18px; }.hero-row { padding-left:18px; padding-right:18px; }.hero-illustration { width:110px; height:135px; }.day-ribbon { width:82%; }.day-ribbon strong { font-size:25px; }.calendar-grid { grid-template-columns:repeat(2,1fr); }.calendar-card:nth-child(2) { border-right:0; }.calendar-card:nth-child(-n+2) { border-bottom:1px solid #aab9a2; }.insight-grid { grid-template-columns:repeat(2,1fr); }.insight-card:nth-child(2n) { border-right:0; }.insight-card { border-bottom:1px solid #aab9a2; }.insight-card:nth-last-child(-n+2) { border-bottom:0; }.lower-insights { grid-template-columns:1fr; }.lower-insights article { border-right:0; border-bottom:1px solid #abb9a4; }.lower-insights article:last-child { border-bottom:0; }.recommendations { grid-template-columns:1fr; }.bottom-nav { margin-left:18px; margin-right:18px; grid-template-columns:repeat(3,1fr); }.bottom-btn { min-height:50px; }.bottom-btn b { font-size:10px; }.date-number { font-size:clamp(100px,22vw,170px); } }
@media (max-width:510px) { .date-heading { margin-left:12px; margin-right:12px; padding-left:4px; padding-right:4px; }.date-heading strong { font-size:26px; }.month-block strong { font-size:24px; }.lunar-block strong { font-size:22px; }.date-heading span { font-size:10px; }.script-line { font-size:9px!important; }.hero-row { grid-template-columns:64px 1fr 64px; gap:5px; padding-left:12px; padding-right:12px; }.hero-illustration { width:62px; height:78px; border-width:2px; }.date-number { font-size:110px; }.script-context { gap:5px; font-size:9px; }.script-context span+span { padding-left:5px; }.script-context span:nth-child(2) { font-size:12px; }.date-actions { margin-top:18px; gap:4px; }.today-btn { padding:7px 9px; font-size:11px; }.round-btn { width:28px; height:28px; font-size:12px; }.day-ribbon { gap:10px; min-height:50px; }.day-ribbon strong { font-size:20px; }.day-ribbon span:not(.ribbon-ornament) { font-size:16px; }.calendar-grid,.insight-grid,.lower-insights,.recommendations { margin-left:12px; margin-right:12px; }.calendar-card { min-height:145px; padding-left:7px; padding-right:7px; }.calendar-card h2 { margin-left:-7px; margin-right:-7px; font-size:12px; }.calendar-card>strong,.hijri-card>strong { font-size:43px; }.calendar-card>span { font-size:10px; }.jawa-values strong { font-size:18px; }.insight-card { padding:13px 10px; min-height:175px; }.recommend-items { padding:10px; gap:8px; }.recommend-items span { font-size:16px; }.bottom-nav { gap:5px; margin-left:12px; margin-right:12px; }.bottom-btn { flex-direction:column; gap:2px; }.topbar { padding-left:12px; padding-right:12px; }.brand { min-width:0; flex:1; }.brand strong { font-size:12px; }.brand b { font-size:14px; }.brand-mark { width:32px; height:32px; font-size:18px; } }

/* Physical tear-off calendar composition v2 */
.calendar-sheet { max-width:860px; border-radius:10px 10px 20px 20px; }
.calendar-sheet.red-day .date-number,.calendar-sheet.red-day .masehi-card>strong,.calendar-sheet.red-day .masehi-card>span,.calendar-sheet.red-day #event-chip { color:var(--red); }
.calendar-sheet.red-day .day-ribbon { background:var(--red); border-color:#8f2925; }
.calendar-sheet.red-day .day-ribbon #day-name { color:#fff; }
.calendar-sheet.red-day .week-line { border-color:#cf8b83; }
.calendar-sheet.red-day .masehi-card { border-color:#cf8b83; }
.calendar-sheet.red-day .calendar-grid { border-color:var(--red); }
.calendar-sheet.red-day { --green:var(--red); --green-deep:#8f2925; --line:#cf8b83; }
.calendar-sheet.red-day .script-line,.calendar-sheet.red-day .script-inline,.calendar-sheet.red-day .arabic-card-label,.calendar-sheet.red-day .hero-side-script { color:var(--green-deep)!important; }
.calendar-sheet.red-day .recommend-card.good { --green:#116b49; --green-deep:#0b5238; }
.calendar-sheet.holiday-day .visual-caption { margin:7px 24px 5px; color:#a52722!important; font:700 18px/1.35 'Libre Baskerville',serif; letter-spacing:.015em; }
.calendar-sheet.holiday-day .event-native { color:#8f2925; }
.calendar-sheet.holiday-day #event-chip { display:inline-block; max-width:100%; padding:5px 11px; border:1px solid #cf8b83; color:#98241f!important; background:rgba(182,61,54,.07); font-size:15px; font-weight:700; line-height:1.35; text-align:center; }
.calendar-sheet.holiday-day .week-line { align-items:center; flex-wrap:wrap; row-gap:6px; }
.calendar-sheet::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.12; background:radial-gradient(circle at 92% 12%,var(--year-accent,#c79b3f),transparent 34%),radial-gradient(circle at 8% 88%,var(--year-accent,#c79b3f),transparent 28%); }
.calendar-sheet.year-tikus { --year-accent:#5b8bb2; }.calendar-sheet.year-kerbau { --year-accent:#a87b4d; }.calendar-sheet.year-harimau { --year-accent:#d07a32; }.calendar-sheet.year-kelinci { --year-accent:#b8899f; }.calendar-sheet.year-naga { --year-accent:#4f9b82; }.calendar-sheet.year-ular { --year-accent:#5e8a5b; }.calendar-sheet.year-kuda { --year-accent:#d08a3c; }.calendar-sheet.year-kambing { --year-accent:#8c9d8f; }.calendar-sheet.year-monyet { --year-accent:#a77b53; }.calendar-sheet.year-ayam { --year-accent:#bf5c44; }.calendar-sheet.year-anjing { --year-accent:#7e7a9c; }.calendar-sheet.year-babi { --year-accent:#c77c83; }
.hokkien-line { color:#8c6727!important; font-family:'Noto Serif SC',serif; font-size:11px!important; letter-spacing:.02em; }
.lunar-month-size { display:inline-block!important; width:max-content; margin:6px auto 0!important; padding:3px 7px; border:1px solid #c4a65c; color:#72571f!important; background:rgba(199,155,63,.08); font-size:9px!important; font-weight:800; letter-spacing:.05em; }
.event-native { margin:0 20px 10px; color:#8c6727; font:700 12px/1.3 'Libre Baskerville',serif; text-align:center; }
.brand-mark { position:relative; transform:none; border:2px solid var(--gold); border-radius:50%; color:transparent; background:radial-gradient(circle at 35% 30%,var(--green),var(--green-deep)); box-shadow:0 2px 0 rgba(80,57,15,.18); }
.brand-mark::before { content:"✺"; position:absolute; color:#f4d27d; font-size:25px; line-height:1; transform:rotate(-12deg); }
.brand-mark::after { content:""; position:absolute; right:5px; bottom:5px; width:7px; height:7px; border:1px solid #f8e4a7; border-radius:50%; background:var(--red); }
.brand-mark::first-letter { transform:none; }
.network-status { margin:8px 26px 0; padding:7px 10px; border:1px solid #caa04b; border-radius:5px; color:#6f5221; background:#fff6d9; font-size:11px; font-weight:700; text-align:center; }
.tear-off { height:38px; }
.topbar { min-height:64px; padding:11px 26px 10px; }
.brand { min-width:210px; }
.quick-nav { display:none; }
.language-note { margin-left:auto; color:#7a846f; font-size:9px; font-weight:800; letter-spacing:.13em; }
.date-heading { margin:0 26px; padding:13px 10px 10px; }
.date-heading strong { font-size:34px; }
.month-block strong { font-size:38px; }
.lunar-block strong { font-size:34px; }
.hero-row { grid-template-columns:118px minmax(260px,1fr) 118px; gap:10px; padding:16px 36px 0; min-height:340px; }
.hero-side { align-self:stretch; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; color:var(--green-deep); text-align:center; }
.hero-side-kicker { color:#7d836f; font-size:10px; font-weight:800; letter-spacing:.15em; }
.hero-side>strong { max-width:110px; font:700 14px/1.25 'Libre Baskerville',serif; }
.hero-side-script { min-height:20px; color:#5f7560; font-family:'Noto Serif Arabic','Noto Serif SC',serif; font-size:17px; }
.hero-illustration { width:88px; height:96px; margin-top:13px; border-width:1.5px; box-shadow:none; }
.hero-illustration.snake { width:92px; height:92px; }
.hero-date { align-self:center; }
.date-number { font-size:clamp(210px,29vw,290px); line-height:.76; letter-spacing:-.12em; text-shadow:0 2px 0 rgba(255,255,255,.7); }
.date-actions { margin-top:30px; }
.visual-caption { margin:5px 0 12px; font:600 11px 'DM Sans',sans-serif; letter-spacing:.04em; }
.day-ribbon { width:calc(100% - 52px); min-height:55px; border-radius:2px; border:1px solid var(--green-deep); box-shadow:none; }
.day-ribbon strong { font-size:29px; }
.week-line { margin:0 26px; padding:8px 0 9px; border-bottom:1px solid #8ea288; font-size:13px; }
.event-list { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin:-2px 26px 10px; }
.event-list[hidden] { display:none; }
.event-list span { padding:4px 8px; border:1px solid var(--line); border-radius:999px; color:var(--green-deep); background:rgba(199,155,63,.08); font-size:10px; font-weight:700; line-height:1.35; text-align:center; }
.event-list .ritual-event,#event-chip.ritual-event-chip { border-color:#b28a37; color:#5b3e72; background:#fff7dc; }
#event-chip.ritual-event-chip,#event-chip.major-observance-chip { display:inline-block; padding:5px 9px; border-style:solid; border-width:1px; border-radius:999px; font-weight:700; line-height:1.35; text-align:center; }
.event-list .ritual-event::before,#event-chip.ritual-event-chip::before { content:'☾ '; color:#a46f16; }
.event-list .major-observance-event,#event-chip.major-observance-chip:not(.ritual-event-chip) { border-color:#ad7e25; color:#694b10; background:linear-gradient(135deg,#fff9df,#f6e8b7); }
.event-list .major-observance-event { box-shadow:inset 0 0 0 1px rgba(255,255,255,.75); }
.calendar-sheet.ritual-day:not(.holiday-day) .week-line { background:linear-gradient(90deg,transparent,rgba(246,232,183,.22),transparent); }
.calendar-grid,.insight-grid,.lower-insights { margin-left:26px; margin-right:26px; }
.calendar-grid { border-width:2px; border-radius:0; }
.calendar-card { min-height:135px; padding-top:8px; padding-bottom:9px; }
.calendar-card h2 { margin-bottom:7px; padding-bottom:6px; font-size:14px; }
.calendar-card>strong { font-size:50px; }
.imlek-card>strong { padding-top:15px; font-size:19px; }
.hijri-card>strong { font-size:52px; }
.insight-grid { grid-template-columns:1.12fr .82fr .82fr .94fr .94fr 1.08fr; border-width:2px; border-top:0; }
.insight-card { min-height:162px; padding:12px 10px; }
.time-list { margin-top:12px; gap:4px; }
.direction { margin-top:13px; }
.solar-term { margin-top:12px; }
.wuxing-wheel { width:105px; height:105px; }
.lower-insights { padding:10px 10px; border-width:2px; border-top:0; }
.lower-insights article { min-height:61px; padding:0 11px; }
.bagua-icon,.nature-icon { min-width:44px; height:44px; font-size:23px; }
.recommendations { margin:10px 26px; gap:10px; }
.recommend-card { border-radius:0; }
.recommend-card h2 { padding:7px; font-size:13px; }
.recommend-items { padding:10px; gap:7px; }
.bottom-nav { margin:12px 26px 22px; gap:6px; padding-top:10px; border-top:1px solid #9aac94; }
.bottom-btn { min-height:46px; border-radius:5px; }

@media (max-width:820px) {
  .calendar-sheet { max-width:100%; }
  .topbar { padding-left:18px; padding-right:18px; }
  .date-heading,.calendar-grid,.insight-grid,.lower-insights { margin-left:18px; margin-right:18px; }
  .hero-row { grid-template-columns:92px minmax(190px,1fr) 92px; min-height:275px; padding-left:20px; padding-right:20px; }
  .date-number { font-size:clamp(165px,31vw,235px); }
  .hero-illustration { width:72px; height:78px; }
  .hero-illustration.snake { width:75px; height:75px; }
  .hero-illustration.zodiac-visual { width:82px; height:82px; }
  .hero-illustration.hijri-visual { width:78px; height:84px; }
  .day-ribbon { width:calc(100% - 36px); }
  .week-line { margin-left:18px; margin-right:18px; }
  .event-list { margin-left:18px; margin-right:18px; }
  .recommendations,.bottom-nav { margin-left:18px; margin-right:18px; }
}

@media (max-width:510px) {
  .language-note { display:none; }
  .date-heading { margin-left:10px; margin-right:10px; }
  .hero-row { grid-template-columns:62px minmax(150px,1fr) 62px; min-height:222px; padding:8px 10px 0; }
  .hero-side-kicker { font-size:7px; }
  .hero-side>strong { font-size:9px; }
  .hero-side-script { font-size:12px; }
  .hero-illustration { width:52px; height:56px; margin-top:7px; }
  .hero-illustration.snake { width:54px; height:54px; }
  .date-number { font-size:clamp(125px,39vw,180px); }
  .date-actions { margin-top:20px; }
  .day-ribbon { width:calc(100% - 20px); }
  .week-line { margin-left:10px; margin-right:10px; font-size:10px; }
  .event-list { margin-left:10px; margin-right:10px; }
  .calendar-grid,.insight-grid,.lower-insights,.recommendations { margin-left:10px; margin-right:10px; }
  .bottom-nav { margin-left:10px; margin-right:10px; }
  .insight-grid { grid-template-columns:repeat(2,1fr); }
  .insight-card:nth-last-child(-n+2) { border-bottom:0; }
  .moon-feature-result { grid-template-columns:1fr; text-align:center; }
  .moon-disc { margin:0 auto; }
  .moon-timeline { grid-template-columns:1fr; }
  .moon-timeline article { display:grid; grid-template-columns:42px 1fr; align-items:center; min-height:62px; border-right:0; border-bottom:1px solid #b4c0ad; text-align:left; }
  .moon-timeline article:last-child { border-bottom:0; }
  .converter-header,.converter-section { padding-left:18px; padding-right:18px; }
  .moon-dialog .converter-input-row { grid-template-columns:1fr; }
  .moon-dialog .converter-input-row button { width:100%; }
  .eclipse-dialog .converter-input-row { grid-template-columns:1fr; }
  .eclipse-dialog .converter-input-row button { width:100%; }
  .eclipse-feature-result { grid-template-columns:1fr; text-align:center; }
  .eclipse-orbit { margin:auto; }
  .converter-dialog .eclipse-year-list button { grid-template-columns:1fr; gap:3px; }
  .conversion-results { grid-template-columns:1fr; }
  .conversion-results article,.conversion-results article:nth-child(2n) { border-right:0; border-bottom:1px solid #a4b49e; }
  .conversion-results article:last-child { border-bottom:0; }
  .reverse-converter { margin-left:18px; margin-right:18px; }
  .reverse-grid { grid-template-columns:repeat(3,1fr); }
  .reverse-grid-three { grid-template-columns:repeat(3,1fr); }
  .reverse-grid .leap-check { grid-column:1/-1; padding-top:0; }
  .converter-dialog>.dialog-note { padding-left:18px; padding-right:18px; }
  .calendar-sheet.holiday-day .visual-caption { margin-left:12px; margin-right:12px; font-size:15px; }
  .calendar-sheet.holiday-day #event-chip { font-size:12px; }
  .event-native { margin-left:12px; margin-right:12px; font-size:10px; }
}

@media (max-width:420px) {
  .reverse-grid-three { grid-template-columns:1fr; }
  .period-dialog section { padding-left:18px; padding-right:18px; }
  .month-choice-grid { grid-template-columns:repeat(3,1fr); }
}

/* Project-generated artwork; text and dates remain live DOM content. */
.brand-mark { display:block; flex:0 0 50px; width:50px; height:50px; overflow:visible; color:var(--green); border:0; border-radius:0; background:none; box-shadow:none; }
.brand-mark::before,.brand-mark::after { content:none; }
.logo-page { fill:rgba(255,255,255,.18); stroke:currentColor; stroke-width:2.4; }
.logo-header { fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; }
.logo-cycle { fill:none; stroke:var(--gold); stroke-width:2.8; }
.logo-cardinals { fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
.logo-coin { fill:var(--paper); stroke:currentColor; stroke-width:2.3; }
.logo-dot { fill:var(--gold); }
.zodiac-visual { --zx:0%; --zy:0%; position:relative; overflow:visible; box-sizing:border-box; color:var(--green); border:0; border-radius:0; background:transparent; box-shadow:none; }
.zodiac-visual::before { content:""; position:absolute; inset:-2px; border-radius:0; background:currentColor; -webkit-mask-image:url('assets/generated/zodiac-lineart-v4.png'); mask-image:url('assets/generated/zodiac-lineart-v4.png'); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:400% 300%; mask-size:400% 300%; -webkit-mask-position:var(--zx) var(--zy); mask-position:var(--zx) var(--zy); }
.hero-illustration.zodiac-visual { width:108px; height:108px; aspect-ratio:1; }
.mini-visual.zodiac-visual { width:62px; height:62px; margin:0; justify-self:center; }
.insight-card:first-child .insight-title { display:grid; grid-template-columns:70px minmax(0,1fr); align-items:center; gap:8px; }
.mini-visual.zodiac-snake::before { transform:translateX(4px); }
.zodiac-rat { --zx:0%; --zy:0%; }.zodiac-ox { --zx:33.333%; --zy:0%; }.zodiac-tiger { --zx:66.667%; --zy:0%; }.zodiac-rabbit { --zx:100%; --zy:0%; }
.zodiac-dragon { --zx:0%; --zy:50%; }.zodiac-snake { --zx:33.333%; --zy:50%; }.zodiac-horse { --zx:66.667%; --zy:50%; }.zodiac-goat { --zx:100%; --zy:50%; }
.zodiac-monkey { --zx:0%; --zy:100%; }.zodiac-rooster { --zx:33.333%; --zy:100%; }.zodiac-dog { --zx:66.667%; --zy:100%; }.zodiac-pig { --zx:100%; --zy:100%; }
.event-visual { border:0; border-radius:50%; background-color:#f8f3df; background-image:url('assets/generated/event-medallions-v2.png'); background-repeat:no-repeat; background-size:500% 500%; }
.event-visual.mosque { background-position:3% 22.5%; }.event-visual.church,.event-visual.christian { background-position:34.5% 22.5%; }.event-visual.hindu { background-position:65.5% 22.5%; }.event-visual.buddhist { background-position:97% 22.5%; }
.event-visual.khucian,.event-visual.khonghucu,.event-visual.temple { background-position:3% 55%; }.event-visual.national,.event-visual.wuxing { background-position:34.5% 55%; }.event-visual.moonland,.event-visual.bagua { background-position:65.5% 55%; }.event-visual.lantern,.event-visual.imlek { background-position:97% 55%; }

/* Holiday art follows the physical tear-off-calendar convention: one ink colour,
   a clear side illustration, and a quiet large watermark behind the date. */
.holiday-art-newyear,.event-art-newyear { --hx:0%; --hy:0%; }
.holiday-art-imlek,.event-art-imlek { --hx:33.333%; --hy:0%; }
.holiday-art-islam,.event-art-islam { --hx:66.667%; --hy:0%; }
.holiday-art-christian,.event-art-christian { --hx:100%; --hy:0%; }
.holiday-art-hindu,.event-art-hindu { --hx:0%; --hy:100%; }
.holiday-art-buddhist,.event-art-buddhist { --hx:33.333%; --hy:100%; }
.holiday-art-khonghucu,.event-art-khonghucu { --hx:66.667%; --hy:100%; }
.holiday-art-national,.event-art-national { --hx:100%; --hy:100%; }
.calendar-sheet.has-holiday-art.holiday-art-labour .hero-row::before { width:min(390px,54vw); height:min(390px,54vw); opacity:.2; -webkit-mask-image:url('assets/generated/labour-day-lineart-v1.png'); mask-image:url('assets/generated/labour-day-lineart-v1.png'); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-position:center; mask-position:center; }
.calendar-sheet.has-holiday-art.holiday-art-newyear .hero-row::before { width:min(380px,52vw); height:min(380px,52vw); opacity:.17; -webkit-mask-image:url('assets/generated/new-year-lineart-v1.png'); mask-image:url('assets/generated/new-year-lineart-v1.png'); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-position:center; mask-position:center; }
.hero-row { position:relative; isolation:isolate; }
.hero-row>* { position:relative; z-index:1; }
.calendar-sheet.has-holiday-art .hero-row::before { content:""; position:absolute; z-index:0; top:12px; left:50%; width:min(350px,50vw); height:min(350px,50vw); transform:translateX(-50%); pointer-events:none; background:var(--green); opacity:.14; -webkit-mask-image:url('assets/generated/holiday-lineart-v1.png'); mask-image:url('assets/generated/holiday-lineart-v1.png'); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:400% 200%; mask-size:400% 200%; -webkit-mask-position:var(--hx) var(--hy); mask-position:var(--hx) var(--hy); }
.calendar-sheet.red-day.has-holiday-art .hero-row::before { opacity:.17; }
.calendar-sheet.ritual-art-hiolo .hero-row::after { content:""; position:absolute; z-index:0; top:0; left:50%; width:min(370px,52vw); height:min(370px,52vw); transform:translateX(-50%); pointer-events:none; background:var(--green); opacity:.12; -webkit-mask-image:url('assets/generated/hiolo-watermark-v1.png'); mask-image:url('assets/generated/hiolo-watermark-v1.png'); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:contain; mask-size:contain; -webkit-mask-position:center; mask-position:center; }
.calendar-sheet.red-day.ritual-art-hiolo .hero-row::after { background:var(--red); opacity:.125; }
.event-visual[class*="event-art-"] { position:relative; overflow:hidden; color:var(--green); border:0; border-radius:0; background:none; box-shadow:none; }
.event-visual[class*="event-art-"]::before { content:""; position:absolute; inset:3px; background:currentColor; -webkit-mask-image:url('assets/generated/holiday-lineart-v1.png'); mask-image:url('assets/generated/holiday-lineart-v1.png'); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-size:400% 200%; mask-size:400% 200%; -webkit-mask-position:var(--hx) var(--hy); mask-position:var(--hx) var(--hy); }
.hijri-visual { position:relative; width:124px; height:128px; overflow:visible; color:var(--green); border:0; border-radius:0; background:none; box-shadow:none; }
.hijri-visual::before { content:""; position:absolute; inset:-12px; background:currentColor; opacity:1; filter:drop-shadow(3px 0 0 currentColor) drop-shadow(-3px 0 0 currentColor) drop-shadow(0 3px 0 currentColor) drop-shadow(0 -3px 0 currentColor) drop-shadow(2px 2px 0 currentColor) drop-shadow(-2px 2px 0 currentColor) drop-shadow(2px -2px 0 currentColor) drop-shadow(-2px -2px 0 currentColor); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
.civil-observances { display:grid; gap:3px; margin-top:9px; }.civil-observances[hidden] { display:none; }
.civil-observances small { margin:0 auto!important; max-width:180px; font:700 10px/1.25 system-ui,sans-serif!important; }
.national-observance { color:var(--green-deep)!important; }.international-observance { color:var(--gold-dark)!important; }
.calendar-sheet.red-day .national-observance { color:var(--red)!important; }
.hijri-visual.hijri-art-neutral::before { -webkit-mask-image:url('assets/generated/hijri-neutral-lineart-v1.png'); mask-image:url('assets/generated/hijri-neutral-lineart-v1.png'); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-position:center; mask-position:center; }
.hijri-visual.hijri-art-mosque::before { filter:none; -webkit-mask-image:url('assets/generated/hijri-mosque-bold-v2.svg'); mask-image:url('assets/generated/hijri-mosque-bold-v2.svg'); -webkit-mask-size:contain; mask-size:contain; -webkit-mask-position:center; mask-position:center; }

/* Four traditional calendars below the primary Gregorian tear-off date. */
.calendar-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.calendar-card { min-height:132px; padding:8px 14px 10px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:transparent; }
.calendar-card:nth-child(2n) { border-right:0; }
.calendar-card:nth-last-child(-n+2) { border-bottom:0; }
.calendar-card h2 { margin:0 -14px 7px; padding:0 8px 6px; border-color:var(--line); color:var(--green-deep); font-size:13px; }
.calendar-card h2 span,.calendar-card .script-inline { color:var(--green-deep)!important; }
.calendar-card>strong,.jawa-values strong { color:var(--green); }
.calendar-card>span,.calendar-card small,.calendar-grid .hokkien-line { color:var(--green-deep)!important; }
.calendar-grid .lunar-month-size { border-color:var(--line); color:var(--green-deep)!important; background:color-mix(in srgb,var(--green) 6%,transparent); }
.imlek-card>strong { padding-top:5px; font-size:26px; }
.hijri-card>strong { font-size:36px; }
.jawa-values { gap:3px; padding-top:3px; }
.jawa-values strong { font-size:20px; }
.saka-card>strong { padding-top:6px; font-size:30px; }
.saka-card>span { font-size:12px; }
.calendar-card small { margin-top:6px; line-height:1.3; }
.main-civil-observances { margin:0 26px 10px; padding:7px 12px; border-top:1px solid rgba(142,162,136,.65); border-bottom:1px solid rgba(142,162,136,.65); text-align:center; }
.main-civil-observances small { max-width:none!important; font-size:11px!important; }

@media (max-width:560px) {
  .hero-illustration.hijri-visual { width:68px; height:72px; }
  .main-civil-observances { margin-left:10px; margin-right:10px; }
  .calendar-card { min-height:124px; padding:7px 8px 9px; }
  .calendar-card h2 { margin-left:-8px; margin-right:-8px; font-size:11px; }
  .imlek-card>strong { font-size:22px; }
  .hijri-card>strong { font-size:31px; }
  .jawa-values strong { font-size:17px; }
  .saka-card>strong { font-size:26px; }
  .calendar-card>span,.jawa-values span,.saka-card>span { font-size:10px; }
}

/* Summary panels use the centered composition of a physical tear-off calendar. */
.insight-card { display:flex; flex-direction:column; justify-content:center; text-align:center; }
.insight-heading { justify-content:center; text-align:center; }
.insight-card:first-child .insight-title { width:max-content; max-width:100%; margin:0 auto; grid-template-columns:70px minmax(0,auto); justify-content:center; text-align:center; }
.insight-card:first-child .insight-title>div { text-align:center; }
.insight-card .time-list,.insight-card .direction,.insight-card .solar-term,.insight-card .moon-summary { justify-items:center; text-align:center; }
.insight-card .muted-label,.insight-card>strong { text-align:center; }

@media (max-width:560px) {
  .insight-card:first-child .insight-title { grid-template-columns:60px minmax(0,auto); }
}

.nav-icon { position:relative; display:inline-grid; place-items:center; flex:0 0 23px; width:23px; height:23px; box-sizing:border-box; color:currentColor; }
.icon-calendar { border:2px solid currentColor; border-radius:4px; background:linear-gradient(currentColor,currentColor) 0 6px/100% 2px no-repeat,linear-gradient(90deg,transparent 46%,currentColor 47% 53%,transparent 54%) 0 8px/100% 13px no-repeat; }
.icon-calendar::before,.icon-calendar::after { content:""; position:absolute; top:-4px; width:2px; height:6px; border-radius:2px; background:currentColor; }.icon-calendar::before { left:5px; }.icon-calendar::after { right:5px; }
.icon-convert::before { content:"⇄"; font-size:25px; line-height:1; }
.icon-jawa { border:2px solid currentColor; border-radius:50%; }.icon-jawa::before { content:""; width:9px; height:9px; border:2px dotted currentColor; border-radius:50%; }
.icon-hijri::before { content:""; width:17px; height:17px; border-radius:50%; box-shadow:-5px 1px 0 0 currentColor; }
.icon-bazi { border:1px solid currentColor; border-radius:3px; background:repeating-linear-gradient(90deg,currentColor 0 3px,transparent 3px 6px); box-shadow:inset 0 4px 0 rgba(255,255,255,.75),inset 0 -4px 0 rgba(255,255,255,.75); }
.icon-solar { border:2px solid currentColor; border-radius:50%; }.icon-solar::before { content:""; position:absolute; inset:-5px; background:repeating-conic-gradient(currentColor 0 5deg,transparent 5deg 45deg); -webkit-mask:radial-gradient(circle,transparent 0 11px,#000 12px); mask:radial-gradient(circle,transparent 0 11px,#000 12px); }
.icon-moon { border:2px solid currentColor; border-radius:50%; background:linear-gradient(90deg,currentColor 50%,transparent 50%); }
.icon-eclipse { border:2px solid currentColor; border-radius:50%; }.icon-eclipse::after { content:""; position:absolute; left:7px; top:2px; width:15px; height:15px; border:2px solid currentColor; border-radius:50%; background:var(--paper); }
.bottom-btn.active .icon-eclipse::after,.bottom-btn:hover .icon-eclipse::after { background:var(--green); }
.icon-almanac { border:2px solid currentColor; border-radius:3px; }.icon-almanac::before { content:""; position:absolute; left:50%; top:0; bottom:0; border-left:1px solid currentColor; }.icon-almanac::after { content:""; position:absolute; inset:4px 3px; border-top:1px solid currentColor; border-bottom:1px solid currentColor; }

.wuxing-wheel { --active-color:var(--green); width:min(100%,96px); height:auto; aspect-ratio:1; box-sizing:border-box; margin:12px auto 5px; transition:box-shadow .2s ease,transform .2s ease; }
.wuxing-wheel::after { inset:22%; }
.wuxing-wheel span { font-size:7px; line-height:1; }
.wuxing-wheel b { min-width:42px; max-width:52px; box-sizing:border-box; padding:3px 4px; border:2px solid var(--active-color); border-radius:999px; color:var(--active-color); background:#fffdf5; font-size:11px; line-height:1.05; text-align:center; }
.wuxing-wheel[data-active="kayu"] { --active-color:#2f7d4e; box-shadow:0 0 0 4px rgba(47,125,78,.18); }.wuxing-wheel[data-active="api"] { --active-color:#b83b35; box-shadow:0 0 0 4px rgba(184,59,53,.18); }.wuxing-wheel[data-active="tanah"] { --active-color:#a47718; box-shadow:0 0 0 4px rgba(164,119,24,.2); }.wuxing-wheel[data-active="logam"] { --active-color:#686d70; box-shadow:0 0 0 4px rgba(104,109,112,.18); }.wuxing-wheel[data-active="air"] { --active-color:#277ca4; box-shadow:0 0 0 4px rgba(39,124,164,.18); }
.wuxing-wheel[data-active="kayu"] .wood,.wuxing-wheel[data-active="api"] .fire,.wuxing-wheel[data-active="tanah"] .earth,.wuxing-wheel[data-active="logam"] .metal,.wuxing-wheel[data-active="air"] .water { padding:2px 3px; border-radius:4px; color:#fff; background:var(--active-color); font-size:7px; }

@media (max-width:820px) {
  .insight-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .insight-card { border-right:1px solid #aab9a2; border-bottom:1px solid #aab9a2; }
  .insight-card:nth-child(2n) { border-right:0; }
  .insight-card:nth-last-child(-n+2) { border-bottom:0; }
}
@media (max-width:560px) {
  .brand-mark { flex-basis:42px; width:42px; height:42px; }
  .insight-grid { grid-template-columns:1fr; }
  .insight-card,.insight-card:nth-child(2n) { min-height:0; border-right:0; border-bottom:1px solid #aab9a2; }
  .insight-card:last-child { border-bottom:0; }
  .insight-card .time-list,.insight-card .direction,.insight-card .solar-term { margin-top:8px; }
  .wuxing-wheel { width:116px; margin-top:10px; }
}
@media (max-width:420px) {
  .shichen-schedule { grid-template-columns:1fr; }
  .shichen-schedule article,.shichen-schedule article:nth-child(2n),.shichen-schedule article:nth-child(4n) { min-height:72px; border-right:0; }
  .bottom-btn { padding:5px 2px; }
  .nav-icon { transform:scale(.9); }
}
.solar-term small { color:#7b6a42; font-size:9px; }
.ui-icon,.feature-icon,.support-icon { display:block; width:1.25em; height:1.25em; fill:none; stroke:currentColor; }
.brand-mark { color:var(--green); width:50px; height:50px; flex:0 0 50px; }
.calendar-sheet.red-day .brand-mark { color:var(--red); }
.feature-icon { width:1.35em; height:1.35em; flex:none; color:var(--gold); }
.support-icon { width:25px; height:25px; color:#fff; }
.icon-btn .ui-icon { width:20px; height:20px; margin:auto; }
.bottom-btn .nav-icon { width:23px; height:23px; flex:0 0 23px; }
.result-method { display:block; margin-top:3px; color:#607462; font-size:10px; }
.pending-result { color:#6d776e; font-size:11px; font-weight:500; line-height:1.45; }
.pending-panel { display:block; min-height:54px; }
.pending-panel span { display:block; padding:5px 8px; color:#6d776e; font-size:11px; line-height:1.45; text-align:center; }
.bazi-dialog { max-width:760px; }
.bazi-inputs { display:grid; grid-template-columns:1fr 1fr 1.4fr auto; gap:10px; align-items:end; }
.bazi-inputs label { display:grid; gap:5px; color:var(--green-deep); font-size:11px; font-weight:700; }
.bazi-inputs input,.bazi-inputs select { min-height:42px; box-sizing:border-box; padding:8px 10px; border:1px solid #91a38d; border-radius:8px; background:#fffefa; color:var(--ink); }
.bazi-inputs button { min-height:42px; padding:8px 14px; color:#fff; background:var(--green); border-radius:8px; font-weight:700; }
.bazi-pillars { display:grid; grid-template-columns:repeat(4,1fr); margin-top:18px; border:1px solid var(--green); border-radius:12px; overflow:hidden; }
.bazi-pillars article { min-height:130px; padding:14px 10px; text-align:center; border-right:1px solid #aab9a2; }
.bazi-pillars article:last-child { border-right:0; }
.bazi-pillars small,.bazi-pillars span { display:block; }
.bazi-pillars small { color:#687d69; font-size:10px; font-weight:700; }
.bazi-pillars strong { display:block; margin:10px 0 8px; color:var(--green); font:700 36px 'Libre Baskerville',serif; }
.bazi-pillars span { color:#516653; font-size:11px; line-height:1.45; }
.bazi-boundary-note { margin:14px 0 0; padding:10px 12px; color:#5d6c5e; background:#edf2e8; border-radius:8px; font-size:11px; line-height:1.45; }
.almanac-summary-card { cursor:pointer; transition:background .18s ease; }
.shichen-card { cursor:pointer; transition:background .18s ease; }
.shichen-card:hover,.shichen-card:focus-visible { background:rgba(199,155,63,.09); outline:2px solid var(--gold); outline-offset:-2px; }
.shichen-card .time-list small { display:block; margin-top:7px; color:#7b6a42; font-size:9px; }
.almanac-summary-card:hover,.almanac-summary-card:focus-visible { background:rgba(199,155,63,.09); outline:2px solid var(--gold); outline-offset:-2px; }
.almanac-dialog { max-width:760px; }
.almanac-results { display:grid; grid-template-columns:repeat(3,1fr); margin-top:18px; border:2px solid var(--green); background:#fffef8; }
.almanac-results article { min-height:145px; padding:18px 14px; border-right:1px solid #9eaf99; text-align:center; }
.almanac-results article:last-child { border-right:0; }
.almanac-results small,.almanac-results span { display:block; }
.almanac-results small { color:#886522; font-size:9px; font-weight:800; letter-spacing:.07em; }
.almanac-results strong { display:block; margin:15px 0 9px; color:var(--green-deep); font:700 27px 'Libre Baskerville',serif; }
.almanac-results span { color:#5d705f; font-size:11px; line-height:1.5; }
.almanac-context-results { display:grid; grid-template-columns:minmax(190px,.75fr) minmax(0,1.75fr); border:2px solid var(--green); border-top:0; background:#f8f5e9; }
.almanac-context-results > article { padding:16px 18px; }
.almanac-context-results > article:first-child { display:flex; min-height:148px; flex-direction:column; align-items:center; justify-content:center; border-right:1px solid #9eaf99; text-align:center; }
.almanac-context-results small,.almanac-context-results span { display:block; }
.almanac-context-results small { color:#886522; font-size:9px; font-weight:800; letter-spacing:.07em; }
.almanac-context-results > article > strong { margin:13px 0 7px; color:var(--green-deep); font:700 24px 'Libre Baskerville',serif; }
.almanac-context-results span { color:#5d705f; font-size:10px; line-height:1.5; }
.pengzu-result > div { display:grid; grid-template-columns:minmax(190px,1fr) 1.2fr; gap:12px; align-items:center; padding:10px 0 2px; }
.pengzu-result > div + div { margin-top:7px; padding-top:10px; border-top:1px solid #c9d0bf; }
.pengzu-result b { color:var(--green-deep); font:700 16px 'Libre Baskerville',serif; line-height:1.4; }
.shichen-section { margin-top:16px; border:2px solid var(--green); background:#fffef8; }
.shichen-section > header { display:flex; align-items:end; justify-content:space-between; gap:18px; padding:13px 15px; border-bottom:1px solid #a9b7a2; background:#eef1e5; }
.shichen-section header small { color:#886522; font-size:9px; font-weight:800; letter-spacing:.08em; }
.shichen-section h3 { margin:3px 0 0; color:var(--green-deep); font:700 18px 'Libre Baskerville',serif; }
.shichen-section label { color:#5e705f; font-size:9px; font-weight:800; text-transform:uppercase; }
.shichen-section select { display:block; min-width:190px; margin-top:5px; border:1px solid #91a48d; border-radius:5px; padding:7px 9px; color:var(--green-deep); background:#fff; font:inherit; text-transform:none; }
.shichen-schedule { display:grid; grid-template-columns:repeat(4,1fr); }
.shichen-schedule article { min-height:92px; padding:11px 9px; border-right:1px solid #ccd3c7; border-bottom:1px solid #ccd3c7; text-align:center; }
.shichen-schedule article:nth-child(4n) { border-right:0; }
.shichen-schedule article:nth-last-child(-n+1) { border-bottom:0; }
.shichen-schedule article:last-child { grid-column:1/-1; min-height:82px; border-right:0; }
.shichen-schedule small,.shichen-schedule strong,.shichen-schedule b,.shichen-schedule span { display:block; }
.shichen-schedule small { color:#8a6728; font-size:9px; }
.shichen-schedule strong { margin:5px 0 2px; color:var(--green-deep); font:700 19px 'Libre Baskerville',serif; }
.shichen-schedule b { color:#334f3c; font-size:9px; }
.shichen-schedule span { margin-top:4px; color:#68776a; font-size:8px; }
.shichen-schedule .split-zi { background:rgba(199,155,63,.07); }
.shichen-section > p { margin:0; padding:10px 13px; color:#5d695e; background:#f3eedc; font-size:10px; line-height:1.5; }
.almanac-method-note { margin-top:14px; padding:12px 14px; border-left:4px solid var(--gold); color:#5d695e; background:#f3eedc; font-size:11px; line-height:1.55; }
@media (max-width:680px) { .bazi-inputs { grid-template-columns:1fr 1fr; }.bazi-inputs label:nth-child(3),.bazi-inputs button { grid-column:1/-1; }.bazi-pillars { grid-template-columns:repeat(2,1fr); }.bazi-pillars article:nth-child(2) { border-right:0; }.bazi-pillars article:nth-child(-n+2) { border-bottom:1px solid #aab9a2; } }
@media (max-width:620px) { .almanac-dialog { width:calc(100vw - 24px); max-width:calc(100vw - 24px); box-sizing:border-box; }.almanac-dialog .converter-input-row { grid-template-columns:1fr; }.almanac-dialog .converter-input-row button { width:100%; }.almanac-results,.almanac-context-results { grid-template-columns:1fr; }.almanac-results article { min-height:0; border-right:0; border-bottom:1px solid #9eaf99; }.almanac-results article:last-child { border-bottom:0; }.almanac-context-results > article:first-child { min-height:120px; border-right:0; border-bottom:1px solid #9eaf99; }.pengzu-result > div { grid-template-columns:1fr; gap:5px; }.shichen-section > header { align-items:stretch; flex-direction:column; }.shichen-section select { width:100%; min-width:0; }.shichen-schedule { grid-template-columns:repeat(2,1fr); }.shichen-schedule article:nth-child(4n) { border-right:1px solid #ccd3c7; }.shichen-schedule article:nth-child(2n) { border-right:0; } }
@media (max-width:560px) { .brand-mark { width:42px; height:42px; flex-basis:42px; }.hero-illustration.zodiac-visual { width:64px; height:64px; }.hero-illustration.hijri-visual { width:60px; height:64px; }.mini-visual.zodiac-visual { width:58px; height:58px; margin:0; }.insight-card:first-child .insight-title { grid-template-columns:64px minmax(0,1fr); gap:6px; }.calendar-sheet.has-holiday-art .hero-row::before { top:7px; width:220px; height:220px; opacity:.12; }.calendar-sheet.red-day.has-holiday-art .hero-row::before { opacity:.15; }.event-visual[class*="event-art-"]::before { inset:1px; } }
@media (max-width:560px) { .calendar-sheet.ritual-art-hiolo .hero-row::after { top:4px; width:205px; height:205px; opacity:.09; }.calendar-sheet.red-day.ritual-art-hiolo .hero-row::after { opacity:.11; } }

/* Keep all three calendar-heading columns visible on narrow phones. */
@media (max-width:460px) {
  .date-heading {
    grid-template-columns:84px minmax(0,1fr) 74px;
    gap:0;
    margin-left:10px;
    margin-right:10px;
    padding-left:0;
    padding-right:0;
  }
  .date-heading > div { min-width:0; box-sizing:border-box; padding-left:3px; padding-right:3px; }
  .date-heading strong { overflow:hidden; font-size:25px; letter-spacing:0; white-space:nowrap; }
  .month-block strong { font-size:clamp(24px,7.7vw,30px); letter-spacing:-.025em; }
  .lunar-block strong { font-size:24px; }
  .date-heading span { overflow:hidden; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
  .date-heading .script-line { font-size:8px!important; }
}

/* Wuxing: legible five-part ring with a separate active-element centre. */
.wuxing-card { overflow:hidden; }
.wuxing-wheel {
  width:132px;
  max-width:100%;
  margin:14px auto 7px;
  border:0;
  background:conic-gradient(from -36deg,#3d8c61 0 20%,#d1624b 20% 40%,#d3a12c 40% 60%,#858b89 60% 80%,#4e9bc0 80% 100%);
  box-shadow:0 0 0 5px rgba(199,155,63,.13);
}
.wuxing-wheel::after { inset:29%; border:2px solid rgba(255,255,255,.9); background:var(--paper); }
.wuxing-wheel span {
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  min-height:14px;
  box-sizing:border-box;
  padding:2px 3px;
  border-radius:999px;
  color:#fff;
  background:rgba(28,39,31,.23);
  font-size:7px;
  line-height:1;
  text-shadow:0 1px 1px rgba(0,0,0,.28);
}
.wuxing-wheel .wood { top:8px; left:50%; transform:translateX(-50%); }
.wuxing-wheel .fire { top:36px; right:8px; transform:none; }
.wuxing-wheel .earth { right:19px; bottom:15px; }
.wuxing-wheel .metal { bottom:15px; left:19px; }
.wuxing-wheel .water { top:36px; left:8px; transform:none; }
.wuxing-wheel b {
  display:flex;
  align-items:center;
  justify-content:center;
  width:58px;
  min-width:58px;
  height:58px;
  padding:15px 3px 3px;
  border:0;
  border-radius:50%;
  color:var(--active-color);
  background:transparent;
  font:700 10px/1 'DM Sans',sans-serif;
  letter-spacing:.02em;
}
.wuxing-wheel b::before { content:'ELEMEN HARI'; position:absolute; top:13px; left:0; width:100%; color:#7b806f; font-size:5px; font-weight:800; letter-spacing:.08em; white-space:nowrap; }
.wuxing-wheel b::after { content:none; }
.wuxing-wheel[data-active="kayu"] .wood,.wuxing-wheel[data-active="api"] .fire,.wuxing-wheel[data-active="tanah"] .earth,.wuxing-wheel[data-active="logam"] .metal,.wuxing-wheel[data-active="air"] .water {
  border:1px solid #fff;
  padding:2px 3px;
  color:#fff;
  background:var(--active-color);
  box-shadow:0 1px 3px rgba(0,0,0,.22);
  font-size:7px;
}
@media (max-width:560px) { .wuxing-wheel { width:126px; } }

/* Optical correction for the church artwork inside its sprite cell. */
.calendar-sheet.has-holiday-art.holiday-art-christian .hero-row::before { top:-20px; left:54.5%; }
@media (max-width:560px) { .calendar-sheet.has-holiday-art.holiday-art-christian .hero-row::before { top:-10px; left:53%; } }

/* One active border token for every line in the main calendar surface. */
.calendar-sheet .month-block { border-color:var(--line); }
.calendar-sheet .script-context span+span { border-color:var(--line); }
.calendar-sheet .round-btn { border-color:var(--line); }
.calendar-sheet .week-line,.calendar-sheet .main-civil-observances { border-color:var(--line); }
.calendar-sheet .calendar-card,.calendar-sheet .calendar-card h2 { border-color:var(--line); }
.calendar-sheet .insight-card { border-color:var(--line); }
.calendar-sheet .lower-insights article { border-color:var(--line); }
.calendar-sheet .bottom-nav { border-color:var(--line); }
@media (max-width:820px) {
  .calendar-sheet .calendar-card:nth-child(-n+2),.calendar-sheet .insight-card,.calendar-sheet .lower-insights article { border-color:var(--line); }
}

/* Final optical balance for Solar Term, Wuxing, and bottom navigation. */
.solar-card { align-items:center; }
.solar-card .insight-heading,.solar-card .solar-term { width:100%; margin-left:auto; margin-right:auto; }
.solar-card .mountains { width:82px; margin-left:auto; margin-right:auto; }
.wuxing-wheel b { font-size:13px; line-height:1; }
.wuxing-wheel .earth { right:19px; bottom:21px; }
.wuxing-wheel .metal { bottom:21px; left:19px; }
.calendar-sheet .bottom-btn { border-color:var(--line); }
.calendar-grid .calendar-card h2>span { color:var(--gold)!important; }
.recommend-card { border-width:2px; }

/* Balance the two cultural illustrations by their visible ink, not box dimensions. */
.hero-row { grid-template-columns:150px minmax(260px,1fr) 150px; }
.hero-illustration.hijri-visual { width:148px; height:152px; }
.hero-illustration.zodiac-visual { width:118px; height:118px; }
@media (min-width:561px) and (max-width:820px) {
  .hero-row { grid-template-columns:132px minmax(190px,1fr) 132px; padding-left:14px; padding-right:14px; }
  .hero-illustration.hijri-visual { width:142px; height:146px; }
  .hero-illustration.zodiac-visual { width:118px; height:118px; }
}
@media (max-width:560px) {
  .hero-row { grid-template-columns:68px minmax(0,1fr) 68px; }
  .hero-illustration.hijri-visual { width:78px; height:82px; }
  .hero-illustration.zodiac-visual { width:68px; height:68px; }
}

/* Restore the approved v57 scale; retain the heavier mosque ink from v54. */
.hero-row { grid-template-columns:118px minmax(260px,1fr) 118px; }
.hero-illustration.hijri-visual { width:124px; height:128px; }
.hero-illustration.zodiac-visual { width:108px; height:108px; }
.hero-date.single-digit-date .date-number { transform:translateX(-.065em); }
.calendar-sheet.ritual-art-hiolo .hero-row::after { left:49.2%; }
@media (min-width:561px) and (max-width:820px) {
  .hero-row { grid-template-columns:92px minmax(190px,1fr) 92px; padding-left:20px; padding-right:20px; }
  .hero-illustration.hijri-visual { width:78px; height:84px; }
  .hero-illustration.zodiac-visual { width:82px; height:82px; }
}

/* Centre the remaining calculated feature cards after removing placeholder panels. */
.insight-grid {
  grid-template-columns:repeat(5,minmax(0,1fr));
}
.wuxing-card {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.wuxing-card .insight-heading {
  width:100%;
  justify-content:center;
}
.lower-insights {
  grid-template-columns:1fr;
}
.lower-insights .almanac-summary-card {
  justify-content:center;
  text-align:center;
  border-right:0;
}
.lower-insights .almanac-summary-card > div {
  min-width:0;
}
@media (max-width:560px) {
  .lower-insights .almanac-summary-card {
    flex-direction:column;
    gap:7px;
    padding-top:12px;
    padding-bottom:12px;
  }
}
@media (min-width:561px) and (max-width:820px) {
  .insight-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .insight-grid .insight-card:nth-child(4) {
    border-bottom:1px solid var(--line);
  }
  .insight-grid .wuxing-card {
    grid-column:1 / -1;
    border-right:0;
    border-bottom:0;
  }
}
@media (max-width:560px) {
  .insight-grid {
    grid-template-columns:1fr;
  }
  .insight-grid .wuxing-card {
    grid-column:auto;
  }
}
.info-dialog {
  max-height:calc(100vh - 24px);
  max-height:calc(100dvh - 24px);
  box-sizing:border-box;
  overflow:auto;
  overflow-x:hidden;
}

/* Keep all five calculated cards self-contained at desktop widths. */
.insight-grid > .insight-card {
  min-width:0;
  overflow:hidden;
  text-align:center;
}
.insight-grid .insight-heading {
  justify-content:center;
  text-align:center;
}
.insight-grid > .insight-card:first-child .insight-title {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  text-align:center;
}
.insight-grid > .insight-card:first-child .insight-title > div {
  width:100%;
  min-width:0;
}
.insight-grid > .insight-card:first-child .insight-title strong {
  max-width:100%;
  font-size:clamp(17px,1.65vw,23px);
  line-height:1.12;
  overflow-wrap:anywhere;
}
.insight-grid > .insight-card:first-child .muted-label {
  text-align:center;
}
.shichen-card .time-list {
  justify-items:center;
  text-align:center;
}
.solar-card .mountains {
  width:94px;
  height:38px;
  background:linear-gradient(135deg,#d6dda9 0 45%,#8fa57a 46% 100%);
  clip-path:polygon(0 100%,18% 52%,34% 70%,59% 18%,100% 100%);
}
@media (max-width:560px) {
  .hero-row { grid-template-columns:62px minmax(0,1fr) 62px; }
  .hero-illustration.hijri-visual { width:60px; height:64px; }
  .hero-illustration.zodiac-visual { width:64px; height:64px; }
  .hero-date.single-digit-date .date-number { transform:translateX(-.045em); }
  .calendar-sheet.ritual-art-hiolo .hero-row::after { left:49.5%; }
}