/* ============================================================================
   鲁迪乌斯 · Core —— 设计令牌 / 基础 / 共用元件（电脑端与手机端共用）

   设计语言「无咏唱 Chantless」：画面是魔法，操作零咏唱。
     白昼 = 布耶纳村的午后：羊皮纸、暖金阳光、牧草绿；
     星夜 = 拉诺亚的星空：深靛夜空、月光羊皮纸字色、鎏金。
   四位同伴 = 四套魔力色（--ru-mana*），决定按钮、选中、光晕、图标结晶的颜色。

   约束：
   · [hidden] 必须 !important：UA 样式的 display:none 优先级低于任何作者写的 display，
     所有靠 hidden 属性控制显隐的元素都会失效。
   · 入场动画只动 opacity / mask，不写 transform —— 祖先带 transform 会把 layui 下拉甩出视口。
   · 平台 md-* 令牌用 :root:root[data-theme] (0,3,0) 接回本主题，压过 md-tokens 的 (0,2,0)。
   ========================================================================= */

[hidden] { display: none !important; }

/* ---------------------------------------------------------------- 1. 静态令牌 */
:root {
    --ru-font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "PingFang TC", "HarmonyOS Sans SC", "MiSans",
        "Noto Sans SC", "Noto Sans CJK SC", "Hiragino Sans GB", "Hiragino Sans", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
    --ru-font-serif: "Noto Serif SC", "Noto Serif TC", "Noto Serif JP", "Source Han Serif SC", "Source Han Serif",
        "Songti SC", "Songti TC", "STSong", "Hiragino Mincho ProN", "Yu Mincho", "Microsoft YaHei", serif;
    --ru-font-display: "Ru Cinzel", "Cinzel", "Trajan Pro", Georgia, var(--ru-font-serif);
    --ru-font-flavor: "Ru Cormorant", "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --ru-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    /* 价格与数字：干净的无衬线等宽数字（Cinzel 的 1 长得像 I，不适合标价） */
    --ru-font-num: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Roboto, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif;

    --ru-ease-out: cubic-bezier(.22, 1, .36, 1);
    --ru-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --ru-ease-in: cubic-bezier(.55, 0, 1, .45);
    --ru-ease-io: cubic-bezier(.65, 0, .35, 1);
    --ru-t1: 120ms;
    --ru-t2: 200ms;
    --ru-t3: 320ms;
    --ru-t4: 520ms;
    --ru-t5: 800ms;

    --ru-r-xs: 4px;
    --ru-r-sm: 8px;
    --ru-r-md: 12px;
    --ru-r-lg: 18px;
    --ru-r-xl: 26px;
    --ru-r-pill: 999px;

    --ru-z-header: 100;
    --ru-z-dock: 120;
    --ru-z-pop: 300;
    --ru-z-modal: 1000;
    --ru-z-splash: 3000;
    --ru-z-toast: 20000000;

    --ru-page: 1360px;
    --ru-gutter: 24px;
    --ru-side: 248px;
}

/* ---------------------------------------------------------------- 2. 白昼 · 布耶纳村的午后 */
:root[data-theme="light"] {
    --ru-bg: #F5EFE2;
    --ru-bg-2: #EEE5D1;
    --ru-paper: #FBF7EE;
    --ru-paper-2: #F2EAD8;
    --ru-paper-3: #E8DDC6;
    --ru-paper-a: rgba(251, 247, 238, .9);
    --ru-ink: #2A2118;
    --ru-ink-2: #5E5142;
    --ru-ink-3: #7A6A56;
    --ru-ink-4: #A89880;
    --ru-line: rgba(90, 68, 38, .15);
    --ru-line-2: rgba(90, 68, 38, .27);
    --ru-gilt: #B7883A;
    --ru-gilt-2: #E6C27A;
    --ru-gilt-3: #F6E3B4;
    --ru-gilt-text: #8A6424;
    --ru-shadow-1: 0 1px 2px rgba(74, 52, 20, .06), 0 2px 8px -2px rgba(74, 52, 20, .08);
    --ru-shadow-2: 0 2px 4px -1px rgba(74, 52, 20, .07), 0 12px 26px -8px rgba(74, 52, 20, .16);
    --ru-shadow-3: 0 8px 16px -4px rgba(74, 52, 20, .10), 0 30px 60px -14px rgba(74, 52, 20, .26);
    --ru-scrim: rgba(38, 28, 14, .42);
    --ru-grain: .55;

    --ru-sky: #CFE3EE;

    --ru-fire: #C23A2B;
    --ru-water: #1F6BD6;
    --ru-wind: #0E7C61;
    --ru-earth: #A36A12;
    --ru-fire-soft: rgba(194, 58, 43, .10);
    --ru-water-soft: rgba(31, 107, 214, .10);
    --ru-wind-soft: rgba(14, 124, 97, .10);
    --ru-earth-soft: rgba(163, 106, 18, .12);
    color-scheme: light;
}

/* ---------------------------------------------------------------- 3. 星夜 · 拉诺亚的星空 */
:root[data-theme="dark"] {
    --ru-bg: #0D1024;
    --ru-bg-2: #10142C;
    --ru-paper: #161A33;
    --ru-paper-2: #1D2240;
    --ru-paper-3: #262C50;
    --ru-paper-a: rgba(22, 26, 51, .9);
    --ru-ink: #ECE5D3;
    --ru-ink-2: #B3AFC6;
    --ru-ink-3: #8E8BA8;
    --ru-ink-4: #6E6B88;
    --ru-line: rgba(190, 180, 255, .12);
    --ru-line-2: rgba(190, 180, 255, .22);
    --ru-gilt: #D8B46A;
    --ru-gilt-2: #F3D899;
    --ru-gilt-3: #FFF1CC;
    --ru-gilt-text: #E0BE76;
    --ru-shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px -2px rgba(0, 0, 0, .4);
    --ru-shadow-2: 0 2px 4px -1px rgba(0, 0, 0, .4), 0 12px 28px -8px rgba(0, 0, 0, .58);
    --ru-shadow-3: 0 8px 18px -4px rgba(0, 0, 0, .45), 0 34px 68px -14px rgba(0, 0, 0, .7);
    --ru-scrim: rgba(3, 4, 14, .62);
    --ru-grain: .5;

    --ru-sky: #0A0C22;

    --ru-fire: #FF7A66;
    --ru-water: #62B5FF;
    --ru-wind: #54DDB2;
    --ru-earth: #E9B75E;
    --ru-fire-soft: rgba(255, 122, 102, .13);
    --ru-water-soft: rgba(98, 181, 255, .13);
    --ru-wind-soft: rgba(84, 221, 178, .12);
    --ru-earth-soft: rgba(233, 183, 94, .13);
    color-scheme: dark;
}

/* ---------------------------------------------------------------- 4. 同伴魔力色（同伴 × 明暗 = 8 组，预先算好，不依赖 relative color）
   mana       填色（按钮 / 选中 / 光晕）
   mana-2     渐变的另一端（更亮）
   mana-deep  渐变的深端 / 悬停
   mana-text  写在纸面上的文字色（对纸面 ≥ 4.5:1）
   mana-on    写在填色上的文字色（对填色 ≥ 4.5:1） */
:root[data-theme="light"],
:root[data-theme="light"][data-ru-persona="rudeus"] {
    --ru-mana: #5146D8;
    --ru-mana-2: #8467F5;
    --ru-mana-deep: #3A2FB3;
    --ru-mana-text: #4338C4;
    --ru-mana-on: #FFFFFF;
    --ru-mana-soft: rgba(81, 70, 216, .09);
    --ru-mana-soft-2: rgba(81, 70, 216, .16);
    --ru-mana-glow: rgba(81, 70, 216, .38);
    --ru-mana-rgb: 81, 70, 216;
}
:root[data-theme="dark"],
:root[data-theme="dark"][data-ru-persona="rudeus"] {
    --ru-mana: #9A8CFF;
    --ru-mana-2: #C6B8FF;
    --ru-mana-deep: #7A68F0;
    --ru-mana-text: #ADA2FF;
    --ru-mana-on: #120D38;
    --ru-mana-soft: rgba(154, 140, 255, .12);
    --ru-mana-soft-2: rgba(154, 140, 255, .22);
    --ru-mana-glow: rgba(154, 140, 255, .5);
    --ru-mana-rgb: 154, 140, 255;
}
:root[data-theme="light"][data-ru-persona="roxy"] {
    --ru-mana: #2270DE;
    --ru-mana-2: #4FA3F7;
    --ru-mana-deep: #1655B4;
    --ru-mana-text: #1B5FC0;
    --ru-mana-on: #FFFFFF;
    --ru-mana-soft: rgba(34, 112, 222, .09);
    --ru-mana-soft-2: rgba(34, 112, 222, .16);
    --ru-mana-glow: rgba(34, 112, 222, .36);
    --ru-mana-rgb: 34, 112, 222;
}
:root[data-theme="dark"][data-ru-persona="roxy"] {
    --ru-mana: #62B5FF;
    --ru-mana-2: #A5DBFF;
    --ru-mana-deep: #3B97F2;
    --ru-mana-text: #7CC2FF;
    --ru-mana-on: #04203B;
    --ru-mana-soft: rgba(98, 181, 255, .12);
    --ru-mana-soft-2: rgba(98, 181, 255, .22);
    --ru-mana-glow: rgba(98, 181, 255, .5);
    --ru-mana-rgb: 98, 181, 255;
}
:root[data-theme="light"][data-ru-persona="eris"] {
    --ru-mana: #C82A3F;
    --ru-mana-2: #F0604B;
    --ru-mana-deep: #9E1F31;
    --ru-mana-text: #B3243A;
    --ru-mana-on: #FFFFFF;
    --ru-mana-soft: rgba(200, 42, 63, .08);
    --ru-mana-soft-2: rgba(200, 42, 63, .15);
    --ru-mana-glow: rgba(200, 42, 63, .36);
    --ru-mana-rgb: 200, 42, 63;
}
:root[data-theme="dark"][data-ru-persona="eris"] {
    --ru-mana: #FF6275;
    --ru-mana-2: #FFA06E;
    --ru-mana-deep: #F2445B;
    --ru-mana-text: #FF7D8C;
    --ru-mana-on: #3A0610;
    --ru-mana-soft: rgba(255, 98, 117, .12);
    --ru-mana-soft-2: rgba(255, 98, 117, .22);
    --ru-mana-glow: rgba(255, 98, 117, .5);
    --ru-mana-rgb: 255, 98, 117;
}
:root[data-theme="light"][data-ru-persona="sylphy"] {
    --ru-mana: #0E7C61;
    --ru-mana-2: #25B58D;
    --ru-mana-deep: #0A5F4A;
    --ru-mana-text: #0A7058;
    --ru-mana-on: #FFFFFF;
    --ru-mana-soft: rgba(14, 124, 97, .09);
    --ru-mana-soft-2: rgba(14, 124, 97, .16);
    --ru-mana-glow: rgba(20, 158, 124, .36);
    --ru-mana-rgb: 14, 124, 97;
}
:root[data-theme="dark"][data-ru-persona="sylphy"] {
    --ru-mana: #54DDB2;
    --ru-mana-2: #B4F5D9;
    --ru-mana-deep: #2FC596;
    --ru-mana-text: #5FE3B9;
    --ru-mana-on: #03281E;
    --ru-mana-soft: rgba(84, 221, 178, .11);
    --ru-mana-soft-2: rgba(84, 221, 178, .2);
    --ru-mana-glow: rgba(84, 221, 178, .45);
    --ru-mana-rgb: 84, 221, 178;
}

/* ---------------------------------------------------------------- 5. 平台令牌桥（md-* → ru-*）
   让 layer / layui / toastr / swal / laydate / bootstrap-table 一次性跟随明暗与同伴。
   rgb 三元组没法用 var() 翻转，按「同伴 × 明暗」逐组写死。 */
:root:root[data-theme] {
    --md-primary: var(--ru-mana);
    --md-primary-hover: var(--ru-mana-deep);
    --md-primary-container: var(--ru-mana-soft-2);
    --md-on-primary: var(--ru-mana-on);
    --md-secondary: var(--ru-gilt);
    --md-secondary-hover: var(--ru-gilt-text);
    --md-on-secondary: #1A1206;
    --md-success: var(--ru-wind);
    --md-warning: var(--ru-earth);
    --md-error: var(--ru-fire);
    --md-info: var(--ru-water);
    --md-bg: var(--ru-bg);
    --md-surface: var(--ru-paper);
    --md-surface-2: var(--ru-paper);
    --md-on-surface: var(--ru-ink);
    --md-on-surface-med: var(--ru-ink-2);
    --md-on-surface-dis: var(--ru-ink-4);
    --md-divider: var(--ru-line);
    --md-outline: var(--ru-line-2);
    --md-nav-fg: var(--ru-ink-2);
    --md-nav-section: var(--ru-ink-3);
    --md-nav-active-fg: var(--ru-ink);
    --md-hover-overlay: var(--ru-mana-soft);
    --md-selected-overlay: var(--ru-mana-soft-2);
    --md-focus-ring: var(--ru-mana-glow);
    --md-scrim: var(--ru-scrim);
    --md-radius: var(--ru-r-sm);
    --md-radius-lg: var(--ru-r-md);
    --md-ease: var(--ru-ease-out);
    --md-dur: var(--ru-t3);
    --md-dur-fast: var(--ru-t2);
    --md-e1: var(--ru-shadow-1);
    --md-e2: var(--ru-shadow-1);
    --md-e3: var(--ru-shadow-2);
    --md-e4: var(--ru-shadow-2);
    --md-e6: var(--ru-shadow-2);
    --md-e8: var(--ru-shadow-3);
    --md-e12: var(--ru-shadow-3);
    --md-e16: var(--ru-shadow-3);
    --md-e24: var(--ru-shadow-3);
}
:root:root[data-theme="light"] {
    --md-secondary-rgb: 183, 136, 58;
    --md-success-rgb: 14, 124, 97;
    --md-warning-rgb: 163, 106, 18;
    --md-error-rgb: 194, 58, 43;
    --md-info-rgb: 31, 107, 214;
    --md-primary-rgb: 81, 70, 216;
}
:root:root[data-theme="dark"] {
    --md-secondary-rgb: 216, 180, 106;
    --md-success-rgb: 84, 221, 178;
    --md-warning-rgb: 233, 183, 94;
    --md-error-rgb: 255, 122, 102;
    --md-info-rgb: 98, 181, 255;
    --md-primary-rgb: 154, 140, 255;
}
:root:root[data-theme="light"][data-ru-persona="roxy"] { --md-primary-rgb: 34, 112, 222; }
:root:root[data-theme="dark"][data-ru-persona="roxy"] { --md-primary-rgb: 98, 181, 255; }
:root:root[data-theme="light"][data-ru-persona="eris"] { --md-primary-rgb: 200, 42, 63; }
:root:root[data-theme="dark"][data-ru-persona="eris"] { --md-primary-rgb: 255, 98, 117; }
:root:root[data-theme="light"][data-ru-persona="sylphy"] { --md-primary-rgb: 14, 124, 97; }
:root:root[data-theme="dark"][data-ru-persona="sylphy"] { --md-primary-rgb: 84, 221, 178; }

/* ---------------------------------------------------------------- 6. 基础 */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    background: var(--ru-bg);
}
body.ru {
    margin: 0;
    min-height: 100vh;
    background-color: var(--ru-bg);
    color: var(--ru-ink);
    font: 400 15px/1.65 var(--ru-font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    isolation: isolate;
    transition: background-color var(--ru-t4) var(--ru-ease-out), color var(--ru-t3) var(--ru-ease-out);
}
/* 纸纹：图像模型生成的羊皮纸 / 夜色纸，镜像拼成无缝贴图；随内容滚动（不是固定层，不额外合成） */
body.ru::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: url("../Img/Paper-day.webp") repeat;
    background-size: 400px 400px;
    opacity: var(--ru-grain);
}
:root[data-theme="dark"] body.ru::before { background-image: url("../Img/Paper-night.webp"); }
/* 捲动锁（Rune.js RU.lockScroll）把消失的捲轴宽补回来：内容不横移，固定的顶栏与背景画不伸缩；对话框的遮罩仍铺满整个视窗 */
html.ru-sbw body { padding-right: var(--ru-sbw); }
html.ru-sbw .ru-top, html.ru-sbw .ru-world { right: var(--ru-sbw); }
/* 重设一律零权重（:where）：否则 .ru a / .ru button 的 (0,1,1) 会盖过元件的单一类名配色 */
:where(.ru) *, :where(.ru) *::before, :where(.ru) *::after { box-sizing: border-box; }
:where(.ru) a { color: inherit; text-decoration: none; }
:where(.ru) img { max-width: 100%; }
:where(.ru) button { font: inherit; color: inherit; }
.ru ::selection { background: var(--ru-mana-soft-2); color: inherit; }
:where(.ru) :focus { outline: none; }
/* 键盘焦点：魔力光环。输入框有自己的聚焦样式，不叠第二圈；权重压在 (0,1,0)，元件的 :focus-visible 能盖过它 */
:where(.ru) :focus-visible:where(:not(input, textarea, select)) {
    outline: 2px solid var(--ru-mana);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--ru-mana-soft);
}
.ru-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ru-skip {
    position: absolute;
    left: 12px;
    top: -60px;
    z-index: var(--ru-z-toast);
    padding: 10px 16px;
    border-radius: var(--ru-r-sm);
    background: var(--ru-ink);
    color: var(--ru-bg);
    font-weight: 600;
    transition: top var(--ru-t2) var(--ru-ease-out);
}
.ru-skip:focus { top: 12px; }
/* 无刷新跳转（Pjax.js）：换页容器不生成盒子，版面跟没有这层时一样；换页后焦点移到正文开头，不画光环 */
.ru-pjax { display: contents; }
.ru #ru-main:focus, .ru #ru-main:focus-visible { outline: none; box-shadow: none; }
/* 顶部进度条：换页超过 150ms 才出现，魔力色细线往前爬，到站补满再淡出 */
.ru-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--ru-z-toast);
    height: 2.5px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 240ms var(--ru-ease-out);
}
.ru--app .ru-progress { top: var(--ru-safe-t, 0px); }
.ru-progress.is-on { opacity: 1; }
.ru-progress > i {
    display: block;
    height: 100%;
    border-radius: 0 2px 2px 0;
    background: linear-gradient(90deg, var(--ru-mana), var(--ru-gilt-2));
    box-shadow: 0 0 10px var(--ru-mana-glow);
    transform: scaleX(var(--ru-progress, 0));
    transform-origin: 0 50%;
    transition: transform 240ms var(--ru-ease-out);
}
@media (prefers-reduced-motion: reduce) { .ru-progress > i { transition: none; } }
.ru-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* 细滚动条：金线一样的滑块 */
.ru ::-webkit-scrollbar { width: 10px; height: 10px; }
.ru ::-webkit-scrollbar-track { background: transparent; }
.ru ::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: var(--ru-line-2) padding-box;
}
.ru ::-webkit-scrollbar-thumb:hover { background: var(--ru-gilt) padding-box; }

/* ---------------------------------------------------------------- 7. 字体语汇 */
.ru-serif { font-family: var(--ru-font-serif); }
.ru-display { font-family: var(--ru-font-display); }
/* 世界观小标（英文小型大写）：GUILD HALL / CODEX / LEDGER …… */
.ru-cap {
    font-family: var(--ru-font-display);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ru-gilt-text);
}
/* 咏叹调式的副标（英文斜体）*/
.ru-verse {
    font-family: var(--ru-font-flavor);
    font-style: italic;
    font-weight: 500;
    letter-spacing: .01em;
}
/* 世界观用语可以在后台关掉 */
:root[data-ru-flavor="off"] .ru-flavor { display: none !important; }
.ru-num {
    font-family: var(--ru-font-num);
    font-variant-numeric: lining-nums tabular-nums;
}
.ru-ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ru-clamp2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* ---------------------------------------------------------------- 8. 图标 / 纹章 */
.ru-i {
    width: 1.2em;
    height: 1.2em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -.22em;
    overflow: visible;
    --ru-gem: currentColor;
}
.ru-navicon { font-size: 1.05em; }

/* ---------------------------------------------------------------- 9. 按钮 */
.ru-btn {
    --b-bg: var(--ru-paper);
    --b-fg: var(--ru-ink);
    --b-bd: var(--ru-line-2);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid var(--b-bd);
    border-radius: var(--ru-r-sm);
    background: var(--b-bg);
    color: var(--b-fg);
    font: 600 14px/1.1 var(--ru-font-sans);
    letter-spacing: .03em;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    isolation: isolate;
    transition: transform var(--ru-t1) var(--ru-ease-out), box-shadow var(--ru-t2) var(--ru-ease-out),
        background-color var(--ru-t2), border-color var(--ru-t2), color var(--ru-t2);
}
.ru-btn:hover { border-color: var(--ru-gilt); }
.ru-btn:active { transform: translateY(1px) scale(.985); }
.ru-btn[disabled], .ru-btn.is-disabled {
    cursor: not-allowed;
    opacity: .52;
    filter: saturate(.5);
    transform: none;
    box-shadow: none;
}
.ru-btn .ru-i { width: 1.15em; height: 1.15em; }
.ru-btn--sm { min-height: 32px; padding: 0 12px; font-size: 13px; }
.ru-btn--lg { min-height: 48px; padding: 0 24px; font-size: 15px; }
.ru-btn--xl { min-height: 56px; padding: 0 30px; font-size: 16px; letter-spacing: .06em; }
.ru-btn--block { display: flex; width: 100%; }
.ru-btn--icon { width: 40px; padding: 0; }
.ru-btn--icon.ru-btn--sm { width: 32px; }

/* 主按钮：实心魔力色 + 柔和投影；悬停微微提亮、上浮 1px。不加金框、不加掠光 */
.ru-btn--rune {
    --b-fg: var(--ru-mana-on);
    --b-bd: transparent;
    --b-bg: var(--ru-mana);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .16) inset, 0 10px 22px -12px var(--ru-mana-glow);
}
.ru-btn--rune:hover {
    border-color: transparent;
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset, 0 16px 30px -14px var(--ru-mana-glow);
}
.ru-btn--rune:active { transform: translateY(0) scale(.985); filter: brightness(.97); }
.ru-btn--rune .ru-i { --ru-gem: currentColor; }

/* 鎏金（次主按钮） */
.ru-btn--gilt {
    --b-fg: #2B1D06;
    border-color: transparent;
    background: linear-gradient(135deg, var(--ru-gilt-2), var(--ru-gilt));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 16px -8px rgba(183, 136, 58, .6);
}
.ru-btn--gilt:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 22px -8px rgba(183, 136, 58, .7); }

/* 描边（魔力色文字） */
.ru-btn--line {
    --b-bg: transparent;
    --b-fg: var(--ru-ink);
    --b-bd: var(--ru-line-2);
}
.ru-btn--line:hover { --b-bg: var(--ru-paper-2); border-color: var(--ru-ink-4); }

/* 幽灵（无底无框） */
.ru-btn--ghost {
    --b-bg: transparent;
    --b-bd: transparent;
    --b-fg: var(--ru-ink-2);
}
.ru-btn--ghost:hover { --b-bg: var(--ru-mana-soft); --b-fg: var(--ru-ink); border-color: transparent; }

/* ---------------------------------------------------------------- 10. 输入 */
.ru-input, .ru-textarea, .ru-select {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--ru-line-2);
    border-radius: var(--ru-r-sm);
    background: var(--ru-paper);
    color: var(--ru-ink);
    font: 400 15px/1.45 var(--ru-font-sans);
    transition: border-color var(--ru-t2), box-shadow var(--ru-t2), background-color var(--ru-t2);
    -webkit-appearance: none;
    appearance: none;
}
.ru-textarea { min-height: 88px; resize: vertical; }
.ru-input::placeholder, .ru-textarea::placeholder { color: var(--ru-ink-4); opacity: 1; }
/* 平台 _.css 有一条 input,textarea{background-color:transparent!important}（商城区在层外、会员区 / 登录注册在 ru-platform 层），
   上面的普通宣告压不过它，输入框的纸色底会变全透明（叠在背景画上就看不清）；放进 ru-first 层加 !important 才拿得回来 */
@layer ru-first {
    .ru-input, .ru-textarea, .ru-select { background-color: var(--ru-paper) !important; }
    .ru-input:disabled, .ru-textarea:disabled, .ru-select:disabled { background-color: var(--ru-paper-2) !important; }
}
.ru-input:hover, .ru-textarea:hover { border-color: var(--ru-gilt); }
.ru-input:focus, .ru-textarea:focus, .ru-select:focus {
    border-color: var(--ru-mana);
    box-shadow: 0 0 0 4px var(--ru-mana-soft);
    outline: none;
}
.ru-field { display: grid; gap: 8px; }
.ru-field__label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    color: var(--ru-ink-2);
    font: 600 13px/1.3 var(--ru-font-sans);
    letter-spacing: .04em;
}
.ru-field__label .ru-cap { font-size: 9.5px; }
.ru-field__hint { color: var(--ru-ink-3); font-size: 12px; }

/* 数量步进（两块符文石夹一个数字） */
.ru-stepper {
    display: inline-flex;
    align-items: stretch;
    height: 40px;
    border: 1px solid var(--ru-line-2);
    border-radius: var(--ru-r-sm);
    background: var(--ru-paper);
    overflow: hidden;
}
.ru-stepper__btn {
    display: grid;
    place-items: center;
    width: 40px;
    border: 0;
    background: var(--ru-paper-2);
    color: var(--ru-ink-2);
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color var(--ru-t1), color var(--ru-t1);
}
.ru-stepper__btn:hover { background: var(--ru-mana-soft-2); color: var(--ru-mana-text); }
.ru-stepper__btn:active { background: var(--ru-mana); color: var(--ru-mana-on); }
.ru-stepper__input {
    width: 64px;
    border: 0;
    border-inline: 1px solid var(--ru-line);
    background: transparent;
    color: var(--ru-ink);
    text-align: center;
    font: 600 16px/1 var(--ru-font-num);
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}
.ru-stepper__input::-webkit-outer-spin-button,
.ru-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ru-stepper__input:focus { outline: none; background: var(--ru-mana-soft); }

/* 规格选项（平台契约：选中态类名是 .is-primary） */
.ru-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.ru-opt {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 7px 14px;
    border: 1px solid var(--ru-line-2);
    border-radius: var(--ru-r-sm);
    background: var(--ru-paper);
    color: var(--ru-ink);
    font-size: 14px;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    touch-action: manipulation;
    transition: border-color var(--ru-t2), background-color var(--ru-t2), box-shadow var(--ru-t2), color var(--ru-t2);
}
.ru-opt:hover { border-color: var(--ru-gilt); }
.ru-opt__price { color: var(--ru-ink-3); font-size: 12px; font-family: var(--ru-font-num); }
.ru-opt.is-primary {
    border-color: var(--ru-mana);
    background: var(--ru-mana-soft);
    color: var(--ru-mana-text);
    box-shadow: inset 0 0 0 1px var(--ru-mana);
}
.ru-opt.is-primary .ru-opt__price { color: var(--ru-mana-text); }

/* ---------------------------------------------------------------- 11. 标签
   平台 8 色：red orange green cyan blue purple pink gray。形态 = 淡色胶囊 + 一颗同色小圆点，只为一眼分出颜色。 */
.ru-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ru-tag {
    --t: #B53234;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    height: 22px;
    padding: 0 10px 0 9px;
    border-radius: var(--ru-r-pill);
    background: var(--ru-paper-2);
    color: var(--t);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .02em;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px var(--ru-line);
}
.ru-tag::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: var(--t);
}
.ru-tag--red { --t: #B53234; }
.ru-tag--orange { --t: #C4631A; }
.ru-tag--green { --t: #2E8B4E; }
.ru-tag--cyan { --t: #13869A; }
.ru-tag--blue { --t: #2A62C9; }
.ru-tag--purple { --t: #7446C6; }
.ru-tag--pink { --t: #C23C86; }
.ru-tag--gray { --t: #6E6A62; }
:root[data-theme="dark"] .ru-tag--red { --t: #FF6B6B; }
:root[data-theme="dark"] .ru-tag--orange { --t: #FF9E57; }
:root[data-theme="dark"] .ru-tag--green { --t: #5FD68A; }
:root[data-theme="dark"] .ru-tag--cyan { --t: #4FD3E6; }
:root[data-theme="dark"] .ru-tag--blue { --t: #6FA2FF; }
:root[data-theme="dark"] .ru-tag--purple { --t: #B08BFF; }
:root[data-theme="dark"] .ru-tag--pink { --t: #FF7CC3; }
:root[data-theme="dark"] .ru-tag--gray { --t: #B8B3A8; }
/* 主题自带的语义印章：秒杀（火）/ 批发（土）/ 推荐（金） */
.ru-tag--seckill { --t: var(--ru-fire); }
.ru-tag--wholesale { --t: var(--ru-earth); }
.ru-tag--recommend { --t: var(--ru-gilt); }
.ru-tag--auto { --t: var(--ru-wind); }
.ru-tag--manual { --t: var(--ru-water); }

/* ---------------------------------------------------------------- 12. 价格 */
/* 价格用比例数字：等宽数字会给「1」两侧留出整格空白，¥ 1 .00 看起来像断开的三截 */
.ru-price {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    color: var(--ru-mana-text);
    font-family: var(--ru-font-num);
    font-weight: 700;
    font-variant-numeric: lining-nums proportional-nums;
    letter-spacing: -.01em;
    line-height: 1;
    white-space: nowrap;
}
.ru-price__sym { font-size: .62em; font-weight: 600; margin-right: 1px; font-style: normal; font-family: var(--ru-font-sans); }
.ru-price__int { font-size: 1em; }
.ru-price__dec { font-size: .66em; font-style: normal; opacity: .9; }
.ru-price--del { color: var(--ru-ink-4); font-weight: 500; text-decoration: line-through; text-decoration-thickness: 1px; }

/* ---------------------------------------------------------------- 15. 转圈 */
@keyframes ru-spin { to { transform: rotate(360deg); } }

/* 加载器（替代平台的转圈）：一圈缺口圆弧 */
.ru-loader {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 36px;
    color: var(--ru-mana);
}
.ru-loader::before {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    border: 2px solid currentColor;
    border-right-color: transparent;
    animation: ru-spin .9s linear infinite;
}

/* ---------------------------------------------------------------- 16. 骨架屏（羊皮纸上的一道微光） */
.ru-skel {
    position: relative;
    overflow: hidden;
    border-radius: var(--ru-r-sm);
    background: var(--ru-paper-2);
}
.ru-skel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, var(--ru-paper-a) 50%, transparent 80%);
    background-size: 220% 100%;
    animation: ru-shimmer 1.6s linear infinite;
}
@keyframes ru-shimmer {
    from { background-position: 120% 0; }
    to { background-position: -120% 0; }
}

/* ---------------------------------------------------------------- 17. 空状态 / 失败态 */
.ru-empty {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 48px 20px;
    color: var(--ru-ink-3);
    text-align: center;
}
.ru-empty__icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ru-paper-2); color: var(--ru-ink-3); }
.ru-empty__icon .ru-i { width: 28px; height: 28px; }
.ru-empty__title { margin: 8px 0 0; color: var(--ru-ink); font: 600 17px/1.4 var(--ru-font-serif); }
.ru-empty__desc { margin: 0; max-width: 32em; font-size: 13.5px; }
.ru-empty .ru-btn { margin-top: 8px; }
.ru-empty__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 36em; margin-top: 6px; }

/* ---------------------------------------------------------------- 18. 富文本（商品详情 / 公告 / 使用说明） */
.ru-rich {
    color: var(--ru-ink);
    font-size: 15px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}
.ru-rich > :first-child { margin-top: 0; }
.ru-rich > :last-child { margin-bottom: 0; }
.ru-rich p { margin: 0 0 1em; }
.ru-rich h1, .ru-rich h2, .ru-rich h3, .ru-rich h4 {
    margin: 1.6em 0 .6em;
    color: var(--ru-ink);
    font-family: var(--ru-font-serif);
    font-weight: 700;
    line-height: 1.35;
}
.ru-rich h1 { font-size: 1.5em; }
.ru-rich h2 { font-size: 1.3em; }
.ru-rich h3 { font-size: 1.15em; }
.ru-rich a { color: var(--ru-mana-text); text-decoration: underline; text-decoration-color: var(--ru-mana-soft-2); text-underline-offset: 3px; }
.ru-rich a:hover { text-decoration-color: currentColor; }
.ru-rich img, .ru-rich video { max-width: 100%; height: auto; border-radius: var(--ru-r-md); }
.ru-rich ul, .ru-rich ol { margin: 0 0 1em; padding-left: 1.4em; }
.ru-rich li { margin: .25em 0; }
.ru-rich ul > li::marker { content: "◆  "; color: var(--ru-gilt); font-size: .7em; }
.ru-rich blockquote {
    margin: 1em 0;
    padding: 12px 16px;
    border-left: 3px solid var(--ru-gilt);
    border-radius: 0 var(--ru-r-sm) var(--ru-r-sm) 0;
    background: var(--ru-paper-2);
    color: var(--ru-ink-2);
}
.ru-rich code {
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--ru-paper-2);
    font-family: var(--ru-font-mono);
    font-size: .88em;
}
.ru-rich pre {
    padding: 14px 16px;
    border-radius: var(--ru-r-sm);
    background: var(--ru-paper-2);
    overflow: auto;
    font-family: var(--ru-font-mono);
    font-size: 13px;
}
.ru-rich pre code { padding: 0; background: none; }
.ru-rich table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .93em; }
.ru-rich th, .ru-rich td { padding: 8px 10px; border: 1px solid var(--ru-line); text-align: left; }
.ru-rich th { background: var(--ru-paper-2); font-weight: 600; }
.ru-rich hr { border: 0; height: 1px; margin: 1.6em 0; background: linear-gradient(90deg, transparent, var(--ru-gilt), transparent); }

/* ---------------------------------------------------------------- 19. 倒计时（秒杀） */
.ru-count {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--ru-font-num);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.ru-count__cell {
    min-width: 26px;
    padding: 3px 5px;
    border-radius: 5px;
    background: var(--ru-ink);
    color: var(--ru-bg);
    text-align: center;
    font-size: 13px;
    line-height: 1.2;
}
.ru-count__sep { color: var(--ru-fire); font-weight: 700; }

/* ---------------------------------------------------------------- 20. 提示条（卷轴展开） */
.ru-toasts {
    position: fixed;
    left: 50%;
    top: calc(16px + env(safe-area-inset-top, 0px));
    z-index: var(--ru-z-toast);
    display: grid;
    justify-items: center;
    gap: 8px;
    width: min(92vw, 420px);
    transform: translateX(-50%);
    pointer-events: none;
}
.ru-toast {
    --t: var(--ru-water);
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    padding: 11px 16px 11px 12px;
    border-radius: var(--ru-r-md);
    background: var(--ru-paper);
    color: var(--ru-ink);
    box-shadow: var(--ru-shadow-3), inset 0 0 0 1px var(--ru-line-2);
    font-size: 14px;
    line-height: 1.45;
    pointer-events: auto;
    animation: ru-unroll 360ms var(--ru-ease-out) both;
}
.ru-toast::before {
    content: "";
    align-self: stretch;
    width: 3px;
    flex: none;
    border-radius: 3px;
    background: var(--t);
    box-shadow: 0 0 10px var(--t);
}
.ru-toast .ru-i { color: var(--t); --ru-gem: var(--t); width: 18px; height: 18px; }
.ru-toast--success { --t: var(--ru-wind); }
.ru-toast--error { --t: var(--ru-fire); }
.ru-toast--warning { --t: var(--ru-earth); }
.ru-toast.is-leaving { animation: ru-roll-up 220ms var(--ru-ease-in) both; }
@keyframes ru-unroll {
    from { opacity: 0; clip-path: inset(0 50% 0 50% round 12px); }
    to { opacity: 1; clip-path: inset(0 0 0 0 round 12px); }
}
@keyframes ru-roll-up {
    to { opacity: 0; clip-path: inset(0 50% 0 50% round 12px); }
}

/* ---------------------------------------------------------------- 21. 入场（墨水晕染：只动 mask 与 opacity，不碰 transform） */
.ru-js .ru-reveal { opacity: 0; }
.ru-js .ru-reveal.is-in {
    opacity: 1;
    animation: ru-ink 760ms var(--ru-ease-out) backwards;
    animation-delay: var(--ru-delay, 0ms);
}
@keyframes ru-ink {
    from {
        opacity: 0;
        -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 60%);
        mask-image: linear-gradient(180deg, #000 40%, transparent 60%);
        -webkit-mask-size: 100% 250%;
        mask-size: 100% 250%;
        -webkit-mask-position: 0 100%;
        mask-position: 0 100%;
    }
    to {
        opacity: 1;
        -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 60%);
        mask-image: linear-gradient(180deg, #000 40%, transparent 60%);
        -webkit-mask-size: 100% 250%;
        mask-size: 100% 250%;
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }
}

/* ---------------------------------------------------------------- 22. 发动（点击特效由 Fx.js 生成，这里只是外形） */
.ru-burst {
    position: fixed;
    z-index: var(--ru-z-toast);
    width: 0;
    height: 0;
    pointer-events: none;
}
.ru-burst__ring {
    position: absolute;
    left: -44px;
    top: -44px;
    width: 88px;
    height: 88px;
    border: 2px solid var(--ru-mana);
    border-radius: 50%;
}
.ru-burst__mote {
    position: absolute;
    left: -3px;
    top: -3px;
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: var(--ru-mana-2);
    box-shadow: 0 0 8px var(--ru-mana-glow);
    transform: rotate(45deg);
}

/* ---------------------------------------------------------------- 23. 动效降级
   访客或站长选了「简约」、或系统要求减少动态：装饰动画一律停，交互反馈（颜色 / 阴影过渡）保留 */
:root[data-ru-fx="lite"] .ru-skel::after { animation: none !important; }
:root[data-ru-fx="lite"] .ru-reveal,
:root[data-ru-fx="lite"] .ru-reveal.is-in { opacity: 1; animation: none; }
@media (prefers-reduced-motion: reduce) {
    .ru *, .ru *::before, .ru *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .ru-js .ru-reveal { opacity: 1; }
}

/* ---------------------------------------------------------------- 24. 更细腻的混色（支持 color-mix 的浏览器）
   老 WebView 不认 color-mix：含 var() 的声明到计算值阶段才失效、会退成 unset 而不是上一条，
   所以混色只写在 @supports 里，外面保留一套纯令牌的基础写法。 */
@supports (color: color-mix(in srgb, red 50%, blue)) {
    .ru-btn--line { --b-bd: color-mix(in srgb, var(--ru-mana) 45%, transparent); }
    .ru-tag {
        background: color-mix(in srgb, var(--t) 11%, var(--ru-paper));
        color: color-mix(in srgb, var(--t) 80%, var(--ru-ink));
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t) 24%, transparent);
    }
}

/* ---------------------------------------------------------------- 25. 特效外形（Fx.js 生成） */
.ru-ambient {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.ru-trail {
    position: fixed;
    left: 0;
    top: 0;
    z-index: var(--ru-z-toast);
    pointer-events: none;
}
.ru-trail i {
    position: absolute;
    left: -5px;
    top: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--ru-mana-2) 0 30%, transparent 70%);
    box-shadow: 0 0 12px var(--ru-mana-glow);
    opacity: 0;
    transition: opacity 300ms;
    will-change: transform;
}
.ru-burst--eris .ru-burst__mote { background: #FFB06B; border-radius: 50%; }
.ru-burst--roxy .ru-burst__mote { border-radius: 50% 50% 50% 0; }
.ru-burst--sylphy .ru-burst__mote { width: 10px; height: 5px; border-radius: 50%; background: var(--ru-mana-2); }
.ru-burst--rudeus .ru-burst__mote { background: var(--ru-gilt-2); }

/* 圆形揭幕（明暗 / 配色切换）：关掉默认的交叉淡化，只留圆形裁切 */
html.ru-vt-reveal::view-transition-old(root),
html.ru-vt-reveal::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
}
html.ru-vt-reveal .ru-tabbar,
html.ru-vt-reveal .ru-dock { view-transition-name: none !important; }


/* ---------------------------------------------------------------- 26. 首访开场：店铺图标 + 店名淡入（Boot 决定播不播；JS 失效时 1.6 秒后自己退场） */
.ru-splash { display: none; }
html.ru-splash-on .ru-splash {
    position: fixed;
    inset: 0;
    z-index: var(--ru-z-splash);
    display: grid;
    place-items: center;
    align-content: center;
    gap: 14px;
    background: radial-gradient(circle at 50% 44%, var(--ru-paper) 0%, var(--ru-bg) 60%);
    animation: ru-splash-auto 420ms ease 1.6s forwards;
}
html.ru-splash-on .ru-splash.is-out { animation: ru-splash-out 420ms var(--ru-ease-out) forwards; }
@keyframes ru-splash-out { to { opacity: 0; visibility: hidden; } }
@keyframes ru-splash-auto { to { opacity: 0; visibility: hidden; } }
/* 开场正中是店铺自己的标志（favicon），不是主题的道具画 */
.ru-splash__crest {
    position: relative;
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    overflow: hidden;
    border-radius: 24px;
    background: var(--ru-paper);
    box-shadow: 0 0 0 1px var(--ru-line), 0 18px 40px -18px rgba(0, 0, 0, .45);
    animation: ru-fade-up 700ms var(--ru-ease-out) both;
}
.ru-splash__crest img { width: 100%; height: 100%; object-fit: cover; }
.ru-splash__name {
    position: relative;
    margin-top: 4px;
    color: var(--ru-ink);
    font: 800 22px/1.3 var(--ru-font-serif);
    letter-spacing: .12em;
    animation: ru-fade-up 700ms var(--ru-ease-out) .1s both;
}
.ru-splash__cap { position: relative; animation: ru-fade-up 700ms var(--ru-ease-out) .2s both; }
@keyframes ru-fade-up { from { opacity: 0; transform: translateY(8px); } }

/* ---------------------------------------------------------------- 27. 询问框（订单密码等） */
.ru-ask { display: grid; gap: 12px; padding: 4px 0 6px; }
.ru-ask__desc { margin: 0; color: var(--ru-ink-2); font-size: 14px; }
/* 资金操作验证：动态码置中等宽，输入后拉开字距（text-indent 抵掉末字后的字距，数字才真正置中） */
.ru-fund .ru-fund__code { text-align: center; font-size: 18px; font-variant-numeric: tabular-nums; }
.ru-fund .ru-fund__code:not(:placeholder-shown) { letter-spacing: .32em; text-indent: .32em; font-weight: 600; }
.ru-fund .ru-fund__code.is-bad { border-color: var(--ru-fire); box-shadow: 0 0 0 4px var(--ru-fire-soft); animation: ru-shake 360ms var(--ru-ease-out); }
.ru-fund__note { margin: -4px 0 0; color: var(--ru-fire); font-size: 13px; }

/* ---------------------------------------------------------------- 28. 天幕（手绘背景画，两端共用） */
.ru-scene {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    isolation: isolate;
    background: var(--ru-sky);
}
.ru-scene__paint {
    position: absolute;
    inset: -3%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center 58%;
    will-change: transform;
}
/* 手机首页的景色带是一条矮横幅，用宽幅画；直式画只留给整屏的手机关站页 */
:root[data-theme="light"] .ru-scene--hero .ru-scene__paint,
:root[data-theme="light"] .ru-scene--banner .ru-scene__paint,
:root[data-theme="light"] .ru-scene--app .ru-scene__paint { background-image: var(--ru-bg-day, url("../Img/Scene-day.webp")); }
:root[data-theme="dark"] .ru-scene--hero .ru-scene__paint,
:root[data-theme="dark"] .ru-scene--banner .ru-scene__paint,
:root[data-theme="dark"] .ru-scene--app .ru-scene__paint,
.ru--pc .ru-scene--closed .ru-scene__paint { background-image: var(--ru-bg-night, url("../Img/Scene-night.webp")); }
.ru--app .ru-scene--closed .ru-scene__paint { background-image: var(--ru-bg-night, url("../Img/Scene-night-tall.webp")); }
.ru-scene--banner .ru-scene__paint { background-position: center 64%; }
.ru-scene--app .ru-scene__paint { background-position: center 55%; }
/* 画面里的光：白昼是右上角的暖阳呼吸，星夜是极光的微微流转（只动 opacity，不重绘整张画） */
.ru-scene__light {
    position: absolute;
    inset: 0;
    opacity: .0;
    background: radial-gradient(60% 70% at 92% 8%, rgba(255, 226, 150, .55), transparent 60%);
    animation: ru-breathe 9s var(--ru-ease-io) infinite;
}
:root[data-theme="dark"] .ru-scene__light {
    background:
        radial-gradient(40% 30% at 62% 18%, rgba(59, 227, 192, .22), transparent 70%),
        radial-gradient(34% 26% at 40% 12%, rgba(123, 108, 255, .22), transparent 70%);
}
@keyframes ru-breathe {
    0%, 100% { opacity: .15; }
    50% { opacity: .75; }
}
:root[data-ru-fx="lite"] .ru-scene__light,
:root[data-ru-tier="low"] .ru-scene__light { animation: none; opacity: .4; }
/* 标题那一侧压一层纸色，保证字能读 */
.ru-scene__shade { position: absolute; inset: 0; }
.ru-scene--hero .ru-scene__shade {
    background: linear-gradient(90deg, var(--ru-bg) 0%, color-mix(in srgb, var(--ru-bg) 72%, transparent) 26%, transparent 58%);
    opacity: .82;
}
:root[data-theme="dark"] .ru-scene--hero .ru-scene__shade { opacity: .9; }
.ru-scene--banner .ru-scene__shade { background: linear-gradient(0deg, var(--ru-bg) 0%, transparent 70%); opacity: .7; }
.ru-scene--app .ru-scene__shade { background: linear-gradient(180deg, rgba(0, 0, 0, .28), transparent 38%); }
:root[data-theme="light"] .ru-scene--app .ru-scene__shade { background: linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 36%); }
/* 底部淡出成「带纸纹的底色」：纯色渐层会在画与下方纸页的交界留下一道色差线 */
.ru-scene__veil, .ru-veil {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 34%;
    background-color: var(--ru-bg);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 94%);
    mask-image: linear-gradient(180deg, transparent, #000 94%);
}
.ru-scene__veil::before, .ru-veil::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../Img/Paper-day.webp") repeat;
    background-size: 400px 400px;
    opacity: var(--ru-grain);
}
:root[data-theme="dark"] .ru-scene__veil::before, :root[data-theme="dark"] .ru-veil::before { background-image: url("../Img/Paper-night.webp"); }
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .ru-scene--hero .ru-scene__shade { background: linear-gradient(90deg, var(--ru-bg) 0%, transparent 58%); }
}

/* ---------------------------------------------------------------- 30. 下单与成交内容（电脑端弹窗 / 手机端抽屉共用，App.css 再做手机化微调） */
.ru-party { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ru-party__card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 14px;
    border: 1px solid var(--ru-line);
    border-radius: 12px;
    background: var(--ru-paper);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--ru-t2), box-shadow var(--ru-t2), background-color var(--ru-t2);
}
.ru-party__card:hover { border-color: var(--ru-gilt); }
.ru-party__dot {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--sw), var(--sw2));
    color: #FFFFFF;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 4px 10px -4px var(--sw);
}
.ru-party__text { display: grid; gap: 2px; min-width: 0; }
.ru-party__text b { color: var(--ru-ink); font: 700 14.5px/1.3 var(--ru-font-serif); }
.ru-party__text small { color: var(--ru-ink-3); font-size: 11px; line-height: 1.35; }
.ru-party__swatch {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 6px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--sw), var(--sw2));
    opacity: .55;
}
:root[data-ru-persona="rudeus"] [data-ru-persona-set="rudeus"] .ru-party__swatch,
:root[data-ru-persona="roxy"] [data-ru-persona-set="roxy"] .ru-party__swatch,
:root[data-ru-persona="eris"] [data-ru-persona-set="eris"] .ru-party__swatch,
:root[data-ru-persona="sylphy"] [data-ru-persona-set="sylphy"] .ru-party__swatch { opacity: 1; }
.ru-seg {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--ru-line-2);
    border-radius: 12px;
    background: var(--ru-paper);
}
.ru-seg__btn {
    display: grid;
    place-items: center;
    width: 34px;
    height: 32px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ru-ink-3);
    cursor: pointer;
    transition: background-color var(--ru-t2), color var(--ru-t2);
}
.ru-seg__btn.is-on { background: var(--ru-mana); color: var(--ru-mana-on); --ru-gem: var(--ru-mana-on); }
.ru-seg__btn.is-on .ru-i { --ru-gem: currentColor; }
.ru-more { display: grid; justify-items: center; gap: 10px; margin-top: 34px; }
.ru-more__flavor { color: var(--ru-ink-3); font-weight: 500; }
.ru-more__sentinel { width: 1px; height: 1px; }
.ru-more__end {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: var(--ru-ink-3);
    font-size: 13px;
}
.ru-more__end i { width: 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--ru-gilt)); }
.ru-more__end i:last-child { transform: scaleX(-1); }
.ru-price--xl { font-size: 42px; }
.ru-price--lg { font-size: 28px; }
.ru-price--sm { font-size: 13px; }
.ru-seckill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 12px;
    background: linear-gradient(90deg, var(--ru-fire-soft), transparent);
    box-shadow: inset 0 0 0 1px var(--ru-fire-soft);
    color: var(--ru-fire);
}
.ru-seckill__flag { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.ru-seckill__sub { color: var(--ru-ink-3); font-weight: 500; font-size: 12.5px; }
.ru-seckill--soon { background: linear-gradient(90deg, var(--ru-earth-soft), transparent); color: var(--ru-earth); }
.ru-ladder {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px dashed var(--ru-line-2);
}
.ru-ladder__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--ru-ink); }
.ru-ladder__head .ru-i { color: var(--ru-gilt-text); }
.ru-ladder__sub { color: var(--ru-ink-3); font-size: 12.5px; }
.ru-ladder__head .ru-cap { margin-left: auto; font-size: 9px; }
.ru-ladder__table { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.ru-ladder__cell {
    display: grid;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--ru-paper-2);
    color: var(--ru-ink-3);
    font-size: 12px;
    transition: background-color var(--ru-t2), box-shadow var(--ru-t2);
}
.ru-ladder__cell b { color: var(--ru-ink); font-size: 16px; }
.ru-ladder__cell.is-on { background: var(--ru-mana-soft-2); box-shadow: inset 0 0 0 1px var(--ru-mana); }
.ru-ladder__cell.is-on b { color: var(--ru-mana-text); }
.ru-buy { display: grid; gap: 16px; }
.ru-buy__row { display: grid; gap: 9px; }
.ru-buy__row--inline { grid-template-columns: auto auto 1fr; align-items: center; gap: 14px; }
.ru-buy__row--inline .ru-buy__label { min-width: 72px; }
.ru-buy__label {
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: var(--ru-ink-2);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .04em;
}
.ru-buy__label .ru-cap { font-size: 9px; }
.ru-buy__hint { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--ru-ink-3); font-size: 12px; }
.ru-buy .ru-input.is-bad { border-color: var(--ru-fire); box-shadow: 0 0 0 4px var(--ru-fire-soft); animation: ru-shake 360ms var(--ru-ease-out); }
@keyframes ru-shake { 20%, 60% { translate: -4px 0; } 40%, 80% { translate: 4px 0; } }
.ru-draft { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ru-draft__picked { color: var(--ru-mana-text); font-size: 13px; font-weight: 600; }
.ru-draft__fee { color: var(--ru-ink-3); font-size: 12px; }
.ru-captcha { display: flex; gap: 10px; }
.ru-captcha .ru-input { flex: 1; }
.ru-captcha__img {
    height: 44px;
    border-radius: var(--ru-r-sm);
    border: 1px solid var(--ru-line-2);
    background: #fff;
    cursor: pointer;
}
.ru-pays { display: grid; gap: 9px; }
.ru-pays__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ru-pay {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 8px 14px 8px 10px;
    border: 1px solid var(--ru-line-2);
    border-radius: 12px;
    background: var(--ru-paper);
    color: var(--ru-ink);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: border-color var(--ru-t2), box-shadow var(--ru-t2), background-color var(--ru-t2);
}
.ru-pay.ru-skel { border-color: transparent; }
.ru-pay:hover { border-color: var(--ru-gilt); }
.ru-pay__icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; font-size: 20px; color: var(--ru-ink-2); }
.ru-pay__icon img { width: 28px; height: 28px; object-fit: contain; }
.ru-pay__name { flex: 1; min-width: 0; }
/* 选中的支付方式：右侧一个勾（不用看不懂的装饰圈） */
.ru-pay__check {
    display: grid;
    place-items: center;
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ru-mana);
    color: var(--ru-mana-on);
    opacity: 0;
    transform: scale(.6);
    transition: opacity var(--ru-t2), transform var(--ru-t2) var(--ru-ease-spring);
}
.ru-pay__check .ru-i { width: 14px; height: 14px; stroke-width: 2.4; --ru-gem: currentColor; }
.ru-pay.is-on { border-color: var(--ru-mana); background: var(--ru-mana-soft); box-shadow: inset 0 0 0 1px var(--ru-mana); }
.ru-pay.is-on .ru-pay__check { opacity: 1; transform: none; }
.ru-pays__none { margin: 0; color: var(--ru-ink-3); font-size: 13.5px; }
.ru-btn.is-casting { pointer-events: none; }
.ru-btn.is-casting > .ru-i { display: none; }
.ru-btn.is-casting::before { content: ""; width: 16px; height: 16px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ru-spin .8s linear infinite; }
.ru-btn.is-casting > span { opacity: .75; }
.ru-gatehint { display: flex; align-items: center; gap: 6px; margin: -6px 0 0; color: var(--ru-ink-3); font-size: 13px; }
/* 挑选指定卡密 */
.ru-cards { display: grid; gap: 8px; }
.ru-cards__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--ru-line);
    border-radius: 12px;
    background: var(--ru-paper);
    color: var(--ru-ink);
    text-align: left;
    cursor: pointer;
}
.ru-cards__row:hover { border-color: var(--ru-mana); background: var(--ru-mana-soft); }
.ru-cards__txt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ru-cards__fee .ru-price { font-size: 14px; }
/* 成交：绿色勾 = 已发货（卡密就在下面）；琥珀色沙漏 = 等待商家发货 */
.ru-contract { display: grid; gap: 16px; padding-top: 6px; }
.ru-contract__mark {
    display: grid;
    place-items: center;
    justify-self: center;
    width: 76px;
    height: 76px;
    margin: 6px 0 4px;
    border-radius: 50%;
    background: var(--ru-wind);
    box-shadow: 0 0 0 9px var(--ru-wind-soft);
    color: var(--ru-paper);
    animation: ru-mark-in 520ms var(--ru-ease-spring) both;
}
.ru-contract.is-waiting .ru-contract__mark { background: var(--ru-earth); box-shadow: 0 0 0 9px var(--ru-earth-soft); }
.ru-contract__mark .ru-i { width: 36px; height: 36px; stroke-width: 2.4; }
@keyframes ru-mark-in {
    from { opacity: 0; transform: scale(.55); }
    to { opacity: 1; transform: none; }
}
.ru-contract__lead { margin: 0; text-align: center; color: var(--ru-ink-2); }
.ru-contract__no {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--ru-ink-3);
    font-size: 13px;
}
.ru-contract__no b { color: var(--ru-ink); font-size: 15px; letter-spacing: .06em; }
.ru-contract__code {
    margin: 0;
    max-height: 260px;
    overflow: auto;
    padding: 16px 18px;
    border-radius: 14px;
    background:
        repeating-linear-gradient(180deg, transparent 0 27px, var(--ru-line) 27px 28px) 0 16px / 100% 28px local,
        var(--ru-paper-2);
    box-shadow: inset 0 0 0 1px var(--ru-line-2);
    color: var(--ru-ink);
    font: 500 14px/28px var(--ru-font-mono);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    user-select: all;
}
.ru-contract__note { padding: 12px 14px; border-radius: 12px; background: var(--ru-paper-2); }
.ru-contract__note-title { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--ru-ink-2); font-size: 12.5px; font-weight: 700; }
.ru-contract__note .ru-rich { font-size: 13.5px; max-height: 200px; overflow: auto; }

/* ---------------------------------------------------------------- 31. 委托账簿条目 / 小胶囊（两端共用；Query.js 生成） */
.ru-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: var(--ru-r-pill);
    background: var(--ru-paper-2);
    box-shadow: inset 0 0 0 1px var(--ru-line);
    color: var(--ru-ink-2);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: box-shadow var(--ru-t2), color var(--ru-t2), background-color var(--ru-t2);
}
.ru-chip .ru-i { color: var(--ru-gilt-text); }
.ru-chip:hover { box-shadow: inset 0 0 0 1px var(--ru-gilt); color: var(--ru-ink); }
.ru-chip span { font-variant-numeric: tabular-nums; letter-spacing: .03em; }

/* 一笔委托 = 账簿上的一行：左缘一条按状态着色的缎带（已发货 = 风、待发货 = 土、未付款 = 灰） */
.ru-entry {
    --st: var(--ru-ink-4);
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 14px 18px 14px 16px;
    border-radius: 16px;
    background: var(--ru-paper);
    box-shadow: 0 0 0 1px var(--ru-line), var(--ru-shadow-1);
}
.ru-entry::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--st);
}
.ru-entry.is-done { --st: var(--ru-wind); }
.ru-entry.is-wait { --st: var(--ru-earth); }
.ru-entry__cover {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: 12px;
    background: radial-gradient(circle at 50% 40%, var(--ru-mana-soft-2), transparent 70%), var(--ru-paper-2);
}
.ru-entry__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ru-entry__art { color: var(--ru-mana-text); font: 800 24px/1 var(--ru-font-serif); }
.ru-entry__main { display: grid; gap: 6px; min-width: 0; }
.ru-entry__name { margin: 0; color: var(--ru-ink); font-size: 15px; font-weight: 700; line-height: 1.35; }
.ru-entry__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; color: var(--ru-ink-3); font-size: 12.5px; }
.ru-entry__no { display: inline-flex; align-items: center; gap: 4px; }
.ru-entry__no b { color: var(--ru-ink-2); font-size: 13px; letter-spacing: .04em; }
.ru-entry__copy {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--ru-ink-3);
    cursor: pointer;
}
.ru-entry__copy:hover { background: var(--ru-mana-soft); color: var(--ru-mana-text); }
.ru-entry__side {
    display: grid;
    grid-template-columns: auto auto;
    justify-items: end;
    align-items: baseline;
    gap: 8px 6px;
}
.ru-entry__side > .ru-entry__state, .ru-entry__side > .ru-btn, .ru-entry__side > .ru-entry__hint { grid-column: 1 / -1; }
.ru-entry__state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 10px;
    border-radius: var(--ru-r-pill);
    background: var(--ru-paper-2);
    box-shadow: inset 0 0 0 1px var(--ru-line);
    color: var(--st);
    font-size: 11.5px;
    font-weight: 700;
}
.ru-entry__state::before { content: ""; width: 6px; height: 6px; border-radius: 1px; transform: rotate(45deg); background: currentColor; }
.ru-entry__side .ru-price { font-size: 19px; }
.ru-entry__qty { color: var(--ru-ink-3); font-size: 12px; }
.ru-entry__hint { color: var(--ru-ink-3); font-size: 12px; }
.ru-ledger__loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 44px 0; color: var(--ru-ink-3); }
.ru-ledger__loading .ru-loader { color: var(--ru-mana); }
.ru-ledger__recent-label { color: var(--ru-ink-3); font-size: 12.5px; }

/* 关站页：画面恒为星夜，四周压暗，只留中间挂牌的一片光 */
.ru-scene--closed .ru-scene__shade { background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(6, 7, 22, .2), rgba(6, 7, 22, .72)); }
.ru-scene--closed .ru-scene__veil { display: none; }
.ru-scene--closed .ru-scene__light {
    background:
        radial-gradient(40% 30% at 62% 18%, rgba(59, 227, 192, .22), transparent 70%),
        radial-gradient(34% 26% at 40% 12%, rgba(123, 108, 255, .22), transparent 70%);
}

/* 维护公告卡（电脑端 / 手机端关站页共用）：星夜背景上一张半透明夜色卡片，不摆挂牌、铁链这类道具 */
.ru-closed__card {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 12px;
    width: min(88vw, 500px);
    padding: 36px 34px 32px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 26px;
    background: rgba(14, 16, 38, .78);
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7);
    color: #E6E1F2;
    text-align: center;
}
.ru-closed__logo { width: 60px; height: 60px; border-radius: 16px; object-fit: cover; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 8px 20px rgba(0, 0, 0, .4); }
.ru-closed__card .ru-cap { color: #C9C2F0; }
.ru-closed__title { margin: 4px 0 0; color: #FFFFFF; font-size: 26px; font-weight: 800; letter-spacing: .06em; }
.ru-closed__msg { color: #CFC9E2; font-size: 15px; line-height: 1.75; }
.ru-closed__msg p { margin: 0 0 .4em; }
.ru-closed__msg a { color: #B9AEFF; }
.ru-closed__card .ru-btn--line { --b-fg: #FFFFFF; --b-bd: rgba(255, 255, 255, .32); margin-top: 8px; }
.ru-closed__card .ru-btn--line:hover { --b-bg: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .6); }
.ru-closed__shop { margin: 0; color: rgba(255, 255, 255, .72); font-size: 14px; letter-spacing: .24em; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }

/* ---------------------------------------------------------------- 32. 纸页（两端共用） */
/* 纸页：不透明底色 + 与 body 同一张纸纹（遮住下层时纹理不断） */
.ru-paper { position: relative; isolation: isolate; background-color: var(--ru-bg); }
.ru-paper::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background: url("../Img/Paper-day.webp") repeat;
    background-size: 400px 400px;
    opacity: var(--ru-grain);
}
:root[data-theme="dark"] .ru-paper::before { background-image: url("../Img/Paper-night.webp"); }