/**
 * SaveEditor 液态玻璃 — 与主站 liquid-glass-btn.css 配套
 * 覆盖 login-card / save-page / modal / btn-p·btn-s 等编辑器专用结构
 * 含暗色可读性处理（避免白底白字）
 */

/* —— 卡片 / 页面壳 —— */
.save-editor-body .login-card,
.save-editor-body .save-page,
.save-editor-body .detail-page,
.save-editor-body .page,
.save-editor-body .bq-detail-page {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.28) 100%),
        rgba(255, 255, 255, 0.42) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.35) !important;
    backdrop-filter: blur(18px) saturate(1.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 12px 36px rgba(15, 23, 42, 0.1) !important;
}

.save-editor-body .login-body,
.save-editor-body .save-body,
.save-editor-body .detail-body {
    background: transparent !important;
}

/* —— 编辑器按钮别名对齐主站玻璃 —— */
.save-editor-body .btn-p,
.save-editor-body .btn.btn-p {
    --lg-tint: rgba(99, 102, 241, 0.72);
    --lg-glow: rgba(79, 70, 229, 0.45);
    color: #fff !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.08) 40%, rgba(15, 23, 42, 0.1) 100%),
        linear-gradient(135deg, rgba(129, 140, 248, 0.92), rgba(99, 102, 241, 0.88), rgba(79, 70, 229, 0.9)) !important;
    border: 1px solid rgba(199, 210, 254, 0.55) !important;
    border-radius: var(--lg-radius, 16px) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.55) inset,
        0 8px 22px -8px rgba(79, 70, 229, 0.45) !important;
    text-shadow: 0 1px 1px rgba(15, 23, 42, 0.2);
}

.save-editor-body .btn-s,
.save-editor-body .btn-o,
.save-editor-body .btn.btn-s,
.save-editor-body .btn.btn-o,
.save-editor-body .btn-read,
.save-editor-body .btn-cancel,
.save-editor-body .btn-copy {
    color: var(--text-muted, #475569) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.22) 50%, rgba(248, 250, 252, 0.35) 100%),
        rgba(255, 255, 255, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: var(--lg-radius, 16px) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 4px 14px rgba(15, 23, 42, 0.06) !important;
}

.save-editor-body .btn-d,
.save-editor-body .btn.btn-d,
.save-editor-body .btn-danger,
.save-editor-body .btn.btn-danger {
    color: #fff !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.06) 42%, rgba(15, 23, 42, 0.1) 100%),
        linear-gradient(135deg, rgba(251, 113, 133, 0.92), rgba(239, 68, 68, 0.9)) !important;
    border: 1px solid rgba(254, 202, 202, 0.55) !important;
    border-radius: var(--lg-radius, 16px) !important;
}

.save-editor-body .btn-save {
    color: #fff !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.06) 45%, transparent 100%),
        linear-gradient(135deg, rgba(52, 211, 153, 0.92), rgba(16, 185, 129, 0.88)) !important;
    border: 1px solid rgba(167, 243, 208, 0.5) !important;
    border-radius: var(--lg-radius, 16px) !important;
}

.save-editor-body .quick-btn,
.save-editor-body .btn-mini,
.save-editor-body .equip-tab {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.28) 100%),
        rgba(255, 255, 255, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset !important;
    color: var(--text, #0f172a) !important;
}

.save-editor-body .equip-tab.active,
.save-editor-body .player-tab.active,
.save-editor-body .sub-tab.active,
.save-editor-body .detail-tab.active {
    background:
        linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.12)),
        rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(165, 180, 252, 0.7) !important;
    color: var(--primary, #6366f1) !important;
}

/* —— 输入 / 列表 / 拖放 —— */
.save-editor-body .input-group input,
.save-editor-body .input-group select,
.save-editor-body .input-group textarea,
.save-editor-body input[type="text"],
.save-editor-body input[type="password"],
.save-editor-body input[type="number"],
.save-editor-body textarea,
.save-editor-body select {
    background: var(--lg-field-bg) !important;
    border: 1px solid var(--lg-field-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--lg-field-shadow) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.3) !important;
    backdrop-filter: blur(12px) saturate(1.3) !important;
    color: var(--text, #0f172a) !important;
}

.save-editor-body .drop-zone {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.28) 100%),
        rgba(255, 255, 255, 0.35) !important;
    border: 1px dashed rgba(165, 180, 252, 0.55) !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
}

.save-editor-body .save-table-wrap,
.save-editor-body .info-bar,
.save-editor-body .bq-sidebar,
.save-editor-body .bq-panel,
.save-editor-body .panel,
.save-editor-body .field-card,
.save-editor-body .item-row,
.save-editor-body .toolbar,
.save-editor-body .login-mode-tabs {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.28) 100%),
        rgba(255, 255, 255, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.25) !important;
    backdrop-filter: blur(12px) saturate(1.25) !important;
}

.save-editor-body .login-mode-tabs {
    padding: 0.4rem;
    gap: 0.4rem;
    display: flex;
}

.save-editor-body .modal-mask .modal,
.save-editor-body .modal,
.save-editor-body .ys-modal,
.save-editor-body .xy-modal,
.save-editor-body .confirm-modal,
.save-editor-body .editor-toast,
.save-editor-body .toast {
    background: var(--lg-panel-bg) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.4) !important;
    backdrop-filter: blur(20px) saturate(1.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 16px !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 20px 50px rgba(15, 23, 42, 0.18) !important;
}

.save-editor-body .modal-mask {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    background: rgba(15, 23, 42, 0.35) !important;
}

.save-editor-body .save-editor-theme-toggle {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.4) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 6px 18px rgba(15, 23, 42, 0.1) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
}

.save-editor-body #savedAccountsPanel,
.save-editor-body [id$="SavedAccountsPanel"] {
    background: var(--lg-panel-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
}

.save-editor-body .status,
.save-editor-body .status-bar {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.3) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 10px !important;
}

/* =========================================================
   暗色模式（与主站一致：深玻璃 + 可读浅字）
   ========================================================= */
html[data-theme="dark"] .save-editor-body {
    color: #e2e8f0 !important;
}

html[data-theme="dark"] .save-editor-body .login-card,
html[data-theme="dark"] .save-editor-body .save-page,
html[data-theme="dark"] .save-editor-body .detail-page,
html[data-theme="dark"] .save-editor-body .page,
html[data-theme="dark"] .save-editor-body .bq-detail-page,
html[data-theme="dark"] .save-editor-body .save-table-wrap,
html[data-theme="dark"] .save-editor-body .info-bar,
html[data-theme="dark"] .save-editor-body .bq-sidebar,
html[data-theme="dark"] .save-editor-body .bq-panel,
html[data-theme="dark"] .save-editor-body .panel,
html[data-theme="dark"] .save-editor-body .field-card,
html[data-theme="dark"] .save-editor-body .toolbar,
html[data-theme="dark"] .save-editor-body .login-mode-tabs,
html[data-theme="dark"] .save-editor-body .drop-zone,
html[data-theme="dark"] .save-editor-body .modal-mask .modal,
html[data-theme="dark"] .save-editor-body .modal,
html[data-theme="dark"] .save-editor-body .ys-modal,
html[data-theme="dark"] .save-editor-body .xy-modal,
html[data-theme="dark"] .save-editor-body .confirm-modal,
html[data-theme="dark"] .save-editor-body .toast,
html[data-theme="dark"] .save-editor-body .editor-toast,
html[data-theme="dark"] .save-editor-body #savedAccountsPanel,
html[data-theme="dark"] .save-editor-body [id$="SavedAccountsPanel"],
html[data-theme="dark"] .save-editor-body .status,
html[data-theme="dark"] .save-editor-body .status-bar,
html[data-theme="dark"] .save-editor-body .save-editor-theme-toggle {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.015) 100%),
        rgba(20, 24, 34, 0.92) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 10px 28px rgba(0, 0, 0, 0.4) !important;
    color: #e2e8f0 !important;
}

html[data-theme="dark"] .save-editor-body .login-header-text h1,
html[data-theme="dark"] .save-editor-body .save-header h1,
html[data-theme="dark"] .save-editor-body .detail-header h1,
html[data-theme="dark"] .save-editor-body .modal-hdr h3,
html[data-theme="dark"] .save-editor-body label,
html[data-theme="dark"] .save-editor-body .input-group label,
html[data-theme="dark"] .save-editor-body td,
html[data-theme="dark"] .save-editor-body th {
    color: #e2e8f0 !important;
}

html[data-theme="dark"] .save-editor-body .login-header-text p,
html[data-theme="dark"] .save-editor-body .text-dim,
html[data-theme="dark"] .save-editor-body .text-muted,
html[data-theme="dark"] .save-editor-body .muted {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .save-editor-body .input-group input,
html[data-theme="dark"] .save-editor-body .input-group select,
html[data-theme="dark"] .save-editor-body .input-group textarea,
html[data-theme="dark"] .save-editor-body input[type="text"],
html[data-theme="dark"] .save-editor-body input[type="password"],
html[data-theme="dark"] .save-editor-body input[type="number"],
html[data-theme="dark"] .save-editor-body textarea,
html[data-theme="dark"] .save-editor-body select {
    background: var(--lg-field-bg) !important;
    border-color: var(--lg-field-border) !important;
    color: #e8eaef !important;
    -webkit-text-fill-color: #e8eaef;
}

html[data-theme="dark"] .save-editor-body input::placeholder,
html[data-theme="dark"] .save-editor-body textarea::placeholder {
    color: #64748b !important;
}

html[data-theme="dark"] .save-editor-body .input-group input:focus,
html[data-theme="dark"] .save-editor-body .input-group select:focus,
html[data-theme="dark"] .save-editor-body .input-group textarea:focus,
html[data-theme="dark"] .save-editor-body input:focus,
html[data-theme="dark"] .save-editor-body textarea:focus {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%),
        rgba(28, 34, 48, 0.95) !important;
    border-color: rgba(129, 140, 248, 0.55) !important;
    color: #f1f5f9 !important;
    -webkit-text-fill-color: #f1f5f9;
    box-shadow: 0 0 0 4px rgba(129, 140, 248, 0.2) !important;
}

html[data-theme="dark"] .save-editor-body .btn-s,
html[data-theme="dark"] .save-editor-body .btn-o,
html[data-theme="dark"] .save-editor-body .btn.btn-s,
html[data-theme="dark"] .save-editor-body .btn.btn-o,
html[data-theme="dark"] .save-editor-body .btn-outline,
html[data-theme="dark"] .save-editor-body .btn-secondary,
html[data-theme="dark"] .save-editor-body .btn-read,
html[data-theme="dark"] .save-editor-body .btn-cancel,
html[data-theme="dark"] .save-editor-body .btn-copy,
html[data-theme="dark"] .save-editor-body .quick-btn,
html[data-theme="dark"] .save-editor-body .btn-mini,
html[data-theme="dark"] .save-editor-body .equip-tab {
    color: #e2e8f0 !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 100%),
        rgba(30, 36, 52, 0.85) !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
}

html[data-theme="dark"] .save-editor-body .btn-s:hover,
html[data-theme="dark"] .save-editor-body .btn-o:hover,
html[data-theme="dark"] .save-editor-body .btn-outline:hover,
html[data-theme="dark"] .save-editor-body .quick-btn:hover,
html[data-theme="dark"] .save-editor-body .equip-tab:hover {
    color: #c7d2fe !important;
    border-color: rgba(165, 180, 252, 0.4) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 100%),
        rgba(40, 48, 68, 0.9) !important;
}

html[data-theme="dark"] .save-editor-body .equip-tab.active,
html[data-theme="dark"] .save-editor-body .player-tab.active,
html[data-theme="dark"] .save-editor-body .sub-tab.active,
html[data-theme="dark"] .save-editor-body .detail-tab.active {
    color: #c7d2fe !important;
    background:
        linear-gradient(135deg, rgba(99, 102, 241, 0.32), rgba(79, 70, 229, 0.18)),
        rgba(30, 36, 52, 0.9) !important;
    border-color: rgba(165, 180, 252, 0.4) !important;
}

html[data-theme="dark"] .save-editor-body .save-table thead th,
html[data-theme="dark"] .save-editor-body .tbl thead th {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .save-editor-body .save-table tbody td,
html[data-theme="dark"] .save-editor-body .tbl tbody td {
    color: #e2e8f0 !important;
    border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .save-editor-body .save-table tbody tr:hover td,
html[data-theme="dark"] .save-editor-body .tbl tbody tr:hover td {
    background: rgba(99, 102, 241, 0.1) !important;
}

html[data-theme="dark"] .save-editor-body .modal-mask {
    background: rgba(0, 0, 0, 0.55) !important;
}

html[data-theme="dark"] .save-editor-body .btn::before,
html[data-theme="dark"] .save-editor-body .icon-btn::before {
    opacity: 0.35 !important;
}

/* SK5 内联样式页也带 body class 时生效；无 class 时兜底 html 选择器 */
html[data-theme="dark"] body:not(.save-editor-body) .login-card,
html[data-theme="dark"] #loginPage.login-card,
html[data-theme="dark"] #pageLogin.login-card {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.015) 100%),
        rgba(20, 24, 34, 0.92) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
    color: #e2e8f0 !important;
}
