/* =====================================================================
   弹窗公告 · PopupNotice — Liquid Glass Edition
   macOS / iOS 设计语言：液态玻璃材质 · 弹簧动效 · 明暗自适应

   · 明暗：只认根节点 [data-scheme="light|dark"]，由 notice.js 按
     「跟随主题 / 跟随系统 / 按时间 / 常亮 / 常暗」解析后写入。
   · 形态：[data-layout="dialog"] 桌面居中浮窗；[data-layout="sheet"]
     手机底部浮动抽屉（可下滑关闭）。
   · 护甲：组件规则一律 #acg-popup-notice .pn-*（1,1,0），主题里
     .st-body button 这类 (0,1,1) 规则打不穿；内部元素先 all:revert
     剥掉主题的全局样式，再由组件规则重建（公告正文的内联样式不受影响）。
   ===================================================================== */

@property --pn-angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 315deg;
}

@property --pn-fade-top {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

@property --pn-fade-bottom {
    syntax: "<length>";
    inherits: false;
    initial-value: 0px;
}

/* ---------------------------------------------------------------------
   0. 隔离层
   --------------------------------------------------------------------- */
#acg-popup-notice {
    all: initial;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;

    /* —— 几何 —— */
    --pn-w: 560px;
    --pn-radius: 30px;

    /* —— 动效（支持 linear() 的浏览器下方替换为真实弹簧曲线）—— */
    --pn-spring: cubic-bezier(.34, 1.4, .64, 1);
    --pn-spring-soft: cubic-bezier(.22, 1.1, .36, 1);
    --pn-spring-snap: cubic-bezier(.3, 1.3, .5, 1);
    --pn-ease-out: cubic-bezier(.22, 1, .36, 1);
    --pn-ease-in: cubic-bezier(.4, 0, .9, .6);

    /* —— 强调色 / 氛围色（RGB 三元组，JS 从主题与头像取色后覆盖）—— */
    --pn-accent: 0 122 255;
    --pn-accent-ink: 255 255 255;
    --pn-link: 0 102 219;
    --pn-tint: 94 92 230;

    /* —— 浅色玻璃 —— */
    --pn-ink: #1d1d1f;
    --pn-ink-body: rgb(29 29 31 / .9);
    --pn-ink-2: rgb(60 60 67 / .72);
    --pn-ink-3: rgb(60 60 67 / .36);
    --pn-surface: rgb(255 255 255 / .72);
    --pn-surface-solid: #f5f5f7;
    --pn-gloss: rgb(255 255 255 / .42);
    --pn-fill: rgb(120 120 128 / .12);
    --pn-fill-2: rgb(120 120 128 / .2);
    --pn-hair: rgb(0 0 0 / .08);
    --pn-rim-hi: rgb(255 255 255 / .96);
    --pn-rim-mid: rgb(255 255 255 / .5);
    --pn-rim-lo: rgb(255 255 255 / .1);
    --pn-edge-top: rgb(255 255 255 / .85);
    --pn-edge-bottom: rgb(255 255 255 / .28);
    --pn-sheen: .5;
    --pn-halo: .3;
    --pn-scrim: rgb(24 24 32 / .2);
    --pn-scrim-solid: rgb(24 24 32 / .42);
    --pn-shadow:
        0 38px 90px -28px rgb(20 20 40 / .42),
        0 16px 36px -14px rgb(20 20 40 / .2),
        0 2px 6px -1px rgb(20 20 40 / .08);
    --pn-orb-shadow:
        0 14px 30px -12px rgb(20 20 40 / .45),
        0 3px 8px -2px rgb(20 20 40 / .16);

    --pn-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue",
        "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei UI", "Microsoft YaHei",
        system-ui, "Segoe UI", Roboto, sans-serif;
    --pn-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    font-family: var(--pn-font);
    font-size: 15px;
    line-height: 1.5;
    font-weight: 400;
    color: var(--pn-ink);
    color-scheme: light;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

@supports (animation-timing-function: linear(0, 1)) {
    #acg-popup-notice {
        /* 阻尼 0.62：峰值 1.08，约 700ms 静止——用于胶囊弹出、圆珠落位 */
        --pn-spring: linear(0, 0.0274, 0.0981, 0.1972, 0.312, 0.4324, 0.5506, 0.6611, 0.7601, 0.8456, 0.9166, 0.9732, 1.0164, 1.0473, 1.0676, 1.079, 1.0834, 1.0822, 1.0771, 1.0693, 1.0599, 1.0499, 1.04, 1.0305, 1.022, 1.0146, 1.0083, 1.0033, 0.9994, 0.9966, 0.9947, 0.9936, 0.9931, 0.9931, 0.9934, 0.994, 0.9948, 0.9956, 0.9965, 0.9973, 1);
        /* 阻尼 0.78：峰值 1.02，约 500ms——用于面板入场 */
        --pn-spring-soft: linear(0, 0.0177, 0.0637, 0.1289, 0.2061, 0.2895, 0.3746, 0.4581, 0.5376, 0.6116, 0.6789, 0.7392, 0.7922, 0.8381, 0.8773, 0.9101, 0.9373, 0.9593, 0.9769, 0.9906, 1.0009, 1.0085, 1.0138, 1.0172, 1.0191, 1.0199, 1.0198, 1.019, 1.0179, 1.0164, 1.0148, 1.0131, 1.0114, 1.0098, 1.0082, 1.0069, 1.0056, 1.0045, 1.0035, 1.0027, 1);
        /* 阻尼 0.70：峰值 1.05，约 460ms——用于吸附、抽屉回弹 */
        --pn-spring-snap: linear(0, 0.0234, 0.0839, 0.1686, 0.267, 0.3712, 0.4748, 0.5734, 0.664, 0.7447, 0.8147, 0.8738, 0.9223, 0.961, 0.9908, 1.0129, 1.0283, 1.0383, 1.0438, 1.0459, 1.0454, 1.043, 1.0393, 1.0349, 1.0301, 1.0253, 1.0207, 1.0165, 1.0126, 1.0093, 1.0064, 1.0041, 1.0022, 1.0007, 0.9996, 0.9988, 0.9983, 0.998, 0.9979, 0.9979, 1);
    }
}

/* —— 深色玻璃 —— */
#acg-popup-notice[data-scheme="dark"] {
    --pn-link: 100 170 255;
    --pn-ink: #f5f5f7;
    --pn-ink-body: rgb(245 245 247 / .88);
    --pn-ink-2: rgb(235 235 245 / .64);
    --pn-ink-3: rgb(235 235 245 / .32);
    --pn-surface: rgb(36 36 42 / .6);
    --pn-surface-solid: #1f1f23;
    --pn-gloss: rgb(255 255 255 / .07);
    --pn-fill: rgb(120 120 128 / .24);
    --pn-fill-2: rgb(120 120 128 / .34);
    --pn-hair: rgb(255 255 255 / .1);
    --pn-rim-hi: rgb(255 255 255 / .55);
    --pn-rim-mid: rgb(255 255 255 / .2);
    --pn-rim-lo: rgb(255 255 255 / .035);
    --pn-edge-top: rgb(255 255 255 / .2);
    --pn-edge-bottom: rgb(255 255 255 / .05);
    --pn-sheen: .12;
    --pn-halo: .34;
    --pn-scrim: rgb(0 0 0 / .44);
    --pn-scrim-solid: rgb(0 0 0 / .62);
    --pn-shadow:
        0 38px 90px -24px rgb(0 0 0 / .78),
        0 16px 36px -12px rgb(0 0 0 / .5),
        0 2px 6px -1px rgb(0 0 0 / .3);
    --pn-orb-shadow:
        0 14px 30px -10px rgb(0 0 0 / .7),
        0 3px 8px -2px rgb(0 0 0 / .35);
    color-scheme: dark;
}

#acg-popup-notice:lang(ja) {
    --pn-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
        "Yu Gothic UI", "Meiryo UI", "Noto Sans JP", system-ui, sans-serif;
}

#acg-popup-notice:lang(zh-TW),
#acg-popup-notice:lang(zh-HK),
#acg-popup-notice:lang(zh-Hant) {
    --pn-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang TC", "Microsoft JhengHei UI",
        "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif;
}

#acg-popup-notice:lang(ko) {
    --pn-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Apple SD Gothic Neo", "Malgun Gothic",
        "Noto Sans KR", system-ui, sans-serif;
}

/* 剥掉主题的全局样式（p/a/button/h2 之类），回到浏览器默认再由下方组件规则重建。
   组件自己的节点由 JS 统一带上 pn-ui 类（类选择器匹配最便宜，也不会误伤 svg 图标）。 */
#acg-popup-notice .pn-ui {
    all: revert;
    box-sizing: border-box;
}

/* 公告正文同样剥一遍（layui 的 li{list-style:none}、bootstrap 的粉色 code 之类），
   但带呈现属性的元素跳过：all:revert 会把 <img width> <td align> <font color> 这类作者设定一起抹掉。 */
#acg-popup-notice .pn-content :where(div, span, section, article, header, footer, nav, aside, main, h1, h2, h3, h4, h5,
h6, p, a, b, strong, i, em, u, s, strike, del, ins, mark, small, big, sub, sup, abbr, cite, q, tt, ul, ol, li, dl,
dt, dd, blockquote, pre, code, kbd, samp, table, thead, tbody, tfoot, tr, th, td, caption, img, picture, figure,
figcaption, hr, video, audio, iframe, font, center, details, summary, label, button, input):where(:not([width], [height], [align],
[valign], [bgcolor], [color], [size], [face], [border], [cellpadding], [cellspacing], [nowrap], [hspace], [vspace],
[background], [noshade], [type], [start])) {
    all: revert;
    box-sizing: border-box;
}

#acg-popup-notice *::before,
#acg-popup-notice *::after {
    box-sizing: border-box;
}

#acg-popup-notice [hidden] {
    display: none !important;
}

#acg-popup-notice svg {
    display: block;
    flex: none;
    overflow: visible;
    pointer-events: none;
}

/* ---------------------------------------------------------------------
   1. 遮罩层与舞台
   --------------------------------------------------------------------- */
#acg-popup-notice .pn-layer {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-items: center;
    padding: max(20px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    overflow: hidden;
    margin: 0;
    font: inherit;
    color: inherit;
}

#acg-popup-notice .pn-scrim {
    position: absolute;
    inset: 0;
    background: var(--pn-scrim);
    -webkit-backdrop-filter: blur(3px) saturate(115%);
    backdrop-filter: blur(3px) saturate(115%);
    touch-action: none;
    transition: background-color .45s var(--pn-ease-out);
}

#acg-popup-notice .pn-stage {
    position: relative;
    z-index: 1;
    display: flex;
    width: min(var(--pn-w), 100%);
    margin: 0;
    padding: 0;
}

/* 氛围光：头像取色 + 强调色的两团柔光，透过玻璃给面板染上一层淡淡的颜色 */
#acg-popup-notice .pn-halo {
    position: absolute;
    inset: -22% -16%;
    z-index: 0;
    pointer-events: none;
    /* closest-side：光斑恰好在盒子边缘淡到透明，不会切出矩形硬边 */
    background:
        radial-gradient(closest-side at 32% 34%, rgb(var(--pn-tint) / var(--pn-halo)), rgb(var(--pn-tint) / calc(var(--pn-halo) * .35)) 55%, transparent),
        radial-gradient(closest-side at 70% 68%, rgb(var(--pn-accent) / calc(var(--pn-halo) * .7)), rgb(var(--pn-accent) / calc(var(--pn-halo) * .22)) 55%, transparent);
}

/* ---------------------------------------------------------------------
   2. 液态玻璃面板
   --------------------------------------------------------------------- */
#acg-popup-notice .pn-panel {
    position: relative;
    z-index: 1;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: min(760px, calc(100vh - 40px));
    max-height: min(760px, calc(100dvh - 40px));
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--pn-radius);
    overflow: hidden;
    background-color: var(--pn-surface);
    background-image: linear-gradient(180deg, var(--pn-gloss), transparent 42%);
    -webkit-backdrop-filter: blur(40px) saturate(190%);
    backdrop-filter: blur(40px) saturate(190%);
    box-shadow: var(--pn-shadow);
    color: var(--pn-ink);
    text-align: start;
    outline: none;
    transition: background-color .45s var(--pn-ease-out), box-shadow .45s var(--pn-ease-out), color .45s var(--pn-ease-out);
}

/* 玻璃切面：随指针转动的高光描边，对侧有一道弱反光 */
#acg-popup-notice .pn-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(from var(--pn-angle),
        var(--pn-rim-hi),
        var(--pn-rim-lo) 14%,
        var(--pn-rim-lo) 36%,
        var(--pn-rim-mid) 50%,
        var(--pn-rim-lo) 64%,
        var(--pn-rim-lo) 86%,
        var(--pn-rim-hi));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
    transition: --pn-angle .7s var(--pn-ease-out);
}

/* 透镜内光：顶部镜面线 + 指针处的柔和光斑（在内容之下，不冲淡文字） */
#acg-popup-notice .pn-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(560px circle at var(--pn-mx, 16%) var(--pn-my, -12%), rgb(255 255 255 / var(--pn-sheen)), transparent 58%);
    box-shadow:
        inset 0 1px 0 0 var(--pn-edge-top),
        inset 0 -1px 0 0 var(--pn-edge-bottom),
        inset 0 22px 40px -30px rgb(255 255 255 / var(--pn-sheen));
    transition: opacity .5s var(--pn-ease-out);
}

/* 抽屉把手 */
#acg-popup-notice .pn-grabber {
    display: none;
    flex: none;
    width: 38px;
    height: 5px;
    margin: 8px auto 0;
    border-radius: 3px;
    background: var(--pn-ink-3);
}

/* ---------------------------------------------------------------------
   3. 头部
   --------------------------------------------------------------------- */
#acg-popup-notice .pn-head {
    position: relative;
    z-index: 1;
    flex: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 14px;
    margin: 0;
    padding-block: 22px 14px;
    padding-inline: 22px 18px;
}

#acg-popup-notice .pn-avatar {
    position: relative;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(145deg, rgb(var(--pn-accent)), rgb(var(--pn-tint)));
    box-shadow:
        0 8px 20px -8px rgb(var(--pn-tint) / .75),
        0 0 0 .5px var(--pn-hair);
}

#acg-popup-notice .pn-avatar::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow:
        inset 0 1px 1px rgb(255 255 255 / .5),
        inset 0 0 0 .5px rgb(255 255 255 / .22);
    pointer-events: none;
}

#acg-popup-notice .pn-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    object-fit: cover;
    -webkit-user-drag: none;
    user-select: none;
    /* 头像大图晚到时柔和地换上，不突兀地跳出来 */
    animation: pn-fade-in .4s var(--pn-ease-out) both;
}

#acg-popup-notice .pn-avatar svg {
    width: 24px;
    height: 24px;
}

#acg-popup-notice .pn-heading {
    min-width: 0;
    margin: 0;
    padding: 0;
}

#acg-popup-notice .pn-title {
    display: -webkit-box;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: inherit;
    font-size: 18px;
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -.012em;
    color: var(--pn-ink);
    text-transform: none;
    overflow-wrap: anywhere;
    text-wrap: balance;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

#acg-popup-notice .pn-sub {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 3px 0 0;
    padding: 0;
    overflow: hidden;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--pn-ink-2);
    white-space: nowrap;
    text-overflow: ellipsis;
}

#acg-popup-notice .pn-sub svg {
    width: 13px;
    height: 13px;
    opacity: .85;
}

#acg-popup-notice .pn-sub span {
    overflow: hidden;
    text-overflow: ellipsis;
}

#acg-popup-notice .pn-close {
    position: relative;
    display: grid;
    place-items: center;
    align-self: start;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--pn-fill);
    color: var(--pn-ink-2);
    box-shadow: inset 0 0 0 .5px var(--pn-hair), inset 0 1px 0 var(--pn-edge-top);
    cursor: pointer;
    outline: none;
    transition: background-color .2s, color .2s, transform .5s var(--pn-spring);
}

#acg-popup-notice .pn-close::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
}

#acg-popup-notice .pn-close svg {
    width: 12px;
    height: 12px;
}

#acg-popup-notice .pn-close:hover {
    background: var(--pn-fill-2);
    color: var(--pn-ink);
}

#acg-popup-notice .pn-close:active {
    transform: scale(.86);
    transition-duration: .12s;
}

#acg-popup-notice .pn-close:focus-visible {
    box-shadow: 0 0 0 3px rgb(var(--pn-accent) / .45), inset 0 0 0 .5px var(--pn-hair);
}

/* ---------------------------------------------------------------------
   4. 正文（公告富文本）
   --------------------------------------------------------------------- */
#acg-popup-notice .pn-body {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 2px 22px 18px;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.72;
    color: var(--pn-ink-body);
    text-align: start;
    overflow-wrap: break-word;
    word-break: normal;
    /* 避免段尾只剩一个字孤零零换行 */
    text-wrap: pretty;
    outline: none;
    scrollbar-width: thin;
    scrollbar-color: var(--pn-ink-3) transparent;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--pn-fade-top), #000 calc(100% - var(--pn-fade-bottom)), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 var(--pn-fade-top), #000 calc(100% - var(--pn-fade-bottom)), transparent 100%);
    transition: --pn-fade-top .25s var(--pn-ease-out), --pn-fade-bottom .25s var(--pn-ease-out);
}

#acg-popup-notice .pn-body[data-fade-top] {
    --pn-fade-top: 22px;
}

#acg-popup-notice .pn-body[data-fade-bottom] {
    --pn-fade-bottom: 30px;
}

#acg-popup-notice .pn-body::-webkit-scrollbar {
    width: 11px;
}

#acg-popup-notice .pn-body::-webkit-scrollbar-thumb {
    border: 3.5px solid transparent;
    border-radius: 99px;
    background: var(--pn-ink-3) padding-box;
}

#acg-popup-notice .pn-body::-webkit-scrollbar-track {
    background: transparent;
}

#acg-popup-notice .pn-content > :first-child {
    margin-top: 0;
}

#acg-popup-notice .pn-content > :last-child {
    margin-bottom: 0;
}

#acg-popup-notice .pn-content p {
    margin: 0 0 .8em;
    padding: 0;
}

#acg-popup-notice .pn-content :is(h1, h2, h3, h4, h5, h6) {
    margin: 1.15em 0 .45em;
    padding: 0;
    font-family: inherit;
    font-weight: 650;
    line-height: 1.32;
    letter-spacing: -.01em;
    color: var(--pn-ink);
}

#acg-popup-notice .pn-content h1 { font-size: 1.42em; }
#acg-popup-notice .pn-content h2 { font-size: 1.28em; }
#acg-popup-notice .pn-content h3 { font-size: 1.14em; }
#acg-popup-notice .pn-content :is(h4, h5, h6) { font-size: 1em; }

#acg-popup-notice .pn-content :is(b, strong) {
    font-weight: 650;
    color: var(--pn-ink);
}

#acg-popup-notice .pn-content a {
    color: rgb(var(--pn-link));
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: rgb(var(--pn-link) / .32);
    text-underline-offset: .22em;
    border-radius: 3px;
    transition: text-decoration-color .2s, color .2s;
}

#acg-popup-notice .pn-content a:hover {
    text-decoration-color: rgb(var(--pn-link));
}

#acg-popup-notice .pn-content a:focus-visible {
    outline: 2px solid rgb(var(--pn-accent) / .5);
    outline-offset: 2px;
}

#acg-popup-notice .pn-content :is(ul, ol) {
    margin: 0 0 .8em;
    padding-inline-start: 1.35em;
}

#acg-popup-notice .pn-content li {
    margin: .22em 0;
    padding: 0;
}

#acg-popup-notice .pn-content li::marker {
    color: var(--pn-ink-3);
}

#acg-popup-notice .pn-content blockquote {
    margin: 0 0 .9em;
    padding: .7em 1em;
    border: 0;
    border-radius: 16px;
    background: var(--pn-fill);
    color: var(--pn-ink-2);
    box-shadow: inset 3px 0 0 rgb(var(--pn-accent) / .55);
}

#acg-popup-notice .pn-content code,
#acg-popup-notice .pn-content kbd,
#acg-popup-notice .pn-content samp {
    padding: .12em .42em;
    border-radius: 6px;
    background: var(--pn-fill);
    font-family: var(--pn-mono);
    font-size: .86em;
    color: var(--pn-ink);
}

#acg-popup-notice .pn-content pre {
    margin: 0 0 .9em;
    padding: 12px 14px;
    overflow: auto;
    border-radius: 14px;
    background: var(--pn-fill);
    font-family: var(--pn-mono);
    font-size: 13px;
    line-height: 1.6;
    color: var(--pn-ink);
    white-space: pre;
}

#acg-popup-notice .pn-content pre code {
    padding: 0;
    background: none;
    font-size: inherit;
}

#acg-popup-notice .pn-content :is(img, video, iframe) {
    max-width: 100%;
    border: 0;
    border-radius: min(14px, 12%);
}

#acg-popup-notice .pn-content :is(img, video, iframe):not([align]) {
    vertical-align: middle;
}

#acg-popup-notice .pn-content :is(img, video) {
    height: auto;
}

/* 带尺寸属性的图片不走 all:revert，主题的 img{display:block} 会漏进来，把图文拆成两行 */
#acg-popup-notice .pn-content img {
    display: inline-block;
}

#acg-popup-notice .pn-content figure {
    margin: 0 0 .9em;
}

#acg-popup-notice .pn-content figcaption {
    margin-top: .4em;
    font-size: 13px;
    color: var(--pn-ink-2);
    text-align: center;
}

#acg-popup-notice .pn-content hr {
    height: 1px;
    margin: 1.1em 0;
    border: 0;
    background: var(--pn-hair);
}

#acg-popup-notice .pn-content table {
    display: block;
    max-width: 100%;
    margin: 0 0 .9em;
    overflow-x: auto;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    line-height: 1.5;
}

#acg-popup-notice .pn-content :is(th, td) {
    padding: 8px 12px;
    border: 0;
    border-bottom: 1px solid var(--pn-hair);
}

/* 作者在编辑器里设了 align / valign 的单元格保持原样 */
#acg-popup-notice .pn-content :is(th, td):not([align]) {
    text-align: start;
}

#acg-popup-notice .pn-content :is(th, td):not([valign]) {
    vertical-align: top;
}

#acg-popup-notice .pn-content th {
    font-weight: 600;
    color: var(--pn-ink-2);
}

#acg-popup-notice .pn-content mark {
    padding: 0 .18em;
    border-radius: 4px;
    background: rgb(255 204 0 / .38);
    color: inherit;
}

#acg-popup-notice .pn-content :is(sub, sup) {
    font-size: .75em;
}

/* ---------------------------------------------------------------------
   4½. 链接列表：链接多时代替底部胶囊，跟正文一起滚动
   电脑上是多列玻璃卡片；手机抽屉里是 iOS 设置式的分组列表
   --------------------------------------------------------------------- */
#acg-popup-notice[data-links="buttons"] .pn-links,
#acg-popup-notice[data-links="list"] .pn-actions > a.pn-btn {
    display: none;
}

#acg-popup-notice .pn-links {
    display: block;
    margin: 22px 0 2px;
    padding: 0;
}

#acg-popup-notice .pn-links.pn-links--solo {
    margin-top: 4px;
}

#acg-popup-notice .pn-links-title {
    display: block;
    margin: 0 0 10px;
    padding: 0 2px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .01em;
    color: var(--pn-ink-2);
}

#acg-popup-notice .pn-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 196px), 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
}

#acg-popup-notice .pn-link {
    --pn-g: 0 122 255;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 62px;
    margin: 0;
    padding: 11px 14px 11px 11px;
    border: 0;
    border-radius: 18px;
    background-color: var(--pn-fill);
    box-shadow: inset 0 0 0 .5px var(--pn-hair), inset 0 1px 0 var(--pn-edge-top);
    color: var(--pn-ink);
    font-family: inherit;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color .22s var(--pn-ease-out), box-shadow .25s var(--pn-ease-out), transform .5s var(--pn-spring);
}

@media (hover: hover) {
    #acg-popup-notice .pn-link:hover {
        background-color: var(--pn-fill-2);
        color: var(--pn-ink);
        text-decoration: none;
    }
}

#acg-popup-notice .pn-link:active {
    transform: scale(.97);
    transition-duration: .12s;
}

#acg-popup-notice .pn-link:focus-visible {
    box-shadow: 0 0 0 3px rgb(var(--pn-accent) / .45), inset 0 0 0 .5px var(--pn-hair);
}

/* 图标砖：系统色 + 顶部高光，像 iOS 设置里的彩色小方块 */
#acg-popup-notice .pn-link-icon {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: 38px;
    height: 38px;
    margin: 0;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(180deg, rgb(var(--pn-g) / .86), rgb(var(--pn-g)));
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / .34),
        inset 0 0 0 .5px rgb(0 0 0 / .06),
        0 5px 12px -6px rgb(var(--pn-g) / .8);
}

#acg-popup-notice .pn-link-icon svg {
    width: 20px;
    height: 20px;
}

#acg-popup-notice .pn-link-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    margin: 0;
}

#acg-popup-notice .pn-link-name {
    display: block;
    overflow: hidden;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pn-ink);
    white-space: nowrap;
    text-overflow: ellipsis;
}

#acg-popup-notice .pn-link-meta {
    display: block;
    overflow: hidden;
    margin-top: 2px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--pn-ink-3);
    white-space: nowrap;
    text-overflow: ellipsis;
}

#acg-popup-notice .pn-link-go {
    display: block;
    flex: none;
    width: 12px;
    height: 12px;
    margin: 0;
    color: var(--pn-ink-3);
    transition: transform .45s var(--pn-spring), color .2s;
}

#acg-popup-notice .pn-link-go svg {
    width: 100%;
    height: 100%;
}

@media (hover: hover) {
    #acg-popup-notice .pn-link:hover .pn-link-go {
        color: var(--pn-ink-2);
        transform: translateX(2px);
    }

    #acg-popup-notice .pn-link[target="_blank"]:hover .pn-link-go {
        transform: translate(1.5px, -1.5px);
    }
}

/* 手机抽屉：分组列表，行间是缩进到文字起点的发丝线 */
#acg-popup-notice[data-layout="sheet"] .pn-links-title {
    padding: 0 16px;
}

#acg-popup-notice[data-layout="sheet"] .pn-links-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    border-radius: 18px;
    background-color: var(--pn-fill);
    box-shadow: inset 0 0 0 .5px var(--pn-hair);
}

#acg-popup-notice[data-layout="sheet"] .pn-link {
    min-height: 58px;
    padding: 9px 16px 9px 12px;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    transition: background-color .2s var(--pn-ease-out);
}

#acg-popup-notice[data-layout="sheet"] .pn-link:active {
    transform: none;
    background-color: var(--pn-fill-2);
    transition-duration: 0s;
}

#acg-popup-notice[data-layout="sheet"] .pn-link + .pn-link::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-start: 58px;
    inset-inline-end: 0;
    height: .5px;
    background: var(--pn-hair);
    pointer-events: none;
}

#acg-popup-notice[data-layout="sheet"] .pn-link-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
}

#acg-popup-notice[data-layout="sheet"] .pn-link-icon svg {
    width: 18px;
    height: 18px;
}

#acg-popup-notice[data-layout="sheet"] .pn-link-name {
    font-size: 16px;
    font-weight: 500;
}

/* ---------------------------------------------------------------------
   5. 底部：不再提示 + 按钮
   --------------------------------------------------------------------- */
#acg-popup-notice .pn-foot {
    position: relative;
    z-index: 1;
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px 16px;
    margin: 0;
    padding-block: 12px 20px;
    padding-inline: 22px 20px;
}

#acg-popup-notice .pn-snooze {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 32px;
    margin: 0;
    margin-inline-end: auto;
    padding: 0;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--pn-ink-2);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

#acg-popup-notice .pn-snooze input {
    position: absolute;
    top: 50%;
    left: 0;
    width: 20px;
    height: 20px;
    margin: -10px 0 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

#acg-popup-notice .pn-box {
    position: relative;
    display: grid;
    place-items: center;
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    border-radius: 6.5px;
    background: var(--pn-fill);
    color: rgb(var(--pn-accent-ink));
    box-shadow: inset 0 0 0 1.25px var(--pn-ink-3);
    transition: background-color .22s var(--pn-ease-out), box-shadow .22s var(--pn-ease-out), transform .5s var(--pn-spring);
}

#acg-popup-notice .pn-box svg {
    width: 12px;
    height: 12px;
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    transition: stroke-dashoffset .3s var(--pn-ease-out) .04s;
}

#acg-popup-notice .pn-snooze:hover .pn-box {
    box-shadow: inset 0 0 0 1.25px var(--pn-ink-2);
}

#acg-popup-notice .pn-snooze input:checked + .pn-box {
    background: rgb(var(--pn-accent));
    box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .08), 0 4px 10px -4px rgb(var(--pn-accent) / .7);
}

#acg-popup-notice .pn-snooze input:checked + .pn-box svg {
    stroke-dashoffset: 0;
}

#acg-popup-notice .pn-snooze:active .pn-box {
    transform: scale(.86);
    transition-duration: .12s;
}

#acg-popup-notice .pn-snooze input:focus-visible + .pn-box {
    box-shadow: 0 0 0 3px rgb(var(--pn-accent) / .45), inset 0 0 0 1.25px var(--pn-ink-2);
}

#acg-popup-notice .pn-snooze input:checked ~ .pn-snooze-text {
    color: var(--pn-ink);
}

#acg-popup-notice .pn-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
    padding: 0;
}

#acg-popup-notice .pn-btn {
    --pn-t: 120 120 128;
    --pn-t-ink: 29 29 31;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 88px;
    max-width: 100%;
    height: 40px;
    margin: 0;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background-color: var(--pn-fill);
    background-image: none;
    color: var(--pn-ink);
    box-shadow: inset 0 0 0 .5px var(--pn-hair), inset 0 1px 0 var(--pn-edge-top);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.005em;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color .22s var(--pn-ease-out), color .22s, box-shadow .25s, transform .5s var(--pn-spring);
}

#acg-popup-notice .pn-btn > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

#acg-popup-notice .pn-btn svg {
    width: 12px;
    height: 12px;
    opacity: .62;
    transition: transform .4s var(--pn-spring), opacity .2s;
}

#acg-popup-notice .pn-btn:hover {
    background-color: var(--pn-fill-2);
    color: var(--pn-ink);
    text-decoration: none;
}

#acg-popup-notice .pn-btn:hover svg {
    opacity: 1;
    transform: translate(1.5px, -1.5px);
}

#acg-popup-notice .pn-btn:active {
    transform: scale(.955);
    transition-duration: .12s;
}

#acg-popup-notice .pn-btn:focus-visible {
    box-shadow: 0 0 0 3px rgb(var(--pn-accent) / .45), inset 0 0 0 .5px var(--pn-hair);
}

/* 有色胶囊（兼容旧配置里的 bootstrap 色名，映射为苹果系统色） */
#acg-popup-notice .pn-btn[data-tint="primary"] { --pn-t: 0 122 255; --pn-t-ink: 0 98 222; }
#acg-popup-notice .pn-btn[data-tint="success"] { --pn-t: 52 199 89; --pn-t-ink: 36 138 61; }
#acg-popup-notice .pn-btn[data-tint="danger"] { --pn-t: 255 59 48; --pn-t-ink: 215 0 21; }
#acg-popup-notice .pn-btn[data-tint="warning"] { --pn-t: 255 149 0; --pn-t-ink: 201 52 0; }
#acg-popup-notice .pn-btn[data-tint="info"] { --pn-t: 50 173 230; --pn-t-ink: 0 113 164; }
#acg-popup-notice .pn-btn[data-tint="secondary"] { --pn-t: 142 142 147; --pn-t-ink: 99 99 102; }

#acg-popup-notice[data-scheme="dark"] .pn-btn[data-tint="primary"] { --pn-t: 10 132 255; --pn-t-ink: 100 170 255; }
#acg-popup-notice[data-scheme="dark"] .pn-btn[data-tint="success"] { --pn-t: 48 209 88; --pn-t-ink: 78 222 118; }
#acg-popup-notice[data-scheme="dark"] .pn-btn[data-tint="danger"] { --pn-t: 255 69 58; --pn-t-ink: 255 118 110; }
#acg-popup-notice[data-scheme="dark"] .pn-btn[data-tint="warning"] { --pn-t: 255 159 10; --pn-t-ink: 255 184 76; }
#acg-popup-notice[data-scheme="dark"] .pn-btn[data-tint="info"] { --pn-t: 100 210 255; --pn-t-ink: 122 218 255; }
#acg-popup-notice[data-scheme="dark"] .pn-btn[data-tint="secondary"] { --pn-t: 152 152 157; --pn-t-ink: 190 190 196; }

#acg-popup-notice .pn-btn:is([data-tint="primary"], [data-tint="success"], [data-tint="danger"], [data-tint="warning"], [data-tint="info"], [data-tint="secondary"]) {
    background-color: rgb(var(--pn-t) / .14);
    color: rgb(var(--pn-t-ink));
    box-shadow: inset 0 0 0 .5px rgb(var(--pn-t) / .22), inset 0 1px 0 var(--pn-edge-top);
}

#acg-popup-notice .pn-btn:is([data-tint="primary"], [data-tint="success"], [data-tint="danger"], [data-tint="warning"], [data-tint="info"], [data-tint="secondary"]):hover {
    background-color: rgb(var(--pn-t) / .22);
    color: rgb(var(--pn-t-ink));
}

/* dark = 墨色实心胶囊（深色模式下自动反转为浅色） */
#acg-popup-notice .pn-btn[data-tint="dark"] {
    background-color: var(--pn-ink);
    color: var(--pn-surface-solid);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 6px 16px -8px rgb(0 0 0 / .45);
}

#acg-popup-notice .pn-btn[data-tint="dark"]:hover {
    background-color: var(--pn-ink);
    color: var(--pn-surface-solid);
    filter: brightness(1.12);
}

/* link = 纯文字链接 */
#acg-popup-notice .pn-btn[data-tint="link"] {
    min-width: 0;
    padding: 0 10px;
    background-color: transparent;
    color: rgb(var(--pn-link));
    box-shadow: none;
}

#acg-popup-notice .pn-btn[data-tint="link"]:hover {
    background-color: rgb(var(--pn-link) / .08);
    color: rgb(var(--pn-link));
}

/* 主按钮：强调色实心玻璃 */
#acg-popup-notice .pn-btn.pn-btn--primary {
    min-width: 108px;
    background-color: rgb(var(--pn-accent));
    background-image: linear-gradient(180deg, rgb(255 255 255 / .2), rgb(255 255 255 / 0) 62%);
    color: rgb(var(--pn-accent-ink));
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / .34),
        inset 0 0 0 .5px rgb(0 0 0 / .06),
        0 10px 22px -12px rgb(var(--pn-accent) / .9);
}

#acg-popup-notice .pn-btn.pn-btn--primary:hover {
    background-color: rgb(var(--pn-accent));
    background-image: linear-gradient(180deg, rgb(255 255 255 / .3), rgb(255 255 255 / .06) 70%);
    color: rgb(var(--pn-accent-ink));
}

#acg-popup-notice .pn-btn.pn-btn--primary:focus-visible {
    box-shadow:
        0 0 0 3px rgb(var(--pn-accent) / .45),
        inset 0 1px 0 rgb(255 255 255 / .34);
}

/* ---------------------------------------------------------------------
   6. 手机：底部浮动抽屉
   --------------------------------------------------------------------- */
#acg-popup-notice[data-layout="sheet"] .pn-layer {
    place-items: end center;
    padding: max(44px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}

#acg-popup-notice[data-layout="sheet"] .pn-stage {
    width: min(560px, 100%);
}

#acg-popup-notice[data-layout="sheet"] .pn-panel {
    --pn-radius: 34px;
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - max(44px, env(safe-area-inset-top)) - 8px - env(safe-area-inset-bottom));
    touch-action: pan-y;
    will-change: auto;
}

#acg-popup-notice[data-layout="sheet"] .pn-grabber {
    display: block;
}

#acg-popup-notice[data-layout="sheet"] .pn-head {
    padding-block: 12px 12px;
    padding-inline: 20px 16px;
    touch-action: none;
}

#acg-popup-notice[data-layout="sheet"] .pn-title {
    font-size: 19px;
}

#acg-popup-notice[data-layout="sheet"] .pn-body {
    padding: 2px 20px 16px;
    font-size: 16px;
    line-height: 1.7;
}

#acg-popup-notice[data-layout="sheet"] .pn-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 8px 14px 14px;
}

#acg-popup-notice[data-layout="sheet"] .pn-snooze {
    align-self: center;
    margin: 0;
}

#acg-popup-notice[data-layout="sheet"] .pn-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

#acg-popup-notice[data-layout="sheet"] .pn-btn {
    width: 100%;
    min-width: 0;
    height: 50px;
    padding: 0 14px;
    font-size: 17px;
}

#acg-popup-notice[data-layout="sheet"] .pn-btn.pn-btn--primary {
    grid-column: 1 / -1;
}

/* 链接个数为奇数时，最后一个独占一行 */
#acg-popup-notice[data-layout="sheet"] .pn-btn:not(.pn-btn--primary):nth-last-child(2):nth-child(odd) {
    grid-column: 1 / -1;
}

#acg-popup-notice[data-layout="sheet"][data-dragging] .pn-stage {
    transition: none;
}

/* ---------------------------------------------------------------------
   7. 悬浮入口（关闭后收进的玻璃圆珠）
   --------------------------------------------------------------------- */
#acg-popup-notice .pn-orb {
    --pn-os: 1;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99990;
    display: block;
    width: 56px;
    height: 56px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--pn-surface);
    background-image: linear-gradient(180deg, var(--pn-gloss), transparent 55%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    box-shadow: var(--pn-orb-shadow);
    color: var(--pn-ink);
    cursor: pointer;
    outline: none;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    /* 位置与缩放分开用独立属性：scale 先于 translate 生效，缩放时圆珠不会跑位 */
    translate: var(--pn-ox, -200px) var(--pn-oy, -200px);
    scale: var(--pn-os);
    transition:
        translate .62s var(--pn-spring-snap),
        scale .5s var(--pn-spring),
        opacity .28s var(--pn-ease-out),
        visibility 0s linear 0s,
        box-shadow .3s var(--pn-ease-out),
        background-color .45s var(--pn-ease-out);
}

#acg-popup-notice .pn-orb::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 1px;
    border-radius: 50%;
    background: conic-gradient(from 315deg, var(--pn-rim-hi), var(--pn-rim-lo) 18%, var(--pn-rim-lo) 34%, var(--pn-rim-mid) 50%, var(--pn-rim-lo) 66%, var(--pn-rim-lo) 82%, var(--pn-rim-hi));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    pointer-events: none;
}

#acg-popup-notice .pn-orb-face {
    position: absolute;
    inset: 5px;
    display: grid;
    place-items: center;
    margin: 0;
    overflow: hidden;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, rgb(var(--pn-accent)), rgb(var(--pn-tint)));
    box-shadow: inset 0 0 0 .5px rgb(255 255 255 / .25);
}

#acg-popup-notice .pn-orb-face::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(90% 60% at 30% 12%, rgb(255 255 255 / .38), transparent 60%);
    pointer-events: none;
}

#acg-popup-notice .pn-orb-face img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    object-fit: cover;
    -webkit-user-drag: none;
    pointer-events: none;
    animation: pn-fade-in .4s var(--pn-ease-out) both;
}

#acg-popup-notice .pn-orb-face svg {
    width: 22px;
    height: 22px;
}

#acg-popup-notice .pn-orb:hover {
    --pn-os: 1.07;
}

#acg-popup-notice .pn-orb:active {
    --pn-os: .94;
}

#acg-popup-notice .pn-orb:focus-visible {
    box-shadow: 0 0 0 3px rgb(var(--pn-accent) / .5), var(--pn-orb-shadow);
}

#acg-popup-notice .pn-orb[data-dragging] {
    --pn-os: 1.1;
    cursor: grabbing;
    box-shadow:
        0 22px 44px -14px rgb(0 0 0 / .45),
        0 6px 14px -4px rgb(0 0 0 / .2);
    transition:
        scale .4s var(--pn-spring),
        box-shadow .3s var(--pn-ease-out),
        opacity .28s var(--pn-ease-out);
}

#acg-popup-notice .pn-orb[data-away] {
    --pn-os: .35;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        scale .36s var(--pn-ease-in),
        opacity .24s var(--pn-ease-out),
        visibility 0s linear .36s,
        box-shadow .3s var(--pn-ease-out);
}

#acg-popup-notice .pn-orb[data-arrive] {
    animation: pn-orb-arrive .72s var(--pn-spring) both;
}

/* 闲置：半收进屏幕边缘、变淡，常驻也不挡内容；指针靠近、键盘聚焦、拖动或提示气泡出现时滑出来 */
#acg-popup-notice .pn-orb[data-idle]:not([data-away], [data-dragging], [data-hint], :hover, :focus-visible) {
    --pn-os: .92;
    opacity: .62;
    translate: calc(var(--pn-ox, -200px) + 34px) var(--pn-oy, -200px);
}

#acg-popup-notice .pn-orb[data-side="left"][data-idle]:not([data-away], [data-dragging], [data-hint], :hover, :focus-visible) {
    translate: calc(var(--pn-ox, -200px) - 34px) var(--pn-oy, -200px);
}

/* 悬停提示：刻意用近实色——圆珠自带 backdrop-filter，里面再模糊只会是透明 */
#acg-popup-notice .pn-orb-tip {
    position: absolute;
    top: 50%;
    right: calc(100% + 12px);
    display: block;
    margin: 0;
    padding: 8px 13px;
    border-radius: 999px;
    background: var(--pn-surface-solid);
    color: var(--pn-ink);
    box-shadow:
        0 10px 24px -10px rgb(0 0 0 / .35),
        inset 0 0 0 .5px var(--pn-hair);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translate(6px, -50%) scale(.96);
    transform-origin: right center;
    transition: opacity .2s var(--pn-ease-out), transform .45s var(--pn-spring);
}

#acg-popup-notice .pn-orb[data-side="left"] .pn-orb-tip {
    right: auto;
    left: calc(100% + 12px);
    transform: translate(-6px, -50%) scale(.96);
    transform-origin: left center;
}

#acg-popup-notice .pn-orb:is(:hover, :focus-visible, [data-hint]):not([data-dragging]) .pn-orb-tip {
    opacity: 1;
    transform: translate(0, -50%) scale(1);
}

/* 首次收进圆珠时的一句引导：允许折行，别戳出屏幕 */
#acg-popup-notice .pn-orb[data-hint] .pn-orb-tip {
    width: max-content;
    max-width: min(240px, calc(100vw - 110px));
    padding: 9px 13px;
    border-radius: 16px;
    line-height: 1.35;
    white-space: normal;
    text-align: start;
}

@media (hover: none) {
    #acg-popup-notice .pn-orb:not([data-hint]) .pn-orb-tip {
        display: none;
    }

    #acg-popup-notice .pn-orb:hover {
        --pn-os: 1;
    }
}

/* ---------------------------------------------------------------------
   8. 动效
   --------------------------------------------------------------------- */
@keyframes pn-fade-in {
    from { opacity: 0; }
}

@keyframes pn-fade-out {
    to { opacity: 0; }
}

@keyframes pn-dialog-in {
    from {
        opacity: 0;
        transform: translate3d(0, 22px, 0) scale(.93);
    }
}

@keyframes pn-dialog-out {
    to {
        opacity: 0;
        transform: translate3d(0, 10px, 0) scale(.965);
    }
}

@keyframes pn-sheet-in {
    from {
        transform: translate3d(0, calc(100% + 40px), 0);
    }
}

@keyframes pn-sheet-out {
    to {
        transform: translate3d(0, calc(100% + 40px), 0);
    }
}

@keyframes pn-rise {
    from {
        opacity: 0;
        transform: translate3d(0, 10px, 0);
    }
}

@keyframes pn-halo-in {
    from {
        opacity: 0;
        transform: scale(.82);
    }
}

@keyframes pn-orb-arrive {
    from {
        scale: .3;
        opacity: 0;
    }
}

#acg-popup-notice[data-state="opening"] .pn-scrim {
    animation: pn-fade-in .34s var(--pn-ease-out) both;
}

#acg-popup-notice[data-state="opening"] .pn-halo {
    animation: pn-halo-in 1s var(--pn-ease-out) both;
}

/* 从圆珠展开（data-morph）时面板动画交给 JS，这里不叠加 */
#acg-popup-notice[data-state="opening"]:not([data-morph]) .pn-panel {
    animation: pn-dialog-in .64s var(--pn-spring-soft) both;
}

#acg-popup-notice[data-state="opening"] :is(.pn-head, .pn-body, .pn-foot) {
    animation: pn-rise .56s var(--pn-ease-out) both;
}

#acg-popup-notice[data-state="opening"] .pn-head { animation-delay: .05s; }
#acg-popup-notice[data-state="opening"] .pn-body { animation-delay: .1s; }
#acg-popup-notice[data-state="opening"] .pn-foot { animation-delay: .15s; }

#acg-popup-notice[data-layout="sheet"][data-state="opening"] .pn-stage {
    animation: pn-sheet-in .6s var(--pn-spring-soft) both;
}

#acg-popup-notice[data-layout="sheet"][data-state="opening"] .pn-panel {
    animation: pn-fade-in .2s var(--pn-ease-out) both;
}

#acg-popup-notice[data-state="closing"] .pn-scrim {
    animation: pn-fade-out .3s var(--pn-ease-out) both;
}

#acg-popup-notice[data-state="closing"] .pn-halo {
    animation: pn-fade-out .24s var(--pn-ease-out) both;
}

#acg-popup-notice[data-state="closing"]:not([data-morph]) .pn-panel {
    animation: pn-dialog-out .24s var(--pn-ease-in) both;
}

#acg-popup-notice[data-layout="sheet"][data-state="closing"]:not([data-morph]) .pn-panel {
    animation: none;
}

#acg-popup-notice[data-layout="sheet"][data-state="closing"]:not([data-morph]) .pn-stage {
    animation: pn-sheet-out .34s cubic-bezier(.32, 0, .67, 0) both;
}

/* 抽屉拖动中/回弹 */
#acg-popup-notice[data-layout="sheet"] .pn-stage[data-settling] {
    transition: transform .5s var(--pn-spring-snap);
}

/* ---------------------------------------------------------------------
   9. 无障碍与降级
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    #acg-popup-notice[data-state="opening"] :is(.pn-panel, .pn-stage, .pn-head, .pn-body, .pn-foot, .pn-halo),
    #acg-popup-notice[data-layout="sheet"][data-state="opening"] :is(.pn-panel, .pn-stage) {
        animation: pn-fade-in .2s linear both;
    }

    #acg-popup-notice[data-state="closing"] :is(.pn-panel, .pn-stage),
    #acg-popup-notice[data-layout="sheet"][data-state="closing"]:not([data-morph]) :is(.pn-panel, .pn-stage) {
        animation: pn-fade-out .16s linear both;
    }

    #acg-popup-notice :is(.pn-orb, .pn-btn, .pn-close, .pn-box, .pn-orb-tip, .pn-link, .pn-link-go) {
        transition-duration: .01ms !important;
    }

    #acg-popup-notice .pn-orb[data-arrive] {
        animation: pn-fade-in .2s linear both;
    }

    #acg-popup-notice .pn-panel::before {
        transition: none;
    }
}

@media (prefers-reduced-transparency: reduce) {
    #acg-popup-notice :is(.pn-panel, .pn-orb) {
        background-color: var(--pn-surface-solid);
        background-image: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    #acg-popup-notice .pn-scrim {
        background: var(--pn-scrim-solid);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    #acg-popup-notice .pn-halo {
        display: none;
    }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    #acg-popup-notice :is(.pn-panel, .pn-orb) {
        background-color: var(--pn-surface-solid);
        background-image: none;
    }

    #acg-popup-notice .pn-scrim {
        background: var(--pn-scrim-solid);
    }
}

@media (prefers-contrast: more) {
    #acg-popup-notice {
        --pn-ink-body: var(--pn-ink);
        --pn-ink-2: var(--pn-ink);
        --pn-ink-3: rgb(60 60 67 / .7);
        --pn-hair: rgb(0 0 0 / .4);
    }

    #acg-popup-notice[data-scheme="dark"] {
        --pn-ink-3: rgb(235 235 245 / .7);
        --pn-hair: rgb(255 255 255 / .45);
    }

    #acg-popup-notice :is(.pn-panel, .pn-orb) {
        background-color: var(--pn-surface-solid);
        background-image: none;
    }

    #acg-popup-notice .pn-panel {
        box-shadow: 0 0 0 1.5px var(--pn-hair), var(--pn-shadow);
    }
}

@media (forced-colors: active) {
    #acg-popup-notice :is(.pn-panel, .pn-orb, .pn-btn, .pn-close, .pn-box, .pn-link) {
        border: 1px solid CanvasText;
        background: Canvas;
        color: CanvasText;
        forced-color-adjust: auto;
    }

    #acg-popup-notice .pn-btn.pn-btn--primary {
        background: Highlight;
        color: HighlightText;
    }

    #acg-popup-notice :is(.pn-halo, .pn-scrim) {
        display: none;
    }
}

@media print {
    #acg-popup-notice {
        display: none !important;
    }
}