:root{--color-bg: var(--bg);--color-surface: var(--surface);--color-panel: var(--panel);--color-card: var(--surface);--color-primary: var(--text-primary);--color-secondary: var(--text-secondary);--color-muted: var(--text-muted);--color-accent: var(--accent);--color-accent-strong: var(--accent-strong);--color-accent-hover: var(--accent-hover, var(--accent-strong));--color-border: var(--border);--color-danger: var(--danger);--color-success: var(--success);--color-warning: var(--warning);--color-shadow: var(--shadow);--color-on-accent: #ffffff;--el-wood: #5a8f4e;--el-fire: #c0492f;--el-earth: #b08537;--el-metal: #b89b54;--el-water: #3f6ea5;--el-wood-text: color-mix(in oklch, var(--el-wood) 78%, var(--color-primary) 22%);--el-fire-text: color-mix(in oklch, var(--el-fire) 78%, var(--color-primary) 22%);--el-earth-text: color-mix(in oklch, var(--el-earth) 78%, var(--color-primary) 22%);--el-metal-text: color-mix(in oklch, var(--el-metal) 78%, var(--color-primary) 22%);--el-water-text: color-mix(in oklch, var(--el-water) 78%, var(--color-primary) 22%);--el-wood-fill: color-mix(in oklch, var(--el-wood) 62%, var(--color-card));--el-fire-fill: color-mix(in oklch, var(--el-fire) 62%, var(--color-card));--el-earth-fill: color-mix(in oklch, var(--el-earth) 62%, var(--color-card));--el-metal-fill: color-mix(in oklch, var(--el-metal) 62%, var(--color-card));--el-water-fill: color-mix(in oklch, var(--el-water) 62%, var(--color-card));--el-wood-node: color-mix(in oklch, var(--el-wood) 28%, var(--color-card));--el-fire-node: color-mix(in oklch, var(--el-fire) 28%, var(--color-card));--el-earth-node: color-mix(in oklch, var(--el-earth) 28%, var(--color-card));--el-metal-node: color-mix(in oklch, var(--el-metal) 28%, var(--color-card));--el-water-node: color-mix(in oklch, var(--el-water) 28%, var(--color-card));--wx-wood: var(--el-wood-fill);--wx-fire: var(--el-fire-fill);--wx-earth: var(--el-earth-fill);--wx-metal: var(--el-metal-fill);--wx-water: var(--el-water-fill);--lc-cell: clamp(40px, 12.5vw, 96px)}[data-theme=lychee]{--color-on-accent: #14101c}[data-theme=celadon]{--color-on-accent: #f3f5ec}[data-theme=lily-flame]{--color-on-accent: #e6f3ed}[data-theme=marigold]{--color-on-accent: #faf0d2}[data-theme=pearl]{--color-on-accent: #16161e}[data-theme=obsidian]{--color-on-accent: #0a0b0d}[data-theme=voyage]{--color-on-accent: #0a1226}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-display);background:var(--color-bg);color:var(--color-primary);min-height:100vh;padding:100px 20px 40px}.lunar-masthead{max-width:1200px;margin:0 auto var(--space-lg, 24px);display:flex;align-items:center;justify-content:space-between;gap:var(--space-md, 16px);padding-bottom:var(--space-md, 16px);border-bottom:1px solid var(--color-border)}.lunar-identity{display:flex;flex-direction:column;gap:2px}.lunar-wordmark{font-family:var(--font-display);font-size:clamp(2rem,4vw,3rem);line-height:1;color:var(--color-primary);letter-spacing:var(--tracking-display, .03em)}.lunar-subwordmark{font-family:var(--font-mono);font-size:var(--text-xs, 11px);text-transform:uppercase;letter-spacing:var(--tracking-caption, .06em);color:var(--color-muted)}.lunar-clock-chip{display:inline-flex;flex-direction:column;align-items:flex-end;gap:2px;padding:8px 14px;background:var(--color-panel);border:1px solid var(--color-border);border-radius:var(--radius-full, 999px)}.lunar-clock-chip .clock-ganzhi{font-size:var(--text-sm, 13px);color:var(--color-secondary)}.lunar-clock-chip .clock-lunar{font-size:var(--text-base, 15px);color:var(--color-primary);font-weight:600}.calendar-page{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr;gap:var(--space-xl, 32px)}.panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg, 12px);padding:var(--space-lg, 24px)}.cal-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-sm, 8px);margin-bottom:var(--space-md, 16px)}.cal-title{display:none}.cal-controls{display:flex;gap:var(--space-sm, 8px);align-items:center}.cal-select{background:var(--color-panel);border:1px solid var(--color-border);color:var(--color-primary);border-radius:var(--radius-md, 8px);padding:6px 10px;font-family:inherit}.cal-nav{display:flex;gap:var(--space-sm, 8px)}.cal-btn{background:var(--color-panel);border:1px solid var(--color-border);color:var(--color-primary);border-radius:var(--radius-md, 8px);padding:8px 12px;cursor:pointer;transition:background var(--transition-base, .15s ease),transform var(--transition-fast, .1s ease),border-color var(--transition-base, .15s ease)}.cal-btn:hover{background:var(--color-accent);color:var(--color-on-accent);border-color:var(--color-accent)}.weekdays,.days{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.weekday{text-align:center;color:var(--color-muted);font-size:var(--text-sm, 13px);padding:8px 0;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:var(--tracking-caption, .06em)}.day{position:relative;aspect-ratio:1 / 1;min-height:var(--lc-cell);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:clamp(4px,.8vw,10px);border-radius:var(--radius-md, 8px);background:var(--color-card);border:1px solid var(--color-border);cursor:pointer;transition:background var(--transition-base, .15s ease),border-color var(--transition-base, .15s ease),box-shadow var(--transition-base, .15s ease)}.day:hover{border-color:var(--color-accent);background:color-mix(in oklch,var(--color-accent) 12%,var(--color-card))}.day .greg{font-weight:700;color:var(--color-primary);font-size:clamp(.85rem,1.6vw,1.05rem);line-height:1.1;margin-bottom:2px}.day .lunar{font-size:clamp(.62rem,1.2vw,.8rem);color:var(--color-secondary);line-height:1.1}.day.weekend .greg{color:var(--color-secondary)}.day.out{background:var(--color-bg);border-color:transparent;cursor:default}.day.out .greg{color:color-mix(in oklch,var(--color-muted) 55%,transparent)}.day.out:hover{background:var(--color-bg);border-color:transparent}.day.today{box-shadow:inset 0 0 0 1.5px var(--color-accent)}.day.today .greg{color:var(--color-accent-strong)}.day.selected{background:var(--color-accent);border-color:var(--color-accent);box-shadow:0 4px 14px var(--color-shadow)}.day.selected .greg,.day.selected .lunar{color:var(--color-on-accent)}.day.today.selected{box-shadow:0 4px 14px var(--color-shadow),inset 0 0 0 1.5px var(--color-on-accent)}.day.term:after{content:"";position:absolute;bottom:5px;left:50%;transform:translate(-50%);width:6px;height:6px;border-radius:50%;background:var(--color-accent);box-shadow:0 0 0 1px var(--color-card)}.day.term.selected:after{background:var(--color-on-accent);box-shadow:0 0 0 1px var(--color-accent)}.day .term-label{font-size:clamp(.55rem,1vw,.7rem);color:var(--color-secondary);line-height:1;margin-top:auto}.day.selected .term-label{color:var(--color-on-accent)}.day:focus-visible{outline:2px solid var(--color-accent-strong);outline-offset:2px}.detail{display:flex;flex-direction:column;gap:var(--space-md, 16px);position:relative}.detail h3{font-size:var(--text-xl, 20px);color:var(--color-primary);font-weight:600}#compassWrap{position:absolute;right:8px;top:8px}#directionCompass{width:120px;height:120px;display:block}.pillars-outer-grid{display:grid;grid-template-columns:1fr 20px 1fr 20px 1fr;gap:0;justify-items:center;align-items:start;width:100%;margin:var(--space-sm, 8px) 0 0;position:relative}.pillar-col{display:flex;flex-direction:column;align-items:center}.pillar-gap{min-width:20px;width:20px;display:flex;align-items:center;justify-content:center}.pillar-grid{display:flex;flex-direction:column;align-items:center;gap:var(--space-sm, 8px);min-width:64px;width:100%;background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-md, 8px);padding:var(--space-sm, 8px) 4px}.pillar-label{font-size:var(--text-base, 15px);color:var(--color-secondary);letter-spacing:2px;margin-bottom:2px}.pillar-main-vert{display:flex;flex-direction:column;gap:0;align-items:center}.pillar-cell{font-size:clamp(1.6rem,4vw,2.2rem);font-weight:600;color:var(--color-primary);text-align:center;line-height:1.1;background:transparent;border-radius:var(--radius-sm, 4px);min-width:38px;padding:2px 0;border:1px solid transparent}.canggan-vert{margin-top:6px;display:flex;flex-direction:column;align-items:center;gap:0}.canggan-cell{font-size:1.05rem;margin-bottom:3px;color:var(--color-secondary);line-height:1.08;text-align:center;min-width:26px;font-weight:600;background:var(--color-panel);border-radius:var(--radius-sm, 4px);border:1px solid transparent}.canggan-cell:last-child{margin-bottom:0}[data-wuxing=木]{color:var(--el-wood-text)!important}[data-wuxing=火]{color:var(--el-fire-text)!important}[data-wuxing=土]{color:var(--el-earth-text)!important}[data-wuxing=金]{color:var(--el-metal-text)!important}[data-wuxing=水]{color:var(--el-water-text)!important}.gong-char{font-size:1.3rem;opacity:.85;padding:2px 6px;border-radius:var(--radius-sm, 4px);background:var(--color-panel)}.pillar-cell.selected{box-shadow:0 0 0 2px var(--color-accent) inset}.relations{margin-top:var(--space-md, 16px);display:flex;flex-direction:column;gap:6px}.rel-item{display:flex;align-items:center;gap:var(--space-sm, 8px);padding:6px 8px;background:var(--color-panel);border:1px solid var(--color-border);border-radius:var(--radius-md, 8px)}.rel-type{font-size:var(--text-xs, 11px);padding:2px 6px;border-radius:var(--radius-full, 999px)}.rel-text{font-size:var(--text-sm, 13px);color:var(--color-secondary)}.relations-legend{margin-top:var(--space-sm, 8px);font-size:var(--text-xs, 11px);color:var(--color-muted);background:var(--color-panel);border:1px solid var(--color-border);border-radius:var(--radius-md, 8px);padding:8px 10px}.wx-wood-color{color:var(--el-wood-text)}.wx-fire-color{color:var(--el-fire-text)}.wx-earth-color{color:var(--el-earth-text)}.wx-metal-color{color:var(--el-metal-text)}.wx-water-color{color:var(--el-water-text)}.flow-sheng{color:var(--el-wood-text)}.flow-ke{color:var(--el-fire-text)}.analysis-value--sheng{color:var(--el-wood-text)}.analysis-value--ke{color:var(--el-fire-text)}.analysis-value--tong{color:var(--color-accent-strong)}.analysis-value--he{color:var(--el-earth-text)}.wx-highlight{font-weight:700}@media(max-width:900px){.calendar-page{grid-template-columns:1fr}}@media(max-width:560px){body{padding:88px 12px 32px}.lunar-masthead{flex-direction:column;align-items:flex-start;gap:var(--space-sm, 8px)}.lunar-clock-chip{align-items:flex-start;align-self:stretch;flex-direction:row;justify-content:space-between}.panel{padding:var(--space-md, 16px)}.weekdays,.days{gap:3px}}.tabs{display:flex;gap:var(--space-sm, 8px);border-bottom:1px solid var(--color-border);margin:-4px -4px var(--space-md, 16px);padding:0 4px 8px}.tab-btn{background:transparent;border:none;color:var(--color-secondary);padding:6px 10px;cursor:pointer;font-weight:600;border-radius:var(--radius-sm, 4px);font-family:inherit}.tab-btn:hover{background:color-mix(in oklch,var(--color-accent) 10%,transparent)}.tab-btn.active{color:var(--color-accent-strong);box-shadow:inset 0 -2px 0 0 var(--color-accent)}.tab-content{display:none}.tab-content.active{display:block}.power-section{margin-top:var(--space-md, 16px)}.wx-title{margin-bottom:10px;color:var(--color-primary);font-weight:700}.wx-row{display:flex;align-items:center;gap:12px;margin-bottom:8px}.wx-label{width:30px;font-size:1rem;font-weight:600;color:var(--color-secondary)}.wx-bar-bg{position:relative;flex:1;height:22px;background:var(--color-panel);border-radius:var(--radius-full, 999px);overflow:hidden;border-bottom:1px solid var(--color-primary)}.wx-bar-fill{height:100%;border-radius:var(--radius-full, 999px);transition:width .4s ease}.wx-bar-value{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:var(--text-sm, 13px);color:var(--color-muted);font-weight:600}.wx-empty{color:var(--color-muted);font-size:var(--text-sm, 13px);padding:10px;text-align:center}.flow-row{display:flex;align-items:center;gap:var(--space-sm, 8px);padding:8px 10px;margin-bottom:8px;background:var(--color-panel);border:1px solid var(--color-border);border-left:3px solid var(--color-border);border-radius:var(--radius-md, 8px)}.flow-row.flow-row--sheng{border-left-style:solid}.flow-row.flow-row--ke{border-left-style:dashed}.flow-end{font-weight:600;font-size:var(--text-base, 15px)}.flow-arrow{font-size:1.1rem}.flow-type{font-size:var(--text-xs, 11px);padding:2px 8px;border-radius:var(--radius-full, 999px);font-weight:700}.flow-power{margin-left:auto;color:var(--color-muted);font-size:var(--text-sm, 13px);font-weight:600}.analysis-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:var(--space-md, 16px)}.analysis-card{background:var(--color-panel);border:1px solid var(--color-border);border-radius:var(--radius-md, 8px);padding:10px}.analysis-label{font-size:var(--text-sm, 13px);color:var(--color-muted);margin-bottom:4px}.analysis-value{font-size:1.4rem;font-weight:800}.analysis-sub{font-size:var(--text-sm, 13px);color:var(--color-muted);margin-top:4px}.balance-box{padding:12px;background:var(--color-panel);border:1px solid var(--color-border);border-radius:var(--radius-md, 8px)}.balance-head{display:flex;justify-content:space-between;align-items:center;font-weight:700;color:var(--color-primary)}.balance-bar{margin-top:8px;height:6px;background:var(--color-card);border-radius:3px;overflow:hidden}.balance-fill{height:100%;width:0;transition:width .4s ease}.balance-sub{margin-top:8px;font-size:var(--text-sm, 13px);color:var(--color-muted)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:color-mix(in oklch,var(--color-bg) 70%,transparent);display:none;align-items:center;justify-content:center;z-index:var(--z-modal, 1100)}.modal-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg, 12px);padding:20px;max-width:420px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 10px 40px var(--color-shadow);color:var(--color-primary)}.modal-title{color:var(--color-primary);margin-bottom:12px;font-size:var(--text-xl, 20px)}.modal-info{margin-top:10px;padding:10px;background:var(--color-panel);border-radius:var(--radius-md, 8px)}.modal-close{margin-top:14px;padding:10px;background:var(--color-accent);border:none;border-radius:var(--radius-md, 8px);color:var(--color-on-accent);cursor:pointer;width:100%;font-weight:700}.modal-close:hover{background:var(--color-accent-hover)}.canggan-wrapper{display:flex;align-items:center;gap:6px;margin-bottom:6px}.canggan-ratio-indicator{height:4px;border-radius:2px;opacity:.85}@media(max-width:900px){.analysis-grid{grid-template-columns:1fr}}@media(prefers-reduced-motion:reduce){.wx-bar-fill,.balance-fill{transition:none}}
