/* ============================================================
   components.css — 共享组件层 (v6.57 组件标准化)
   层A: index.html 内联 !important 的抽取落点 (零视觉迁移)
   层B: 次级页 (admin/otc/about/faq) 共享组件类 [待接入]

   架构 (重要性等级保持):
   - 只迁走原内联中带 !important 的声明 (background / backdrop-filter)。
     border / color / box-shadow 在原内联中是普通声明, 保留在内联里,
     让主题规则继续按基线渗透 (grid-card-styles 还依赖
     [style*="color: #fff"] 属性选择器, color 必须留在内联)。
   - 内联 !important 在级联中胜过任何样式表 !important; 抽到类后
     必须按竞对逐处补权重:
     * 通用主题规则 (0,2,1) !! → 基类同权重, 本表链接最末顺序胜;
     * fun-mode.css 对 11 个弹窗 id 有 (1,2,1) !! → fun 盾层 (1,3,1);
     * fun 对 soft 三弹窗设 backdrop-filter: none !! → soft 盾层只保 bf;
     * ref-modal.css 浅色兜底 (1,4,1) !! → user-badge 浅色盾 (1,5,1),
       只重申 background (基线浅色态 border/color 本就渗透主题值)。
   ============================================================ */

/* --- 硬玻璃基类: 只承载原内联 !important 的 bg + backdrop-filter --- */
body .modal-content.np-glass {
    --np-bg: radial-gradient(circle at 50% 0%, rgba(30, 34, 53, 0.95), rgba(11, 15, 25, 0.95));
    background: var(--np-bg) !important;
    backdrop-filter: saturate(150%) blur(24px) !important;
    -webkit-backdrop-filter: saturate(150%) blur(24px) !important;
}

/* --- bg 变体 (仅覆盖 --np-bg) --- */
body .modal-content.np-glass--deep98 {
    --np-bg: radial-gradient(circle at 50% 0%, rgba(30, 34, 53, 0.98), rgba(11, 15, 25, 0.98));
}
body .modal-content.np-glass--slate {
    --np-bg: rgba(15, 23, 42, 0.95);
}
body .modal-content.np-glass--slate-deep {
    --np-bg: rgba(15, 23, 42, 0.98);
}

/* --- 软玻璃: 基线 bg 为普通内联(保留), 类只承接 backdrop-filter !important --- */
body .modal-content.np-glass-soft {
    backdrop-filter: saturate(150%) blur(24px) !important;
    -webkit-backdrop-filter: saturate(150%) blur(24px) !important;
}

/* --- fun 盾层 (硬玻璃): fun-mode.css id 规则 (1,2,1) !! → (1,3,1) 重申 bg+bf --- */
body.fun-mode #checkin-modal .modal-content.np-glass,
body.fun-mode #spin-result-modal-wrapper .modal-content.np-glass,
body.fun-mode #spin-history-modal .modal-content.np-glass,
body.fun-mode #insufficient-modal .modal-content.np-glass,
body.fun-mode #flash-swap-modal .modal-content.np-glass,
body.fun-mode #agent-pay-modal .modal-content.np-glass,
body.fun-mode #edit-profile-modal .modal-content.np-glass,
body.fun-mode #create-choice-modal .modal-content.np-glass,
body.fun-mode #agent-create-modal .modal-content.np-glass,
body.fun-mode #private-create-modal .modal-content.np-glass,
body.fun-mode #agent-dashboard-modal .modal-content.np-glass,
/* modal-warm.css .lucky-cream-modal .modal-content (0,3,1) !! → 同为 (1,3,1) 压制 */
body.fun-mode #wallet-detail-modal .modal-content.np-glass {
    background: var(--np-bg) !important;
    backdrop-filter: saturate(150%) blur(24px) !important;
    -webkit-backdrop-filter: saturate(150%) blur(24px) !important;
}

/* --- fun 盾层 (软玻璃): 竞对 backdrop-filter: none !! → 只重申 bf --- */
body.fun-mode #team-deposits-modal .modal-content.np-glass-soft,
body.fun-mode #friends-modal-wrapper .modal-content.np-glass-soft,
body.fun-mode #transfer-modal-wrapper .modal-content.np-glass-soft {
    backdrop-filter: saturate(150%) blur(24px) !important;
    -webkit-backdrop-filter: saturate(150%) blur(24px) !important;
}

/* --- 浅色盾: ref-modal.css (1,4,1) !! → (1,5,1), 只重申 bg
       (基线浅色态 border/color 由主题渗透, 不得重申) --- */
body:not(.dark-mode):not(.is-lucky-mode):not(.fun-mode) #user-badge-modal .modal-content.np-glass {
    background: var(--np-bg) !important;
}

/* --- 零散内联 !important 的抽取落点 --- */
body .np-br-16 { border-radius: 16px !important; }
body .np-br-12 { border-radius: 12px !important; }

/* id 级权重 (1,1,1): 压过 fun 竞对 .nav-item.ui-skeleton (0,3,1) !! */
body #nav-poker.np-nav-hot {
    color: #facc15 !important;
    font-weight: 700;
    cursor: pointer;
}

body p.np-hero-sub {
    font-size: 0.85rem !important;
    text-align: center;
    max-width: 80%;
    margin: 0 auto !important;
    opacity: 0.7;
}

body .np-plain-reset {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
/* fun 竞对: body.fun-mode #agent-dashboard-modal #agent-dash-hud>div (2,1,2) !!
   → (2,2,2) 重申三个重置 */
body.fun-mode #agent-dashboard-modal #agent-dash-hud > div.np-plain-reset {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* fun 竞对: .lucky-btn-neon.btn-spin-10 (0,4,1) !! → 同权重顺序胜 */
body .lucky-btn-neon.btn-spin-10.np-btn-danger-solid {
    background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
    border-color: #ef4444 !important;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3) !important;
    width: 100%;
    padding: 14px;
    font-size: 1.05em;
    font-weight: bold;
    border-radius: 12px;
    margin-top: 4px;
}

body .lucky-btn-neon.btn-spin-10.np-btn-nightblue {
    background: linear-gradient(135deg, #1e3a8a, #312e81) !important;
    color: #93c5fd !important;
    border-color: #3b82f6 !important;
}

/* ============================================================
   层B — 次级页共享语义组件 (admin / otc / about / faq)
   视觉口径: 逐页目检 (不要求零视觉); 主站不使用任何 .np-<语义> 类,
   本节对主站零影响 (tokens 仅新增命名空间变量)。
   页面可用同名自定义属性覆写 --np-* 做局部定制。
   ============================================================ */

:root {
    /* 语义色 (统一: 成功色收敛为 #10b981, 原 #52c41a/#34d399 系遗留) */
    --np-success: #10b981;
    --np-danger: #ef4444;
    --np-warning: #f59e0b;
    --np-info: #38bdf8;
    /* 深色静态页基色 (about / faq) */
    --np-bg-dark: #0f172a;
    --np-panel-dark: #1e293b;
    --np-text-dark: #e2e8f0;
    --np-muted-dark: #94a3b8;
    --np-border-dark: #334155;
}

/* --- Toast (原 admin/otc 逐字重复块; 主站 .toast/#toast-container 不受影响) --- */
.np-toast-container {
    position: fixed;
    top: max(20px, env(safe-area-inset-top));
    right: 20px;
    z-index: 100002;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}
.np-toast {
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: saturate(150%) blur(20px);
    -webkit-backdrop-filter: saturate(150%) blur(20px);
    border: 1px solid rgba(56, 189, 248, 0.3);
    border-left: 2px solid var(--np-info);
    color: #f8fafc;
    padding: 10px 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(56, 189, 248, 0.15);
    border-radius: 8px;
    margin-bottom: 0;
    animation: npToastIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 0.85rem;
    font-weight: normal;
    pointer-events: auto;
    transition: all 0.3s ease;
    max-width: 300px;
}
@keyframes npToastIn {
    from { opacity: 0; transform: translateX(100%) scale(0.9); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

/* --- 徽章 (语义色统一; admin 原 .badge 族保留不动) --- */
.np-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}
.np-badge--success { background: rgba(16, 185, 129, 0.12); color: var(--np-success); }
.np-badge--danger  { background: rgba(239, 68, 68, 0.12);  color: var(--np-danger); }
.np-badge--warning { background: rgba(245, 158, 11, 0.12); color: var(--np-warning); }
.np-badge--info    { background: rgba(56, 189, 248, 0.12); color: var(--np-info); }
.np-badge--muted   { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }

/* --- 卡片基类 --- */
.np-card {
    background: var(--np-card-bg, #ffffff);
    border: 1px solid var(--np-card-border, rgba(15, 23, 42, 0.08));
    border-radius: 12px;
    padding: 20px;
    box-shadow: var(--np-card-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05));
}

/* --- 模态 (otc api-doc-modal 首接入; dark-mode 内置) --- */
.np-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}
.np-modal__content {
    background: #fff;
    color: #333;
    width: 90%;
    max-width: 420px;
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
    text-align: left;
}
.np-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.np-modal__header h3 { margin: 0; font-size: 1.3rem; font-weight: 800; color: #111; }
.np-modal__close {
    background: #f5f5f5;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: #666;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.2s;
}
.np-modal__close:hover { background: #eee; color: #111; transform: scale(1.05); }
/* dark 覆写须 !important: otc api-doc-modal 内联样式承重 (与原 .modal-content 覆写等价) */
body.dark-mode .np-modal__content {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.95)) !important;
    color: #f1f5f9 !important;
    border: 1px solid rgba(56, 189, 248, 0.2) !important;
}
body.dark-mode .np-modal__header h3 { color: #f1f5f9 !important; }
body.dark-mode .np-modal .np-modal__close { background: rgba(255, 255, 255, 0.08); color: #94a3b8; }
body.dark-mode .np-modal .np-modal__close:hover { background: rgba(255, 255, 255, 0.16); color: #f1f5f9; }

/* --- 输入框基类 --- */
.np-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--np-input-border, rgba(15, 23, 42, 0.08));
    background: var(--np-input-bg, #f8fafc);
    color: var(--np-input-color, #0f172a);
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 0.875rem;
    outline: none;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.np-input:focus {
    border-color: var(--np-info);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}