/* ============================================================================
   鲁迪乌斯 · 会员中心与登录注册（两端共用）

   · 页面积木：面板 / 数字卡 / 表单 / 分段页签 / 键值列表；
   · 业务区块：充值、兑现、套餐、推广、工单（平台控制器写的 .uc-ticket-* 全部在这里重画，平台的 glass.css 不载）；
   · 平台元件换皮：bootstrap-table、筛选条、状态分段、layui 表单控件（输入 / 下拉 / 开关 / 勾选 / 单选 / 日期 / 树选择）、
     component.popup 弹窗表单、卡密层、消息预览、SKU 收益层、select2、EditorV2；
   · 登录注册的卡片与表单。
   多栏排版写在 Member.pc.css，手机端的外壳与卡片化写在 Member.app.css。

   尺度：会员中心是工作区，比商城紧一档 —— 正文 13.5–14px、输入框 38px、按钮 36px（小号 30px）、表格行约 44px。

   级联（Head.html / Support::platformSheets）：会员区的 _.css 与 md-components 都装在 ru-platform 层里，
   主题在层外的普通规则天然胜过整个平台；平台里带 !important 的声明只能在 @layer ru-first 里用 !important 压。
   所以「平台元件换皮」整段写在 ru-first、每条声明都带 !important；不碰 JS 用行内样式控制的属性
   （layer 的宽高与位置、下拉的显隐），否则会把平台的行为一起压掉。
   ========================================================================= */

/* ---------------------------------------------------------------- 1. 面板与标题 */
.ru-panel {
    position: relative;
    min-width: 0;
    padding: 18px 20px;
    border: 1px solid var(--ru-line);
    border-radius: 16px;
    background: var(--ru-paper);
    box-shadow: 0 1px 2px rgba(30, 22, 8, .04), 0 12px 30px -24px rgba(30, 22, 8, .3);
}
:root[data-theme="dark"] .ru-panel { box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 32px -22px rgba(0, 0, 0, .7); }
.ru-panel + .ru-panel, .ru-panel + .ru-stats, .ru-stats + .ru-panel, .ru-mbody > * + * { margin-top: 14px; }
.ru-panel__head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; }
.ru-panel__head h2 { margin: 0; color: var(--ru-ink); font: 700 15px/1.35 var(--ru-font-serif); letter-spacing: .03em; }
.ru-panel__more { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; color: var(--ru-mana-text); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ru-panel__more .ru-i { width: 14px; height: 14px; }
.ru-panel__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.ru-panel__note { margin-left: auto; color: var(--ru-ink-3); font-size: 12px; }
.ru-panel__lead { margin: -4px 0 14px; color: var(--ru-ink-3); font-size: 13px; }
.ru-panel--table { padding: 16px 16px 12px; }

/* 会员区的按钮与输入框比商城小一号（商城的 44px 触控尺寸留给手机端，Member.app.css 再放大回去） */
.ru-member .ru-btn, .ru-auth .ru-btn { min-height: 36px; padding: 0 16px; font-size: 13.5px; }
.ru-member .ru-btn--sm { min-height: 30px; padding: 0 12px; font-size: 12.5px; }
.ru-member .ru-btn--lg { min-height: 42px; padding: 0 22px; font-size: 14.5px; }
.ru-member .ru-btn--xl, .ru-auth .ru-btn--xl { min-height: 44px; padding: 0 24px; font-size: 15px; letter-spacing: .04em; }
.ru-member .ru-btn--icon { width: 36px; padding: 0; }
.ru-member .ru-input, .ru-member .ru-textarea, .ru-member .ru-select,
.ru-auth .ru-input, .ru-auth .ru-select { min-height: 38px; padding: 7px 12px; border-radius: 10px; font-size: 14px; }
.ru-member .ru-textarea { min-height: 80px; }
.ru-member .ru-field, .ru-auth .ru-field { gap: 6px; }
.ru-member .ru-field__label, .ru-auth .ru-field__label { font-size: 12.5px; letter-spacing: .02em; }
.ru-member .ru-field__hint { font-size: 12px; }

/* 页面顶上的一行操作按钮 */
.ru-mbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.ru-mbar .ru-btn { min-height: 32px; padding: 0 14px; font-size: 13px; }
.ru-mbar--end { justify-content: flex-end; }
.ru-mbar--gap { margin-top: 20px; }
.ru-mbar__gap { flex: 1; }
.ru-mbar__note { color: var(--ru-ink-3); font-size: 12.5px; }
.ru-mbar__title { color: var(--ru-ink); font: 700 14.5px/1.3 var(--ru-font-serif); }
.ru-btn--danger { --b-fg: var(--ru-fire); }
.ru-btn--danger:hover { --b-bg: var(--ru-fire-soft); border-color: var(--ru-fire); }
.ru-linkbtn { padding: 0; border: 0; background: none; color: var(--ru-mana-text); font: inherit; font-weight: 600; cursor: pointer; }
.ru-linkbtn:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 未读数角标 */
.ru-dotcount {
    display: inline-grid;
    place-items: center;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    border-radius: var(--ru-r-pill);
    background: var(--ru-fire);
    color: #FFFFFF;
    font: 700 10.5px/1 var(--ru-font-num);
    font-style: normal;
}

/* ---------------------------------------------------------------- 2. 数字卡 */
.ru-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ru-stat {
    display: grid;
    align-content: start;
    gap: 4px;
    min-width: 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--ru-paper-2);
    color: var(--ru-ink-3);
    font-size: 12px;
}
a.ru-stat { transition: background-color var(--ru-t2); }
a.ru-stat:hover { background: var(--ru-mana-soft); }
.ru-stat > span { font-weight: 500; }
.ru-stat > b { overflow: hidden; color: var(--ru-ink); font: 700 20px/1.2 var(--ru-font-num); letter-spacing: -.01em; white-space: nowrap; text-overflow: ellipsis; }
.ru-stat > b small { color: var(--ru-ink-3); font-size: 12.5px; font-weight: 600; }
.ru-stat--lead { background: var(--ru-mana-soft); }
.ru-stat--lead > b { color: var(--ru-mana-text); }
.ru-stat__note { color: var(--ru-ink-3); font-size: 11.5px; }
.ru-stat__note.is-alert, .ru-stat.is-alert > b { color: var(--ru-fire); }
.ru-stat__acts { display: flex; gap: 10px; margin-top: 1px; }
.ru-stat__acts a { color: var(--ru-mana-text); font-size: 12px; font-weight: 600; }
.ru-stat__acts a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ru-stats--cards .ru-stat { border: 1px solid var(--ru-line); background: var(--ru-paper); }

/* ---------------------------------------------------------------- 3. 表单 */
.ru-mform { display: grid; gap: 14px; min-width: 0; }
.ru-mform--narrow { max-width: 480px; }
.ru-mform__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 16px; }
.ru-mform__sub { margin: 6px 0 -2px; padding-top: 14px; border-top: 1px solid var(--ru-line); color: var(--ru-ink); font: 700 14px/1.3 var(--ru-font-serif); }
.ru-mform__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 4px; }
.ru-mform__hook:empty { display: none; }
.ru-field__label b { color: var(--ru-fire); }
.ru-field__label em { color: var(--ru-ink-4); font-style: normal; font-weight: 500; }
.ru-field__label small { margin-left: auto; color: var(--ru-ink-4); font-weight: 500; }
.ru-field__hint a { color: var(--ru-mana-text); font-weight: 600; }
.ru-select { padding-right: 36px; cursor: pointer; }
.ru-selectbox { position: relative; display: block; }
.ru-selectbox > .ru-i { position: absolute; right: 11px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--ru-ink-3); pointer-events: none; }
.ru-input:disabled, .ru-select:disabled { background: var(--ru-paper-2); color: var(--ru-ink-3); cursor: not-allowed; }

/* 密码栏 + 显示切换 */
.ru-pass { position: relative; display: block; }
.ru-pass .ru-input { padding-right: 42px; }
.ru-pass__eye {
    position: absolute;
    right: 3px;
    top: 50%;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--ru-ink-3);
    cursor: pointer;
}
.ru-pass__eye:hover { background: var(--ru-paper-2); color: var(--ru-ink); }
.ru-pass__eye .ru-i { width: 17px; height: 17px; }

/* 验证码栏 + 发码钮 */
.ru-sendcode { display: flex; gap: 8px; }
.ru-sendcode .ru-input { flex: 1; min-width: 0; }
.ru-sendcode .ru-btn { flex: none; min-width: 104px; min-height: 38px; }
.ru-captcha__img { width: 96px; object-fit: contain; padding: 3px 6px; }
:root[data-theme="dark"] .ru-captcha__img { border-color: transparent; }

/* 勾选框 */
.ru-check { position: relative; display: inline-flex; align-items: center; gap: 8px; color: var(--ru-ink-2); font-size: 13.5px; cursor: pointer; user-select: none; }
.ru-check input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ru-check__box {
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border: 1.5px solid var(--ru-line-2);
    border-radius: 5px;
    background: var(--ru-paper);
    color: transparent;
    transition: background-color var(--ru-t1), border-color var(--ru-t1), color var(--ru-t1);
}
.ru-check__box .ru-i { width: 12px; height: 12px; stroke-width: 2.6; }
.ru-check input:checked + .ru-check__box { border-color: var(--ru-mana); background: var(--ru-mana); color: var(--ru-mana-on); }
.ru-check input:focus-visible + .ru-check__box { box-shadow: 0 0 0 4px var(--ru-mana-soft); }

/* 开关行（店铺「显示主站商品」）：外形与平台开关一致（34 × 20） */
.ru-switchline { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--ru-line); border-radius: 12px; cursor: pointer; }
.ru-switchline input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ru-switchline__ui { position: relative; flex: none; width: 34px; height: 20px; border-radius: 10px; background: var(--ru-paper-3); box-shadow: inset 0 0 0 1px var(--ru-line-2); transition: background-color var(--ru-t2); }
.ru-switchline__ui::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform var(--ru-t2) var(--ru-ease-out); }
.ru-switchline input:checked + .ru-switchline__ui { background: var(--ru-mana); box-shadow: none; }
.ru-switchline input:checked + .ru-switchline__ui::after { transform: translateX(14px); }
.ru-switchline input:focus-visible + .ru-switchline__ui { box-shadow: 0 0 0 4px var(--ru-mana-soft); }
.ru-switchline strong { display: block; color: var(--ru-ink); font-size: 13.5px; }
.ru-switchline small { color: var(--ru-ink-3); font-size: 12px; }

/* 头像与收款码上传 */
.ru-avatarup { display: flex; align-items: center; gap: 14px; }
.ru-avatarup img { width: 60px; height: 60px; flex: none; border-radius: 16px; object-fit: cover; background: var(--ru-paper-2); box-shadow: 0 0 0 1px var(--ru-line-2); cursor: pointer; transition: box-shadow var(--ru-t2); }
.ru-avatarup img:hover { box-shadow: 0 0 0 3px var(--ru-mana); }
.ru-avatarup__copy { display: grid; gap: 2px; }
.ru-avatarup__copy strong { color: var(--ru-ink); font-size: 13.5px; }
.ru-avatarup__copy small { color: var(--ru-ink-3); font-size: 12px; }
.ru-qrup { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ru-qrup__empty, .ru-qrup__img, .ru-qrup .wechat-img {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    border-radius: 12px;
    cursor: pointer;
}
.ru-qrup__empty { gap: 6px; border: 1.5px dashed var(--ru-line-2); color: var(--ru-ink-3); font-size: 12px; align-content: center; }
.ru-qrup__empty .ru-i { width: 22px; height: 22px; }
.ru-qrup__empty:hover { border-color: var(--ru-mana); color: var(--ru-mana-text); }
.ru-qrup__img { padding: 5px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--ru-line-2); }
.ru-qrup__img canvas, .ru-qrup .wechat-img { max-width: 100%; height: auto; object-fit: contain; }

/* 子域名 + 后缀 */
.ru-domain { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.ru-domain .ru-selectbox { min-width: 160px; }
.ru-copytag { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border: 1px solid var(--ru-line-2); border-radius: 7px; background: var(--ru-paper-2); color: var(--ru-ink-2); font: inherit; cursor: pointer; }
.ru-copytag code { font: 500 12px/1.4 var(--ru-font-mono); }
.ru-copytag .ru-i { width: 13px; height: 13px; }
.ru-copytag:hover { border-color: var(--ru-mana); color: var(--ru-mana-text); }

/* ---------------------------------------------------------------- 4. 分段页签 / 键值列表 */
.ru-subtab {
    display: flex;
    gap: 3px;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 16px;
    padding: 3px;
    overflow-x: auto;
    border-radius: 11px;
    background: var(--ru-paper-2);
    scrollbar-width: none;
}
.ru-subtab::-webkit-scrollbar { display: none; }
.ru-subtab > a, .ru-subtab > button {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--ru-ink-3);
    font: 600 13px/1 var(--ru-font-sans);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--ru-t2), color var(--ru-t2);
}
.ru-subtab > a:hover, .ru-subtab > button:hover { color: var(--ru-ink); }
.ru-subtab > a.active, .ru-subtab > .is-on { background: var(--ru-paper); color: var(--ru-ink); box-shadow: var(--ru-shadow-1); }
.uc-tabpanel { display: none; }
.uc-tabpanel.active { display: block; }
[data-ru-tab-now="goods"] .ru-tabs__save { display: none; }

.ru-kv { display: grid; gap: 0; margin: 0; }
.ru-kv > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--ru-line); }
.ru-kv > div:last-child { border-bottom: 0; }
.ru-kv dt { color: var(--ru-ink-3); font-size: 13px; }
.ru-kv dd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; margin: 0; color: var(--ru-ink); font-size: 13.5px; overflow-wrap: anywhere; }
.ru-kv__muted { color: var(--ru-ink-3); font-size: 12px; }
.ru-kv__warn { padding: 1px 8px; border-radius: var(--ru-r-pill); background: var(--ru-earth-soft); color: var(--ru-earth); font-size: 11.5px; font-weight: 600; }
.ru-kv__code { padding: 3px 9px; border-radius: 7px; background: var(--ru-paper-2); color: var(--ru-ink); font: 500 12.5px/1.4 var(--ru-font-mono); word-break: break-all; }
.ru-kv--tight > div { grid-template-columns: auto minmax(0, 1fr); padding: 8px 0; }
.ru-kv--tight dt { white-space: nowrap; }
.ru-kv--tight dd { justify-content: flex-end; font-weight: 600; text-align: right; }
.ru-kv--tight dd small { flex-basis: 100%; color: var(--ru-ink-3); font-size: 11.5px; font-weight: 500; }

/* 表格外框（真表格与手机卡片都放在这里） */
.ru-tablebox { min-width: 0; }

/* ---------------------------------------------------------------- 5. 会员主页 */
.ru-biz { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.ru-chart { margin: 0; padding: 12px 14px 10px; border-radius: 12px; background: var(--ru-paper-2); }
.ru-chart figcaption { color: var(--ru-ink-3); font-size: 12px; font-weight: 600; }
.ru-chart__bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; height: 140px; margin-top: 10px; }
.ru-chart__col { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; gap: 5px; height: 100%; }
.ru-chart__col i { align-self: end; width: min(100%, 26px); height: var(--h, 3%); min-height: 3px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--ru-mana), var(--ru-mana-deep)); opacity: .82; transition: opacity var(--ru-t2); }
.ru-chart__col:hover i { opacity: 1; }
.ru-chart__val { color: var(--ru-ink-3); font-size: 10.5px; white-space: nowrap; opacity: 0; transition: opacity var(--ru-t2); }
.ru-chart__col:hover .ru-chart__val { opacity: 1; }
.ru-chart__day { color: var(--ru-ink-3); font: 500 10.5px/1 var(--ru-font-num); }
.ru-sales h3 { margin: 0 0 8px; color: var(--ru-ink-3); font-size: 12px; font-weight: 600; }
.ru-sales ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ru-sales li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--ru-line); }
.ru-sales li:last-child { border-bottom: 0; }
.ru-sales img, .ru-sales__ph { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; background: var(--ru-paper-2); }
.ru-sales__ph { display: grid; place-items: center; color: var(--ru-ink-4); }
.ru-sales__ph .ru-i { width: 16px; height: 16px; }
.ru-sales__main { display: grid; gap: 1px; min-width: 0; }
.ru-sales__main b { overflow: hidden; color: var(--ru-ink); font-size: 13px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.ru-sales__main small { color: var(--ru-ink-3); font-size: 11.5px; }
.ru-sales__amt { display: grid; justify-items: end; gap: 1px; color: var(--ru-ink); font: 700 14px/1.2 var(--ru-font-num); }
.ru-sales__amt small { color: var(--ru-wind); font: 600 11px/1.2 var(--ru-font-sans); }
.ru-sales__empty { margin: 0; padding: 14px 0; color: var(--ru-ink-3); font-size: 12.5px; }

/* ---------------------------------------------------------------- 6. 充值 / 兑现 */
.ru-topup { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.ru-topup > .ru-panel + .ru-panel { margin-top: 0; }
.ru-topup__block + .ru-topup__block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ru-line); }
.ru-topup__title { margin: 0 0 10px; color: var(--ru-ink); font: 700 14.5px/1.3 var(--ru-font-serif); }
.ru-topup__presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.uc-topup-preset {
    display: grid;
    grid-auto-flow: column;
    place-content: center;
    align-items: baseline;
    gap: 2px;
    min-height: 44px;
    border: 1.5px solid var(--ru-line-2);
    border-radius: 12px;
    background: var(--ru-paper);
    color: var(--ru-ink);
    cursor: pointer;
    transition: border-color var(--ru-t2), background-color var(--ru-t2), color var(--ru-t2);
}
.uc-topup-preset small { color: var(--ru-ink-3); font-size: 12px; }
.uc-topup-preset b { font: 700 17px/1 var(--ru-font-num); }
.uc-topup-preset:hover { border-color: var(--ru-mana); }
.uc-topup-preset.active { border-color: var(--ru-mana); background: var(--ru-mana-soft); color: var(--ru-mana-text); }
.uc-topup-preset.active small { color: inherit; }
.ru-topup__amount { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 0 12px 0 14px; border: 1.5px solid var(--ru-line-2); border-radius: 12px; background: var(--ru-paper); transition: border-color var(--ru-t2), box-shadow var(--ru-t2); }
.ru-topup__amount:focus-within { border-color: var(--ru-mana); box-shadow: 0 0 0 4px var(--ru-mana-soft); }
.ru-topup__amount input { flex: 1; min-width: 0; height: 44px; border: 0; background: none; color: var(--ru-ink); font: 700 19px/1 var(--ru-font-num); outline: none; }
.ru-topup__cur, .ru-topup__unit { color: var(--ru-ink-3); font-size: 14px; font-weight: 600; }
.ru-topup__limit { margin: 8px 0 0; color: var(--ru-ink-3); font-size: 12px; }
.ru-topup__limit a { color: var(--ru-mana-text); font-weight: 600; }
.ru-topup__bonuses { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.uc-topup-bonus { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--ru-r-pill); background: var(--ru-earth-soft); color: var(--ru-earth); font-size: 12px; font-weight: 600; transition: background-color var(--ru-t2), color var(--ru-t2); }
.uc-topup-bonus.active, .uc-topup-bonus.is-hit, .uc-topup-bonus.is-active { background: var(--ru-earth); color: #FFFFFF; }

/* 支付通道（平台追加 a.btn-pay，行内写死了颜色，只能 important 压） */
.ru-paylist { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.ru-paylist:empty::before { content: ""; display: block; height: 44px; border-radius: 12px; background: var(--ru-paper-2); animation: ru-mpulse 1.4s ease-in-out infinite; }
@keyframes ru-mpulse { 50% { opacity: .5; } }
@layer ru-first {
    :root[data-theme] .ru-paylist .btn-pay {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        gap: 9px !important;
        min-height: 44px !important;
        margin: 0 !important;
        padding: 6px 12px !important;
        border: 1.5px solid var(--ru-line-2) !important;
        border-radius: 12px !important;
        background: var(--ru-paper) !important;
        color: var(--ru-ink) !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        box-shadow: none !important;
        cursor: pointer;
        transition: border-color var(--ru-t2), background-color var(--ru-t2);
    }
    :root[data-theme] .ru-paylist .btn-pay:hover { border-color: var(--ru-mana) !important; }
    :root[data-theme] .ru-paylist .btn-pay.checked { border-color: var(--ru-mana) !important; background: var(--ru-mana-soft) !important; color: var(--ru-mana-text) !important; }
    :root[data-theme] .ru-paylist .btn-pay .pay-icon { width: 22px !important; height: 22px !important; flex: none; margin: 0 !important; border-radius: 5px; object-fit: contain; }
}

/* 右侧摘要 */
.ru-topup__hero { display: grid; gap: 4px; margin-bottom: 6px; }
.ru-topup__hero > span { color: var(--ru-ink-3); font-size: 12.5px; }
.ru-topup__hero strong { color: var(--ru-ink); font: 700 28px/1.1 var(--ru-font-num); letter-spacing: -.01em; }
.ru-topup__hero strong small { margin-right: 2px; color: var(--ru-ink-3); font-size: 16px; }
.ru-topup__status { margin: 12px 0; padding: 8px 12px; border-radius: 10px; background: var(--ru-paper-2); color: var(--ru-ink-3); font-size: 12.5px; }
.ru-topup__status.is-ready, .ru-topup__status.is-ok { background: var(--ru-wind-soft); color: var(--ru-wind); }
.ru-topup__status.is-error { background: var(--ru-fire-soft); color: var(--ru-fire); }
.ru-topup__note { margin: 10px 0 0; color: var(--ru-ink-4); font-size: 11.5px; line-height: 1.6; }

/* 兑现方式 */
.ru-cashx__stats { margin-bottom: 16px; }
.ru-cashx__methods { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.ru-method {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 8px 36px 8px 12px;
    border: 1.5px solid var(--ru-line-2);
    border-radius: 12px;
    background: var(--ru-paper);
    color: var(--ru-ink);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--ru-t2), background-color var(--ru-t2);
}
.ru-method img { width: 24px; height: 24px; flex: none; object-fit: contain; }
.ru-method__copy { display: grid; gap: 1px; min-width: 0; }
.ru-method__copy strong { font-size: 13.5px; }
.ru-method__copy small { color: var(--ru-ink-3); font-size: 11.5px; }
.ru-method__check { position: absolute; right: 10px; top: 50%; display: grid; place-items: center; width: 18px; height: 18px; margin-top: -9px; 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-method__check .ru-i { width: 12px; height: 12px; stroke-width: 2.6; }
.ru-method:hover { border-color: var(--ru-mana); }
.ru-method.checked { border-color: var(--ru-mana); background: var(--ru-mana-soft); }
.ru-method.checked .ru-method__check { opacity: 1; transform: none; }
.ru-method.is-unbound { opacity: .62; }

/* 会员等级 */
.ru-grow__now { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--ru-ink-2); font-size: 12.5px; font-weight: 600; }
.ru-grow__bar { height: 6px; overflow: hidden; border-radius: 3px; background: var(--ru-paper-2); }
.ru-grow__bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ru-mana), var(--ru-mana-2, var(--ru-mana))); }
.ru-grow__foot { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 0; color: var(--ru-ink-2); font-size: 12.5px; }
.ru-grow__foot b { color: var(--ru-ink); }
.ru-grow__tip { margin-left: auto; color: var(--ru-ink-4); font-size: 11.5px; }
.ru-grow__levels { display: flex; gap: 6px; margin: 12px 0 0; padding: 0; overflow-x: auto; list-style: none; scrollbar-width: none; }
.ru-grow__levels::-webkit-scrollbar { display: none; }
.ru-grow__levels li { display: grid; justify-items: center; gap: 3px; flex: 1 0 88px; padding: 10px 6px; border: 1px solid var(--ru-line); border-radius: 12px; color: var(--ru-ink-3); text-align: center; }
.ru-grow__levels li b { color: var(--ru-ink-2); font-size: 12.5px; }
.ru-grow__levels li small { font-size: 11px; }
.ru-grow__levels li.is-on { background: var(--ru-paper-2); }
.ru-grow__levels li.is-current { border-color: var(--ru-mana); background: var(--ru-mana-soft); }
.ru-grow__levels li.is-current b { color: var(--ru-mana-text); }

/* ---------------------------------------------------------------- 7. 店铺套餐 / 推广 */
.ru-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ru-plan {
    position: relative;
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 16px;
    border: 1.5px solid var(--ru-line-2);
    border-radius: 14px;
    background: var(--ru-paper);
    color: var(--ru-ink);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--ru-t2), background-color var(--ru-t2), transform var(--ru-t2) var(--ru-ease-out);
}
.ru-plan:hover { border-color: var(--ru-mana); transform: translateY(-2px); }
.ru-plan.checked { border-color: var(--ru-mana); background: var(--ru-mana-soft); }
.ru-plan.is-reco { border-color: var(--ru-gilt); }
.ru-plan__badge { position: absolute; right: 12px; top: 12px; padding: 1px 9px; border-radius: var(--ru-r-pill); background: var(--ru-gilt); color: #2B1D06; font-size: 11px; font-weight: 700; }
.ru-plan__head { display: flex; align-items: center; gap: 8px; }
.ru-plan__head img { width: 24px; height: 24px; border-radius: 6px; object-fit: contain; }
.ru-plan__head b { font: 700 15px/1.3 var(--ru-font-serif); }
.ru-plan__price { color: var(--ru-ink); font: 700 25px/1 var(--ru-font-num); }
.ru-plan__price small { margin-right: 2px; color: var(--ru-ink-3); font-size: 14px; }
.ru-plan__feats, .ru-bizlv__feats { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.ru-plan__feats li, .ru-bizlv__feats li { position: relative; padding-left: 18px; color: var(--ru-ink-4); font-size: 12.5px; text-decoration: line-through; }
.ru-plan__feats li::before, .ru-bizlv__feats li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--ru-line-2); }
.ru-plan__feats li.is-on, .ru-bizlv__feats li.is-on { color: var(--ru-ink-2); text-decoration: none; }
.ru-plan__feats li.is-on::before, .ru-bizlv__feats li.is-on::before { background: var(--ru-wind); }
.ru-plan__feats small { margin-left: 6px; color: var(--ru-ink-3); }
.ru-plan__pick { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; 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-plan__pick .ru-i { width: 13px; height: 13px; stroke-width: 2.6; }
.ru-plan.checked .ru-plan__pick { opacity: 1; transform: none; }
.ru-bizlv { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.ru-bizlv__who { display: flex; align-items: center; gap: 10px; }
.ru-bizlv__who img { width: 32px; height: 32px; border-radius: 8px; object-fit: contain; }
.ru-bizlv__who span { display: grid; gap: 1px; }
.ru-bizlv__who small { color: var(--ru-ink-3); font-size: 11.5px; }
.ru-bizlv__who b { color: var(--ru-ink); font: 700 15px/1.3 var(--ru-font-serif); }
.ru-bizlv__feats { grid-auto-flow: column; gap: 16px; }
.ru-bizlv > .ru-btn { margin-left: auto; }

.ru-promo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ru-promo__title { margin: 0 0 10px; color: var(--ru-ink); font: 700 15px/1.3 var(--ru-font-serif); }
.ru-promo__link { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ru-promo__url { flex: 1 1 240px; min-width: 0; padding: 9px 12px; border-radius: 10px; background: var(--ru-paper-2); color: var(--ru-ink); font: 500 12.5px/1.4 var(--ru-font-mono); word-break: break-all; }
.ru-promo__rule { margin: 12px 0 0; color: var(--ru-ink-3); font-size: 12.5px; line-height: 1.7; }
.ru-promo__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 0; color: var(--ru-ink-3); font-size: 12.5px; line-height: 1.7; }
.ru-promo__meta b { color: var(--ru-ink); }
.ru-promo__qr { display: grid; justify-items: center; gap: 4px; margin: 0; }
.ru-promo__qr #share-qrcode { padding: 6px; border-radius: 12px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--ru-line-2); line-height: 0; }
.ru-promo__qr #share-qrcode canvas, .ru-promo__qr #share-qrcode img { width: 112px !important; height: 112px !important; }
.ru-promo__qr figcaption { color: var(--ru-ink-3); font-size: 11.5px; }

/* ---------------------------------------------------------------- 8. 工单 */
.ru-tstats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.uc-ticket-stat {
    display: grid;
    gap: 3px;
    padding: 10px 12px;
    border: 1.5px solid var(--ru-line);
    border-radius: 12px;
    background: var(--ru-paper);
    color: var(--ru-ink-3);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--ru-t2), background-color var(--ru-t2);
}
.uc-ticket-stat small { font-size: 12px; }
.uc-ticket-stat strong { color: var(--ru-ink); font: 700 19px/1.1 var(--ru-font-num); }
.uc-ticket-stat:hover { border-color: var(--ru-line-2); }
.uc-ticket-stat.is-active { border-color: var(--ru-mana); background: var(--ru-mana-soft); }
.uc-ticket-stat.is-active strong { color: var(--ru-mana-text); }
.uc-ticket-board { scroll-margin-top: 96px; }
.ru-tbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.uc-ticket-search { position: relative; display: flex; flex: 1 1 220px; align-items: center; gap: 8px; min-width: 0; height: 36px; padding: 0 6px 0 12px; border: 1px solid var(--ru-line-2); border-radius: var(--ru-r-pill); background: var(--ru-paper); color: var(--ru-ink-3); }
.uc-ticket-search:focus-within { border-color: var(--ru-mana); box-shadow: 0 0 0 4px var(--ru-mana-soft); }
.uc-ticket-search > .ru-i { width: 16px; height: 16px; flex: none; }
.uc-ticket-search input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ru-ink); font-size: 13.5px; outline: none; }
.uc-ticket-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.uc-ticket-search__clear { display: none; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: var(--ru-paper-2); color: var(--ru-ink-3); cursor: pointer; }
.uc-ticket-search__clear .ru-i { width: 13px; height: 13px; }
.uc-ticket-search.has-value .uc-ticket-search__clear { display: grid; }
.ru-tselect { position: relative; flex: none; }
.ru-tselect select { height: 36px; padding: 0 34px 0 14px; border: 1px solid var(--ru-line-2); border-radius: var(--ru-r-pill); background: var(--ru-paper); color: var(--ru-ink); font-size: 13.5px; -webkit-appearance: none; appearance: none; cursor: pointer; }
.ru-tselect > .ru-i { position: absolute; right: 11px; top: 50%; width: 15px; height: 15px; margin-top: -7.5px; color: var(--ru-ink-3); pointer-events: none; }
.uc-ticket-loading { display: grid; gap: 8px; }
.ru-tskel { height: 72px; border-radius: 12px; }
.uc-ticket-list { display: grid; gap: 8px; }
.uc-ticket-row {
    position: relative;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 11px 14px 11px 18px;
    overflow: hidden;
    border: 1px solid var(--ru-line);
    border-radius: 12px;
    background: var(--ru-paper);
    color: var(--ru-ink);
    transition: border-color var(--ru-t2), box-shadow var(--ru-t2), transform var(--ru-t2) var(--ru-ease-out);
}
.uc-ticket-row:hover { border-color: var(--ru-line-2); box-shadow: var(--ru-shadow-1); transform: translateY(-1px); }
.uc-ticket-row.has-unread { border-color: var(--ru-mana); }
.uc-ticket-row__rail { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ru-ink-4); }
.uc-ticket-row__rail.is-waiting { background: var(--ru-earth); }
.uc-ticket-row__rail.is-reply { background: var(--ru-mana); }
.uc-ticket-row__rail.is-resolved { background: var(--ru-wind); }
.uc-ticket-row__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--ru-paper-2); color: var(--ru-ink-3); }
.uc-ticket-row__icon.is-presale { background: var(--ru-water-soft); color: var(--ru-water); }
.uc-ticket-row__icon.is-aftersale { background: var(--ru-earth-soft); color: var(--ru-earth); }
.uc-ticket-row__icon .material-icons-outlined { font-size: 19px; }
.uc-ticket-row__main { display: grid; gap: 3px; min-width: 0; }
.uc-ticket-row__top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ru-ink-3); font-size: 11.5px; }
.uc-ticket-row__number { font: 600 11.5px/1 var(--ru-font-num); }
.uc-ticket-row__unread { display: inline-flex; align-items: center; padding: 0 7px; border-radius: var(--ru-r-pill); background: var(--ru-fire); color: #FFFFFF; font-size: 10.5px; font-weight: 700; line-height: 1.6; white-space: nowrap; }
.uc-ticket-row__title { overflow: hidden; color: var(--ru-ink); font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.uc-ticket-row__excerpt { display: -webkit-box; overflow: hidden; color: var(--ru-ink-3); font-size: 12.5px; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.uc-ticket-row__excerpt b { color: var(--ru-ink-2); font-weight: 600; }
.uc-ticket-row__bottom { display: flex; flex-wrap: wrap; gap: 3px 12px; color: var(--ru-ink-4); font-size: 11.5px; }
.uc-ticket-row__context, .uc-ticket-row__time { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.uc-ticket-row__bottom .material-icons-outlined { font-size: 13px; }
.uc-ticket-row__context.is-empty { display: none; }
.uc-ticket-row__context em { font-style: normal; color: var(--ru-ink-3); }
.uc-ticket-row__go { color: var(--ru-ink-4); }
.uc-ticket-row__go .material-icons-outlined { font-size: 18px; }
.uc-ticket-pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: var(--ru-r-pill); background: var(--ru-paper-2); color: var(--ru-ink-3); font-size: 11px; font-weight: 600; line-height: 1.5; }
.uc-ticket-pill .material-icons-outlined { font-size: 12px; }
.uc-ticket-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.uc-ticket-pill.is-presale { background: var(--ru-water-soft); color: var(--ru-water); }
.uc-ticket-pill.is-aftersale { background: var(--ru-earth-soft); color: var(--ru-earth); }
.uc-ticket-pill.is-low { color: var(--ru-ink-3); }
.uc-ticket-pill.is-medium { background: var(--ru-earth-soft); color: var(--ru-earth); }
.uc-ticket-pill.is-high { background: var(--ru-fire-soft); color: var(--ru-fire); }
.uc-ticket-pill.is-waiting { background: var(--ru-earth-soft); color: var(--ru-earth); }
.uc-ticket-pill.is-reply { background: var(--ru-mana-soft); color: var(--ru-mana-text); }
.uc-ticket-pill.is-resolved { background: var(--ru-wind-soft); color: var(--ru-wind); }
.uc-ticket-pill.is-closed { color: var(--ru-ink-4); }
.uc-ticket-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; color: var(--ru-ink-3); font-size: 12.5px; }

/* 创建工单 */
.ru-tform { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.ru-tstep + .ru-tstep { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ru-line); }
.ru-tstep__head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.ru-tstep__head > span:last-child { display: grid; gap: 2px; }
.ru-tstep__head strong { color: var(--ru-ink); font: 700 14.5px/1.35 var(--ru-font-serif); }
.ru-tstep__head small { color: var(--ru-ink-3); font-size: 12px; }
.ru-tstep__no { display: grid; flex: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ru-mana); color: var(--ru-mana-on); font: 700 12px/1 var(--ru-font-num); }
.ru-ttypes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.uc-ticket-type {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 40px 11px 12px;
    border: 1.5px solid var(--ru-line-2);
    border-radius: 12px;
    background: var(--ru-paper);
    color: var(--ru-ink);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--ru-t2), background-color var(--ru-t2);
}
.uc-ticket-type:hover { border-color: var(--ru-mana); }
.uc-ticket-type.is-active { border-color: var(--ru-mana); background: var(--ru-mana-soft); }
.ru-ttype__icon { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--ru-paper-2); color: var(--ru-ink-2); }
.ru-ttype__icon .ru-i { width: 18px; height: 18px; }
.uc-ticket-type.is-active .ru-ttype__icon { background: var(--ru-mana); color: var(--ru-mana-on); }
.ru-ttype__copy { display: grid; gap: 1px; }
.ru-ttype__copy strong { font-size: 13.5px; }
.ru-ttype__copy small { color: var(--ru-ink-3); font-size: 12px; }
.ru-ttype__check { position: absolute; right: 12px; top: 50%; display: grid; place-items: center; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--ru-mana); color: var(--ru-mana-on); opacity: 0; transition: opacity var(--ru-t2); }
.ru-ttype__check .ru-i { width: 12px; height: 12px; stroke-width: 2.6; }
.uc-ticket-type.is-active .ru-ttype__check { opacity: 1; }
.uc-ticket-relation { display: grid; gap: 6px; }
.ru-tmodes { display: inline-flex; gap: 3px; margin-bottom: 12px; padding: 3px; border-radius: 10px; background: var(--ru-paper-2); }
.ru-tmodes button { min-height: 30px; padding: 0 12px; border: 0; border-radius: 8px; background: none; color: var(--ru-ink-3); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ru-tmodes button.is-active { background: var(--ru-paper); color: var(--ru-ink); box-shadow: var(--ru-shadow-1); }
.ru-tpanel { display: grid; gap: 6px; }
.uc-ticket-order-picked { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--ru-paper-2); font-size: 12.5px; }
.uc-ticket-order-picked img { width: 32px; height: 32px; border-radius: 7px; object-fit: cover; }
.uc-ticket-order-picked span { display: grid; gap: 1px; min-width: 0; }
.uc-ticket-order-picked small, .uc-ticket-order-picked em { color: var(--ru-ink-3); font-style: normal; font-size: 11.5px; }
.ru-tproof { display: grid; gap: 6px; margin-top: 12px; }
.uc-ticket-proof__drop { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px; border: 1.5px dashed var(--ru-line-2); border-radius: 12px; background: var(--ru-paper); color: var(--ru-ink-2); text-align: left; cursor: pointer; transition: border-color var(--ru-t2), background-color var(--ru-t2); }
.uc-ticket-proof__drop:hover { border-color: var(--ru-mana); background: var(--ru-mana-soft); }
.uc-ticket-proof__drop.is-uploading { opacity: .7; cursor: progress; }
.ru-tproof__icon { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--ru-paper-2); }
.ru-tproof__icon .ru-i { width: 18px; height: 18px; }
.uc-ticket-proof__copy { display: grid; gap: 1px; }
.uc-ticket-proof__copy strong { color: var(--ru-ink); font-size: 13.5px; }
.uc-ticket-proof__copy small { color: var(--ru-ink-3); font-size: 11.5px; }
.uc-ticket-proof__preview { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--ru-line); border-radius: 12px; }
.uc-ticket-proof__preview img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; }
.ru-tproof__meta { display: grid; flex: 1; gap: 1px; min-width: 0; }
.ru-tproof__meta small { overflow: hidden; color: var(--ru-ink-3); font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; }
.uc-ticket-proof__remove { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: var(--ru-fire-soft); color: var(--ru-fire); cursor: pointer; }
.uc-ticket-proof__remove .ru-i { width: 15px; height: 15px; }
.ru-tprio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ru-tprio button { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1.5px solid var(--ru-line-2); border-radius: 12px; background: var(--ru-paper); color: var(--ru-ink); text-align: left; cursor: pointer; transition: border-color var(--ru-t2), background-color var(--ru-t2); }
.ru-tprio button > span { display: grid; gap: 1px; }
.ru-tprio button strong { font-size: 13px; }
.ru-tprio button small { color: var(--ru-ink-3); font-size: 11px; }
.ru-tprio button.is-active { border-color: var(--ru-mana); background: var(--ru-mana-soft); }
.ru-tprio__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.ru-tprio__dot.is-low { background: var(--ru-wind); }
.ru-tprio__dot.is-medium { background: var(--ru-earth); }
.ru-tprio__dot.is-high { background: var(--ru-fire); }
.uc-ticket-char-count i { font-style: normal; }
.ru-tsum__rows { display: grid; gap: 0; margin-bottom: 14px; }
.ru-tsum__rows > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--ru-line); color: var(--ru-ink-3); font-size: 12.5px; }
.ru-tsum__rows strong { color: var(--ru-ink); font-size: 13px; text-align: right; }
.ru-tsum__rows strong.is-ready { color: var(--ru-wind); }
.uc-ticket-summary__type > div { display: inline-flex; align-items: center; gap: 6px; }
.uc-ticket-summary__type .material-icons-outlined { color: var(--ru-mana-text); font-size: 16px; }
.ru-tsum__note { display: flex; gap: 8px; margin: 12px 0 0; color: var(--ru-ink-3); font-size: 11.5px; line-height: 1.6; }
.ru-tsum__note .ru-i { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.uc-ticket-submit.is-loading { opacity: .75; pointer-events: none; }

/* 工单详情 */
.ru-tdetail { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.ru-tthread { padding: 0; overflow: hidden; }
.ru-tthread__head { display: grid; gap: 8px; padding: 16px 20px 14px; border-bottom: 1px solid var(--ru-line); }
.ru-tthread__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.uc-ticket-detail-number { color: var(--ru-ink-3); font: 600 12px/1 var(--ru-font-num); }
.uc-ticket-detail-title { margin: 0; color: var(--ru-ink); font: 700 18px/1.35 var(--ru-font-serif); overflow-wrap: anywhere; }
.uc-ticket-detail-state { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--ru-paper-2); }
.uc-ticket-detail-state__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--ru-paper); color: var(--ru-ink-3); }
.uc-ticket-detail-state__icon .material-icons-outlined { font-size: 16px; }
.ru-tstate__copy { display: grid; flex: 1; gap: 1px; min-width: 0; }
.uc-ticket-detail-status { color: var(--ru-ink); font-size: 13.5px; }
.uc-ticket-detail-state__hint { color: var(--ru-ink-3); font-size: 12px; }
.uc-ticket-detail-state.is-waiting .uc-ticket-detail-state__icon { background: var(--ru-earth-soft); color: var(--ru-earth); }
.uc-ticket-detail-state.is-reply .uc-ticket-detail-state__icon { background: var(--ru-mana-soft); color: var(--ru-mana-text); }
.uc-ticket-detail-state.is-resolved .uc-ticket-detail-state__icon { background: var(--ru-wind-soft); color: var(--ru-wind); }
.uc-ticket-live { display: inline-flex; align-items: center; gap: 6px; color: var(--ru-ink-3); font-size: 11.5px; }
.uc-ticket-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ru-wind); box-shadow: 0 0 0 3px var(--ru-wind-soft); }
.uc-ticket-live.is-archived i { background: var(--ru-ink-4); box-shadow: none; }
.ru-tthread__body { display: grid; gap: 12px; padding: 16px 20px; }
.uc-ticket-history-more, .uc-ticket-new-messages { justify-self: center; }
.uc-ticket-messages { display: grid; gap: 14px; }
.uc-ticket-message { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start; }
.uc-ticket-message__avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ru-paper-2); color: var(--ru-ink-3); }
.uc-ticket-message__avatar .material-icons-outlined { font-size: 17px; }
.uc-ticket-message.is-admin .uc-ticket-message__avatar { background: var(--ru-mana); color: var(--ru-mana-on); }
.uc-ticket-message__main { display: grid; gap: 5px; min-width: 0; }
.uc-ticket-message__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--ru-ink-3); font-size: 11.5px; }
.uc-ticket-message__meta strong { color: var(--ru-ink); font-size: 13px; }
.uc-ticket-message__meta > span:not(.uc-ticket-final) { padding: 0 6px; border-radius: 6px; background: var(--ru-mana-soft); color: var(--ru-mana-text); font-weight: 600; }
.uc-ticket-final { display: inline-flex; align-items: center; gap: 3px; color: var(--ru-wind); font-weight: 600; }
.uc-ticket-final .material-icons-outlined { font-size: 13px; }
.uc-ticket-message__meta time { margin-left: auto; }
.uc-ticket-message__bubble { justify-self: start; max-width: 100%; padding: 10px 14px; border-radius: 4px 16px 16px 16px; background: var(--ru-paper-2); color: var(--ru-ink); }
.uc-ticket-message.is-admin .uc-ticket-message__bubble { border: 1px solid var(--ru-mana-soft); background: var(--ru-mana-soft); }
.uc-ticket-event { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--ru-paper-2); color: var(--ru-ink-3); font-size: 12.5px; }
.uc-ticket-event > .material-icons-outlined { font-size: 16px; }
.uc-ticket-event strong { color: var(--ru-ink-2); }
.uc-ticket-event time { display: block; margin-top: 2px; font-size: 11px; }
.uc-ticket-markdown { font-size: 13.5px; line-height: 1.7; overflow-wrap: anywhere; }
.uc-ticket-markdown > :first-child { margin-top: 0; }
.uc-ticket-markdown > :last-child { margin-bottom: 0; }
.uc-ticket-markdown p { margin: 0 0 .6em; }
.uc-ticket-markdown ul, .uc-ticket-markdown ol { margin: 0 0 .6em; padding-left: 1.4em; }
.uc-ticket-markdown blockquote { margin: 0 0 .6em; padding: 4px 12px; border-left: 3px solid var(--ru-line-2); color: var(--ru-ink-3); }
.uc-ticket-markdown pre { margin: 0 0 .6em; padding: 8px 10px; overflow-x: auto; border-radius: 8px; background: var(--ru-paper); font: 12.5px/1.6 var(--ru-font-mono); }
.uc-ticket-markdown code { font-family: var(--ru-font-mono); font-size: .92em; }
.uc-ticket-markdown :not(pre) > code { padding: 1px 6px; border-radius: 5px; background: var(--ru-paper); }
.uc-ticket-markdown table { width: 100%; margin: 0 0 .6em; border-collapse: collapse; font-size: 12.5px; }
.uc-ticket-markdown th, .uc-ticket-markdown td { padding: 5px 8px; border: 1px solid var(--ru-line); text-align: left; }
.uc-ticket-markdown a { color: var(--ru-mana-text); text-decoration: underline; text-underline-offset: 3px; }
.uc-ticket-markdown img { max-width: 100%; height: auto; border-radius: 8px; cursor: zoom-in; }
.uc-ticket-reply { display: grid; gap: 10px; padding: 14px 20px 18px; border-top: 1px solid var(--ru-line); background: var(--ru-paper); }
.ru-treply__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ru-treply__tip { color: var(--ru-ink-4); font-size: 11.5px; }
.uc-ticket-reply__submit.is-loading, .uc-ticket-history-more.is-loading { opacity: .7; pointer-events: none; }
.uc-ticket-readonly { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--ru-line); background: var(--ru-paper-2); color: var(--ru-ink-3); font-size: 12.5px; }
.uc-ticket-readonly > .ru-i { width: 18px; height: 18px; }
.uc-ticket-readonly > span { display: grid; flex: 1; gap: 2px; min-width: 200px; }
.uc-ticket-readonly strong { color: var(--ru-ink); font-size: 13.5px; }
.ru-tdetail__side { display: grid; gap: 12px; }
.ru-tdetail__side .ru-panel + .ru-panel { margin-top: 0; }
.ru-tinfo { padding: 14px 16px; }
.ru-tinfo .ru-panel__head { margin-bottom: 6px; }
.ru-tinfo__rows { display: grid; margin: 0; }
.ru-tinfo__rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--ru-line); font-size: 12.5px; }
.ru-tinfo__rows > div:last-child { border-bottom: 0; }
.ru-tinfo__rows dt { color: var(--ru-ink-3); }
.ru-tinfo__rows dd { margin: 0; color: var(--ru-ink); text-align: right; }
.uc-ticket-related__item { display: flex; align-items: center; gap: 10px; }
.uc-ticket-related__item img, .uc-ticket-related__order-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 8px; object-fit: cover; background: var(--ru-paper-2); color: var(--ru-ink-3); }
.uc-ticket-related__item > span { display: grid; gap: 1px; min-width: 0; font-size: 12.5px; }
.uc-ticket-related__item small, .uc-ticket-related__item em { color: var(--ru-ink-3); font-style: normal; font-size: 11.5px; }
.uc-ticket-related__item strong { overflow: hidden; color: var(--ru-ink); white-space: nowrap; text-overflow: ellipsis; }
.uc-ticket-proof-view { display: grid; gap: 6px; width: 100%; padding: 0; border: 0; background: none; color: var(--ru-ink-3); font-size: 11.5px; cursor: zoom-in; }
.uc-ticket-proof-view img { width: 100%; max-height: 200px; border-radius: 10px; object-fit: cover; }
.uc-ticket-detail-loading, .uc-ticket-detail-error { padding: 48px 20px; }

/* ---------------------------------------------------------------- 9. 消息 */
.uc-message-cell { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.uc-message-cell__dot { flex: none; width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; background: transparent; }
.uc-message-cell.is-unread .uc-message-cell__dot { background: var(--ru-fire); }
.uc-message-cell__copy { display: grid; gap: 1px; min-width: 0; }
.uc-message-cell__copy strong { color: var(--ru-ink); font-weight: 600; }
.uc-message-cell:not(.is-unread) .uc-message-cell__copy strong { color: var(--ru-ink-2); font-weight: 500; }
.uc-message-cell__copy small { overflow: hidden; color: var(--ru-ink-3); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.uc-message-status { display: inline-flex; padding: 1px 8px; border-radius: var(--ru-r-pill); font-size: 11.5px; font-weight: 600; }
.uc-message-status.is-unread { background: var(--ru-fire-soft); color: var(--ru-fire); }
.uc-message-status.is-read { background: var(--ru-paper-2); color: var(--ru-ink-3); }

/* ============================================================================
   10–13. 平台元件换皮（全部在 ru-first，每条声明 !important，见文件开头的级联说明）
   ========================================================================= */

/* ---------------------------------------------------------------- 10. 平台表格（bootstrap-table） */
@layer ru-first {
    :root[data-theme] .ru-tablebox .bootstrap-table { color: var(--ru-ink) !important; }
    :root[data-theme] .ru-tablebox .fixed-table-container { border: 0 !important; border-radius: 0 !important; background: transparent !important; }
    :root[data-theme] .ru-tablebox .fixed-table-toolbar { margin: 0 !important; padding: 0 !important; }
    :root[data-theme] .ru-tablebox .fixed-table-toolbar .bs-bars { float: none !important; width: 100% !important; margin: 0 0 10px !important; }
    :root[data-theme] .ru-tablebox .fixed-table-toolbar .columns,
    :root[data-theme] .ru-tablebox .fixed-table-toolbar .search { margin: 0 0 10px !important; }

    :root[data-theme] .ru-tablebox .table {
        margin: 0 !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        background: transparent !important;
        color: var(--ru-ink) !important;
        font-size: 13px !important;
    }
    :root[data-theme] .ru-tablebox .table thead th {
        border: 0 !important;
        border-bottom: 1px solid var(--ru-line) !important;
        background: var(--ru-paper-2) !important;
        color: var(--ru-ink-3) !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        letter-spacing: .02em !important;
        white-space: nowrap !important;
        vertical-align: middle !important;
    }
    :root[data-theme] .ru-tablebox .table thead th:first-child { border-radius: 10px 0 0 10px !important; }
    :root[data-theme] .ru-tablebox .table thead th:last-child { border-radius: 0 10px 10px 0 !important; }
    :root[data-theme] .ru-tablebox .table thead th .th-inner { padding: 9px 10px !important; font-size: 12px !important; line-height: 1.3 !important; }
    :root[data-theme] .ru-tablebox .table tbody td {
        padding: 9px 10px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--ru-line) !important;
        background: transparent !important;
        color: var(--ru-ink) !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        vertical-align: middle !important;
    }
    :root[data-theme] .ru-tablebox .table thead th:first-child .th-inner,
    :root[data-theme] .ru-tablebox .table tbody td:first-child { padding-left: 14px !important; }
    :root[data-theme] .ru-tablebox .table thead th:last-child .th-inner,
    :root[data-theme] .ru-tablebox .table tbody td:last-child { padding-right: 14px !important; }
    :root[data-theme] .ru-tablebox .table thead th.bs-checkbox .th-inner,
    :root[data-theme] .ru-tablebox .table tbody td.bs-checkbox { width: 40px !important; padding-left: 14px !important; padding-right: 4px !important; }
    :root[data-theme] .ru-tablebox .table tbody tr:last-child td { border-bottom: 0 !important; }
    :root[data-theme] .ru-tablebox .table tbody tr:hover td,
    :root[data-theme] .ru-tablebox .table tbody tr.selected td { background: var(--ru-mana-soft) !important; }
    :root[data-theme] .ru-tablebox .table tr.no-records-found td { padding: 0 !important; background: transparent !important; }

    /* 电脑端宽表格（Member.js 按字段名打标）：编码不折行；操作列在横向捲动时钉在右边，底色必须不透明 */
    :root[data-theme] .ru-tablebox .table .ru-td-code { white-space: nowrap !important; font-variant-numeric: tabular-nums; }
    :root[data-theme] .ru-tablebox .table .ru-clip { display: inline-block !important; max-width: 240px !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important; vertical-align: bottom !important; }
    :root[data-theme] .ru-tablebox .ru-scrollx .table .ru-td-stick { position: sticky !important; right: 0 !important; z-index: 2 !important; }
    :root[data-theme] .ru-tablebox .ru-scrollx .table tbody td.ru-td-stick { background: var(--ru-paper) !important; box-shadow: -14px 0 14px -14px rgba(30, 22, 8, .32) !important; }
    :root[data-theme] .ru-tablebox .ru-scrollx .table tbody tr:hover td.ru-td-stick,
    :root[data-theme] .ru-tablebox .ru-scrollx .table tbody tr.selected td.ru-td-stick { background: linear-gradient(var(--ru-mana-soft), var(--ru-mana-soft)), var(--ru-paper) !important; }
    :root[data-theme] .ru-tablebox .ru-scrollx .table thead th.ru-td-stick { box-shadow: -14px 0 14px -14px rgba(30, 22, 8, .32) !important; }
    :root[data-theme="dark"] .ru-tablebox .ru-scrollx .table tbody td.ru-td-stick,
    :root[data-theme="dark"] .ru-tablebox .ru-scrollx .table thead th.ru-td-stick { box-shadow: -14px 0 14px -14px rgba(0, 0, 0, .8) !important; }
    :root[data-theme] .ru-tablebox .fixed-table-body { scrollbar-width: thin; scrollbar-color: var(--ru-line-2) transparent; }
    @media (max-width: 1400px) {
        :root[data-theme] .ru-tablebox .table thead th .th-inner { padding: 8px 8px !important; }
        :root[data-theme] .ru-tablebox .table tbody td { padding: 8px 8px !important; font-size: 12.5px !important; }
        :root[data-theme] .ru-tablebox .table thead th:first-child .th-inner,
        :root[data-theme] .ru-tablebox .table tbody td:first-child { padding-left: 12px !important; }
    }

    /* 勾选框（全选 + 行选） */
    :root[data-theme] .ru-tablebox .bootstrap-table input[type="checkbox"],
    :root[data-theme] .ru-mcards input[type="checkbox"] {
        position: relative !important;
        width: 16px !important;
        height: 16px !important;
        margin: 0 !important;
        border: 1.5px solid var(--ru-ink-4) !important;
        border-radius: 5px !important;
        background: var(--ru-paper) !important;
        box-shadow: none !important;
        vertical-align: middle !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        cursor: pointer;
    }
    :root[data-theme] .ru-tablebox .bootstrap-table input[type="checkbox"]:hover { border-color: var(--ru-mana) !important; }
    :root[data-theme] .ru-tablebox .bootstrap-table input[type="checkbox"]:checked,
    :root[data-theme] .ru-mcards input[type="checkbox"]:checked { border-color: var(--ru-mana) !important; background: var(--ru-mana) !important; }
    :root[data-theme] .ru-tablebox .bootstrap-table input[type="checkbox"]:checked::after,
    :root[data-theme] .ru-mcards input[type="checkbox"]:checked::after {
        content: "" !important;
        position: absolute !important;
        left: 4.5px !important;
        top: 1.5px !important;
        width: 4px !important;
        height: 8px !important;
        border: solid var(--ru-mana-on) !important;
        border-width: 0 2px 2px 0 !important;
        transform: rotate(45deg) !important;
    }

    /* 载入中 / 空表（平台的空状态 .component-table-empty：图标 + 一句话） */
    :root[data-theme] .ru-tablebox .fixed-table-loading { background: var(--ru-paper) !important; color: var(--ru-ink-3) !important; }
    :root[data-theme] .ru-tablebox.ru-tablebox--mini .fixed-table-pagination { display: none !important; }
    :root[data-theme] .component-table-empty { display: grid !important; justify-items: center !important; gap: 6px !important; padding: 26px 0 !important; color: var(--ru-ink-3) !important; font-size: 13px !important; }
    :root[data-theme] .component-table-empty__icon { display: grid !important; place-items: center !important; width: 44px !important; height: 44px !important; border-radius: 50% !important; background: var(--ru-paper-2) !important; color: var(--ru-ink-4) !important; }
    :root[data-theme] .component-table-empty__icon svg { width: 20px !important; height: 20px !important; }

    /* 分页条 */
    :root[data-theme] .ru-tablebox .fixed-table-pagination {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px 12px !important;
        margin: 10px 0 0 !important;
        padding: 0 2px !important;
        color: var(--ru-ink-3) !important;
        font-size: 12.5px !important;
    }
    :root[data-theme] .ru-tablebox .fixed-table-pagination::after { display: none !important; }
    :root[data-theme] .ru-tablebox .fixed-table-pagination > div { float: none !important; margin: 0 !important; }
    :root[data-theme] .ru-tablebox .fixed-table-pagination .pagination-detail { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important; width: auto !important; color: var(--ru-ink-3) !important; font-size: 12.5px !important; }
    :root[data-theme] .ru-tablebox .fixed-table-pagination .pagination-info { color: var(--ru-ink-3) !important; }
    :root[data-theme] .ru-tablebox .fixed-table-pagination .pagination { display: flex !important; gap: 4px !important; margin: 0 0 0 auto !important; padding: 0 !important; }
    :root[data-theme] .ru-tablebox .fixed-table-pagination .pagination li { margin: 0 !important; }
    :root[data-theme] .ru-tablebox .fixed-table-pagination .pagination .page-link {
        display: grid !important;
        place-items: center !important;
        min-width: 30px !important;
        height: 30px !important;
        margin: 0 !important;
        padding: 0 8px !important;
        border: 1px solid var(--ru-line) !important;
        border-radius: 8px !important;
        background: var(--ru-paper) !important;
        color: var(--ru-ink-2) !important;
        font: 600 12.5px/1 var(--ru-font-num) !important;
        box-shadow: none !important;
    }
    :root[data-theme] .ru-tablebox .fixed-table-pagination .pagination .page-link:hover { border-color: var(--ru-mana) !important; color: var(--ru-mana-text) !important; }
    :root[data-theme] .ru-tablebox .fixed-table-pagination .pagination .page-item.active .page-link { border-color: var(--ru-mana) !important; background: var(--ru-mana) !important; color: var(--ru-mana-on) !important; }
    :root[data-theme] .ru-tablebox .fixed-table-pagination .pagination .page-item.disabled .page-link { opacity: .45 !important; pointer-events: none; }
    :root[data-theme] .ru-tablebox .fixed-table-pagination .page-list .btn,
    :root[data-theme] .ru-tablebox .fixed-table-pagination .page-list .btn-group > .btn {
        height: 28px !important;
        padding: 0 10px !important;
        border: 1px solid var(--ru-line-2) !important;
        border-radius: 8px !important;
        background: var(--ru-paper) !important;
        color: var(--ru-ink-2) !important;
        font-size: 12.5px !important;
        box-shadow: none !important;
    }
    /* 每页条数：Bootstrap 的下拉脚本在（点开时加 .show、Popper 写位置），但会员区没载 bootstrap.css —— 没点开的菜单要自己藏 */
    :root[data-theme] .ru-tablebox .fixed-table-pagination .page-list { display: inline-flex !important; align-items: center !important; gap: 6px !important; }
    :root[data-theme] .ru-tablebox .fixed-table-pagination .page-list .btn-group { position: relative !important; display: inline-flex !important; }
    :root[data-theme] .ru-tablebox .fixed-table-pagination .page-list .dropdown-menu:not(.show) { display: none !important; }
    :root[data-theme] .ru-tablebox .fixed-table-pagination .page-list .dropdown-menu.show { display: grid !important; gap: 2px !important; z-index: 30 !important; }
    :root[data-theme] .ru-tablebox .fixed-table-pagination .page-list .caret { display: none !important; }
    :root[data-theme] .ru-tablebox .fixed-table-pagination .page-list .dropdown-menu { min-width: 72px !important; padding: 4px !important; border: 1px solid var(--ru-line-2) !important; border-radius: 10px !important; background: var(--ru-paper) !important; box-shadow: var(--ru-shadow-3) !important; }
    :root[data-theme] .ru-tablebox .fixed-table-pagination .page-list .dropdown-item { padding: 5px 10px !important; border-radius: 6px !important; color: var(--ru-ink) !important; font-size: 12.5px !important; }
    :root[data-theme] .ru-tablebox .fixed-table-pagination .page-list .dropdown-item:hover,
    :root[data-theme] .ru-tablebox .fixed-table-pagination .page-list .dropdown-item.active { background: var(--ru-mana-soft) !important; color: var(--ru-mana-text) !important; }

    /* 单元格内容：平台 formatter 吐的结构 */
    :root[data-theme] .ru-tablebox .md-pair { display: grid !important; gap: 2px !important; }
    :root[data-theme] .ru-tablebox .md-pair__row { display: flex !important; align-items: baseline !important; gap: 6px !important; }
    :root[data-theme] .ru-tablebox .md-pair__k { color: var(--ru-ink-4) !important; font-size: 11.5px !important; }
    :root[data-theme] .ru-tablebox .md-pair__v { color: var(--ru-ink) !important; }
    :root[data-theme] .ru-tablebox .md-pair__v--muted { color: var(--ru-ink-3) !important; }
    /* 列宽不够时让「创建 2026-09-25 10:00:00」这类值在日期与时间之间折行（平台给整列上了 nowrap），
       表格就不必横向捲动、把操作列旁边的栏位盖住；宽度够时照样一行 */
    :root[data-theme] .ru-tablebox td .md-pair__v { white-space: normal !important; word-break: keep-all !important; }
    :root[data-theme] .ru-tablebox td .ru-nobr { white-space: nowrap !important; }
    :root[data-theme] .ru-tablebox .table-item,
    :root[data-theme] .ru-tablebox .pay-item {
        display: inline-flex !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
        color: var(--ru-ink) !important;
        font-size: 13px !important;
    }
    :root[data-theme] .ru-tablebox .table-item-icon { width: 26px !important; height: 26px !important; flex: none; margin: 0 !important; border-radius: 7px !important; object-fit: cover !important; }
    :root[data-theme] .ru-tablebox .pay-item .item-icon { width: 20px !important; height: 20px !important; flex: none; margin: 0 !important; border-radius: 5px !important; object-fit: contain !important; }
    :root[data-theme] .ru-tablebox .table-item-name,
    :root[data-theme] .ru-tablebox .pay-item .item-name { overflow: hidden !important; max-width: 200px !important; color: inherit !important; font-size: 13px !important; white-space: nowrap !important; text-overflow: ellipsis !important; }
    :root[data-theme] .ru-tablebox .render-image { border-radius: 7px !important; box-shadow: none !important; cursor: zoom-in; }
    :root[data-theme] .ru-tablebox .metadata-text { min-width: 64px; border-radius: 0 !important; color: var(--ru-ink) !important; font-size: 13px !important; }

    /* 状态字典徽章（a-badge）：一行一个小胶囊 */
    :root[data-theme] .ru-tablebox .a-badge, :root[data-theme] .ru-mcards .a-badge {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 1px 8px !important;
        border-radius: var(--ru-r-pill) !important;
        font-size: 11.5px !important;
        font-weight: 600 !important;
        line-height: 18px !important;
        white-space: nowrap !important;
    }

    /* 行内操作钮（a-badge-glass）：小描边钮，文字色按平台给的语义类（编辑 / 克隆 / 删除 一眼分得开） */
    :root[data-theme] .ru-tablebox .a-badge-glass, :root[data-theme] .ru-mcards .a-badge-glass {
        --ru-act: var(--ru-ink-2);
        display: inline-flex !important;
        align-items: center !important;
        gap: 3px !important;
        height: 26px !important;
        margin: 2px 3px 2px 0 !important;
        padding: 0 8px !important;
        border: 1px solid var(--ru-line-2) !important;
        border-radius: 8px !important;
        background: var(--ru-paper) !important;
        color: var(--ru-act) !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        box-shadow: none !important;
        cursor: pointer;
        transition: border-color var(--ru-t2), background-color var(--ru-t2);
    }
    :root[data-theme] .a-badge-glass.text-primary { --ru-act: var(--ru-mana-text); }
    :root[data-theme] .a-badge-glass.text-success { --ru-act: var(--ru-wind); }
    :root[data-theme] .a-badge-glass.text-warning { --ru-act: var(--ru-earth); }
    :root[data-theme] .a-badge-glass.text-danger { --ru-act: var(--ru-fire); }
    :root[data-theme] .a-badge-glass.text-info { --ru-act: var(--ru-water); }
    :root[data-theme] .ru-tablebox .a-badge-glass:hover, :root[data-theme] .ru-mcards .a-badge-glass:hover {
        border-color: var(--ru-act) !important;
        background: var(--ru-paper-2) !important;
    }
    :root[data-theme] .ru-tablebox .a-badge-glass i, :root[data-theme] .ru-mcards .a-badge-glass i { color: inherit !important; font-size: 11.5px !important; }
    :root[data-theme] .ru-tablebox .a-badge-glass .btn-title { color: inherit !important; }

    /* 状态分段（.table-switch-state，平台生成在筛选条下面） */
    :root[data-theme] .table-switch-state { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin: 0 0 10px !important; padding: 0 !important; background: none !important; }
    :root[data-theme] .table-switch-state button {
        min-height: 28px !important;
        margin: 0 !important;
        padding: 0 12px !important;
        border: 1px solid var(--ru-line-2) !important;
        border-radius: var(--ru-r-pill) !important;
        background: var(--ru-paper) !important;
        color: var(--ru-ink-3) !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        box-shadow: none !important;
        transform: none !important;
    }
    :root[data-theme] .table-switch-state button:hover { border-color: var(--ru-ink-4) !important; background: var(--ru-paper) !important; color: var(--ru-ink) !important; }
    :root[data-theme] .table-switch-state button.active,
    :root[data-theme] .table-switch-state button.active:focus { border-color: var(--ru-mana) !important; background: var(--ru-mana-soft) !important; color: var(--ru-mana-text) !important; }

    /* 筛选条（form.table-search）：平台 DOM 是 输入框 + label，靠 order 让标签在上 */
    :root[data-theme] form.table-search {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-end !important;
        gap: 8px 10px !important;
        margin: 0 0 10px !important;
        padding: 0 !important;
        background: none !important;
        box-shadow: none !important;
    }
    :root[data-theme] form.table-search .mui-sf {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        flex: 0 1 172px !important;
        width: auto !important;
        min-width: 130px !important;
        margin: 0 !important;
    }
    :root[data-theme] form.table-search .layui-input-inline:not(.mui-sf) {
        flex: none !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        align-self: flex-end !important;
    }
    :root[data-theme] form.table-search .layui-input-inline.text-center:not(.mui-sf) { height: 36px !important; color: var(--ru-ink-4) !important; line-height: 36px !important; }
    :root[data-theme] form.table-search .mui-sf__label {
        order: -1 !important;
        position: static !important;
        display: block !important;
        margin: 0 0 5px !important;
        padding: 0 !important;
        transform: none !important;
        background: none !important;
        color: var(--ru-ink-3) !important;
        font-size: 11.5px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
        pointer-events: none;
    }
    :root[data-theme] form.table-search .layui-input,
    :root[data-theme] form.table-search .layui-select-title input {
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 11px !important;
        border: 1px solid var(--ru-line-2) !important;
        border-radius: 10px !important;
        background: var(--ru-paper) !important;
        color: var(--ru-ink) !important;
        font-size: 13px !important;
        box-shadow: none !important;
    }
    :root[data-theme] form.table-search .layui-select-title input { padding-right: 30px !important; }
    :root[data-theme] form.table-search .layui-input:focus,
    :root[data-theme] form.table-search .layui-select-title input:focus { border-color: var(--ru-mana) !important; box-shadow: 0 0 0 3px var(--ru-mana-soft) !important; }
    :root[data-theme] form.table-search .layui-input::placeholder { color: var(--ru-ink-4) !important; }
    :root[data-theme] form.table-search .query-button {
        flex: none !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        height: 36px !important;
        min-height: 36px !important;
        margin: 0 !important;
        padding: 0 16px !important;
        border: 0 !important;
        border-radius: var(--ru-r-pill) !important;
        background: var(--ru-mana) !important;
        color: var(--ru-mana-on) !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 1 !important;
        box-shadow: none !important;
    }
    :root[data-theme] form.table-search .query-button i { color: inherit !important; font-size: 12px !important; }
}

/* ---------------------------------------------------------------- 11. layui 表单控件（筛选条、弹窗表单共用） */
/* 下拉清单的位置不能写进 ru-first 的 !important：平台弹层会把清单改成 position:fixed、行内写好 top/bottom，浮到弹层外面
   （component.floatSelectDropdowns，免得被会捲动的内容区裁掉）；!important 压过行内值，fixed 之下 100% 是整个视窗高，
   清单直接被推出画面（2026-09-30 主人：我的店铺「批量加价」的价格取整点开看不到选项）。
   放在层外当普通宣告：盖得过 layui 的 top:42px（层里 / 特异性低），也让得出平台的行内值 */
:root[data-theme] .layui-form-select dl,
:root[data-theme] .layui-treeSelect .layui-anim { top: calc(100% + 4px); }
:root[data-theme] .layui-form-selectup dl { top: auto; bottom: calc(100% + 4px); }

@layer ru-first {
    /* 输入框 / 文本域 */
    :root[data-theme] .layui-input,
    :root[data-theme] .layui-select,
    :root[data-theme] .layui-textarea {
        border: 1px solid var(--ru-line-2) !important;
        border-radius: 10px !important;
        background: var(--ru-paper) !important;
        color: var(--ru-ink) !important;
        font-size: 13.5px !important;
        box-shadow: none !important;
    }
    :root[data-theme] .layui-input, :root[data-theme] .layui-select { height: 38px !important; padding: 0 12px !important; line-height: 36px !important; }
    :root[data-theme] .layui-textarea { min-height: 80px !important; padding: 8px 12px !important; line-height: 1.6 !important; }
    :root[data-theme] .layui-input:hover, :root[data-theme] .layui-textarea:hover { border-color: var(--ru-ink-4) !important; }
    :root[data-theme] .layui-input:focus,
    :root[data-theme] .layui-textarea:focus,
    :root[data-theme] .layui-input.layui-input-focus { border-color: var(--ru-mana) !important; box-shadow: 0 0 0 3px var(--ru-mana-soft) !important; outline: none !important; }
    :root[data-theme] .layui-input::placeholder, :root[data-theme] .layui-textarea::placeholder { color: var(--ru-ink-4) !important; opacity: 1 !important; }
    /* 控件编辑卡（商品「控件」页）是浮动标签：标签躺在空输入框里当提示，聚焦后才浮起、才露出 placeholder */
    :root[data-theme] .widget-field:not(.widget-data-field) > .layui-input::placeholder,
    :root[data-theme] .widget-field:not(.widget-data-field) > .layui-textarea::placeholder { color: transparent !important; }
    :root[data-theme] .widget-field:not(.widget-data-field):focus-within > .layui-input::placeholder,
    :root[data-theme] .widget-field:not(.widget-data-field):focus-within > .layui-textarea::placeholder { color: var(--ru-ink-4) !important; }
    :root[data-theme] .layui-input[disabled], :root[data-theme] .layui-input.layui-disabled,
    :root[data-theme] .layui-textarea[disabled] { background: var(--ru-paper-2) !important; color: var(--ru-ink-3) !important; cursor: not-allowed !important; }

    /* 下拉（layui select / 树选择）：面板 */
    :root[data-theme] .layui-form-select .layui-edge { right: 12px !important; border-top-color: var(--ru-ink-3) !important; }
    :root[data-theme] .layui-form-select dl,
    :root[data-theme] .layui-treeSelect .layui-anim {
        padding: 4px !important;
        border: 1px solid var(--ru-line-2) !important;
        border-radius: 12px !important;
        background: var(--ru-paper) !important;
        box-shadow: var(--ru-shadow-3) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    :root[data-theme] .layui-form-select dl dd,
    :root[data-theme] .layui-form-select dl dt {
        min-height: 32px !important;
        height: auto !important;
        padding: 6px 10px !important;
        border-radius: 8px !important;
        color: var(--ru-ink) !important;
        font-size: 13px !important;
        line-height: 1.5 !important;
        white-space: normal !important;
    }
    :root[data-theme] .layui-form-select dl dt { color: var(--ru-ink-4) !important; font-size: 11.5px !important; font-weight: 700 !important; }
    :root[data-theme] .layui-form-select dl dd:hover { background: var(--ru-paper-2) !important; box-shadow: none !important; }
    :root[data-theme] .layui-form-select dl dd.layui-this { background: var(--ru-mana-soft) !important; color: var(--ru-mana-text) !important; font-weight: 600 !important; box-shadow: none !important; }
    :root[data-theme] .layui-form-select dl dd.layui-select-tips { color: var(--ru-ink-4) !important; }
    :root[data-theme] .layui-form-select dl dd.layui-disabled { color: var(--ru-ink-4) !important; }
    :root[data-theme] .layui-treeSelect .ztree li a { height: auto !important; padding: 4px 6px !important; border-radius: 7px !important; color: var(--ru-ink) !important; font-size: 13px !important; }
    :root[data-theme] .layui-treeSelect .ztree li a:hover { background: var(--ru-paper-2) !important; text-decoration: none !important; }
    :root[data-theme] .layui-treeSelect .ztree li a.curSelectedNode { border: 0 !important; background: var(--ru-mana-soft) !important; color: var(--ru-mana-text) !important; opacity: 1 !important; }

    /* 开关：34 × 20 的胶囊，圆点在轨道里（平台的 MD2 细轨 + 外凸圆点跟本主题的圆角语言不搭） */
    :root[data-theme] .layui-form-switch {
        position: relative !important;
        display: inline-block !important;
        flex: none !important;
        box-sizing: border-box !important;
        width: 34px !important;
        min-width: 34px !important;
        height: 20px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 10px !important;
        background: var(--ru-paper-3) !important;
        box-shadow: inset 0 0 0 1px var(--ru-line-2) !important;
        line-height: 20px !important;
        vertical-align: middle !important;
        cursor: pointer;
        transition: background-color var(--ru-t2) var(--ru-ease-out) !important;
    }
    :root[data-theme] .layui-form-switch > div,
    :root[data-theme] .layui-form-switch em { display: none !important; }
    :root[data-theme] .layui-form-switch i {
        display: block !important;
        position: absolute !important;
        top: 2px !important;
        left: 2px !important;
        right: auto !important;
        width: 16px !important;
        height: 16px !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: #FFFFFF !important;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .28) !important;
        transform: none !important;
        transition: left var(--ru-t2) var(--ru-ease-out) !important;
    }
    :root[data-theme] .layui-form-onswitch { background: var(--ru-mana) !important; box-shadow: none !important; }
    :root[data-theme] .layui-form-onswitch i { left: 16px !important; background: #FFFFFF !important; }
    :root[data-theme] .layui-form-switch.layui-checkbox-disabled,
    :root[data-theme] .layui-form-switch.layui-disabled { opacity: .5 !important; cursor: not-allowed !important; }
    :root[data-theme] .ru-tablebox td .layui-form { display: inline-flex !important; align-items: center !important; }

    /* 勾选框（primary 皮肤：方框 + 文字） */
    :root[data-theme] .layui-form-checkbox[lay-skin="primary"] { height: auto !important; min-height: 20px !important; margin: 4px 14px 4px 0 !important; padding: 0 0 0 24px !important; line-height: 20px !important; }
    :root[data-theme] .layui-form-checkbox[lay-skin="primary"] > span { padding: 0 !important; background: none !important; color: var(--ru-ink-2) !important; font-size: 13.5px !important; }
    :root[data-theme] .layui-form-checkbox[lay-skin="primary"] > i {
        top: 2px !important;
        left: 0 !important;
        width: 16px !important;
        height: 16px !important;
        border: 1.5px solid var(--ru-ink-4) !important;
        border-radius: 5px !important;
        background: var(--ru-paper) !important;
        color: transparent !important;
        font-size: 12px !important;
        line-height: 13px !important;
    }
    :root[data-theme] .layui-form-checkbox[lay-skin="primary"]:hover > i { border-color: var(--ru-mana) !important; }
    :root[data-theme] .layui-form-checked[lay-skin="primary"] > i { border-color: var(--ru-mana) !important; background: var(--ru-mana) !important; color: var(--ru-mana-on) !important; }
    /* 勾选框（默认皮肤：标签胶囊） */
    :root[data-theme] .layui-form-checkbox:not([lay-skin]) { height: 30px !important; margin: 3px 8px 3px 0 !important; padding: 0 30px 0 12px !important; border: 1px solid var(--ru-line-2) !important; border-radius: 8px !important; background: var(--ru-paper) !important; line-height: 28px !important; }
    :root[data-theme] .layui-form-checkbox:not([lay-skin]) > span { padding: 0 !important; background: none !important; color: var(--ru-ink-2) !important; font-size: 13px !important; }
    :root[data-theme] .layui-form-checkbox:not([lay-skin]) > i { right: 6px !important; border: 0 !important; background: none !important; color: transparent !important; }
    :root[data-theme] .layui-form-checkbox.layui-form-checked:not([lay-skin]) { border-color: var(--ru-mana) !important; background: var(--ru-mana-soft) !important; }
    :root[data-theme] .layui-form-checkbox.layui-form-checked:not([lay-skin]) > span { color: var(--ru-mana-text) !important; }
    :root[data-theme] .layui-form-checkbox.layui-form-checked:not([lay-skin]) > i { color: var(--ru-mana-text) !important; }

    /* 单选（平台用字体图标画圈，md 改成 CSS 圈点；这里只换颜色与尺寸） */
    :root[data-theme] .layui-form-radio { margin: 4px 16px 4px 0 !important; padding: 0 !important; line-height: 20px !important; }
    :root[data-theme] .layui-form-radio > div { color: var(--ru-ink-2) !important; font-size: 13.5px !important; }
    :root[data-theme] .layui-form-radioed > div { color: var(--ru-ink) !important; }
    :root[data-theme] .layui-form-radio:hover > *, :root[data-theme] .layui-form-radioed > i { color: var(--ru-mana) !important; }

    /* 日期（laydate 挂在 body 上） */
    :root[data-theme] .layui-laydate {
        overflow: hidden !important;
        border: 1px solid var(--ru-line-2) !important;
        border-radius: 14px !important;
        background: var(--ru-paper) !important;
        color: var(--ru-ink) !important;
        box-shadow: var(--ru-shadow-3) !important;
        font-family: var(--ru-font-sans) !important;
    }
    :root[data-theme] .layui-laydate .layui-laydate-main { padding: 4px 6px 0 !important; }
    :root[data-theme] .layui-laydate .layui-laydate-header { border-bottom: 1px solid var(--ru-line) !important; }
    :root[data-theme] .layui-laydate .layui-laydate-header * { color: var(--ru-ink-2) !important; }
    :root[data-theme] .layui-laydate .layui-laydate-header i:hover, :root[data-theme] .layui-laydate .layui-laydate-header span:hover { color: var(--ru-mana-text) !important; }
    :root[data-theme] .layui-laydate .layui-laydate-content th { color: var(--ru-ink-3) !important; font-weight: 600 !important; }
    :root[data-theme] .layui-laydate .layui-laydate-content td { color: var(--ru-ink) !important; border-radius: 8px !important; }
    :root[data-theme] .layui-laydate .layui-laydate-content td:hover { background: var(--ru-paper-2) !important; color: var(--ru-ink) !important; }
    :root[data-theme] .layui-laydate .layui-laydate-content td.laydate-day-prev,
    :root[data-theme] .layui-laydate .layui-laydate-content td.laydate-day-next,
    :root[data-theme] .layui-laydate .layui-laydate-content td.laydate-disabled { color: var(--ru-ink-4) !important; }
    :root[data-theme] .layui-laydate .layui-this,
    :root[data-theme] .layui-laydate .layui-this > div { background: var(--ru-mana) !important; color: var(--ru-mana-on) !important; }
    :root[data-theme] .layui-laydate .layui-laydate-footer { border-top: 1px solid var(--ru-line) !important; background: var(--ru-paper) !important; }
    :root[data-theme] .layui-laydate .layui-laydate-footer span { color: var(--ru-ink-2) !important; }
    :root[data-theme] .layui-laydate .laydate-footer-btns span { height: 28px !important; margin: 0 0 0 6px !important; padding: 0 12px !important; border: 1px solid var(--ru-line-2) !important; border-radius: 8px !important; background: var(--ru-paper) !important; color: var(--ru-ink) !important; line-height: 26px !important; }
    :root[data-theme] .layui-laydate .laydate-footer-btns span[lay-type="confirm"] { border-color: var(--ru-mana) !important; background: var(--ru-mana) !important; color: var(--ru-mana-on) !important; }
    :root[data-theme] .layui-laydate .laydate-time-list li ol li { color: var(--ru-ink-2) !important; }
    :root[data-theme] .layui-laydate .laydate-time-list li ol li.layui-this { background: var(--ru-mana-soft) !important; color: var(--ru-mana-text) !important; }
}

/* ---------------------------------------------------------------- 12. 平台弹窗（component.popup 表单 / layer）
   外框（外壳、标题 / 页签、右上角钮、按钮栏）只管电脑端（.ru--pc）：手机端的弹窗被 App.js 改成底部抽屉，外框由 App.css / Member.app.css 管 */
@layer ru-first {
    /* 不设 overflow:hidden —— 表单最底下的下拉会往弹窗外展开，裁掉就点不到；圆角改由标题、内容、按钮栏各自补 */
    :root[data-theme] .ru--pc .layui-layer.component-popup {
        border: 1px solid var(--ru-line-2) !important;
        border-radius: 18px !important;
        background: var(--ru-paper) !important;
        box-shadow: 0 2px 6px rgba(30, 22, 8, .06), 0 30px 70px -30px rgba(30, 22, 8, .5) !important;
    }
    :root[data-theme="dark"] .ru--pc .layui-layer.component-popup { box-shadow: 0 2px 6px rgba(0, 0, 0, .35), 0 30px 70px -26px rgba(0, 0, 0, .85) !important; }
    /* 标题：没有分页签时是一行标题 */
    :root[data-theme] .ru--pc .component-popup .layui-layer-title {
        height: 50px !important;
        padding: 0 96px 0 20px !important;
        border: 0 !important;
        border-bottom: 1px solid var(--ru-line) !important;
        border-radius: 18px 18px 0 0 !important;
        background: var(--ru-paper) !important;
        color: var(--ru-ink) !important;
        font: 700 15px/50px var(--ru-font-serif) !important;
        letter-spacing: .03em !important;
        box-shadow: none !important;
    }
    :root[data-theme] .ru--pc .component-popup .layui-layer-title i { margin-right: 4px !important; color: var(--ru-ink-3) !important; font-size: 13px !important; }
    /* 有分页签时（商品编辑的「发货设置 / 控件 / 商品介绍…」）是一排底线页签 */
    :root[data-theme] .ru--pc .component-popup.layui-layer-tab .layui-layer-title { display: flex !important; align-items: stretch !important; gap: 2px !important; padding: 0 96px 0 10px !important; overflow-x: auto !important; scrollbar-width: none; }
    :root[data-theme] .ru--pc .component-popup.layui-layer-tab .layui-layer-title::-webkit-scrollbar { display: none; }
    :root[data-theme] .ru--pc .component-popup.layui-layer-tab .layui-layer-title span {
        position: relative !important;
        float: none !important;
        display: inline-flex !important;
        flex: none !important;
        align-items: center !important;
        gap: 5px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 50px !important;
        padding: 0 11px !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: none !important;
        color: var(--ru-ink-3) !important;
        font: 600 13px/50px var(--ru-font-sans) !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
    }
    :root[data-theme] .ru--pc .component-popup.layui-layer-tab .layui-layer-title span:first-child { padding-left: 11px !important; }
    :root[data-theme] .ru--pc .component-popup.layui-layer-tab .layui-layer-title span i { margin: 0 !important; color: inherit !important; font-size: 12px !important; opacity: .8; }
    :root[data-theme] .ru--pc .component-popup.layui-layer-tab .layui-layer-title span:hover { background: none !important; color: var(--ru-ink) !important; }
    :root[data-theme] .ru--pc .component-popup.layui-layer-tab .layui-layer-title span.layui-this { color: var(--ru-mana-text) !important; }
    :root[data-theme] .ru--pc .component-popup.layui-layer-tab .layui-layer-title span.layui-this::after {
        content: "" !important;
        position: absolute !important;
        left: 11px !important;
        right: 11px !important;
        bottom: 0 !important;
        height: 2px !important;
        border-radius: 2px 2px 0 0 !important;
        background: var(--ru-mana) !important;
    }
    /* 右上角：最小化 / 最大化 / 关闭 */
    :root[data-theme] .ru--pc .component-popup .layui-layer-setwin { top: 17px !important; right: 16px !important; }
    :root[data-theme] .ru--pc .component-popup .layui-layer-setwin a { opacity: .6 !important; }
    :root[data-theme] .ru--pc .component-popup .layui-layer-setwin a:hover { opacity: 1 !important; }
    /* 内容区与表单 */
    :root[data-theme] .component-popup .layui-layer-content { background: var(--ru-paper) !important; color: var(--ru-ink) !important; }
    :root[data-theme] .ru--pc .component-popup:not(:has(.layui-layer-btn)) .layui-layer-content { border-radius: 0 0 18px 18px !important; }
    :root[data-theme] .component-popup .layui-card-body { padding: 16px 20px 6px !important; background: var(--ru-paper) !important; }
    :root[data-theme] .component-popup .layui-form-item { margin: 0 0 14px !important; }
    :root[data-theme] .component-popup .layui-form-item > .layui-form-label:not(.hide) {
        position: static !important;
        float: none !important;
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 0 6px 1px !important;
        border: 0 !important;
        background: none !important;
        color: var(--ru-ink-2) !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        text-align: left !important;
        white-space: normal !important;
        transform: none !important;
        pointer-events: auto !important;
    }
    :root[data-theme] .component-popup .layui-form-item > .layui-form-label .text-danger { color: var(--ru-fire) !important; }
    :root[data-theme] .component-popup .layui-form-item > .layui-input-block,
    :root[data-theme] .component-popup .layui-form-item > .layui-input-inline { margin: 0 !important; min-height: 0 !important; }
    :root[data-theme] .component-popup .mui-float .layui-input::placeholder,
    :root[data-theme] .component-popup .mui-float .layui-textarea::placeholder { color: var(--ru-ink-4) !important; }
    :root[data-theme] .component-popup .layui-form-mid,
    :root[data-theme] .component-popup .layui-word-aux,
    :root[data-theme] .component-popup .form-tips { color: var(--ru-ink-3) !important; font-size: 12px !important; }
    /* 底部按钮栏 */
    :root[data-theme] .ru--pc .component-popup .layui-layer-btn {
        padding: 12px 20px 14px !important;
        border-top: 1px solid var(--ru-line) !important;
        border-radius: 0 0 18px 18px !important;
        background: var(--ru-paper) !important;
        text-align: right !important;
        box-shadow: none !important;
    }
    :root[data-theme] .layui-layer .layui-layer-btn a {
        height: 34px !important;
        margin: 0 0 0 8px !important;
        padding: 0 16px !important;
        border: 1px solid var(--ru-line-2) !important;
        border-radius: var(--ru-r-pill) !important;
        background: var(--ru-paper) !important;
        color: var(--ru-ink) !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        line-height: 32px !important;
        box-shadow: none !important;
    }
    :root[data-theme] .layui-layer .layui-layer-btn a:hover { border-color: var(--ru-ink-4) !important; }
    :root[data-theme] .layui-layer .layui-layer-btn .layui-layer-btn0 { border-color: var(--ru-mana) !important; background: var(--ru-mana) !important; color: var(--ru-mana-on) !important; }
    :root[data-theme] .layui-layer .layui-layer-btn .layui-layer-btn0:hover { filter: brightness(1.06); }
    :root[data-theme] .layui-layer .layui-layer-btn a i { color: inherit !important; }
    /* 表单里的 layui 按钮（上传图片的虚线格 .btn-upload 由 md 画，不归这里） */
    :root[data-theme] .component-popup .layui-btn:not(.btn-upload) {
        border: 1px solid var(--ru-line-2) !important;
        border-radius: var(--ru-r-pill) !important;
        background: var(--ru-paper) !important;
        color: var(--ru-ink) !important;
        font-weight: 600 !important;
        box-shadow: none !important;
    }
    :root[data-theme] .component-popup .layui-btn:not(.btn-upload):not(.layui-btn-sm):not(.layui-btn-xs) { height: 34px !important; padding: 0 16px !important; font-size: 13px !important; line-height: 32px !important; }
    :root[data-theme] .component-popup .layui-btn:not(.btn-upload):not(.layui-btn-primary):not(.layui-btn-danger):not(.layui-btn-warm) { border-color: var(--ru-mana) !important; background: var(--ru-mana) !important; color: var(--ru-mana-on) !important; }
    :root[data-theme] .component-popup .layui-btn-danger { border-color: var(--ru-fire) !important; background: var(--ru-fire) !important; color: #FFFFFF !important; }
    :root[data-theme] .component-popup .layui-btn i { color: inherit !important; }
}

/* ---------------------------------------------------------------- 13. 其他平台层：卡密 / 消息预览 / 图片预览 / SKU 收益 / 卡密上传提示 / select2 / 编辑器 */
.md-secret { display: grid; gap: 10px; padding: 16px; }
.md-secret__code { max-height: 46vh; overflow: auto; padding: 12px 14px; border-radius: 10px; background: var(--ru-paper-2); color: var(--ru-ink); font: 500 13.5px/1.7 var(--ru-font-mono); white-space: pre-wrap; word-break: break-all; }
.md-secret__bar { display: flex; gap: 8px; }
.md-secret__btn { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 6px; min-height: 36px; border: 1px solid var(--ru-line-2); border-radius: var(--ru-r-pill); background: var(--ru-paper); color: var(--ru-ink); font-size: 13px; font-weight: 600; cursor: pointer; }
.md-secret__btn--primary { border-color: transparent; background: var(--ru-mana); color: var(--ru-mana-on); }
.md-secret__meta { display: flex; flex-wrap: wrap; gap: 6px; }
/* 商品的发货留言：平台拼成一个带行内样式的 div 挂在按钮下面（字随弹窗继承、显得很大），收成一块小字说明 */
.md-secret > div[style*="pre-line"] { margin-top: 0 !important; padding: 10px 12px; border-radius: 10px; background: var(--ru-paper-2); color: var(--ru-ink-2); font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.md-message-preview { padding: 16px 18px; }
.md-message-preview__heading, .md-message-preview__header h3 { color: var(--ru-ink); font: 700 16px/1.4 var(--ru-font-serif); }
.md-message-preview__content { color: var(--ru-ink-2); font-size: 13.5px; line-height: 1.8; }
.md-image-preview img { display: block; max-width: 92vw; max-height: 86vh; border-radius: 10px; }
.uc-skupop { display: grid; gap: 10px; padding: 14px 16px; }
.uc-skupop__meta { color: var(--ru-ink-3); font-size: 12.5px; }
.uc-skupop__meta b { color: var(--ru-ink); }
.uc-skupop__table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.uc-skupop__table th, .uc-skupop__table td { padding: 7px 10px; border-bottom: 1px solid var(--ru-line); text-align: left; }
.uc-skupop__table tbody tr:last-child td { border-bottom: 0; }
/* 平台拼的表头是 thead > td，不是 th */
.uc-skupop__table th, .uc-skupop__table thead td { color: var(--ru-ink-3); font-weight: 600; }
.uc-skupop__delta { color: var(--ru-ink-3); font-weight: 600; }
.uc-skupop__delta.up { color: var(--ru-wind); }
.uc-skupop__delta.down { color: var(--ru-fire); }
.uc-cardtip { display: grid; gap: 4px; padding: 9px 12px; border-radius: 10px; background: var(--ru-paper-2); color: var(--ru-ink-3); font-size: 12px; line-height: 1.6; }

/* 人机验证弹窗里的验证码图（平台没有样式） */
.swal2-popup .prompt-image-code { display: block; height: 44px; margin: 4px auto 12px; padding: 4px 8px; border-radius: 8px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--ru-line-2); cursor: pointer; }

/* 确认框 / 提示框（layer.confirm、layer.alert；component.popup 以外的 layer 弹窗） */
@layer ru-first {
    :root[data-theme] .layui-layer-dialog {
        min-width: 300px !important;
        border: 1px solid var(--ru-line-2) !important;
        border-radius: 16px !important;
        background: var(--ru-paper) !important;
        box-shadow: var(--ru-shadow-3) !important;
    }
    :root[data-theme] .layui-layer.layui-layer-dialog:not(.ru-layer-sheet):not(.component-popup) > .layui-layer-title { height: auto !important; padding: 16px 48px 4px 20px !important; border: 0 !important; border-radius: 16px 16px 0 0 !important; background: none !important; color: var(--ru-ink) !important; font: 700 15px/1.4 var(--ru-font-serif) !important; }
    :root[data-theme] .layui-layer-dialog .layui-layer-content { padding: 10px 20px 16px !important; color: var(--ru-ink-2) !important; font-size: 13.5px !important; line-height: 1.7 !important; }
    :root[data-theme] .layui-layer-dialog .layui-layer-content .layui-layer-face { display: none !important; }
    :root[data-theme] .layui-layer-dialog .layui-layer-content.layui-layer-padding { padding: 10px 20px 16px !important; }
    :root[data-theme] .layui-layer-dialog .layui-layer-btn { padding: 0 20px 16px !important; border: 0 !important; background: none !important; text-align: right !important; }

    /* 平台 msg：纸色小卡（内距不动：带图标时 layer 用左内距给图标让位） */
    :root[data-theme] .layui-layer-msg { min-width: 0 !important; border: 1px solid var(--ru-line-2) !important; border-radius: 12px !important; background: var(--ru-paper) !important; box-shadow: var(--ru-shadow-3) !important; }
    :root[data-theme] .layui-layer-msg .layui-layer-content { color: var(--ru-ink) !important; font-size: 13.5px !important; }

    /* SweetAlert2 确认框（删除、清空、重置密钥）：尺寸跟其他弹窗一致，焦点圈改成淡魔力色（原本是一圈粗蓝框） */
    :root[data-theme] .swal2-popup {
        width: min(92vw, 360px) !important;
        padding: 22px 22px 18px !important;
        border: 1px solid var(--ru-line-2) !important;
        border-radius: 18px !important;
        background: var(--ru-paper) !important;
        box-shadow: var(--ru-shadow-3) !important;
        font-size: 14px !important;
    }
    :root[data-theme] .swal2-popup .swal2-icon { margin: 6px auto 10px !important; font-size: 10px !important; }
    :root[data-theme] .swal2-popup .swal2-title { margin: 0 !important; padding: 4px 8px 0 !important; color: var(--ru-ink) !important; font: 700 18px/1.4 var(--ru-font-serif) !important; }
    :root[data-theme] .swal2-popup .swal2-html-container { margin: 8px 8px 0 !important; padding: 0 !important; color: var(--ru-ink-2) !important; font-size: 13.5px !important; line-height: 1.7 !important; }
    :root[data-theme] .swal2-popup .swal2-actions { gap: 8px !important; margin: 18px auto 0 !important; }
    :root[data-theme] .swal2-popup .swal2-styled {
        height: 34px !important;
        margin: 0 !important;
        padding: 0 18px !important;
        border: 1px solid var(--ru-line-2) !important;
        border-radius: var(--ru-r-pill) !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        line-height: 32px !important;
        box-shadow: none !important;
    }
    :root[data-theme] .swal2-popup .swal2-styled.swal2-confirm { border-color: var(--ru-mana) !important; background: var(--ru-mana) !important; color: var(--ru-mana-on) !important; }
    :root[data-theme] .swal2-popup .swal2-styled.swal2-cancel,
    :root[data-theme] .swal2-popup .swal2-styled.swal2-deny { background: var(--ru-paper) !important; color: var(--ru-ink) !important; }
    :root[data-theme] .swal2-popup .swal2-styled:focus,
    :root[data-theme] .swal2-popup .swal2-styled:focus-visible { outline: none !important; box-shadow: 0 0 0 3px var(--ru-mana-soft) !important; }
    :root[data-theme] .swal2-popup .swal2-input,
    :root[data-theme] .swal2-popup .swal2-textarea { margin: 12px 0 0 !important; border: 1px solid var(--ru-line-2) !important; border-radius: 10px !important; background: var(--ru-paper) !important; color: var(--ru-ink) !important; font-size: 14px !important; box-shadow: none !important; }
    :root[data-theme] .swal2-popup .swal2-input { height: 38px !important; }

    /* select2（下拉挂在 body 上） */
    :root[data-theme] .select2-container--default .select2-selection--single,
    :root[data-theme] .select2-container--default .select2-selection--multiple { min-height: 38px !important; border: 1px solid var(--ru-line-2) !important; border-radius: 10px !important; background: var(--ru-paper) !important; box-shadow: none !important; }
    :root[data-theme] .select2-container--default .select2-selection--single { height: 38px !important; }
    :root[data-theme] .select2-container--default .select2-selection--single .select2-selection__rendered { padding-left: 12px !important; color: var(--ru-ink) !important; font-size: 13.5px !important; line-height: 36px !important; }
    :root[data-theme] .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--ru-ink-4) !important; }
    :root[data-theme] .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px !important; right: 8px !important; }
    :root[data-theme] .select2-container--default.select2-container--open .select2-selection,
    :root[data-theme] .select2-container--default.select2-container--focus .select2-selection { border-color: var(--ru-mana) !important; box-shadow: 0 0 0 3px var(--ru-mana-soft) !important; }
    :root[data-theme] .select2-dropdown { overflow: hidden !important; border: 1px solid var(--ru-line-2) !important; border-radius: 12px !important; background: var(--ru-paper) !important; color: var(--ru-ink) !important; box-shadow: var(--ru-shadow-3) !important; }
    :root[data-theme] .select2-dropdown .select2-results__options { padding: 4px !important; }
    :root[data-theme] .select2-results__option { padding: 7px 10px !important; border-radius: 8px !important; color: var(--ru-ink) !important; font-size: 13px !important; }
    :root[data-theme] .select2-container--default .select2-results__option[aria-selected="true"] { background: var(--ru-mana-soft) !important; color: var(--ru-mana-text) !important; }
    :root[data-theme] .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--ru-paper-2) !important; color: var(--ru-ink) !important; }
    :root[data-theme] .select2-search--dropdown .select2-search__field { height: 34px !important; padding: 0 10px !important; border: 1px solid var(--ru-line-2) !important; border-radius: 8px !important; background: var(--ru-paper) !important; color: var(--ru-ink) !important; }
}
.uc-ticket-option { display: flex; align-items: center; gap: 10px; }
.uc-ticket-option img { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; }
.uc-ticket-option__copy { display: grid; gap: 1px; min-width: 0; }
.uc-ticket-option__copy small { color: var(--ru-ink-3); font-size: 11.5px; }

/* EditorV2：外框跟主题一致（弹窗挂在 body 上，所以按 body.ru 限定，不按 .ru-member）。
   编辑区是 CodeMirror，自带白底黑字与亮色语法色：夜间会是一块刺眼的白板 → 底色透明、文字与语法色走主题令牌 */
:root[data-theme] .ru .ev2-editor { overflow: hidden; border: 1px solid var(--ru-line-2); border-radius: 12px; background: var(--ru-paper); }
:root[data-theme] .ru .ev2-editor .CodeMirror { background: transparent; color: var(--ru-ink); }
:root[data-theme] .ru .ev2-editor .CodeMirror-cursor { border-left-color: var(--ru-ink); }
:root[data-theme] .ru .ev2-editor .CodeMirror-selected,
:root[data-theme] .ru .ev2-editor .CodeMirror-focused .CodeMirror-selected { background: var(--ru-mana-soft); }
:root[data-theme] .ru .ev2-editor .CodeMirror-line::selection,
:root[data-theme] .ru .ev2-editor .CodeMirror-line > span::selection,
:root[data-theme] .ru .ev2-editor .CodeMirror-line > span > span::selection { background: var(--ru-mana-soft); }
:root[data-theme] .ru .ev2-editor .CodeMirror-gutters { border-right-color: var(--ru-line); background: var(--ru-paper-2); }
:root[data-theme] .ru .ev2-editor .CodeMirror-linenumber { color: var(--ru-ink-4); }
:root[data-theme] .ru .ev2-editor .cm-s-default .cm-header { color: var(--ru-mana-text); }
:root[data-theme] .ru .ev2-editor .cm-s-default .cm-link,
:root[data-theme] .ru .ev2-editor .cm-s-default .cm-url { color: var(--ru-water); }
:root[data-theme] .ru .ev2-editor .cm-s-default .cm-quote,
:root[data-theme] .ru .ev2-editor .cm-s-default .cm-formatting,
:root[data-theme] .ru .ev2-editor .cm-s-default .cm-hr { color: var(--ru-ink-3); }
:root[data-theme] .ru .ev2-editor .cm-s-default .cm-comment { color: var(--ru-earth); }
:root[data-theme] .ru .ev2-editor .cm-s-default .cm-tag,
:root[data-theme] .ru .ev2-editor .cm-s-default .cm-bracket { color: var(--ru-fire); }
:root[data-theme] .ru .ev2-editor .cm-s-default .cm-attribute,
:root[data-theme] .ru .ev2-editor .cm-s-default .cm-string { color: var(--ru-wind); }
:root[data-theme] .ru .ev2-editor .cm-s-default .cm-variable-2,
:root[data-theme] .ru .ev2-editor .cm-s-default .cm-variable-3,
:root[data-theme] .ru .ev2-editor .cm-s-default .cm-keyword { color: var(--ru-ink); }

/* ---------------------------------------------------------------- 14. 登录注册 */
.ru-auth__card { position: relative; display: grid; gap: 14px; }
.ru-auth__brand { display: flex; align-items: center; gap: 10px; color: var(--ru-ink); }
.ru-auth__brand img { border-radius: 12px; object-fit: cover; box-shadow: 0 0 0 1px var(--ru-line-2); }
.ru-auth__brand b { font: 800 16px/1.3 var(--ru-font-serif); letter-spacing: .04em; }
.ru-auth__title { margin: 2px 0 0; color: var(--ru-ink); font: 800 23px/1.3 var(--ru-font-serif); letter-spacing: .04em; }
.ru-auth__lead { margin: -8px 0 2px; color: var(--ru-ink-3); font-size: 13px; }
.ru-auth__form { display: grid; gap: 14px; }
.ru-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ru-auth__link { color: var(--ru-mana-text); font-size: 13px; font-weight: 600; }
.ru-auth__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.ru-auth__alt { display: grid; gap: 8px; }
.ru-auth__or { display: flex; align-items: center; gap: 12px; color: var(--ru-ink-4); font-size: 12px; }
.ru-auth__or::before, .ru-auth__or::after { content: ""; flex: 1; height: 1px; background: var(--ru-line); }
/* 第三方登录插件吐的按钮（OAuth2 的 bootstrap 结构） */
.ru-auth__alt .d-grid { display: grid; }
.ru-auth__alt .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 40px; border: 1px solid var(--ru-line-2); border-radius: var(--ru-r-pill); background: var(--ru-paper); color: var(--ru-ink); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.ru-auth__alt .btn:hover { border-color: var(--ru-mana); }
.ru-auth__switch { margin: 0; color: var(--ru-ink-3); font-size: 13px; text-align: center; }
.ru-auth__switch a { margin-left: 4px; color: var(--ru-mana-text); font-weight: 700; }
.ru-auth__switch a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   安全页换皮：两步验证 / 登录设备 / 安全日志
   复用平台 security/totp|device|log.js（#totp-app/#dev-app/#slog-app 内部 DOM 与默认模板一致），
   这里把它们的视觉对齐鲁迪乌斯令牌。作用域 .ru-member 压过 JS 注入的 .totp-*(0,1,0)。
   容器类名是 .ru-secpage，不能叫 .ru-sec：App.css 的 .ru-sec 是手机首页的分节标题（flex 横排），
   撞名时手机上整个安全页被排成左右两栏、设备卡挤到一字一行（2026-09-30 主人反馈登录设备 / 安全日志难看）。
   ============================================================ */
.ru-member .ru-secpage {
    --totp-muted: var(--ru-ink-3);
    --totp-accent: var(--ru-mana);
}

/* 分区标题走衬线字，与 ru-panel__head 一致 */
.ru-member .totp-intro__title,
.ru-member .dev-head__title,
.ru-member .slog-head__title {
    font-family: var(--ru-font-serif);
    color: var(--ru-ink);
    letter-spacing: .02em;
}

/* 平台输入框在安全页铺满整栏 */
.ru-member .totp-field .ru-input,
.ru-member .totp-confirm .ru-input {
    width: 100%;
}

/* 「已开启」徽章、恢复码计数用主色系 */
.ru-member .totp-on__badge {
    color: var(--ru-mana-text);
}

/* 资金二次验证开关行 + 开关（对齐 ru-switchline 观感） */
.ru-member .totp-on__fund {
    border-color: var(--ru-line);
    background: var(--ru-paper-2);
    border-radius: 12px;
}

.ru-member .totp-switch {
    width: 34px;
    height: 20px;
    border-radius: 10px;
    background: rgba(120, 120, 140, .30);
}

.ru-member .totp-switch i {
    width: 16px;
    height: 16px;
    top: 2px;
    left: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

.ru-member .totp-switch.is-on {
    background: var(--ru-mana);
}

.ru-member .totp-switch.is-on i {
    left: 16px;
}

/* 密钥 / 恢复码等宽盒子 */
.ru-member .totp-secret code,
.ru-member .totp-codes__grid code {
    background: var(--ru-paper-2);
    color: var(--ru-ink);
}

/* 设备卡片 / 日志行 边框对齐；当前设备用主色 */
.ru-member .dev-item {
    border-color: var(--ru-line);
    border-radius: 14px;
}

.ru-member .dev-item.is-current {
    border-color: var(--ru-mana);
    background: var(--ru-mana-soft);
}

.ru-member .dev-item__badge {
    color: var(--ru-mana-text);
    border-color: var(--ru-mana);
}

.ru-member .dev-item__ico {
    background: var(--ru-paper-2);
}

.ru-member .slog-item {
    border-bottom-color: var(--ru-line);
}

/* 「只看风险」chip */
.ru-member .slog-chip {
    color: var(--ru-ink-3);
    background: var(--ru-paper-2);
    border: 1px solid var(--ru-line);
    border-radius: 999px;
}

.ru-member .slog-chip.is-on {
    color: var(--ru-fire);
    background: var(--ru-fire-soft);
    border-color: var(--ru-fire);
}

/* device.js/log.js 动态渲染的按钮仍带平台类（.totp-ghost），换皮成 ru 次要按钮观感 */
.ru-member .totp-ghost {
    border: 1px solid var(--ru-line);
    background: var(--ru-paper);
    color: var(--ru-ink);
    border-radius: 10px;
    padding: 6px 14px;
    font-size: 13px;
    transition: border-color .15s, color .15s, background .15s;
}

.ru-member .totp-ghost:hover {
    border-color: var(--ru-mana);
    color: var(--ru-mana-text);
    background: var(--ru-paper-2);
}

/* ============================================================
   通行密钥：复用平台 security/passkey.js（#pk-app 内部 id / class 与默认模板一致），令牌桥沿用 .ru-secpage。
   列表行、圆形图示钮、改名框、空状态是 JS 画的，只能在这里换皮。作用域 .ru-member（0,2,0 起）压过 JS 注入的单类 .pk-*：
   注入的 <style> 排在 head 最后，同权重会赢；平台的暗色规则 [data-theme="dark"] .pk-notice 是 0,2,0，这里要 0,3,0。
   手机版面（iOS 分组列表）在 Member.app.css。
   ============================================================ */
.ru-member .pk-head__title {
    color: var(--ru-ink);
    font-family: var(--ru-font-serif);
    letter-spacing: .02em;
}

.ru-member .pk-count {
    padding: 1px 8px;
    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-3);
    font: 600 11.5px/1.6 var(--ru-font-num);
    letter-spacing: .02em;
}

.ru-member .pk-count:empty {
    display: none;
}

.ru-member .pk-head__ops .material-icons-outlined,
.ru-member .pk-actions .material-icons-outlined {
    font-size: 18px;
}

/* 添加表单：板上再垫一层次级面（电脑端毛玻璃时是半透明的 --pc-sheet-2） */
.ru-member .pk-form__inner {
    padding: 18px 18px 16px;
    border-color: var(--ru-line);
    border-radius: 14px;
    background: var(--pc-sheet-2, var(--ru-paper-2));
}

.ru-member .pk-form__title {
    color: var(--ru-ink);
    font: 700 14.5px/1.35 var(--ru-font-serif);
    letter-spacing: .02em;
}

.ru-member .pk-actions {
    gap: 10px;
    margin-top: 16px;
}

/* 列表行：跟登录设备同一种描边卡；图示格用魔力色淡底 */
.ru-member .pk-item {
    border-color: var(--ru-line);
    border-radius: 14px;
}

.ru-member .pk-item:hover {
    border-color: var(--ru-line-2);
}

.ru-member .pk-item.is-new {
    animation: ru-pk-new 2.4s var(--ru-ease-out);
}

@keyframes ru-pk-new {
    0%, 35% {
        border-color: var(--ru-mana);
        background-color: var(--ru-mana-soft);
    }
}

.ru-member .pk-item__ico {
    border-radius: 12px;
    background: var(--ru-mana-soft);
    color: var(--ru-mana-text);
}

.ru-member .pk-item__name {
    color: var(--ru-ink);
}

.ru-member .pk-icon {
    border-radius: 50%;
    color: var(--ru-ink-3);
}

.ru-member .pk-icon:hover {
    background: var(--ru-mana-soft);
    color: var(--ru-mana-text);
}

.ru-member .pk-icon.pk-del:hover {
    background: var(--ru-fire-soft);
    color: var(--ru-fire);
}

.ru-member .pk-icon.pk-save:hover {
    background: var(--ru-wind-soft);
    color: var(--ru-wind);
}

.ru-member .pk-rename {
    gap: 6px;
}

/* 空状态：虚线槽位 + 魔力色圆章，标题衬线（同 .ru-empty） */
.ru-member .pk-empty {
    padding: 30px 20px 26px;
    border-color: var(--ru-line-2);
    border-radius: 16px;
}

.ru-member .pk-empty__art {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--ru-mana-soft);
    color: var(--ru-mana-text);
}

.ru-member .pk-empty__art .material-icons-outlined {
    font-size: 30px;
}

.ru-member .pk-empty__title {
    color: var(--ru-ink);
    font: 600 16px/1.4 var(--ru-font-serif);
    letter-spacing: .02em;
}

/* 置中的两行说明按分句断（平台给了 balance，逐字断会把「登录」拆成两行）；太长的分句仍可在任意处折 */
.ru-member .pk-empty__desc {
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.ru-member .pk-form__desc,
.ru-member .pk-tip {
    text-wrap: pretty;
}

/* 不支持提示：大地色淡底，正文用墨色（大地色写小字对比不够） */
.ru-member .pk-app .pk-notice {
    border: 1px solid color-mix(in srgb, var(--ru-earth) 28%, transparent);
    background: var(--ru-earth-soft);
    color: var(--ru-ink-2);
}

.ru-member .pk-app .pk-notice .material-icons-outlined {
    color: var(--ru-earth);
}

.ru-member .pk-tip .material-icons-outlined {
    color: var(--ru-wind);
}

@media (prefers-reduced-motion: reduce) {
    .ru-member .pk-item.is-new {
        animation: none;
    }
}

/* ============================================================
   通行密钥登录（#passkey-login，登录页 form 里、主按钮下面）
   次要操作，比主按钮轻一档：细描边 + 近透明的纸面、字重轻一阶，左边一颗魔力色圆片放通行密钥图示（跟主按钮同一对 mana / mana-on）；
   悬停才加重：描边转魔力色、纸面实一点、圆片光晕加深。默认 hidden（Core 的 [hidden] 带 !important），浏览器支持时 login.js 才显示；
   验证中 login.js 加 .is-busy + disabled：不走 .ru-btn[disabled] 的半透明，改成圆片呼吸。
   ============================================================ */
.ru-auth .ru-passkey {
    --b-bg: color-mix(in srgb, var(--ru-paper) 30%, transparent);
    --b-bd: var(--ru-line-2);
    --b-fg: var(--ru-ink-2);
    --b-shine: rgba(255, 255, 255, .32);
    gap: 10px;
    font-weight: 500;
    box-shadow: inset 0 1px 0 var(--b-shine);
}

:root[data-theme="dark"] .ru-auth .ru-passkey {
    --b-shine: rgba(255, 255, 255, .05);
}

.ru-auth .ru-passkey:hover {
    --b-bg: color-mix(in srgb, var(--ru-paper) 80%, transparent);
    --b-fg: var(--ru-mana-text);
    border-color: color-mix(in srgb, var(--ru-mana) 50%, transparent);
    box-shadow: inset 0 1px 0 var(--b-shine), 0 10px 24px -18px var(--ru-mana-glow);
}

.ru-passkey__badge {
    display: grid;
    flex: none;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ru-mana);
    color: var(--ru-mana-on);
    box-shadow: 0 4px 10px -4px var(--ru-mana-glow);
    transition: box-shadow var(--ru-t2) var(--ru-ease-out);
}

.ru-passkey:hover .ru-passkey__badge {
    box-shadow: 0 6px 14px -4px var(--ru-mana-glow);
}

.ru-passkey__icon {
    width: 16px;
    height: 16px;
}

.ru-auth .ru-passkey[disabled] {
    opacity: 1;
    filter: none;
    cursor: progress;
}

.ru-passkey.is-busy .ru-passkey__badge {
    animation: ru-pk-breathe 1.1s var(--ru-ease-io) infinite;
}

@keyframes ru-pk-breathe {
    50% {
        opacity: .45;
        transform: scale(.9);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ru-passkey.is-busy .ru-passkey__badge {
        animation: none;
        opacity: .6;
    }
}

/* ============================================================
   对接白名单：复用平台 security/ipwhitelist.js（页面只放挂载点 #ipwl-app[data-ipwl="page"]，其余全由它画），令牌桥沿用 .ru-secpage。
   跟通行密钥页同一套：衬线标题 + 数量膠囊、右上角主按钮、描边卡清单（魔力色淡底图示格）、展开的添加表单是板上的次级面。
   平台写死的类换成 ru 元件的外观：「添加 IP」与表单的 .uc-cta = 主按钮（同「添加通行密钥」），取消 = 次要按钮，
   被拒来源的 .totp-mini = 小号按钮，.layui-input = .ru-input（会员区 layui 换皮已在 ru-first，这里只补悬停 / 聚焦）。
   作用域 .ru-member .ru-secpage.ipwl（0,3,0 起）：JS 注入的 <style> 排在 head 最后、不分层，同权重会赢；
   它最重的是暗色 :root[data-theme=dark] .ipwl__status.is-warn（0,4,0），所以状态色这几条写到 0,5,0。
   状态色用主题的风（绿）/ 土（琥珀）/ 火（红）令牌；小字一律墨色、只给图示上色（同 .pk-notice：土色写小字对比不够）。
   手机版面（iOS 分组列表）在 Member.app.css；长 IPv6 只在冒号处折行靠 Member.js 补 <wbr>。
   ============================================================ */
.ru-member .ru-secpage.ipwl .ipwl__title {
    gap: 10px;
    color: var(--ru-ink);
    font-family: var(--ru-font-serif);
    letter-spacing: .02em;
}

.ru-member .ru-secpage.ipwl .ipwl__count {
    padding: 1px 8px;
    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-3);
    font: 600 11.5px/1.6 var(--ru-font-num);
    letter-spacing: .02em;
}

.ru-member .ru-secpage.ipwl .ipwl__desc {
    margin-top: 6px;
    line-height: 1.8;
    text-wrap: pretty;
}

/* 按钮：平台类 → ru-btn 的外形（会员区尺寸 36px / 小号 30px；电脑端膠囊，手机端圆角方在 Member.app.css） */
.ru-member .ru-secpage.ipwl .ipwl__add,
.ru-member .ru-secpage.ipwl .uc-cta,
.ru-member .ru-secpage.ipwl .ipwl__cancel,
.ru-member .ru-secpage.ipwl .totp-mini {
    --b-bg: var(--ru-paper);
    --b-fg: var(--ru-ink);
    --b-bd: var(--ru-line-2);
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: .45em;
    min-height: 36px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--b-bd);
    border-radius: var(--ru-r-pill);
    background: var(--b-bg);
    color: var(--b-fg);
    font: 600 13.5px/1.1 var(--ru-font-sans);
    letter-spacing: .03em;
    white-space: nowrap;
    cursor: pointer;
    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), filter var(--ru-t2);
}

.ru-member .ru-secpage.ipwl .ipwl__add,
.ru-member .ru-secpage.ipwl .uc-cta {
    --b-bg: var(--ru-mana);
    --b-fg: var(--ru-mana-on);
    --b-bd: transparent;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .16) inset, 0 10px 22px -12px var(--ru-mana-glow);
}

.ru-member .ru-secpage.ipwl .ipwl__add {
    padding-left: 13px;
}

.ru-member .ru-secpage.ipwl .ipwl__add .material-icons-outlined,
.ru-member .ru-secpage.ipwl .uc-cta .material-icons-outlined {
    font-size: 18px;
}

.ru-member .ru-secpage.ipwl .totp-mini {
    min-height: 30px;
    padding: 0 12px;
    font-size: 12.5px;
}

.ru-member .ru-secpage.ipwl .ipwl__cancel:hover,
.ru-member .ru-secpage.ipwl .totp-mini:hover {
    border-color: var(--ru-gilt);
}

.ru-member .ru-secpage.ipwl .ipwl__cancel:active,
.ru-member .ru-secpage.ipwl .totp-mini:active {
    transform: translateY(1px) scale(.985);
}

.ru-member .ru-secpage.ipwl .ipwl__add:hover,
.ru-member .ru-secpage.ipwl .uc-cta:hover {
    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-member .ru-secpage.ipwl .ipwl__add:active,
.ru-member .ru-secpage.ipwl .uc-cta:active {
    filter: brightness(.97);
    transform: translateY(0) scale(.985);
}

/* 满 20 条时「添加 IP」与「加入白名单」被禁用；保存请求进行中主按钮也是 disabled */
.ru-member .ru-secpage.ipwl .ipwl__add:disabled,
.ru-member .ru-secpage.ipwl .uc-cta:disabled,
.ru-member .ru-secpage.ipwl .totp-mini:disabled {
    opacity: .52;
    filter: saturate(.5);
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
}

/* 状态条：中性 = 次级面；已启用 = 风（绿）；清单空且开了资金验证 = 土（琥珀）。字是墨色，颜色给底与图示 */
.ru-member .ru-secpage.ipwl .ipwl__status {
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--ru-line);
    border-radius: 12px;
    background: var(--pc-sheet-2, var(--ru-paper-2));
    color: var(--ru-ink-2);
}

.ru-member .ru-secpage.ipwl .ipwl__status .material-icons-outlined {
    margin-top: 1px;
    color: var(--ru-ink-3);
    font-size: 19px;
}

.ru-member .ru-secpage.ipwl .ipwl__status.is-on {
    border-color: color-mix(in srgb, var(--ru-wind) 26%, transparent);
    background: var(--ru-wind-soft);
    color: var(--ru-ink-2);
}

.ru-member .ru-secpage.ipwl .ipwl__status.is-on .material-icons-outlined {
    color: var(--ru-wind);
}

.ru-member .ru-secpage.ipwl .ipwl__status.is-warn {
    border-color: color-mix(in srgb, var(--ru-earth) 30%, transparent);
    background: var(--ru-earth-soft);
    color: var(--ru-ink-2);
}

.ru-member .ru-secpage.ipwl .ipwl__status.is-warn .material-icons-outlined {
    color: var(--ru-earth);
}

/* 添加表单：板上再垫一层次级面（同 .pk-form__inner），不要平台的虚线分隔 */
.ru-member .ru-secpage.ipwl .totp-confirm {
    border-top: 0;
}

.ru-member .ru-secpage.ipwl .totp-confirm.is-open {
    margin-top: 16px;
    padding-top: 0;
}

.ru-member .ru-secpage.ipwl .totp-confirm__inner {
    max-width: 440px;
    padding: 18px 18px 16px;
    border: 1px solid var(--ru-line);
    border-radius: 14px;
    background: var(--pc-sheet-2, var(--ru-paper-2));
}

.ru-member .ru-secpage.ipwl .totp-confirm__title {
    margin-bottom: 14px;
    color: var(--ru-ink);
    font: 700 14.5px/1.35 var(--ru-font-serif);
    letter-spacing: .02em;
}

.ru-member .ru-secpage.ipwl .totp-field {
    margin-bottom: 14px;
}

.ru-member .ru-secpage.ipwl .totp-field label {
    margin-bottom: 6px;
    color: var(--ru-ink-2);
    font: 600 12.5px/1.3 var(--ru-font-sans);
    letter-spacing: .02em;
}

.ru-member .ru-secpage.ipwl .ipwl__hint {
    margin-top: 7px;
    line-height: 1.65;
    text-wrap: pretty;
}

.ru-member .ru-secpage.ipwl .totp-actions {
    gap: 10px;
    margin-top: 18px;
}

/* 平台 layui 输入框的换皮在 ru-first 里带 !important，层外压不动；这里只把悬停 / 聚焦补成 .ru-input 的样子 */
@layer ru-first {
    :root[data-theme] .ru-secpage.ipwl .layui-input:hover {
        border-color: var(--ru-gilt) !important;
    }

    :root[data-theme] .ru-secpage.ipwl .layui-input:focus {
        border-color: var(--ru-mana) !important;
        box-shadow: 0 0 0 4px var(--ru-mana-soft) !important;
    }

    :root[data-theme] .ru--pc .ru-secpage.ipwl .layui-input {
        font-size: 14px !important;
    }
}

/* 清单：跟通行密钥 / 登录设备同一种描边卡；新加的那条用魔力色闪一下（同 .pk-item.is-new） */
.ru-member .ru-secpage.ipwl .ipwl__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.ru-member .ru-secpage.ipwl .ipwl__item {
    gap: 14px;
    padding: 13px 12px 13px 16px;
    border: 1px solid var(--ru-line);
    border-radius: 14px;
    transition: border-color .2s, background-color .2s, opacity .18s ease, transform .18s ease;
}

.ru-member .ru-secpage.ipwl .ipwl__item:hover {
    border-color: var(--ru-line-2);
}

.ru-member .ru-secpage.ipwl .ipwl__item.is-new {
    animation: ipwl-in .36s cubic-bezier(.2, .8, .2, 1), ru-pk-new 2.4s var(--ru-ease-out);
}

.ru-member .ru-secpage.ipwl .ipwl__ico {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--ru-mana-soft);
    color: var(--ru-mana-text);
}

.ru-member .ru-secpage.ipwl .ipwl__ico .material-icons-outlined {
    font-size: 21px;
}

/* IP 用主题的等宽字；不逐字断（平台给的是 break-all），放不下才在冒号后折（<wbr>），再不行才任意处断 */
.ru-member .ru-secpage.ipwl .ipwl__ip,
.ru-member .ru-secpage.ipwl .ipwl__denied-item code {
    color: var(--ru-ink);
    font: 600 14px/1.45 var(--ru-font-mono);
    letter-spacing: .01em;
    word-break: normal;
    overflow-wrap: anywhere;
}

.ru-member .ru-secpage.ipwl .ipwl__meta {
    margin-top: 3px;
    line-height: 1.6;
}

.ru-member .ru-secpage.ipwl .ipwl__meta .is-live {
    color: var(--ru-wind);
}

.ru-member .ru-secpage.ipwl .ipwl__del {
    width: 36px;
    height: 36px;
    color: var(--ru-ink-3);
    transition: background-color var(--ru-t2), color var(--ru-t2);
}

.ru-member .ru-secpage.ipwl .ipwl__del:hover,
.ru-member .ru-secpage.ipwl .ipwl__del:focus-visible {
    background: var(--ru-fire-soft);
    color: var(--ru-fire);
}

.ru-member .ru-secpage.ipwl .ipwl__del .material-icons-outlined {
    font-size: 20px;
}

/* 空清单：虚线槽位（同 .pk-empty） */
.ru-member .ru-secpage.ipwl .ipwl__empty {
    margin-top: 16px;
    padding: 26px 20px;
    border: 1px dashed var(--ru-line-2);
    border-radius: 16px;
    background: transparent;
    color: var(--ru-ink-3);
    font-size: 13px;
    text-align: center;
}

/* 最近被拒绝的来源：土色淡底卡（同 .pk-notice），每个来源之间一条淡分隔 */
.ru-member .ru-secpage.ipwl .ipwl__denied {
    margin-top: 20px;
    padding: 14px 16px 6px;
    border: 1px solid color-mix(in srgb, var(--ru-earth) 28%, transparent);
    border-radius: 14px;
    background: var(--ru-earth-soft);
}

.ru-member .ru-secpage.ipwl .ipwl__denied-title {
    gap: 7px;
    color: var(--ru-ink);
    font-size: 13.5px;
}

.ru-member .ru-secpage.ipwl .ipwl__denied-title .material-icons-outlined {
    color: var(--ru-earth);
    font-size: 19px;
}

.ru-member .ru-secpage.ipwl .ipwl__denied-tip {
    margin: 5px 0 6px;
    color: var(--ru-ink-2);
    font-size: 12.5px;
    text-wrap: pretty;
}

.ru-member .ru-secpage.ipwl .ipwl__denied-item {
    gap: 12px;
    padding: 9px 0;
    border-top: 1px solid color-mix(in srgb, var(--ru-earth) 16%, transparent);
}

.ru-member .ru-secpage.ipwl .ipwl__denied-item span {
    color: var(--ru-ink-2);
    white-space: nowrap;
}

/* 三张说明卡：板上的次级面，图示保持墨色（不做彩色图示卡） */
.ru-member .ru-secpage.ipwl .ipwl__help {
    margin-top: 22px;
}

.ru-member .ru-secpage.ipwl .ipwl__tip {
    gap: 11px;
    padding: 13px 15px;
    border: 1px solid var(--ru-line);
    border-radius: 14px;
    background: var(--pc-sheet-2, var(--ru-paper-2));
}

.ru-member .ru-secpage.ipwl .ipwl__tip > .material-icons-outlined {
    font-size: 19px;
}

.ru-member .ru-secpage.ipwl .ipwl__tip-title {
    margin-bottom: 3px;
    color: var(--ru-ink);
    font-size: 13px;
}

.ru-member .ru-secpage.ipwl .ipwl__tip-text {
    text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
    .ru-member .ru-secpage.ipwl .ipwl__item.is-new {
        animation: none;
    }
}

/* 两步验证页资金开关下方的「对接白名单」提示条：外框就是 .totp-on__fund（同宽同皮），这里给内容配色与琥珀警示态
   （平台的暗色警示是 :root[data-theme=dark] .totp-ipwl-link.is-warn，0,4,0，警示态写到 0,5,0） */
.ru-member .totp-ipwl-link {
    gap: 12px;
    color: var(--ru-ink-3);
}

.ru-member .totp-ipwl-link > .material-icons-outlined {
    color: var(--ru-ink-3);
}

.ru-member .totp-ipwl-link__go {
    color: var(--ru-mana-text);
    font-size: 13px;
}

.ru-member .ru-secpage .totp-on__fund.totp-ipwl-link.is-warn {
    border-color: color-mix(in srgb, var(--ru-earth) 30%, transparent);
    background: var(--ru-earth-soft);
    color: var(--ru-ink-2);
}

.ru-member .ru-secpage .totp-on__fund.totp-ipwl-link.is-warn > .material-icons-outlined {
    color: var(--ru-earth);
}

/* 窄窗口：平台在 560px 以下改成 flex 折行，图示会自己占一行、连结缩进 28px；改成「图示 | 说明」、连结接在说明下面
   （手机端不论宽窄都是这个排法，见 Member.app.css） */
@media (max-width: 560px) {
    .ru-member .totp-ipwl-link {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
        gap: 2px 10px;
    }

    .ru-member .totp-ipwl-link__go {
        grid-column: 2;
        justify-self: start;
        margin-left: 0;
    }
}