/**
 * FlintHub — 轻量级 PHP 社区系统
 * 手撕日历插件 — 样式
 *
 * 设计约束（规范 §8）：
 *  - 全部颜色取自核心语义变量（--mn-*），本文件不出现任何色值字面量；
 *  - 圆角只用 --mn-radius / -sm / -lg；
 *  - 纸面尺寸与字号用容器查询单位（cqw/cqh）等比缩放，移动端只需改外边距。
 *
 * @file plugins/almanac/assets/style.css
 * @package Plugin\Almanac
 * @version 1.1.0
 */

/* ==================== 导出取色探针 ==================== */
/* 仅用于把主题变量读成具体色值：元素用完即删，绝对定位到屏幕外，不参与布局 */
.oa-color-probe {
    position: absolute;
    top: 0;
    left: -9999px;
    width: 0;
    height: 0;
    overflow: hidden;
}
.oa-color-probe-ink { background-color: var(--oa-ink); }
.oa-color-probe-paper { background-color: var(--oa-paper); }
.oa-color-probe-weekend { background-color: var(--oa-weekend); }
.oa-color-probe-soft { background-color: var(--oa-soft); }

/* ==================== 主题映射 ==================== */
.oa-wrap {
    --oa-paper: var(--mn-bg-card);
    --oa-ink: var(--mn-primary);
    --oa-weekend: var(--mn-error);
    --oa-soft: var(--mn-text-secondary);

    --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;

    padding: clamp(16px, 2.6vw, 32px);
}

.oa-head { margin: 0 0 18px; }
.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-stage {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 56px 64px 48px;
    background: var(--mn-bg-body);
    border-radius: var(--mn-radius-lg);
    perspective: 1600px;
}

.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);
    text-decoration: none;
    background: var(--mn-bg-card);
    border: 1px solid var(--mn-border);
    border-radius: 50%;
    box-shadow: var(--mn-shadow);
    transition: transform .15s ease, box-shadow .15s ease;
}
.oa-nav:hover { transform: translateY(-1px); box-shadow: var(--mn-shadow-float); }
.oa-nav-prev { left: -58px; }
.oa-nav-next { right: -58px; }

/* ==================== 纸册 ==================== */
.oa-book {
    position: relative;
    width: min(100%, 520px);
}

/* 纸口：纸面上方 10px 的纸头预留（全局 border-box，改动前是 10px 含 1px 上边框）。
   整块纸头现在由 .oa-blessing 满宽覆盖并向上延伸，所以这里只负责「占住 10px」
   和一个无数据时的兜底底色；不再画虚线、不再加投影，避免与纸头出现两道边。 */
.oa-bar {
    height: 10px;
    margin: 0;
    background-color: color-mix(in srgb,
        var(--mn-bg-body) 60%,
        color-mix(in srgb, var(--oa-paper) 55%, var(--mn-border)));
    border: 0;
    border-radius: var(--mn-radius-sm) var(--mn-radius-sm) 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);
    transform-origin: top center;
    backface-visibility: hidden;
}

/* 翻页动效：绕顶边向后翻下 */
@keyframes oa-flip-out {
    from { transform: rotateX(0deg); opacity: 1; }
    to   { transform: rotateX(-86deg); opacity: .25; }
}
@keyframes oa-flip-in {
    from { transform: rotateX(82deg); opacity: .2; }
    to   { transform: rotateX(0deg); opacity: 1; }
}
.oa-sheet.is-out { animation: oa-flip-out .28s ease-in forwards; }
.oa-sheet.is-in  { animation: oa-flip-in .30s ease-out; }

/* 撕纸动效（默认，三段式，总 800ms）
 * 撕口：clip-path 的 25 点锯齿从右上角 (100% .15%) 斜向左下推到左边缘 (0% 9.80%)，
 *       所以纸页上沿是不齐的毛边，不是一条光滑斜线。
 * 推进（0–31.25% / 0–250ms）：mask-size 0%→100%（mask-position: right top），
 *       可见区域从右上往左掀；transform-origin 同时从 100% 10% 走到 0% 10%，
 *       可见的那块纸就围绕「当时的撕口端点」轻微起翘，而不是整体平移。
 * 起翘（31.25–50% / 250–400ms）：绕撕缝左端点 perspective(1000px) + rotateY /
 *       rotateZ / skewY 翻卷到 -62°，纸面立起来侧对屏幕但不被透视拉近放大。
 * 坠落（50–100% / 400–800ms）：translate3d 下落 144% 并淡出，落的过程中把
 *       rotateY 收回 -10°，纸片不会变成一条看不见的竖线。
 * 只动 transform / transform-origin / opacity / mask-size，不触发布局。 */
@keyframes oa-tear-page {
    0% {
        transform-origin: 100% 10%;
        transform: perspective(1000px) translate3d(0, 0, 0) rotateZ(0deg);
        -webkit-mask-size: 0% 100%;
        mask-size: 0% 100%;
        opacity: 1;
        animation-timing-function: cubic-bezier(.45, .05, .55, .95);
    }
    12% {
        transform-origin: 76% 10%;
        transform: perspective(1000px) translate3d(0, -1px, 0) rotateZ(-1.4deg);
    }
    31.25% {
        transform-origin: 0% 10%;
        transform: perspective(1000px) translate3d(0, -2px, 4px) rotateZ(-3.4deg);
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        opacity: 1;
        animation-timing-function: cubic-bezier(.4, .1, .6, .9);
    }
    42% {
        transform: perspective(1000px) translate3d(2px, -9px, 18px)
            rotateY(-36deg) rotateZ(-5deg) skewY(-2deg);
    }
    50% {
        transform-origin: 0% 10%;
        transform: perspective(1000px) translate3d(3px, -12px, 26px)
            rotateY(-62deg) rotateZ(-6.4deg) skewY(-3deg);
        opacity: 1;
        animation-timing-function: cubic-bezier(.35, 0, .7, .6);
    }
    62% {
        transform: perspective(1000px) translate3d(7px, 44%, 10px)
            rotateY(-40deg) rotateZ(1deg) skewY(1deg);
        opacity: .97;
    }
    100% {
        transform: perspective(1000px) translate3d(18px, 144%, 0)
            rotateY(-10deg) rotateZ(7deg) skewY(2.4deg);
        opacity: 0;
    }
}
@keyframes oa-tear-shade {
    0%, 31.25% { opacity: 0; }
    42%        { opacity: .55; }
    50%        { opacity: .9; }
    100%       { opacity: .9; }
}
@keyframes oa-drop-in {
    from { transform: translateY(-6px); opacity: .55; }
    to   { transform: translateY(0); opacity: 1; }
}

.oa-card.oa-ghost {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    /* 纸面外观自带一份：背景、内边距、圆角、投影都在这里声明，
       即使 .oa-card 的规则没命中（选择器改名 / 主题覆盖），
       旧页快照也不会变成一张透明的空壳。 */
    box-sizing: border-box;
    padding: 6.4516%;
    background: var(--oa-paper);
    border-radius: var(--mn-radius-sm);
    box-shadow: var(--mn-shadow-dropdown);
    color: var(--oa-ink);
    overflow: hidden;
    pointer-events: none;
    transform-origin: 100% 10%;
    will-change: transform, opacity, mask-size;
    /* 撕口：右上角起、左边缘收，中间 25 个点上下错开 0.15–2.05 个百分点，形成毛边 */
    clip-path: polygon(
        0% 100%,
        0% 9.80%, 4.2% 9.82%, 8.3% 7.73%, 12.5% 9.45%, 16.7% 7.27%,
        20.8% 8.38%, 25% 6.70%, 29.2% 8.22%, 33.3% 6.13%, 37.5% 6.65%,
        41.7% 5.07%, 45.8% 6.18%, 50% 4.00%, 54.2% 5.52%, 58.3% 3.93%,
        62.5% 5.05%, 66.7% 2.87%, 70.8% 3.68%, 75% 1.80%, 79.2% 3.42%,
        83.3% 1.43%, 87.5% 2.05%, 91.7% 0.15%, 95.8% 1.48%, 100% 0.15%,
        100% 100%);
    /* 撕口推进：整块纸先用 0 宽度的遮罩藏起来，再从右往左放开 */
    -webkit-mask-image: linear-gradient(currentColor, currentColor);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: right top;
    -webkit-mask-size: 0% 100%;
    mask-image: linear-gradient(currentColor, currentColor);
    mask-repeat: no-repeat;
    mask-position: right top;
    mask-size: 0% 100%;
}
.oa-card.oa-ghost.is-tearing-next,
.oa-card.oa-ghost.is-tearing-prev {
    animation: oa-tear-page 800ms linear both;
}
/* 投影层：drop-shadow 必须放在 .oa-ghost 的父级，滤镜在 clip-path / mask 之后
   才作用于渲染结果，所以阴影会沿着锯齿撕口和遮罩前沿走，纸页才有「翘起来离开
   纸面」的实感。放在 .oa-ghost 自己身上会被 clip-path 一起裁掉。 */
.oa-ghost-layer {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    filter: drop-shadow(4px 12px 16px color-mix(in srgb, var(--oa-ink) 26%, transparent));
}
/* 撕口内侧的暗边 + 白口：上沿 2px 纸色是撕开的纤维断口，往下 14px 收到墨色阴影，
   两条都随撕口锯齿被裁切，所以白边与暗边是沿着毛边走，而不是横着一条直线。 */
.oa-card.oa-ghost::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 14%;
    background: linear-gradient(to bottom,
        var(--oa-paper) 0 2px,
        color-mix(in srgb, var(--oa-ink) 32%, transparent) 2px,
        transparent 16px);
    pointer-events: none;
}
/* 纸背：翻卷起来以后纸面背光，靠一层薄墨压暗 + 折痕方向的渐变表现，
   与主动画同一条时间轴（0–250ms 不出现，250–400ms 浮上来）。
   只用半透明墨色叠在印刷内容上，纸上的日期/宜忌不会被糊掉。 */
.oa-card.oa-ghost::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right,
            color-mix(in srgb, var(--oa-ink) 26%, transparent),
            transparent 64%),
        color-mix(in srgb, var(--oa-ink) 12%, transparent);
    opacity: 0;
    animation: oa-tear-shade 800ms linear both;
    pointer-events: none;
}

/* 新页就位：作用于 .oa-card 而不是 .oa-sheet，避免把叠在上面的旧页快照
 * 一起拖动，造成两页重影。 */
.oa-card.is-dropping { animation: oa-drop-in 240ms ease-out; }

/* 显式降级（?oa-motion=fade）时的替代反馈：不做位移，只做 140ms 淡入。
 * 只在用户主动带参数时生效；系统「减少动效」不再触发任何降级。 */
@keyframes oa-fade-in {
    from { opacity: .35; }
    to   { opacity: 1; }
}
.oa-card.is-fading { animation: oa-fade-in 140ms ease-out; }

.oa-loading {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--oa-soft);
    background: var(--oa-paper);
}
.oa-loading[hidden] { display: none; }

/* ==================== 日历纸 ==================== */
.oa-card {
    position: relative;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 6.4516%;
    background: var(--oa-paper);
    color: var(--oa-ink);
    display: grid;
    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 的上内边距带。padding-top = 宽度的 6.4516%，
 *       而 1u = 内容盒宽 / 180，两者换算后这条带恰好 13.3333u 高；
 *       它下面才是第 1 行（页眉三栏框）。所以它是版式预留，不是多余空隙。
 * 位置与尺寸（B 方案：向上长，不向内压）：
 *       满宽（左右各出 1px，正好盖住纸面 1px 边框，与纸边对齐）；
 *       顶部 = -(10px 纸口 + 6u)，向上长进 .oa-stage 的空白，不占纸面内部；
 *       底部 = 上内边距带内 8.9u 处，距年份框上边框 4.4333u（≈11.1px）作呼吸间距。
 *       整条纸头 = 10px + 14.9u（高度不变），相比上一版整体上移 2u（≈5.0px）：
 *       纸面上方多出 2u、纸面内部少 2u，所以下沿到年份框的间距从 2.4333u
 *       翻倍到 4.4333u。上移至多再用掉 2u，stage 的 56px 上内边距仍剩 ≈30px。
 * 零压缩：absolute 脱离 12 行网格，网格行高、宜/忌三行、页眉、大日期
 *       与改动前逐像素一致；向上生长只画进 stage 的 56px 上内边距里，不顶页高。
 * 圆角：只给顶部 --mn-radius-sm（微圆角），底部与纸边齐平 —— 撕纸日历的纸头
 *       是齐边撕口，底部再做圆角会在呼吸间距里多出一道弧线阴影。
 * 配色：底色 = 80% 主题红(--mn-error) + 20% 主题文字色(--mn-text) 派生，
 *       文字取纸色(--oa-paper)。浅色主题派生为中等深红、配白字，对比度
 *       估算 ≈5.3:1；暗色主题派生为浅珊瑚红、配深色纸面，估算 ≈6.1:1。
 *       两种主题都高于 WCAG AA 的 4.5:1，且不含任何色值字面量。 */
.oa-card .oa-blessing {
    --oa-cap: 10px;                  /* 纸口占位，与 .oa-bar 等高 */
    --oa-lift: calc(6 * var(--u));   /* 向上长进 stage 空白的部分 */
    --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;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: var(--mn-radius-sm) var(--mn-radius-sm) 0 0;
    color: var(--oa-paper);
    background: color-mix(in srgb, var(--mn-error) 80%, var(--mn-text));
    /* 纸头唯一的边：下沿 1px 暗线，画在盒外、不占布局 */
    box-shadow: 0 1px 0 color-mix(in srgb, var(--mn-bg-body) 70%, var(--mn-text));
    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-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-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); }
.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%;
}
/* 宜 / 忌 —— 竖排容器的可用高度是定值：
 *   宜格 3 行网格 27.695fr，忌格 2 行 22.247fr；整卡高度 240u（u = 内容宽/180）。
 *   扣除内边距（上下各 1.5u）与「宜/忌」椭圆（9u）后，
 *   宜剩 25.2u 放最多 3 行、忌剩 17.8u 放最多 2 行。
 *   因此字号固定 6.4u、行高固定 1.15（3 行 = 22.1u ≤ 25.2u），
 *   不按行数切换档位：1~3 行只改变整体居中位置，不会出现跳变，
 *   单行时上下均分留白，也不会在底部堆出一大片空白。 */
.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;
}
/* 生肖图形：72×72 的实心 path（来自原版 shengxiao.ttf 字形），颜色继承 currentColor
 * （跟随 --oa-ink、周末红与暗色主题） */
.oa-card .oa-zicon { display: block; width: 100%; height: 100%; }

.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); }
.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: var(--bw) solid color-mix(in srgb, var(--oa-ink) 35%, transparent);
}
.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-tabs {
    position: absolute;
    top: 32%;
    right: -22px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.oa-tab-slot { display: flex; }
.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;
    transition: box-shadow .15s ease, transform .15s ease;
}
.oa-tab:hover { transform: translateX(1px); box-shadow: var(--mn-shadow-float); }
.oa-tab[aria-expanded="true"] { background: var(--mn-primary-light); }

/* ==================== 日期 / 打印面板 ==================== */
.oa-panel {
    position: fixed;
    right: clamp(12px, 4vw, 48px);
    bottom: clamp(12px, 4vw, 48px);
    z-index: 90;
    width: min(340px, calc(100vw - 24px));
    background: var(--mn-bg-card);
    border: 1px solid var(--mn-border);
    border-radius: var(--mn-radius-lg);
    box-shadow: var(--mn-shadow-dropdown);
}
.oa-panel[hidden] { display: none; }
.oa-panel-inner { padding: 16px; }
.oa-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.oa-panel-head h2 { margin: 0; font-size: 15px; color: var(--mn-text); }
.oa-panel-close {
    width: 28px;
    height: 28px;
    padding: 0;
    font-size: 18px;
    line-height: 1;
    color: var(--mn-text-secondary);
    background: transparent;
    border: 0;
    border-radius: var(--mn-radius-sm);
    cursor: pointer;
}
.oa-panel-close:hover { background: var(--mn-bg-row-hover); color: var(--mn-text); }
.oa-panel-label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--mn-text-secondary); }
.oa-date-input {
    box-sizing: border-box;
    width: 100%;
    height: 36px;
    padding: 0 10px;
    font-size: 14px;
    color: var(--mn-text);
    background: var(--mn-bg-input);
    border: 1px solid var(--mn-border);
    border-radius: var(--mn-radius);
}
.oa-panel-help { margin: 8px 0 0; font-size: 12px; color: var(--mn-text-muted); }
.oa-panel-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}
.oa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 14px;
    font-size: 13px;
    color: var(--mn-text);
    text-decoration: none;
    background: var(--mn-bg-card);
    border: 1px solid var(--mn-border);
    border-radius: var(--mn-radius);
    cursor: pointer;
}
.oa-btn:hover { background: var(--mn-bg-row-hover); }
.oa-btn-primary {
    color: var(--mn-text-inverse);
    background: var(--mn-primary);
    border-color: var(--mn-primary);
}
.oa-btn-primary:hover { background: var(--mn-primary-hover); border-color: var(--mn-primary-hover); }

/* ==================== 辅助 ==================== */
.oa-announce {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.oa-alert {
    margin: 12px 0 0;
    padding: 10px 12px;
    font-size: 13px;
    color: var(--mn-text);
    background: var(--mn-bg-tag);
    border: 1px solid var(--mn-border);
    border-radius: var(--mn-radius);
}

/* ==================== 移动端 ==================== */
@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); }
    /* 页签换成横排后高 44px，而 .oa-tabs 的定位基准是 .oa-book（top:-44px），
       它的下沿正好落在纸头上沿往下 2px 处；纸头此时还向上抬了 6u，
       于是被页签盖掉 6u+2px（375 实测 7.94px、768 实测 14.03px）。
       这一档不再让纸头向上生长（--oa-lift:0）：纸头上沿退到纸面上沿，
       与页签下沿拉开 3px，纸头下沿到年份框的 4.4333u 间距不受影响。 */
    .oa-card .oa-blessing { --oa-lift: 0px; }
    .oa-tabs { top: -46px; right: 0; flex-direction: row; }
    .oa-title { font-size: 19px; }
}

@media (max-width: 480px) {
    .oa-wrap { padding: 12px; }
    .oa-stage { padding: 50px 4px 92px; border-radius: var(--mn-radius); }
    .oa-panel { right: 8px; left: 8px; bottom: 8px; width: auto; }
    /* 小屏上纸面整体缩到 ≈62%（1u ≈ 1.55px），6.4u 只有 ≈10px：
       放大到 7.4u（≈11.5px）。纸头高度随 u 一起缩，
       文字仍居中、不溢出，和年份上边框的间距也不变。 */
    .oa-card .oa-blessing {
        gap: calc(1.4 * var(--u));
        padding: var(--oa-head) calc(2 * var(--u)) 0;
    }
    .oa-card .oa-blessing-rule { width: calc(10 * var(--u)); min-width: calc(4 * var(--u)); }
    .oa-card .oa-blessing-text {
        font-size: calc(7.4 * var(--u));
        letter-spacing: calc(0.8 * var(--u));
        text-indent: calc(0.8 * var(--u));
    }
}

/* 注意：这里没有 prefers-reduced-motion 分支。
 * 系统开启「减少动效」时，本插件不做任何自动降级 —— 撕纸照播；
 * 想要静音动效只能由用户主动访问 ?oa-motion=fade。 */

/* ==================== 打印 ==================== */
@media print {
    @page { size: 155mm 200mm; margin: 0; }

    html,
    body { background: var(--mn-bg-card) !important; }

    body * { visibility: hidden !important; }

    .oa-book,
    .oa-book * { visibility: visible !important; }

    .oa-head,
    .oa-nav,
    .oa-tabs,
    .oa-bar,
    .oa-panel,
    .oa-alert { display: none !important; }

    /* 纸头向上生长的部分会超出纸面上沿、被页面裁掉；打印时拉回纸内，
       只保留纸面上内边距带里的那一块。 */
    .oa-card .oa-blessing {
        top: 0;
        height: calc(8.9 * var(--u));
        padding-top: 0;
        border-radius: var(--mn-radius-sm);
    }

    .oa-book {
        position: fixed;
        top: 0;
        left: 0;
        width: 155mm !important;
    }
    .oa-sheet {
        width: 155mm !important;
        height: 200mm !important;
        aspect-ratio: auto;
        border: 0;
        box-shadow: none;
    }
    .oa-card,
    .oa-book * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}