/* ============================================================================
   鲁迪乌斯 · 平台元件换皮（两端共用）
   layer / toastr / SweetAlert2 / 平台 Loading / 卡密弹窗（treasure 兜底）/ 自定义下单栏位（widget_render）

   级联规则（踩过的坑）：
   · md-components.css 装在 ru-platform 层里：层内普通声明输给层外任何普通声明，
     但层内 !important 反而压过层外 !important —— 要压它的 important，只能写进更早声明的 ru-first 层。
   · 商城区 _.css 在层外（会员区跟 md-components 一起进层，见 Support::platformSheets）：它带 !important 的规则
     （layer 标题高度、按钮尺寸等）两种级联下都只有 ru-first 的 !important 压得住。
   ========================================================================= */

/* ---------------------------------------------------------------- 1. 平台 Loading（loading.js：.chahuo-ring-overlay > .chahuo-ring，::before 轨道圈、::after 弧线）
   一枚磨砂圆片托着一道带渐淡尾巴的弧线（颜色本来就吃 --md-primary = 魔力色），全屏只罩一层很淡的纸色。
   · 圆片尺寸写死成 content-box：会员区的平台样式在 ru-platform 层里，Core 的 border-box 重设压过它的 content-box，
     30px 宽塞进 32px 内距，圆片被挤成 32×62 的直立椭圆、弧线偏到右边（推广中心点「N 组」就是这样）。
   · 晚 120ms 才显形：多数请求在那之前就回来了，不会一闪而过；遮罩本身立刻生效，照样挡住连点。
   · 遮罩不做透明度淡入：祖先 opacity < 1 时，圆片的 backdrop-filter 取不到后面的页面，淡入结束那一下会突然糊上去；
     所以只淡入遮罩的底色，圆片自己淡入。 */
:root[data-theme] .chahuo-ring-overlay {
    --chahuo-ring-overlay: rgba(245, 239, 226, .22);
    --chahuo-ring-size: 26px;
    --chahuo-ring-border: 2.5px;
    --chahuo-ring-track: rgba(var(--chahuo-ring-rgb), .12);
    cursor: progress;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
:root[data-theme="dark"] .chahuo-ring-overlay { --chahuo-ring-overlay: rgba(6, 8, 22, .32); }
:root[data-theme] .chahuo-ring-overlay[mask-hidden="false"] { animation: ru-load-veil 240ms var(--ru-ease-out) 120ms both; }
/* 顶端那根进度线跟无刷新换页的 .ru-progress 同一个长相 */
:root[data-theme] .chahuo-ring-overlay::before {
    height: 2.5px;
    background: linear-gradient(90deg, var(--ru-mana), var(--ru-gilt-2));
    box-shadow: 0 0 10px var(--ru-mana-glow);
    animation-delay: 120ms;
}
:root[data-theme] .ru--app .chahuo-ring-overlay::before { top: var(--ru-safe-t, 0px); }
:root[data-theme] .chahuo-ring-overlay .chahuo-ring {
    box-sizing: content-box;
    width: var(--chahuo-ring-size);
    height: var(--chahuo-ring-size);
    padding: 16px;
    border-radius: 50%;
    background: var(--ru-paper);
    box-shadow: 0 0 0 1px var(--ru-line), inset 0 1px 0 rgba(255, 255, 255, .55), 0 2px 6px -2px rgba(74, 52, 20, .12), 0 16px 36px -12px rgba(74, 52, 20, .34);
    animation: ru-load-pop 300ms var(--ru-ease-out) 120ms both;
}
:root[data-theme="dark"] .chahuo-ring-overlay .chahuo-ring {
    box-shadow: 0 0 0 1px var(--ru-line-2), inset 0 1px 0 rgba(255, 255, 255, .07), 0 2px 6px -2px rgba(0, 0, 0, .4), 0 18px 40px -12px rgba(0, 0, 0, .7);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    :root[data-theme]:not([data-ru-fx="lite"]):not([data-ru-tier="low"]) .chahuo-ring-overlay .chahuo-ring {
        background: rgba(251, 247, 238, .7);
        -webkit-backdrop-filter: blur(18px) saturate(1.6);
        backdrop-filter: blur(18px) saturate(1.6);
    }
    :root[data-theme="dark"]:not([data-ru-fx="lite"]):not([data-ru-tier="low"]) .chahuo-ring-overlay .chahuo-ring { background: rgba(22, 26, 51, .66); }
}
/* 弧线：锥形渐变从透明渐到实色当尾巴，头上补一颗圆点当圆头，再用径向遮罩挖成细环；内联模式（按钮里的小圈）同一个样子 */
:root[data-theme] .chahuo-ring::after {
    border: 0;
    background:
        radial-gradient(circle at 50% calc(var(--chahuo-ring-border) / 2), var(--chahuo-ring-color) 0 calc(var(--chahuo-ring-border) / 2), transparent calc(var(--chahuo-ring-border) / 2 + .6px)),
        conic-gradient(transparent, var(--chahuo-ring-color));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--chahuo-ring-border) - .6px), #000 calc(100% - var(--chahuo-ring-border)));
    mask: radial-gradient(farthest-side, transparent calc(100% - var(--chahuo-ring-border) - .6px), #000 calc(100% - var(--chahuo-ring-border)));
    animation: chahuo-ring-spin .9s linear infinite;
}
@keyframes ru-load-veil { from { background-color: transparent; } }
@keyframes ru-load-pop { from { opacity: 0; transform: scale(.86); } }
@keyframes ru-load-fade { from { opacity: 0; } }
/* 减少动效：弧线放慢照转（请求仍要有可见进度），圆片只淡入；md-components 那条会让整枚圆片跟着转，这里压掉 */
@media (prefers-reduced-motion: reduce) {
    :root[data-theme] .chahuo-ring,
    :root[data-theme] .chahuo-ring::before { animation: none; }
    :root[data-theme] .chahuo-ring-overlay .chahuo-ring { animation: ru-load-fade 200ms linear 120ms both; }
    :root[data-theme] .chahuo-ring::after { animation: chahuo-ring-spin 1.8s linear infinite; }
}

/* ---------------------------------------------------------------- 2. 平台弹窗右上角的角色小图（ks.webp）：本主题不要它，手机上还会露在抽屉上方 */
.component-popup-acg { display: none !important; }

/* ---------------------------------------------------------------- 3. layer 弹窗 */
:root[data-theme] .layui-layer:not(.layui-layer-msg):not(.layui-layer-tips):not(.layui-layer-loading) {
    border: 1px solid var(--ru-line-2);
    border-radius: 16px;
    background: var(--ru-paper);
    color: var(--ru-ink);
    box-shadow: var(--ru-shadow-3);
}
/*
  标题 / 按钮 / 右上角钮：component.css 给所有 layer 上了 !important —— 标题 height 与 line-height 锁 42px、字 1.15rem，
  按钮 28px 高、确定钮字色写死绿色。主题的上下内距配上锁死的高度，标题字会被截掉下半截（「查看卡密」等普通弹窗）。
  这几项一律在 ru-first 里用 !important 重写：ru-first 的 !important 在商城区（_.css 在层外）与会员区（_.css 在层里）都压得过它。
  手机端的底部抽屉（.ru-layer-sheet）、会员区的表单弹窗（.component-popup）另有自己的外框规则，这里排除。
*/
@layer ru-first {
    :root[data-theme] .layui-layer:not(.ru-layer-sheet):not(.component-popup) > .layui-layer-title {
        height: auto !important;
        padding: 16px 56px 12px 20px !important;
        overflow: hidden !important;
        border-bottom: 1px dashed var(--ru-line-2) !important;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--ru-ink) !important;
        font: 700 16px/1.4 var(--ru-font-serif) !important;
        letter-spacing: .03em !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }
    :root[data-theme] .layui-layer:not(.ru-layer-sheet):not(.component-popup) > .layui-layer-setwin { top: 17px !important; }
    :root[data-theme] .layui-layer .layui-layer-btn a {
        height: 36px !important;
        margin: 0 0 0 8px !important;
        border: 1px solid var(--ru-line-2) !important;
        padding: 0 18px !important;
        border-radius: var(--ru-r-pill) !important;
        font-weight: 600 !important;
        line-height: 34px !important;
    }
    :root[data-theme] .layui-layer .layui-layer-btn .layui-layer-btn0 {
        border-color: transparent !important;
        background: linear-gradient(135deg, var(--ru-mana), var(--ru-mana-deep)) !important;
        color: var(--ru-mana-on) !important;
        box-shadow: none !important;
    }
    :root[data-theme] .layui-layer .layui-layer-btn .layui-layer-btn1 {
        border-color: var(--ru-line-2) !important;
        background: var(--ru-paper) !important;
        color: var(--ru-ink) !important;
        box-shadow: none !important;
    }
}
:root[data-theme] .layui-layer-setwin .layui-layer-close1 { opacity: .6; }
:root[data-theme] .layui-layer-shade { background-color: var(--ru-scrim) !important; opacity: 1 !important; }

/* ---------------------------------------------------------------- 4. toastr（平台自己的报错提示；主题自己的提示走 RU.toast） */
@layer ru-first {
    :root[data-theme] #toast-container > div {
        border-radius: 14px !important;
        background-color: var(--ru-paper) !important;
        box-shadow: var(--ru-shadow-3), inset 0 0 0 1px var(--ru-line-2) !important;
    }
}

/* ---------------------------------------------------------------- 5. SweetAlert2（message.ask / prompt） */
:root[data-theme] .swal2-popup {
    border: 1px solid var(--ru-line-2);
    border-radius: 20px;
    background: var(--ru-paper);
    color: var(--ru-ink);
    box-shadow: var(--ru-shadow-3), 0 0 0 6px var(--ru-mana-soft);
}
:root[data-theme] .swal2-title { font-family: var(--ru-font-serif); font-weight: 800; letter-spacing: .03em; }
:root[data-theme] .swal2-styled { border-radius: var(--ru-r-sm) !important; font-weight: 600 !important; }
@layer ru-first {
    :root[data-theme] .swal2-actions .swal2-confirm.swal2-styled {
        background: linear-gradient(135deg, var(--ru-mana), var(--ru-mana-deep)) !important;
        color: var(--ru-mana-on) !important;
    }
}

/* ---------------------------------------------------------------- 6. 卡密弹窗（treasure.show 兜底时）：权重要压过它临时注入的 #acg-secret-style */
:root[data-theme] .layui-layer .acg-secret__code {
    border: 1px solid var(--ru-line-2);
    border-radius: 12px;
    background: var(--ru-paper-2);
    color: var(--ru-ink);
}
:root[data-theme] .layui-layer .acg-secret__btn { border-color: var(--ru-line-2); color: var(--ru-ink-2); }

/* ---------------------------------------------------------------- 7. 自定义下单栏位（widget_render 吐的是 bootstrap 类名，商城页没载 bootstrap） */
.ru-buy .form-label,
.ru-widgets .form-label {
    display: block;
    margin: 0 0 8px;
    color: var(--ru-ink-2);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
}
.ru-buy .form-control,
.ru-widgets .form-control {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid var(--ru-line-2);
    border-radius: var(--ru-r-sm);
    background: var(--ru-paper);
    color: var(--ru-ink);
    font: 400 15px/1.45 var(--ru-font-sans);
    transition: border-color var(--ru-t2), box-shadow var(--ru-t2);
}
.ru-buy textarea.form-control, .ru-widgets textarea.form-control { min-height: 88px; }
.ru-buy .form-control:focus,
.ru-widgets .form-control:focus { border-color: var(--ru-mana); box-shadow: 0 0 0 4px var(--ru-mana-soft); outline: none; }
.ru-buy .form-check-inline,
.ru-widgets .form-check-inline { display: inline-flex; align-items: center; gap: 6px; margin: 0 14px 6px 0; }
.ru-buy .form-check-input,
.ru-widgets .form-check-input { width: 18px; height: 18px; margin: 0; accent-color: var(--ru-mana); }
.ru-buy .form-check-label,
.ru-widgets .form-check-label { color: var(--ru-ink); font-size: 14px; }
.ru-widgets > div + div { margin-top: 14px; }