/* 云备份页面样式（与「数据辅助」同一水彩纸张风，黑白灰 + 低饱和浅蓝） */
#cloud-backup-page {
    --cb-paper: #faf8f5;
    --cb-ink: #20242a;
    --cb-muted: #737b86;
    --cb-blue: #b9d4e6;
    --cb-blue-soft: rgba(185, 212, 230, 0.42);
    --cb-shadow: rgba(80, 92, 108, 0.12);
    --cb-card: rgba(255, 255, 255, 0.78);
    background:
        radial-gradient(circle at 16% 8%, rgba(185, 212, 230, 0.48) 0, rgba(185, 212, 230, 0) 34%),
        radial-gradient(circle at 86% 18%, rgba(220, 228, 235, 0.62) 0, rgba(220, 228, 235, 0) 30%),
        linear-gradient(160deg, #faf8f5 0%, #f3f6f8 48%, #edf4f8 100%);
    color: var(--cb-ink);
}

#cloud-backup-page .settings-header {
    min-height: 58px;
    padding: 12px 18px 14px;
    background:
        linear-gradient(180deg, rgba(250, 248, 245, 0.92) 0%, rgba(250, 248, 245, 0.72) 100%),
        radial-gradient(circle at 58% 0%, rgba(185, 212, 230, 0.42), transparent 58%);
    border-bottom: 1px solid rgba(104, 121, 138, 0.12);
    box-shadow: 0 10px 28px rgba(92, 106, 122, 0.08);
    backdrop-filter: blur(16px) saturate(1.04);
    -webkit-backdrop-filter: blur(16px) saturate(1.04);
}
#cloud-backup-page .settings-header h1 {
    color: var(--cb-ink);
    font-weight: 800;
    letter-spacing: 0.02em;
}
#cloud-backup-page .back-btn {
    color: rgba(32, 36, 42, 0.86);
    background: rgba(255, 255, 255, 0.48);
    border: 1px solid rgba(104, 121, 138, 0.12);
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(92, 106, 122, 0.08);
}

#cloud-backup-page .settings-content {
    padding: 16px 14px 28px;
    background: transparent;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.cloud-card {
    position: relative;
    margin: 0 0 14px;
    padding: 16px;
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.82) 0%, rgba(246, 248, 249, 0.7) 52%, rgba(231, 241, 247, 0.66) 100%);
    border: 1px solid rgba(255, 255, 255, 0.76);
    box-shadow: 0 14px 34px var(--cb-shadow), inset 0 0 0 1px rgba(138, 156, 176, 0.08);
}

.cloud-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 16px;
    font-weight: 800;
    color: var(--cb-ink);
    margin-bottom: 6px;
}
.cloud-card-sub {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--cb-muted);
    margin-bottom: 10px;
}

/* 厂牌切换 */
.cloud-provider-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.cloud-provider-tab {
    flex: 1 1 auto;
    min-width: 92px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(104, 121, 138, 0.18);
    background: rgba(255, 255, 255, 0.66);
    color: var(--cb-ink);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.18s ease;
}
.cloud-provider-tab.active {
    background: linear-gradient(145deg, rgba(181, 207, 224, 0.95), rgba(220, 232, 240, 0.95));
    border-color: rgba(120, 160, 190, 0.5);
    box-shadow: 0 6px 16px rgba(104, 121, 138, 0.18);
}

/* 表单 */
.cloud-field { display: block; margin-bottom: 12px; }
.cloud-field-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--cb-ink);
    margin-bottom: 6px;
}
.cloud-req { color: #c0563f; font-style: normal; }
.cloud-field-input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 13px;
    border-radius: 12px;
    border: 1px solid rgba(104, 121, 138, 0.22);
    background: rgba(255, 255, 255, 0.92);
    color: var(--cb-ink);
    font-size: 14px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.cloud-field-input:focus {
    border-color: rgba(120, 160, 190, 0.65);
    box-shadow: 0 0 0 3px rgba(185, 212, 230, 0.35);
}
.cloud-field-hint {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--cb-muted);
    margin-top: 5px;
}

.cloud-size-tip {
    font-size: 12px;
    line-height: 1.5;
    color: var(--cb-muted);
    margin: 0 0 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(185, 212, 230, 0.22);
    border: 1px solid rgba(120, 160, 190, 0.25);
}

.cloud-bg-hint {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--cb-muted);
    margin-top: 8px;
}
.cloud-backup-progress {
    font-size: 12.5px;
    line-height: 1.5;
    margin-top: 8px;
    padding: 8px 11px;
    border-radius: 11px;
    color: #3a5e72;
    background: rgba(185, 212, 230, 0.3);
    border: 1px solid rgba(120, 160, 190, 0.3);
}

.cloud-conn-status {
    font-size: 12.5px;
    line-height: 1.5;
    padding: 9px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.6);
    color: var(--cb-muted);
    margin: 4px 0 12px;
}
.cloud-conn-status.ok { background: rgba(196, 226, 205, 0.5); color: #2c5e3a; }
.cloud-conn-status.warn { background: rgba(240, 226, 188, 0.55); color: #7a5b22; }

/* 按钮 */
.cloud-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cloud-actions-inline { display: flex; gap: 8px; margin-bottom: 10px; }
.cloud-primary-btn,
.cloud-secondary-btn {
    flex: 1 1 auto;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 14.5px;
    font-weight: 800;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.cloud-primary-btn {
    color: #fff;
    background: linear-gradient(135deg, #6fa3c4, #5b8bb0);
    box-shadow: 0 8px 20px rgba(91, 139, 176, 0.32);
    width: 100%;
}
.cloud-primary-btn:active { transform: scale(0.98); }
.cloud-secondary-btn {
    color: var(--cb-ink);
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(104, 121, 138, 0.2);
}
.cloud-secondary-btn.danger { color: #b04a36; }

/* 自动备份开关 */
.cloud-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--cb-ink);
    padding: 4px 0 10px;
}
.cloud-switch {
    position: relative;
    width: 50px;
    height: 28px;
    flex: 0 0 auto;
}
.cloud-switch input { opacity: 0; width: 0; height: 0; }
.cloud-switch .cloud-switch-track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: rgba(120, 130, 140, 0.3);
    transition: background 0.2s ease;
}
.cloud-switch .cloud-switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease;
}
.cloud-switch input:checked + .cloud-switch-track { background: #6fa3c4; }
.cloud-switch input:checked + .cloud-switch-track + .cloud-switch-thumb,
.cloud-switch input:checked ~ .cloud-switch-thumb { transform: translateX(22px); }

.cloud-interval { display: flex; gap: 8px; margin-bottom: 8px; }
.cloud-interval-btn {
    flex: 1 1 auto;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(104, 121, 138, 0.2);
    background: rgba(255, 255, 255, 0.7);
    color: var(--cb-ink);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.cloud-interval-btn.active {
    background: linear-gradient(145deg, rgba(181, 207, 224, 0.95), rgba(220, 232, 240, 0.95));
    border-color: rgba(120, 160, 190, 0.5);
}

/* 列表 */
.cloud-list-empty {
    font-size: 13px;
    color: var(--cb-muted);
    padding: 14px 4px;
    text-align: center;
}
.cloud-list-empty.error { color: #b04a36; }
.cloud-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(104, 121, 138, 0.12);
    margin-bottom: 8px;
}
.cloud-list-main { min-width: 0; flex: 1 1 auto; }
.cloud-list-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--cb-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 6px;
}
.cloud-list-sub { font-size: 11.5px; color: var(--cb-muted); margin-top: 3px; }
.cloud-tag {
    flex: 0 0 auto;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
}
.cloud-tag.auto { background: rgba(185, 212, 230, 0.55); color: #2f5e7a; }
.cloud-tag.manual { background: rgba(200, 210, 200, 0.5); color: #4a5a4a; }
.cloud-list-ops { display: flex; gap: 6px; flex: 0 0 auto; }
.cloud-mini-btn {
    padding: 7px 12px;
    border-radius: 10px;
    border: 1px solid rgba(104, 121, 138, 0.22);
    background: rgba(255, 255, 255, 0.9);
    color: var(--cb-ink);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}
.cloud-mini-btn.danger { color: #b04a36; border-color: rgba(176, 74, 54, 0.3); }
.cloud-mini-btn:active { transform: scale(0.96); }

/* 模块网格复用 .full-backup-module-grid / .full-backup-module-card（见 style.css） */
#cloud-module-grid { margin-top: 4px; }

/* ===== 暗色模式 ===== */
html[data-appearance="dark"] #cloud-backup-page {
    --cb-ink: #f1f3f5;
    --cb-muted: rgba(235, 235, 245, 0.66);
    --cb-card: rgba(38, 41, 45, 0.8);
    background:
        radial-gradient(circle at 16% 8%, rgba(101, 132, 152, 0.28) 0, rgba(101, 132, 152, 0) 34%),
        linear-gradient(160deg, #151719 0%, #1b2025 52%, #18222a 100%);
}
html[data-appearance="dark"] #cloud-backup-page .settings-header {
    background:
        linear-gradient(180deg, rgba(24, 26, 29, 0.92), rgba(24, 26, 29, 0.72)),
        radial-gradient(circle at 58% 0%, rgba(101, 132, 152, 0.28), transparent 58%);
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
html[data-appearance="dark"] .cloud-card {
    background: linear-gradient(145deg, rgba(38, 41, 45, 0.82), rgba(28, 33, 38, 0.76) 58%, rgba(29, 43, 52, 0.68));
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}
html[data-appearance="dark"] .cloud-field-input,
html[data-appearance="dark"] .cloud-provider-tab,
html[data-appearance="dark"] .cloud-interval-btn,
html[data-appearance="dark"] .cloud-list-item,
html[data-appearance="dark"] .cloud-mini-btn,
html[data-appearance="dark"] .cloud-secondary-btn {
    background: rgba(48, 53, 58, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--cb-ink);
}
html[data-appearance="dark"] .cloud-conn-status { background: rgba(48, 53, 58, 0.7); }
html[data-appearance="dark"] .cloud-size-tip,
html[data-appearance="dark"] .cloud-backup-progress {
    background: rgba(48, 53, 58, 0.55);
    border-color: rgba(120, 160, 190, 0.2);
    color: #b9d2dd;
}

@media (max-width: 380px) {
    #cloud-backup-page .settings-content { padding-left: 12px; padding-right: 12px; }
    .cloud-provider-tab { min-width: 80px; font-size: 13px; }
}