/* =========================================================================
   ★ 手撕日历 · 页面样式（由 Views/index.php 内联样式迁移而来）
   缓存策略：mtime 版本号，文件不变浏览器永久缓存
   ========================================================================= */
.oa-wrap {
    --oa-paper: #ffffff;
    --oa-ink: #4f6ef7;
    --oa-weekend: #ef4444;
    --oa-soft: #64748b;

    --oa-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", sans-serif;
    --oa-serif: Georgia, "Times New Roman", "Songti SC", "SimSun", serif;
    --oa-kai: "Kaiti SC", "KaiTi", "STKaiti", "Songti SC", "SimSun", serif;

    --mn-bg-card: #ffffff;
    --mn-bg-body: #f4f5f7;
    --mn-bg-input: #ffffff;
    --mn-bg-row-hover: #f0f2f5;
    --mn-bg-tag: #f3f4f6;
    --mn-border: #e8eaee;
    --mn-primary: #4f6ef7;
    --mn-primary-hover: #3d5ae5;
    --mn-primary-light: #eef2ff;
    --mn-error: #ef4444;
    --mn-text: #1f2733;
    --mn-text-secondary: #5b6778;
    --mn-text-muted: #9ca3af;
    --mn-text-inverse: #ffffff;
    --mn-radius-sm: 4px;
    --mn-radius: 8px;
    --mn-radius-lg: 10px;
    --mn-shadow: 0 1px 3px rgba(0,0,0,.06);
    --mn-shadow-float: 0 2px 8px rgba(0,0,0,.12);
    --mn-shadow-dropdown: 0 4px 16px rgba(0,0,0,.1);

    padding: clamp(16px, 2.6vw, 32px);
    font-family: var(--oa-sans);
    color: var(--mn-text);
}
.oa-wrap * { box-sizing: border-box; }
.oa-wrap a { text-decoration: none; }

/* 头部 */
.oa-head { margin: 0 0 18px; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 10px; }
.oa-title { margin: 0; font-size: 22px; font-weight: 700; color: var(--mn-text); }
.oa-subtitle { margin: 6px 0 0; font-size: 14px; color: var(--mn-text-secondary); }
.oa-signin { display: flex; align-items: center; gap: 10px; }
.oa-signin-done { font-size: 14px; font-weight: bold; color: #15803d; }
.oa-signin form { margin: 0; }
.oa-signin .oa-btn { padding: 8px 16px; background: #4f6ef7; color: #fff; border: 0; border-radius: 8px; cursor: pointer; font-weight: bold; }
.oa-flash { margin: 0 0 14px; padding: 10px 14px; border-radius: 8px; font-size: 13px; background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }

/* 舞台与容器 */
.oa-stage { position: relative; display: flex; justify-content: center; padding: 56px 20px 48px; background: var(--mn-bg-body); border-radius: var(--mn-radius-lg); }
.oa-book { position: relative; width: min(100%, 520px); }
.oa-bar { height: 10px; margin: 0; background-color: #e2e8f0; border-radius: 4px 4px 0 0; }
.oa-sheet {
    position: relative; width: 100%; aspect-ratio: 155 / 200;
    background: var(--oa-paper); border: 1px solid var(--mn-border);
    box-shadow: var(--mn-shadow-dropdown);
}

/* 核心：容器查询降级 */
.oa-card {
    position: relative; width: 100%; height: 100%;
    padding: 6.4516%;
    background: var(--oa-paper);
    color: var(--oa-ink);
    display: grid;

    /* 默认作为兼容降级 */
    --u: calc((min(100vw - 40px, 520px)) / 180);
    --uh: calc((min(100vw - 40px, 520px) * 200 / 155) / 256);

    /* 如果支持容器查询，则使用精确的比例 */
    container-type: size;
    --u: calc(100cqw / 180);
    --uh: calc(100cqh / 256);
    --bw: calc(0.6 * var(--u));

    grid-template-columns: 15.144fr 13.456fr 25.472fr 1.676fr 29fr 2.354fr 25.453fr 13.494fr 15.144fr;
    grid-template-rows: 14.847fr 76.702fr 7.062fr 13fr 14.247fr 8fr 5.448fr 1.465fr 12.031fr 6.921fr 8fr 8fr;
    font-family: var(--oa-sans);
}
.oa-card.is-weekend { --oa-ink: var(--oa-weekend); }
.oa-card .oa-cell {
    position: relative; overflow: hidden;
    border-right: var(--bw) solid var(--oa-ink);
    border-bottom: var(--bw) solid var(--oa-ink);
}
.oa-card .oa-lunar-date,
.oa-card .oa-solar-term,
.oa-card .oa-weekday { border-top: var(--bw) solid var(--oa-ink); }
.oa-card .oa-lunar-date,
.oa-card .oa-suitable,
.oa-card .oa-zodiac-wrap,
.oa-card .oa-lucky,
.oa-card .oa-footer { border-left: var(--bw) solid var(--oa-ink); }

.oa-card .oa-bg { background-color: var(--oa-ink); color: var(--oa-paper); }
.oa-card .oa-text-white { color: var(--oa-paper); }
.oa-card .oa-bg .oa-ink { display: block; }

/* 顶部横幅 */
.oa-card .oa-blessing {
    --oa-cap: 10px;
    --oa-lift: calc(6 * var(--u));
    --oa-head: calc(var(--oa-cap) + var(--oa-lift));
    position: absolute; top: calc(-1 * var(--oa-head)); left: -1px; right: -1px; z-index: 2;
    display: flex; align-items: center; justify-content: center; gap: calc(2.2 * var(--u));
    height: calc(var(--oa-head) + 8.9 * var(--u));
    padding: var(--oa-head) calc(3 * var(--u)) 0;
    overflow: hidden; border-radius: var(--mn-radius-sm) var(--mn-radius-sm) 0 0;
    color: #fff; background: #b23a2f;
    box-shadow: 0 1px 0 rgba(0,0,0,0.2);
    pointer-events: none;
}
.oa-card .oa-blessing[hidden] { display: none; }
.oa-card .oa-blessing-rule { flex: 0 1 auto; min-width: calc(5 * var(--u)); width: calc(18 * var(--u)); height: calc(0.9 * var(--u)); background: currentColor; opacity: .8; }
.oa-card .oa-blessing-text { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: var(--oa-kai); font-size: calc(6.4 * var(--u)); line-height: 1; letter-spacing: calc(1.2 * var(--u)); text-indent: calc(1.2 * var(--u)); white-space: nowrap; }

/* 页眉 */
.oa-card .oa-header { grid-area: 1 / 1 / 2 / 10; display: flex; align-items: center; justify-content: center; overflow: visible; background: var(--oa-paper); }
.oa-card .oa-header svg { display: block; width: 100%; height: 100%; background: var(--oa-paper); }
.oa-card .oa-header-bg { fill: var(--oa-paper) !important; }
.oa-card .oa-header-ink path { stroke: var(--oa-ink); }
.oa-card .oa-header-ink text { fill: var(--oa-ink); font-family: var(--oa-serif); font-weight: 900; }

/* 大字与对联 */
.oa-card .oa-couplet-left { grid-area: 2 / 1 / 3 / 2; }
.oa-card .oa-couplet-right { grid-area: 2 / 9 / 3 / 10; }
.oa-card .oa-couplet {
    writing-mode: vertical-lr; font-family: var(--oa-kai);
    font-size: calc(9.6 * var(--u)); letter-spacing: calc(3 * var(--u));
    justify-self: center; align-self: center; height: 100%; text-align: center; overflow: hidden;
}
.oa-card .oa-main-date { grid-area: 2 / 2 / 3 / 9; position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; overflow: hidden; }
.oa-card .oa-big-date {
    font-size: calc(100 * var(--u)); font-family: Arial, Helvetica, sans-serif;
    font-weight: bold; line-height: 1; letter-spacing: calc(-7 * var(--u));
    transform: scaleY(1.1); text-indent: calc(-7 * var(--u));
}

/* 农历/节气/星期 */
.oa-card .oa-lunar-date { grid-area: 3 / 1 / 5 / 4; display: flex; flex-direction: column; padding: calc(1.5 * var(--u)); }
.oa-card .oa-weekday    { grid-area: 3 / 7 / 5 / 10; display: flex; flex-direction: column; padding: calc(1.5 * var(--u)); }
.oa-card .oa-lunar-date .oa-bot, .oa-card .oa-weekday .oa-bot {
    flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
    font-family: var(--oa-serif); font-size: calc(13 * var(--u)); line-height: 1;
    letter-spacing: calc(1 * var(--u)); padding-left: calc(1 * var(--u)); border-radius: calc(1.5 * var(--u)); white-space: nowrap;
}
.oa-card .oa-lunar-date .oa-top, .oa-card .oa-weekday .oa-top { width: 100%; display: block; font-size: calc(6.4 * var(--u)); font-weight: bold; line-height: 1.2; text-align: center; }
.oa-card .oa-solar-term { grid-area: 3 / 4 / 5 / 7; display: flex; flex-direction: column; justify-content: center; padding: calc(2 * var(--u)); text-align: justify; text-align-last: justify; }
.oa-card .oa-solar-term.is-seasonal { flex-direction: column-reverse; }
.oa-card .oa-solar-term.is-seasonal .oa-bot { white-space: nowrap; }
.oa-card .oa-solar-term .oa-top { font-size: calc(8 * var(--u)); }
.oa-card .oa-solar-term .oa-bot { font-size: calc(7 * var(--u)); }

/* 宜/忌 */
.oa-card .oa-suitable { grid-area: 5 / 1 / 8 / 3; display: flex; flex-direction: column; align-items: center; padding: calc(1.5 * var(--u)); }
.oa-card .oa-avoid { grid-area: 5 / 8 / 7 / 10; display: flex; flex-direction: column; align-items: center; padding: calc(1.5 * var(--u)); }
.oa-card .oa-oval { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: calc(19 * var(--u)); height: calc(9 * var(--u)); font-size: calc(6.4 * var(--u)); font-weight: bold; line-height: 1; border-radius: 50%; }
.oa-card .oa-yiji { display: flex; flex: 1; min-height: 0; flex-wrap: wrap; align-items: center; align-content: center; font-size: calc(6.4 * var(--u)); line-height: 1.15; }
.oa-card .oa-yiji span { width: 50%; box-sizing: border-box; text-align: center; white-space: nowrap; }
.oa-card .oa-avoid .oa-yiji { justify-content: space-around; }

/* 时辰/冲煞/年号 */
.oa-card .oa-time-fortune { grid-area: 5 / 3 / 6 / 8; display: flex; flex-direction: column; justify-content: center; padding: 0 calc(3 * var(--u)); }
.oa-card .oa-shichen-label { margin-right: calc(1.5 * var(--u)); font-weight: bold; }
.oa-card .oa-steel-row { display: flex; align-items: center; justify-content: space-between; font-size: calc(6.4 * var(--u)); }
.oa-card .oa-char { display: block; width: 100%; line-height: 1.3; text-align: justify; text-align-last: justify; }

.oa-card .oa-nine-stars { grid-area: 7 / 8 / 9 / 10; display: flex; align-items: center; justify-content: center; font-size: calc(6.4 * var(--u)); }
.oa-card .oa-conflict { grid-area: 9 / 8 / 11 / 10; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(1.5 * var(--uh)) 0; }
.oa-card .oa-zicon { display: block; width: 100%; height: 100%; fill: currentColor !important; }

.oa-card .oa-snake { position: relative; flex: 1; align-self: stretch; margin: 0 calc(1.5 * var(--u)); font-family: var(--oa-serif); line-height: 1; }
.oa-card .oa-sx-day, .oa-card .oa-sx-clash { position: absolute; display: block; font-size: calc(9 * var(--u)); line-height: 1; }
.oa-card .oa-sx-day { top: 0; left: 0; width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.oa-card .oa-sx-clash { right: 0; bottom: 0; width: calc(11 * var(--u)); height: calc(11 * var(--u)); transform: scaleX(-1); }
.oa-card .oa-violet-text { font-size: calc(4 * var(--u)); white-space: nowrap; }
.oa-card .oa-year-month { grid-area: 11 / 8 / 12 / 10; display: flex; align-items: center; justify-content: center; padding-left: calc(1 * var(--u)); font-size: calc(6.4 * var(--u)); letter-spacing: calc(1 * var(--u)); }

/* 吉神方位 */
.oa-card .oa-gods { grid-area: 6 / 3 / 11 / 5; display: flex; justify-content: center; padding: calc(1.5 * var(--u)); font-size: calc(6.4 * var(--u)); }
.oa-card .oa-gods-inner { display: flex; flex: 1; flex-direction: column; justify-content: space-between; }
.oa-card .oa-gods-head { font-weight: bold; line-height: 1.44; border-radius: calc(1.5 * var(--u)); }
.oa-card .oa-gods-item { display: flex; align-items: center; justify-content: center; line-height: 1; }

/* 飞星（八卦图） */
.oa-card .oa-feixing { grid-area: 6 / 5 / 10 / 6; display: flex; align-items: center; justify-content: center; padding: 1mm; }
.oa-card .oa-feixing svg { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; overflow: visible; font-family: var(--oa-sans); }
.oa-card .oa-fx-paper { fill: var(--oa-paper) !important; }
.oa-card .oa-fx-line { stroke: var(--oa-ink); }
.oa-card .oa-fx-solid { fill: var(--oa-ink); }
.oa-card .oa-fx-text { fill: var(--oa-ink); stroke: none; }

/* 五行/二十八宿 */
.oa-card .oa-five { grid-area: 6 / 6 / 10 / 8; display: flex; flex-direction: column; padding: calc(1.5 * var(--u)); }
.oa-card .oa-five .oa-row { display: flex; flex: 1; align-items: center; gap: calc(1.8 * var(--u)); min-height: 0; font-size: calc(4 * var(--u)); }
.oa-card .oa-five .oa-label, .oa-card .oa-five .oa-val2 { flex: 1; min-width: 0; display: block; text-align: justify; text-align-last: justify; white-space: nowrap; border-bottom: 1px solid #cbd5e1; }
.oa-card .oa-five .oa-val1 { font-size: calc(6.4 * var(--u)); font-weight: bold; text-align: center; transform: scaleY(.85); }
.oa-card .oa-five > .oa-row:nth-last-child(-n + 2) .oa-val2 { text-align: center; text-align-last: center; }

/* 八字/胎神 */
.oa-card .oa-cell-bazi { grid-area: 10 / 5 / 12 / 6; }
.oa-card .oa-cell-tai { grid-area: 10 / 6 / 12 / 8; }
.oa-card .oa-box { display: flex; align-items: center; justify-content: center; gap: calc(1.5 * var(--u)); height: 100%; padding: calc(1.5 * var(--u)); font-size: calc(5.5 * var(--u)); }
.oa-card .oa-box-head { display: flex; align-items: center; justify-content: center; flex-shrink: 0; writing-mode: vertical-rl; height: 100%; padding: 0 calc(0.8 * var(--u)); font-size: calc(5.5 * var(--u)); line-height: 1.2; letter-spacing: calc(0.6 * var(--u)); white-space: nowrap; border-radius: calc(1 * var(--u)); }
.oa-card .oa-bazi-body { display: grid; grid-template-columns: repeat(2, max-content); gap: calc(1.5 * var(--u)); align-items: center; }
.oa-card .oa-bazi-body > div { white-space: nowrap; line-height: 1.2; }
.oa-card .oa-tai-body { display: grid; flex: 1; min-width: 0; grid-template-columns: 1fr; gap: calc(1.5 * var(--u)); }
.oa-card .oa-tai-body > div { text-align: justify; text-align-last: justify; white-space: nowrap; }

/* 生肖格 */
.oa-card .oa-zodiac-wrap { grid-area: 8 / 1 / 11 / 3; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.oa-card .oa-animal { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: calc(0.65 * var(--u)); }
.oa-card .oa-nums { display: flex; justify-content: space-between; font-size: calc(3 * var(--u)); }
.oa-card .oa-animal-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--oa-serif); font-size: calc(9 * var(--u)); line-height: 1; }
.oa-card .oa-animal-icon .oa-zicon { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }

/* 吉数 */
.oa-card .oa-lucky { grid-area: 11 / 1 / 12 / 5; display: flex; align-items: center; gap: calc(1.5 * var(--u)); padding: 0 calc(2 * var(--u)); font-size: calc(6 * var(--u)); }
.oa-card .oa-lucky-head { display: flex; align-items: center; justify-content: center; padding: calc(1 * var(--u)); font-size: calc(6 * var(--u)); line-height: 1; border-radius: calc(0.5 * var(--u)); }
.oa-card .oa-lucky .oa-zodiac { display: flex; align-items: center; gap: calc(1 * var(--u)); }
.oa-card .oa-lucky .oa-zodiac .oa-zicon { width: calc(7 * var(--u)); height: calc(7 * var(--u)); }
.oa-card .oa-lucky > span { font-family: Arial, Helvetica, sans-serif; font-size: calc(4.2 * var(--u)); line-height: 1; transform: translateY(calc(0.4 * var(--u))); }

/* 底部 */
.oa-card .oa-footer { grid-area: 12 / 1 / 13 / 10; display: flex; align-items: center; justify-content: space-between; padding: 0 calc(3 * var(--u)); font-size: calc(5.5 * var(--u)); }
.oa-card .oa-footer > div { flex: 0 0 auto; white-space: nowrap; }
.oa-card .oa-footer #oa-dream { flex: 0 1 auto; min-width: 50%; overflow: hidden; text-overflow: ellipsis; }

/* 侧边悬浮按钮 */
.oa-nav { position: absolute; top: 50%; z-index: 3; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-top: -20px; font-size: 26px; line-height: 1; color: var(--oa-ink); background: var(--mn-bg-card); border: 1px solid var(--mn-border); border-radius: 50%; box-shadow: var(--mn-shadow); text-decoration: none; transition: transform .15s; }
.oa-nav:hover { transform: translateY(-1px); }
.oa-nav-prev { left: -58px; }
.oa-nav-next { right: -58px; }

.oa-tabs { position: absolute; top: 32%; right: -22px; z-index: 3; display: flex; flex-direction: column; gap: 10px; }
.oa-tab { display: flex; align-items: center; justify-content: center; width: 36px; height: 44px; padding: 0; color: var(--oa-ink); background: var(--mn-bg-card); border: 1px solid var(--mn-border); border-radius: var(--mn-radius); box-shadow: var(--mn-shadow); cursor: pointer; }
.oa-tab:hover { transform: translateX(1px); }

/* 弹窗面板 */
.oa-panel { position: fixed; inset: 0; background: rgba(15,23,42,0.5); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.oa-panel[hidden] { display: none !important; }
.oa-panel-inner { background: #fff; padding: 20px; border-radius: 12px; width: 300px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.oa-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.oa-panel-head h2 { margin: 0; font-size: 16px; }
.oa-panel-close { border: 0; background: none; font-size: 18px; cursor: pointer; color: #666; }
.oa-panel-help { font-size: 13px; color: #666; margin-bottom: 16px; }
.oa-panel-label { display: block; font-size: 13px; margin-bottom: 6px; font-weight: bold; }
.oa-date-input { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 6px; margin-bottom: 12px; }
.oa-panel-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.oa-btn { padding: 6px 12px; border-radius: 6px; border: 1px solid #ccc; background: #fff; cursor: pointer; text-decoration: none; color: #333; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.oa-btn-primary { background: var(--oa-ink); color: #fff; border-color: var(--oa-ink); }

/* 移动端适配 */
@media (max-width: 860px) {
    .oa-stage { padding: 52px 8px 96px; }
    .oa-nav { top: auto; bottom: -52px; margin-top: 0; }
    .oa-nav-prev { left: calc(50% - 54px); }
    .oa-nav-next { right: calc(50% - 54px); }
    .oa-card .oa-blessing { --oa-lift: 0px; }
    .oa-tabs { top: -46px; right: 0; flex-direction: row; }
}