:root {
            --color-primary: #FF6B8B;
            --color-primary-dark: #E5526F;
            --color-primary-light: #FFF0F3;
            --color-primary-rgb: 255,107,139;
            --color-bg-page: #F8FAFC;
            --color-bg-page-end: #E2E8F0;
            --color-bg-card: #ffffff;
            --color-bg-sidebar: #ffffff;
            --color-bg-header: #ffffff;
            --color-bg-subtle: #FAFBFC;
            --color-bg-hover: #F8FAFC;
            --color-bg-input: #ffffff;
            --color-text: #1e293b;
            --color-text-secondary: #64748b;
            --color-text-muted: #94a3b8;
            --color-text-faint: #cbd5e1;
            --color-border: #E2E8F0;
            --color-border-light: rgba(0,0,0,0.04);
            --color-shadow: rgba(0,0,0,0.06);
            --color-shadow-hover: rgba(0,0,0,0.1);
            --color-overlay: rgba(15,23,42,0.4);
            --color-modal-bg: #ffffff;
            --color-scrollbar: #cbd5e1;
            --color-scrollbar-hover: #94a3b8;
        }
        [data-theme="dark"] {
            --color-primary-light: rgba(255,107,139,0.15);
            --color-bg-page: #0f172a;
            --color-bg-page-end: #1e293b;
            --color-bg-card: #1e293b;
            --color-bg-sidebar: #1e293b;
            --color-bg-header: #1e293b;
            --color-bg-subtle: #162032;
            --color-bg-hover: #334155;
            --color-bg-input: #0f172a;
            --color-text: #f1f5f9;
            --color-text-secondary: #94a3b8;
            --color-text-muted: #64748b;
            --color-text-faint: #475569;
            --color-border: #334155;
            --color-border-light: rgba(255,255,255,0.06);
            --color-shadow: rgba(0,0,0,0.3);
            --color-shadow-hover: rgba(0,0,0,0.4);
            --color-overlay: rgba(0,0,0,0.6);
            --color-modal-bg: #1e293b;
            --color-scrollbar: #475569;
            --color-scrollbar-hover: #64748b;
        }
        [data-theme-color="ocean"] {
            --color-primary: #3B82F6;
            --color-primary-dark: #2563EB;
            --color-primary-light: #EFF6FF;
            --color-primary-rgb: 59,130,246;
        }
        [data-theme-color="ocean"][data-theme="dark"] {
            --color-primary-light: rgba(59,130,246,0.15);
        }
        [data-theme-color="emerald"] {
            --color-primary: #10B981;
            --color-primary-dark: #059669;
            --color-primary-light: #ECFDF5;
            --color-primary-rgb: 16,185,129;
        }
        [data-theme-color="emerald"][data-theme="dark"] {
            --color-primary-light: rgba(16,185,129,0.15);
        }
        [data-theme-color="amber"] {
            --color-primary: #F59E0B;
            --color-primary-dark: #D97706;
            --color-primary-light: #FFFBEB;
            --color-primary-rgb: 245,158,11;
        }
        [data-theme-color="amber"][data-theme="dark"] {
            --color-primary-light: rgba(245,158,11,0.15);
        }
        [data-theme-color="violet"] {
            --color-primary: #8B5CF6;
            --color-primary-dark: #7C3AED;
            --color-primary-light: #F5F3FF;
            --color-primary-rgb: 139,92,246;
        }
        [data-theme-color="violet"][data-theme="dark"] {
            --color-primary-light: rgba(139,92,246,0.15);
        }
        [data-theme-color="cyan"] {
            --color-primary: #06B6D4;
            --color-primary-dark: #0891B2;
            --color-primary-light: #ECFEFF;
            --color-primary-rgb: 6,182,212;
        }
        [data-theme-color="cyan"][data-theme="dark"] {
            --color-primary-light: rgba(6,182,212,0.15);
        }
        [data-theme-color="rose"] {
            --color-primary: #F43F5E;
            --color-primary-dark: #E11D48;
            --color-primary-light: #FFF1F2;
            --color-primary-rgb: 244,63,94;
        }
        [data-theme-color="rose"][data-theme="dark"] {
            --color-primary-light: rgba(244,63,94,0.15);
        }
        [data-theme-color="indigo"] {
            --color-primary: #6366F1;
            --color-primary-dark: #4F46E5;
            --color-primary-light: #EEF2FF;
            --color-primary-rgb: 99,102,241;
        }
        [data-theme-color="indigo"][data-theme="dark"] {
            --color-primary-light: rgba(99,102,241,0.15);
        }
        * { font-family: 'Nunito', system-ui, -apple-system, sans-serif; -webkit-tap-highlight-color: transparent; }
        body { background: linear-gradient(145deg, var(--color-bg-page), var(--color-bg-page-end)); min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--color-text); transition: background 0.3s, color 0.3s; }
        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: var(--color-scrollbar); border-radius: 10px; }
        ::-webkit-scrollbar-thumb:hover { background: var(--color-scrollbar-hover); }
        :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; }
        button, a, [role="button"] { touch-action: manipulation; }

        .glass { background: rgba(255,255,255,0.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.5); }
        .glass-dark { background: rgba(255,255,255,0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.6); }
        .card { background: var(--color-bg-card); border-radius: 16px; box-shadow: 0 4px 24px var(--color-shadow); border: 1px solid var(--color-border-light); transition: all 0.3s ease; }
        .card:hover { box-shadow: 0 8px 32px var(--color-shadow-hover); transform: translateY(-2px); }
        .card-static { background: var(--color-bg-card); border-radius: 16px; box-shadow: 0 4px 24px var(--color-shadow); border: 1px solid var(--color-border-light); box-sizing: border-box; overflow: hidden; }

        @keyframes floatIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes smoothFade { from { opacity: 0; } to { opacity: 1; } }
        @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
        @keyframes slideInLeft { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
        @keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
        @keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

        .anim-float { animation: floatIn 0.6s ease-out forwards; }
        .anim-fade { animation: smoothFade 0.5s ease-out forwards; }
        .anim-pulse { animation: pulse 2s ease-in-out infinite; }
        .anim-slide-left { animation: slideInLeft 0.5s ease-out forwards; }
        .anim-slide-right { animation: slideInRight 0.5s ease-out forwards; }
        .anim-scale { animation: scaleIn 0.4s ease-out forwards; }

        .btn-primary { background: var(--color-primary); color: #fff; border-radius: 12px; padding: 10px 24px; font-weight: 700; transition: all 0.3s; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
        .btn-primary:hover { background: var(--color-primary-dark); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(var(--color-primary-rgb),0.4); }
        .btn-primary:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(var(--color-primary-rgb),0.3); }
        .btn-secondary { background: var(--color-text-faint); color: #fff; border-radius: 12px; padding: 10px 24px; font-weight: 700; transition: all 0.3s; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
        .btn-secondary:hover { background: var(--color-text-muted); transform: translateY(-1px); }
        .btn-secondary:active { transform: translateY(0); }
        .btn-accent { background: #10B981; color: #fff; border-radius: 12px; padding: 10px 24px; font-weight: 700; transition: all 0.3s; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
        .btn-accent:hover { background: #059669; transform: translateY(-1px); }
        .btn-accent:active { transform: translateY(0); }
        .btn-outline { background: transparent; color: var(--color-primary); border-radius: 12px; padding: 10px 24px; font-weight: 700; transition: all 0.3s; border: 2px solid var(--color-primary); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
        .btn-outline:hover { background: var(--color-primary); color: #fff; }
        .btn-danger { background: #EF4444; color: #fff; border-radius: 12px; padding: 10px 24px; font-weight: 700; transition: all 0.3s; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; }
        .btn-danger:hover { background: #DC2626; }
        .btn-danger:active { transform: translateY(0); }
        .btn-sm { padding: 6px 16px; font-size: 13px; border-radius: 8px; }
        .btn-lg { padding: 14px 36px; font-size: 16px; border-radius: 14px; }

        .input-field { width: 100%; padding: 12px 16px; border-radius: 12px; border: 2px solid var(--color-border); background: var(--color-bg-input); font-size: 14px; transition: all 0.3s; outline: none; font-family: 'Nunito', sans-serif; min-height: 44px; color: var(--color-text); }
        .input-field:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb),0.15); }
        .input-field::placeholder { color: var(--color-text-muted); }

        textarea.input-field { resize: vertical; min-height: 100px; }
        select.input-field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }

        .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; }
        .badge-primary { background: var(--color-primary-light); color: var(--color-primary); }
        .badge-accent { background: rgba(16,185,129,0.1); color: #10B981; }
        .badge-secondary { background: rgba(150,198,234,0.15); color: #5b9bd5; }
        .badge-danger { background: rgba(239,68,68,0.1); color: #EF4444; }
        .badge-warning { background: rgba(245,158,11,0.1); color: #F59E0B; }

        .sidebar { width: 260px; min-height: 100vh; background: var(--color-bg-sidebar); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; position: fixed; left: 0; top: 0; bottom: 0; z-index: 100; transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), background 0.3s, border-color 0.3s; }
        .sidebar-logo { height: 70px; display: flex; align-items: center; padding: 0 24px; font-size: 20px; font-weight: 900; color: var(--color-text); border-bottom: 1px solid var(--color-border); }
        .sidebar-logo i { color: var(--color-primary); margin-right: 10px; font-size: 24px; }
        .sidebar-nav { flex: 1; padding: 16px 0; overflow-y: auto; }
        .sidebar-nav::-webkit-scrollbar { display: none; }
        .nav-item { display: flex; align-items: center; padding: 12px 20px; margin: 3px 12px; color: var(--color-text-secondary); text-decoration: none; transition: all 0.2s; border-radius: 12px; font-size: 14px; font-weight: 600; cursor: pointer; min-height: 44px; }
        .nav-item i.nav-icon { width: 22px; margin-right: 10px; font-size: 16px; text-align: center; }
        .nav-item:hover:not(.active) { background: var(--color-bg-hover); color: var(--color-text); }
        .nav-item.active { background: var(--color-primary); color: #ffffff; box-shadow: 0 4px 12px rgba(var(--color-primary-rgb),0.35); }
        .nav-item.active i.nav-icon { color: #ffffff; }
        .nav-group { margin: 2px 0; }
        .nav-group-toggle { display: flex; align-items: center; justify-content: space-between; padding: 11px 20px; color: var(--color-text-secondary); font-size: 14px; font-weight: 600; transition: all 0.2s; margin: 2px 12px; border-radius: 12px; cursor: pointer; background: none; border: none; width: calc(100% - 24px); font-family: inherit; min-height: 44px; }
        .nav-group-toggle:hover { color: var(--color-text); background: var(--color-bg-hover); }
        .nav-group-toggle i.fa-chevron-down { transition: transform 0.2s ease; font-size: 11px; color: var(--color-text-muted); }
        .nav-group-toggle.open i.fa-chevron-down { transform: rotate(180deg); }
        .nav-group-toggle .group-label { display: flex; align-items: center; }
        .nav-group-toggle i.nav-icon { width: 22px; margin-right: 10px; font-size: 16px; text-align: center; }
        .nav-group-content { display: none; }
        .nav-group-content.open { display: block; }
        .nav-group-content .nav-item { padding-left: 32px; font-size: 13px; }
        .sidebar-footer { padding: 16px 20px; border-top: 1px solid var(--color-border); }

        .main-wrapper { margin-left: 260px; min-height: 100vh; display: flex; flex-direction: column; }
        .top-header { height: 70px; background: var(--color-bg-header); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; justify-content: space-between; padding: 0 30px; position: sticky; top: 0; z-index: 90; transition: background 0.3s, border-color 0.3s; }
        .content-area { flex: 1; padding: 30px; min-width: 0; }

        .sidebar-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-overlay); z-index: 95; backdrop-filter: blur(3px); opacity: 0; transition: opacity 0.3s; }
        .sidebar-overlay.show { display: block; opacity: 1; }

        .toast-container { position: fixed; top: 80px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; }
        .toast { padding: 14px 20px; border-radius: 12px; color: #fff; font-weight: 600; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); animation: slideInRight 0.4s ease-out; display: flex; align-items: center; gap: 10px; min-width: 280px; }
        .toast-success { background: #10B981; }
        .toast-error { background: #EF4444; }
        .toast-warning { background: #F59E0B; }
        .toast-info { background: #3B82F6; }

        .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-overlay); backdrop-filter: blur(4px); z-index: 1000; display: flex; align-items: center; justify-content: center; animation: smoothFade 0.3s; }
        .modal-content { background: var(--color-modal-bg); border-radius: 20px; padding: 32px; max-width: 600px; width: 90%; max-height: 85vh; overflow-y: auto; animation: scaleIn 0.3s ease-out; box-shadow: 0 20px 60px rgba(0,0,0,0.2); color: var(--color-text); }

        .lightbox-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); z-index: 2000; display: flex; align-items: center; justify-content: center; cursor: zoom-out; animation: smoothFade 0.3s; }
        .lightbox-overlay img { max-width: 90vw; max-height: 90vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
        .lightbox-close { position: fixed; top: 20px; right: 24px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.2); color: #fff; border: none; font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2001; transition: background 0.2s; backdrop-filter: blur(4px); }
        .lightbox-close:hover { background: rgba(255,255,255,0.4); }

        .upload-zone { border: 2px dashed var(--color-border); border-radius: 16px; padding: 30px; text-align: center; cursor: pointer; transition: all 0.3s; background: var(--color-bg-subtle); }
        .upload-zone:hover, .upload-zone.dragover { border-color: var(--color-primary); background: var(--color-primary-light); }
        .upload-zone i { font-size: 32px; color: var(--color-text-muted); margin-bottom: 10px; }
        .upload-zone.dragover i { color: var(--color-primary); }
        .upload-zone.pasted { border-color: var(--color-primary); background: var(--color-primary-light); animation: pasteFlash .6s ease; }
        @keyframes pasteFlash { 0% { transform: scale(1); } 45% { transform: scale(1.02); } 100% { transform: scale(1); } }

        .ref-thumb { width: 80px; height: 80px; border-radius: 10px; object-fit: cover; border: 2px solid var(--color-border); }
        .ref-thumb-container { position: relative; display: inline-block; margin: 4px; }
        .ref-thumb-remove { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; background: #EF4444; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; cursor: pointer; border: 2px solid var(--color-bg-card); }

        .size-option, .duration-option { padding: 10px 16px; border-radius: 10px; border: 2px solid var(--color-border); cursor: pointer; transition: all 0.2s; text-align: center; font-weight: 600; font-size: 13px; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--color-text); }
        .size-option:hover, .duration-option:hover { border-color: var(--color-primary); }
        .size-option.active, .duration-option.active { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary); }

        .quality-option { padding: 10px 16px; border-radius: 10px; border: 2px solid var(--color-border); cursor: pointer; transition: all 0.2s; text-align: center; font-weight: 600; font-size: 13px; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--color-text); }
        .quality-option:hover { border-color: var(--color-primary); }
        .quality-option.active { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary); }

        .model-card { padding: 16px; border-radius: 14px; border: 2px solid var(--color-border); cursor: pointer; transition: all 0.2s; background: var(--color-bg-card); }
        .model-card:hover { border-color: var(--color-primary); box-shadow: 0 4px 16px rgba(var(--color-primary-rgb),0.1); }
        .model-tag-list { display: inline-flex; flex-wrap: wrap; gap: 5px; margin-left: 8px; vertical-align: middle; }
        .model-tag { display: inline-flex; align-items: center; padding: 3px 8px; border: 1px solid currentColor; border-radius: 999px; font-size: 10px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
        .model-tag::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: currentColor; margin-right: 4px; }
        @media (prefers-reduced-motion: no-preference) { .model-tag { transition: opacity 0.2s, transform 0.2s; } .model-card:hover .model-tag { opacity: 0.9; transform: translateY(-1px); } }
        .model-card.active { border-color: var(--color-primary); background: var(--color-primary-light); box-shadow: 0 4px 16px rgba(var(--color-primary-rgb),0.15); }

        .amount-option { padding: 16px 24px; border-radius: 14px; border: 2px solid var(--color-border); cursor: pointer; transition: all 0.2s; text-align: center; font-weight: 800; font-size: 18px; background: var(--color-bg-card); min-height: 48px; display: flex; align-items: center; justify-content: center; color: var(--color-text); }
        .amount-option:hover { border-color: var(--color-primary); }
        .amount-option.active { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary); }

        .points-option { padding: 12px 16px; border-radius: 10px; border: 2px solid var(--color-border); cursor: pointer; transition: all 0.2s; text-align: center; font-weight: 700; font-size: 14px; background: var(--color-bg-card); min-height: 44px; display: flex; align-items: center; justify-content: center; color: var(--color-text); }
        .points-option:hover { border-color: var(--color-primary); }
        .points-option.active { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary); }

        .pay-method { padding: 14px 20px; border-radius: 12px; border: 2px solid var(--color-border); cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 10px; font-weight: 600; min-height: 48px; color: var(--color-text); }
        .pay-method:hover { border-color: var(--color-primary); }
        .pay-method.active { border-color: var(--color-primary); background: var(--color-primary-light); }

        .stat-card { background: var(--color-bg-card); border-radius: 16px; padding: 24px; box-shadow: 0 4px 24px var(--color-shadow); border: 1px solid var(--color-border-light); }
        .stat-card .stat-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; }
        .stat-card .stat-value { font-size: 28px; font-weight: 900; color: var(--color-text); }
        .stat-card .stat-label { font-size: 13px; color: var(--color-text-muted); font-weight: 600; }

        /* 用户仪表盘样式 */
        .dash-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
        /* QQ群提示卡片 */
        .qq-group-tip { display: flex; align-items: center; gap: 14px; padding: 14px 18px; margin-bottom: 20px; background: var(--color-bg-card); border-radius: 14px; border: 1px solid var(--color-border-light); box-shadow: 0 4px 20px var(--color-shadow); position: relative; overflow: hidden; }
        .qq-group-tip::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #12B7F5; }
        .qq-group-tip-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #12B7F5; background: rgba(18,183,245,0.12); flex-shrink: 0; }
        .qq-group-tip-main { flex: 1; min-width: 0; }
        .qq-group-tip-title { font-size: 14px; font-weight: 800; color: var(--color-text); }
        .qq-group-tip-sub { font-size: 12px; color: var(--color-text-muted); margin-top: 3px; line-height: 1.5; }
        .qq-group-tip-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }
        .qq-group-tip-number { font-size: 12px; font-weight: 700; color: var(--color-text-secondary); background: rgba(128,128,128,0.08); padding: 5px 10px; border-radius: 8px; }
        .qq-group-tip-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; color: #fff; background: #12B7F5; padding: 6px 12px; border-radius: 8px; text-decoration: none; transition: all 0.2s; }
        .qq-group-tip-btn:hover { opacity: 0.85; }
        @media (max-width: 640px) { .qq-group-tip { flex-wrap: wrap; padding: 12px 14px; } .qq-group-tip-actions { width: 100%; } }
        .dash-stat-card { background: var(--color-bg-card); border-radius: 14px; padding: 14px 16px; box-shadow: 0 4px 20px var(--color-shadow); border: 1px solid var(--color-border-light); position: relative; overflow: hidden; transition: all 0.3s; }
        .dash-stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 30px var(--color-shadow-hover, rgba(0,0,0,0.08)); }
        .dash-stat-accent { position: absolute; top: -16px; right: -16px; width: 60px; height: 60px; border-radius: 50%; opacity: 0.08; pointer-events: none; }
        .dash-stat-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
        .dash-stat-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
        .dash-stat-label { font-size: 12px; font-weight: 700; color: var(--color-text-secondary); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .dash-stat-body { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
        .dash-stat-value { font-size: 20px; font-weight: 900; color: var(--color-text); line-height: 1.1; }
        .dash-stat-sub { font-size: 11px; font-weight: 700; color: var(--color-text-secondary); }

        /* 仪表盘问候横幅 */
        .dash-greet { display: flex; align-items: center; gap: 16px; padding: 18px 22px; margin-bottom: 20px; background: var(--color-bg-card); border-radius: 16px; border: 1px solid var(--color-border-light); box-shadow: 0 4px 24px var(--color-shadow); position: relative; overflow: hidden; }
        .dash-greet-accent { position: absolute; top: -34px; right: -34px; width: 130px; height: 130px; border-radius: 50%; background: rgba(var(--color-primary-rgb), 0.08); pointer-events: none; }
        .dash-greet-main { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1; }
        .dash-greet-avatar { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(var(--color-primary-rgb), 0.35); flex-shrink: 0; }
        .dash-greet-title { font-size: 19px; font-weight: 900; color: var(--color-text); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .dash-greet-title i { margin-right: 7px; font-size: 17px; }
        .dash-greet-sub { font-size: 12.5px; color: var(--color-text-muted); font-weight: 600; margin-top: 3px; }
        .dash-greet-qq { display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; padding: 8px 12px; background: rgba(18,183,245,0.06); border: 1px solid rgba(18,183,245,0.18); border-radius: 12px; }
        .dash-greet-qq-tip { font-size: 11.5px; color: var(--color-text-muted); font-weight: 600; line-height: 1.5; }
        .dash-greet-qq-tip b { color: #12B7F5; }
        .dash-greet-qq-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
        .dash-greet-qq-number { font-size: 12px; font-weight: 700; color: var(--color-text-secondary); background: rgba(18,183,245,0.12); border: 1px solid rgba(18,183,245,0.25); padding: 4px 10px; border-radius: 8px; white-space: nowrap; }
        .dash-greet-qq-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; color: #fff; background: #12B7F5; padding: 5px 12px; border-radius: 8px; text-decoration: none; white-space: nowrap; transition: all 0.2s; }
        .dash-greet-qq-btn:hover { opacity: 0.85; }
        @media (max-width: 768px) {
            .dash-greet { padding: 14px 16px; gap: 12px; flex-wrap: wrap; }
            .dash-greet-main { flex: 1 1 100%; gap: 12px; }
            .dash-greet-avatar { width: 46px; height: 46px; }
            .dash-greet-title { font-size: 17px; }
            .dash-greet-sub { font-size: 11.5px; }
            .dash-greet-qq { flex: 1 1 100%; justify-content: flex-start; }
        }

        .dash-section-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
        .dash-section-grid > * { min-width: 0; }
        .dash-card-header { font-size: 15px; font-weight: 800; color: var(--color-text); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }

        .dash-shortcuts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
        .dash-shortcut-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; border-radius: 10px; text-decoration: none; transition: all 0.2s; background: rgba(128,128,128,0.06); color: var(--color-text); }
        .dash-shortcut-btn:hover { background: rgba(128,128,128,0.12); transform: translateY(-1px); }
        .dash-shortcut-btn i { filter: none; }
        .dash-shortcut-btn i { font-size: 18px; color: var(--sc); }
        .dash-shortcut-btn span { font-size: 12px; font-weight: 700; }

        .dash-trend-chart { display: flex; flex-direction: column; gap: 6px; }
        .dash-trend-row { display: flex; align-items: center; gap: 8px; }
        .dash-trend-label { font-size: 11px; color: var(--color-text-muted); font-weight: 600; white-space: nowrap; width: 38px; flex-shrink: 0; text-align: right; }
        .dash-trend-track { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
        .dash-trend-line { display: flex; align-items: center; gap: 6px; }
        .dash-trend-bar { height: 10px; border-radius: 0 5px 5px 0; transition: width 0.5s ease; min-width: 2px; }
        .dash-trend-val { font-size: 10px; font-weight: 700; color: var(--color-text-secondary); white-space: nowrap; flex-shrink: 0; min-width: 22px; }
        .dash-trend-legend { display: flex; gap: 12px; margin-top: 8px; justify-content: center; }
        .dash-legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--color-text-muted); font-weight: 600; }
        .dash-legend-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

        /* 签到卡片 */
        .checkin-card { padding: 18px 20px; margin-bottom: 20px; background: var(--color-bg-card); }
        .checkin-card-main { display: flex; align-items: center; gap: 16px; }
        .checkin-info { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
        .checkin-icon { width: 46px; height: 46px; border-radius: 12px; background: rgba(var(--color-primary-rgb),0.12); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
        .checkin-meta { min-width: 0; }
        .checkin-title { font-size: 15px; font-weight: 800; color: var(--color-text); }
        .checkin-sub { font-size: 12px; color: var(--color-text-muted); margin-top: 3px; line-height: 1.4; }
        .checkin-stats { display: flex; gap: 20px; flex-shrink: 0; }
        .checkin-stat { text-align: center; }
        .checkin-stat-val { font-size: 20px; font-weight: 900; color: var(--color-primary); line-height: 1.2; }
        .checkin-stat-lbl { font-size: 11px; color: var(--color-text-muted); font-weight: 600; margin-top: 2px; }
        .checkin-action { flex-shrink: 0; }
        .checkin-btn { min-width: 110px; height: 44px; padding: 0 24px; border-radius: 12px; border: none; background: var(--color-primary); color: #fff; font-size: 14px; font-weight: 800; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-shadow: 0 4px 14px rgba(var(--color-primary-rgb),0.35); }
        .checkin-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(var(--color-primary-rgb),0.45); }
        .checkin-btn:active:not(:disabled) { transform: translateY(0); }
        .checkin-btn:disabled { cursor: not-allowed; opacity: 0.65; box-shadow: none; }
        .checkin-btn.checked { background: rgba(128,128,128,0.18); color: var(--color-text-secondary); box-shadow: none; cursor: default; }
        .checkin-btn.checked .fa-spinner { display: none; }
        .checkin-btn .fa-spinner { display: none; }
        .checkin-btn.loading .fa-spinner { display: inline-block; }
        .checkin-btn.loading .checkin-btn-text { display: none; }
        .checkin-records { margin-top: 14px; border-top: 1px solid var(--color-border-light); padding-top: 12px; }
        .checkin-records-header { display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--color-text-secondary); padding: 4px 0; user-select: none; }
        .checkin-records-header:hover { color: var(--color-text); }
        .checkin-records-arrow { transition: transform 0.2s; font-size: 11px; }
        .checkin-records-arrow.open { transform: rotate(180deg); }
        .checkin-records-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; max-height: 280px; overflow-y: auto; }
        .checkin-record-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 10px; background: rgba(128,128,128,0.05); font-size: 12px; }
        .checkin-record-item.is-today { background: rgba(var(--color-primary-rgb),0.08); }
        .checkin-record-date { color: var(--color-text-secondary); font-weight: 600; flex-shrink: 0; }
        .checkin-record-reward { font-weight: 800; }
        .checkin-record-reward.money { color: #10B981; }
        .checkin-record-reward.points { color: var(--color-primary); }
        .checkin-record-type { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 10px; font-weight: 700; margin-left: 6px; }
        .checkin-record-type.money { background: rgba(16,185,129,0.12); color: #10B981; }
        .checkin-record-type.points { background: rgba(var(--color-primary-rgb),0.12); color: var(--color-primary); }
        .checkin-empty { text-align: center; padding: 20px 0; color: var(--color-text-muted); font-size: 12px; }

        /* 签到页面专用样式 */
        .ck-page { display: flex; flex-direction: column; gap: 18px; }
        .ck-hero { position: relative; overflow: hidden; padding: 24px 26px; border-radius: 16px; background: var(--color-bg-card); border: 1px solid var(--color-border-light); box-shadow: 0 4px 20px var(--color-shadow); }
        .ck-hero-row { display: flex; align-items: center; gap: 20px; }
        .ck-hero-icon { width: 64px; height: 64px; border-radius: 18px; background: rgba(var(--color-primary-rgb),0.12); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0; }
        .ck-hero-meta { flex: 1; min-width: 0; }
        .ck-hero-title { font-size: 20px; font-weight: 900; color: var(--color-text); line-height: 1.2; }
        .ck-hero-sub { font-size: 13px; color: var(--color-text-muted); margin-top: 6px; line-height: 1.5; }
        .ck-hero-sub b { font-weight: 800; }
        .ck-hero-action { flex-shrink: 0; }
        .ck-hero-btn { min-width: 130px; height: 50px; padding: 0 26px; border-radius: 14px; border: none; background: var(--color-primary); color: #fff; font-size: 15px; font-weight: 800; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 6px 18px rgba(var(--color-primary-rgb),0.35); }
        .ck-hero-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(var(--color-primary-rgb),0.45); }
        .ck-hero-btn:active:not(:disabled) { transform: translateY(0); }
        .ck-hero-btn:disabled { cursor: not-allowed; opacity: 0.65; box-shadow: none; }
        .ck-hero-btn.checked { background: rgba(128,128,128,0.18); color: var(--color-text-secondary); box-shadow: none; cursor: default; }
        .ck-hero-btn.checked .fa-spinner { display: none; }
        .ck-hero-btn .fa-spinner { display: none; }
        .ck-hero-btn.loading .fa-spinner { display: inline-block; }
        .ck-hero-btn.loading .ck-hero-btn-text { display: none; }

        .ck-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
        .ck-stat-card { background: var(--color-bg-card); border-radius: 14px; padding: 16px 18px; box-shadow: 0 4px 14px var(--color-shadow); border: 1px solid var(--color-border-light); position: relative; overflow: hidden; transition: all 0.25s; }
        .ck-stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--color-shadow-hover, rgba(0,0,0,0.08)); }
        .ck-stat-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; margin-bottom: 10px; }
        .ck-stat-value { font-size: 24px; font-weight: 900; color: var(--color-text); line-height: 1.1; }
        .ck-stat-value .ck-stat-unit { font-size: 13px; font-weight: 700; color: var(--color-text-muted); margin-left: 4px; }
        .ck-stat-label { font-size: 12px; font-weight: 700; color: var(--color-text-muted); margin-top: 4px; }

        .ck-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: start; }
        .ck-card { background: var(--color-bg-card); border-radius: 16px; padding: 20px 22px; border: 1px solid var(--color-border-light); box-shadow: 0 4px 14px var(--color-shadow); }
        .ck-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
        .ck-card-title { font-size: 15px; font-weight: 800; color: var(--color-text); display: flex; align-items: center; gap: 8px; }
        .ck-card-title i { color: var(--color-primary); }

        .ck-cal-nav { display: flex; align-items: center; gap: 8px; }
        .ck-cal-btn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--color-border-light); background: var(--color-bg-card); color: var(--color-text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; transition: all 0.2s; }
        .ck-cal-btn:hover:not(:disabled) { background: rgba(var(--color-primary-rgb),0.08); color: var(--color-primary); border-color: var(--color-primary); }
        .ck-cal-btn:disabled { opacity: 0.4; cursor: not-allowed; }
        .ck-cal-today { padding: 0 12px; width: auto; font-size: 12px; font-weight: 700; }
        .ck-cal-month { font-size: 14px; font-weight: 800; color: var(--color-text); min-width: 96px; text-align: center; }
        .ck-cal-month-count { font-size: 11px; font-weight: 700; color: var(--color-text-muted); margin-left: 8px; }

        .ck-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
        .ck-cal-wd { text-align: center; font-size: 11px; font-weight: 700; color: var(--color-text-muted); padding: 6px 0; }
        .ck-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
        .ck-cal-cell { aspect-ratio: 1 / 1; border-radius: 10px; background: rgba(128,128,128,0.04); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--color-text-secondary); position: relative; cursor: default; transition: all 0.18s; min-height: 38px; }
        .ck-cal-cell.out { opacity: 0.35; }
        .ck-cal-cell.today { background: rgba(var(--color-primary-rgb),0.06); color: var(--color-primary); border: 1.5px solid rgba(var(--color-primary-rgb),0.4); }
        .ck-cal-cell.signed { background: rgba(var(--color-primary-rgb),0.12); color: var(--color-primary); cursor: pointer; }
        .ck-cal-cell.signed:hover { background: rgba(var(--color-primary-rgb),0.22); transform: translateY(-1px); }
        .ck-cal-cell.signed.today { background: var(--color-primary); color: #fff; border-color: var(--color-primary); box-shadow: 0 4px 12px rgba(var(--color-primary-rgb),0.4); }
        .ck-cal-cell.signed.today .ck-cal-dot { background: #fff; }
        .ck-cal-cell.signed.today .ck-cal-amt { color: rgba(255,255,255,0.85); }
        .ck-cal-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--color-primary); margin-top: 3px; }
        .ck-cal-cell.signed .ck-cal-dot { display: block; }
        .ck-cal-cell .ck-cal-dot { display: none; }
        .ck-cal-amt { font-size: 9px; font-weight: 800; color: var(--color-primary); margin-top: 2px; line-height: 1; }
        .ck-cal-cell .ck-cal-amt { display: none; }
        .ck-cal-cell.signed .ck-cal-amt { display: block; }
        .ck-cal-legend { display: flex; gap: 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--color-border-light); flex-wrap: wrap; }
        .ck-cal-legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--color-text-muted); }
        .ck-cal-legend-box { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }
        .ck-cal-legend-box.signed { background: rgba(var(--color-primary-rgb),0.22); border: 1px solid rgba(var(--color-primary-rgb),0.4); }
        .ck-cal-legend-box.today { background: rgba(var(--color-primary-rgb),0.06); border: 1.5px solid rgba(var(--color-primary-rgb),0.4); }
        .ck-cal-legend-box.signed-today { background: var(--color-primary); }

        .ck-records-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
        .ck-records-total { font-size: 12px; color: var(--color-text-muted); font-weight: 600; }
        .ck-records-total b { color: var(--color-text); font-weight: 800; }
        .ck-records-list { display: flex; flex-direction: column; gap: 8px; max-height: 540px; overflow-y: auto; padding-right: 4px; }
        .ck-record-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(128,128,128,0.04); transition: all 0.18s; cursor: pointer; border: 1px solid transparent; }
        .ck-record-item:hover { background: rgba(var(--color-primary-rgb),0.06); border-color: rgba(var(--color-primary-rgb),0.2); transform: translateX(2px); }
        .ck-record-item.is-today { background: rgba(var(--color-primary-rgb),0.1); border-color: rgba(var(--color-primary-rgb),0.25); }
        .ck-record-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
        .ck-record-icon.money { background: rgba(16,185,129,0.12); color: #10B981; }
        .ck-record-icon.points { background: rgba(var(--color-primary-rgb),0.12); color: var(--color-primary); }
        .ck-record-icon.watermark_points { background: rgba(var(--color-primary-rgb),0.12); color: var(--color-primary); }
        .ck-record-info { flex: 1; min-width: 0; }
        .ck-record-date { font-size: 13px; font-weight: 800; color: var(--color-text); line-height: 1.2; }
        .ck-record-time { font-size: 11px; color: var(--color-text-muted); margin-top: 3px; }
        .ck-record-reward { font-size: 14px; font-weight: 900; flex-shrink: 0; }
        .ck-record-reward.money { color: #10B981; }
        .ck-record-reward.points { color: var(--color-primary); }
        .ck-record-reward.watermark_points { color: var(--color-primary); }
        .ck-record-type { display: inline-block; padding: 3px 9px; border-radius: 6px; font-size: 10px; font-weight: 700; margin-left: 8px; flex-shrink: 0; }
        .ck-record-type.money { background: rgba(16,185,129,0.12); color: #10B981; }
        .ck-record-type.points { background: rgba(var(--color-primary-rgb),0.12); color: var(--color-primary); }
        .ck-record-type.watermark_points { background: rgba(var(--color-primary-rgb),0.12); color: var(--color-primary); }
        .ck-records-empty { text-align: center; padding: 40px 20px; color: var(--color-text-muted); font-size: 13px; }
        .ck-records-empty i { font-size: 36px; opacity: 0.5; display: block; margin-bottom: 10px; }
        .ck-records-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
        .ck-page-btn { min-width: 34px; height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--color-border-light); background: var(--color-bg-card); color: var(--color-text-secondary); cursor: pointer; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; transition: all 0.18s; }
        .ck-page-btn:hover:not(:disabled) { background: rgba(var(--color-primary-rgb),0.08); color: var(--color-primary); border-color: var(--color-primary); }
        .ck-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
        .ck-page-btn.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
        .ck-page-info { font-size: 12px; color: var(--color-text-muted); font-weight: 600; padding: 0 8px; }

        .ck-detail-modal .modal-content { max-width: 420px; }
        .ck-detail-modal .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--color-border-light); }
        .ck-detail-modal .modal-title { font-size: 16px; font-weight: 800; color: var(--color-text); display: flex; align-items: center; gap: 8px; margin: 0; }
        .ck-detail-modal .modal-title i { color: var(--color-primary); }
        .ck-detail-modal .modal-close { background: none; border: none; color: var(--color-text-muted); cursor: pointer; font-size: 20px; width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; transition: all 0.15s; }
        .ck-detail-modal .modal-close:hover { background: var(--color-bg-hover); color: var(--color-text); }
        .ck-detail-modal .modal-body { padding: 0; }
        .ck-detail-modal .modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border-light); }
        .ck-detail-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border-light); }
        .ck-detail-row:last-child { border-bottom: none; }
        .ck-detail-label { font-size: 13px; color: var(--color-text-muted); font-weight: 600; }
        .ck-detail-value { font-size: 14px; color: var(--color-text); font-weight: 800; }
        .ck-detail-reward-big { text-align: center; padding: 18px 0; margin-bottom: 6px; }
        .ck-detail-reward-val { font-size: 32px; font-weight: 900; line-height: 1; }
        .ck-detail-reward-val.money { color: #10B981; }
        .ck-detail-reward-val.points { color: var(--color-primary); }
        .ck-detail-reward-unit { font-size: 14px; font-weight: 700; color: var(--color-text-muted); margin-left: 6px; }
        .ck-detail-reward-type { font-size: 12px; color: var(--color-text-muted); margin-top: 8px; }

        /* 签到页面自适应 */
        @media (max-width: 1024px) {
            .ck-layout { grid-template-columns: 1fr; }
            .ck-records-list { max-height: 460px; }
        }
        @media (max-width: 768px) {
            .ck-hero { padding: 18px 18px; }
            .ck-hero-row { flex-wrap: wrap; gap: 14px; }
            .ck-hero-icon { width: 54px; height: 54px; font-size: 24px; border-radius: 14px; }
            .ck-hero-title { font-size: 18px; }
            .ck-hero-sub { font-size: 12px; }
            .ck-hero-action { flex: 0 0 100%; display: flex; }
            .ck-hero-btn { flex: 1; min-width: 0; width: 100%; height: 46px; font-size: 14px; }
            .ck-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
            .ck-stat-card { padding: 12px 14px; }
            .ck-stat-value { font-size: 20px; }
            .ck-stat-icon { width: 32px; height: 32px; font-size: 14px; }
            .ck-card { padding: 16px; border-radius: 14px; }
            .ck-card-title { font-size: 14px; }
            .ck-cal-cell { font-size: 12px; min-height: 34px; }
            .ck-cal-amt { font-size: 8px; }
            .ck-cal-month { font-size: 13px; min-width: 80px; }
            .ck-record-item { padding: 10px 12px; gap: 10px; }
            .ck-record-icon { width: 34px; height: 34px; font-size: 14px; }
            .ck-record-date { font-size: 12px; }
            .ck-record-time { font-size: 10px; }
            .ck-record-reward { font-size: 13px; }
            .ck-records-list { max-height: 400px; }
        }
        @media (max-width: 480px) {
            .ck-hero { padding: 14px; }
            .ck-hero-icon { width: 48px; height: 48px; font-size: 22px; }
            .ck-hero-title { font-size: 16px; }
            .ck-hero-sub { font-size: 11px; }
            .ck-hero-btn { height: 44px; font-size: 14px; padding: 0 18px; }
            .ck-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
            .ck-stat-card { padding: 10px 12px; }
            .ck-stat-value { font-size: 18px; }
            .ck-stat-value .ck-stat-unit { font-size: 11px; }
            .ck-stat-label { font-size: 11px; }
            .ck-card { padding: 14px; border-radius: 12px; }
            .ck-cal-cell { font-size: 11px; min-height: 30px; border-radius: 8px; }
            .ck-cal-cell .ck-cal-dot { width: 4px; height: 4px; }
            .ck-cal-amt { display: none !important; }
            .ck-cal-cell.signed .ck-cal-dot { display: block; }
            .ck-cal-weekdays .ck-cal-wd { font-size: 10px; padding: 4px 0; }
            .ck-cal-btn { width: 30px; height: 30px; }
            .ck-cal-today { padding: 0 10px; font-size: 11px; }
            .ck-cal-month { font-size: 12px; min-width: 70px; }
            .ck-cal-legend { gap: 10px; }
            .ck-cal-legend-item { font-size: 10px; }
            .ck-record-item { padding: 10px; gap: 8px; border-radius: 10px; }
            .ck-record-icon { width: 32px; height: 32px; font-size: 13px; }
            .ck-record-reward { font-size: 12px; }
            .ck-record-type { padding: 2px 7px; font-size: 9px; margin-left: 6px; }
            .ck-page-btn { min-width: 32px; height: 32px; font-size: 11px; padding: 0 8px; }
            .ck-detail-reward-val { font-size: 28px; }
        }
        @media (max-width: 768px) {
            .checkin-card { padding: 14px; }
            .checkin-card-main { flex-wrap: wrap; gap: 12px; }
            .checkin-info { flex: 1 1 100%; }
            .checkin-stats { flex: 1; justify-content: flex-start; gap: 24px; }
            .checkin-action { flex: 1; display: flex; justify-content: flex-end; }
            .checkin-btn { min-width: 90px; height: 42px; padding: 0 18px; font-size: 13px; }
        }
        @media (max-width: 480px) {
            .checkin-icon { width: 40px; height: 40px; font-size: 18px; }
            .checkin-title { font-size: 14px; }
            .checkin-sub { font-size: 11px; }
            .checkin-stat-val { font-size: 18px; }
            .checkin-stat-lbl { font-size: 10px; }
            .checkin-stats { gap: 18px; }
            .checkin-action { flex: 0 0 100%; display: flex; justify-content: stretch; }
            .checkin-btn { min-width: 0; width: 100%; height: 40px; padding: 0 14px; font-size: 12px; }
            .checkin-record-item { padding: 8px 10px; font-size: 11px; }
        }

        .dash-recent-list { display: flex; flex-direction: column; gap: 0; }
        .dash-recent-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--color-border-light); }
        .dash-recent-item:last-child { border-bottom: none; }
        .dash-recent-icon { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
        .dash-recent-info { flex: 1; min-width: 0; }
        .dash-recent-prompt { font-size: 13px; font-weight: 700; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .dash-recent-meta { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }

        .ticket-status-open { color: #F59E0B; }
        .ticket-status-waiting { color: var(--color-text-secondary); }
        .ticket-status-replied { color: #10B981; }
        .ticket-status-closed { color: var(--color-text-muted); }

        .order-status-pending { color: #F59E0B; }
        .order-status-completed { color: #10B981; }
        .order-status-closed { color: var(--color-text-muted); }

        @media (max-width: 1024px) {
            .content-area { padding: 20px; }
            .stat-card .stat-value { font-size: 24px; }
            .dash-stat-grid { grid-template-columns: repeat(4, 1fr); }
            .dash-section-grid { grid-template-columns: 1fr 1fr; }
        }

        @media (max-width: 900px) {
            .dash-section-grid { grid-template-columns: 1fr; }
        }

        @media (max-width: 768px) {
            .sidebar { position: fixed; transform: translateX(-100%); box-shadow: 4px 0 24px rgba(0,0,0,0.1); width: 280px; }
            .sidebar.show { transform: translateX(0); }
            .main-wrapper { margin-left: 0; }
            .top-header { height: 56px; padding: 0 12px; }
            .content-area { padding: 12px; }
            .mobile-toggle { display: flex !important; }
            .hero-title-text { font-size: 32px !important; }
            .stat-card { padding: 16px; }
            .stat-card .stat-value { font-size: 22px; }
            .stat-card .stat-icon { width: 40px; height: 40px; font-size: 18px; }
            .dash-stat-grid { grid-template-columns: repeat(2, 1fr); }
            .dash-stat-value { font-size: 18px; }
            .dash-section-grid { grid-template-columns: 1fr; }
            .dash-shortcuts { grid-template-columns: repeat(3, 1fr); }
            .model-card { padding: 12px; }
            .size-option, .duration-option { padding: 8px 12px; font-size: 12px; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
            .amount-option { padding: 12px 16px; font-size: 16px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
            .card { border-radius: 14px; }
            .btn-primary, .btn-secondary, .btn-outline { padding: 10px 18px; font-size: 14px; min-height: 44px; }
            .btn-sm { padding: 8px 14px; font-size: 13px; min-height: 36px; }
            .btn-lg { padding: 14px 28px; font-size: 16px; min-height: 48px; }
            .input-field { font-size: 16px; padding: 12px 14px; min-height: 44px; }
            .site-notice { padding: 10px 14px; border-radius: 12px; }
            .site-notice-icon { width: 32px; height: 32px; }
            .site-notice-title { font-size: 13px; }
            .site-notice-text { font-size: 12px; max-height: 40px; }
            .site-notice-close { min-width: 36px; min-height: 36px; }
            .site-notice-read { min-height: 28px; padding: 4px 8px; }
            .glass { padding: 0 12px; }
            nav.glass { height: 56px !important; }
            .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
            .table-wrap table { min-width: 600px; }
            .nav-item { padding: 12px 16px; min-height: 44px; }
            .nav-group-toggle { min-height: 44px; }
            .pay-method { min-height: 48px; }
            .points-option { min-height: 44px; }
            .quality-option { min-height: 44px; }
            .ref-thumb { width: 60px; height: 60px; }
            .ref-thumb-remove { width: 22px; height: 22px; font-size: 11px; }
            .modal-content { width: 95%; padding: 24px; max-height: 90vh; }
            .upload-zone { padding: 20px; }
            .upload-zone i { font-size: 28px; }
        }

        @media (max-width: 480px) {
            html { font-size: 14px; }
            .content-area { padding: 8px; }
            .stat-card { padding: 12px; }
            .stat-card .stat-value { font-size: 18px; }
            .stat-card .stat-label { font-size: 11px; }
            .dash-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
            .dash-stat-card { padding: 10px 12px; }
            .dash-stat-value { font-size: 16px; }
            .dash-stat-icon { width: 26px; height: 26px; font-size: 11px; border-radius: 6px; }
            .dash-stat-label { font-size: 10px; }
            .dash-stat-sub { font-size: 10px; }
            .dash-section-grid { grid-template-columns: 1fr; gap: 10px; }
            .dash-shortcuts { grid-template-columns: repeat(3, 1fr); gap: 6px; }
            .dash-shortcut-btn { padding: 10px 6px; }
            .dash-shortcut-btn i { font-size: 16px; }
            .dash-shortcut-btn span { font-size: 11px; }
            .dash-trend-bar { height: 8px; }
            .dash-trend-label { font-size: 10px; width: 32px; }
            .dash-trend-val { font-size: 9px; }
            .dash-recent-item { flex-direction: column; align-items: flex-start; gap: 4px; }
            .dash-recent-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
            .hero-title-text { font-size: 26px !important; }
            .model-card { padding: 10px; font-size: 12px; }
            .btn-primary, .btn-secondary, .btn-outline { padding: 10px 16px; font-size: 13px; min-height: 44px; }
            .btn-sm { padding: 8px 12px; font-size: 12px; min-height: 36px; }
            .btn-lg { padding: 12px 20px; font-size: 15px; min-height: 48px; }
            .card { padding: 12px; border-radius: 12px; }
            .card-static { border-radius: 12px; }
            .amount-option { padding: 10px 12px; font-size: 14px; }
            .pay-method { padding: 10px 14px; font-size: 13px; min-height: 48px; }
            .input-field { font-size: 16px; padding: 10px 12px; min-height: 44px; }
            .sidebar { width: 260px; }
            .sidebar-logo { height: 56px; font-size: 18px; }
            .top-header { height: 52px; }
            .site-notice { padding: 8px 10px; gap: 8px; }
            .site-notice-icon { width: 28px; height: 28px; border-radius: 8px; }
            .site-notice-icon i { font-size: 14px; }
            .site-notice-title { font-size: 12px; }
            .site-notice-text { font-size: 11px; max-height: 36px; line-height: 1.5; }
            .site-notice-close { min-width: 32px; min-height: 32px; font-size: 12px; }
            .site-notice-toggle { font-size: 11px; }
            .site-notice-badge { font-size: 9px; padding: 1px 6px; }
            .size-option, .duration-option { padding: 6px 8px; font-size: 11px; min-height: 40px; }
            .modal-content { padding: 16px; border-radius: 16px; }
            .toast { min-width: 240px; font-size: 13px; padding: 12px 16px; }
            .toast-container { top: 64px; }
        }

        @media (max-width: 360px) {
            html { font-size: 13px; }
            .content-area { padding: 6px; }
            .stat-card .stat-value { font-size: 16px; }
            .hero-title-text { font-size: 22px !important; }
            .btn-lg { padding: 10px 16px; font-size: 14px; }
        }

        .lazy-img { opacity: 0; transition: opacity 0.5s; }
        .lazy-img.loaded { opacity: 1; }
        .img-expired {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        .img-expired i { font-size: 28px; }
        .img-expired span { font-size: 13px; font-weight: 700; }
        .draw-card { display: flex; flex-direction: column; margin-bottom: 16px; }
        .draw-card-img-wrap { position: relative; width: 100%; overflow: hidden; }
        .draw-card-img-wrap .lazy-img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .masonry-grid { display: flex; gap: 16px; align-items: flex-start; }
        .masonry-grid .masonry-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
        .masonry-grid .masonry-empty { text-align: center; width: 100%; }
        .draw-card-img-wrap .img-expired { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--color-bg-card); color: var(--color-error, #ef4444); border-radius: var(--radius-card, 10px); min-height: 160px; position: absolute; inset: 0; }
        .draw-card-img-wrap .img-expired-blocked { pointer-events: none !important; cursor: default !important; }
        .draw-card-img-wrap .img-expired i { font-size: 28px; color: var(--color-error, #f87171); }
        .draw-card-img-wrap .img-expired span { font-size: 13px; font-weight: 700; color: var(--color-error, #dc2626); }
        .draw-card-body { padding: 10px 12px 10px 12px; }
        .draw-card-prompt { font-size: 11px; color: #94a3b8; line-height: 1.4; margin-bottom: 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; }
        .draw-card-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
        .draw-card-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 7px 4px; border-radius: 8px; font-size: 11px; font-weight: 700; border: 1px solid #eef2f7; transition: all 0.15s ease; white-space: nowrap; min-width: 0; touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; line-height: 1.2; }
        .draw-card-btn i { font-size: 11px; flex-shrink: 0; }
        .draw-card-btn-download { background: #f8fafc; color: #64748b; }
        .draw-card-btn-download:active { background: #e2e8f0; transform: scale(0.96); }
        .draw-card-btn-apply { background: var(--color-primary-light); color: var(--color-primary); border-color: rgba(var(--color-primary-rgb),0.3); }
        .draw-card-btn-apply:active { background: rgba(var(--color-primary-rgb),0.25); transform: scale(0.96); }
        .draw-card-meta { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #cbd5e1; padding-top: 4px; border-top: 1px solid #f1f5f9; }
        .draw-card-tag { display: inline-flex; align-items: center; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 700; background: #f1f5f9; color: #64748b; flex-shrink: 0; }
        .draw-card-tag-primary { background: var(--color-primary-light); color: var(--color-primary); }
        .draw-card-tag-status-pending { background: #fef3c7; color: #d97706; }
        .draw-card-tag-status-expired { background: #f3f4f6; color: #6b7280; }
        .draw-card-tag-status-failed { background: #fef2f2; color: #dc2626; }
        .draw-card-dur { display: inline-flex; align-items: center; gap: 2px; color: #94a3b8; flex-shrink: 0; }
        .draw-card-time { margin-left: auto; color: #cbd5e1; flex-shrink: 0; }
        .draw-card-btn-share { background: #f0fdf4; color: #10B981; border-color: #bbf7d0; }
        .draw-card-btn-share:active { background: #dcfce7; transform: scale(0.96); }
        .draw-card-btn-pending { background: #fef3c7; color: #d97706; border-color: #fde68a; }
        .draw-card-btn-pending:active { background: #fde68a; transform: scale(0.96); }
        .draw-card-btn-approved { background: #dbeafe; color: #2563eb; border-color: #93c5fd; }
        .draw-card-btn-approved:active { background: #93c5fd; transform: scale(0.96); }
        .draw-card-btn-rejected { background: #fef2f2; color: #dc2626; border-color: #fca5a5; }
        .draw-card-btn-rejected:active { background: #fecaca; transform: scale(0.96); }
        .draw-card-btn-delete { background: #fef2f2; color: #dc2626; border-color: #fca5a5; }
        .draw-card-btn-delete:hover { background: #fee2e2; }
        .draw-card-btn-delete:active { background: #fecaca; transform: scale(0.96); }

        .prompt-modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 9999; animation: fadeIn 0.2s ease; }
        .prompt-modal-box { background: var(--color-modal-bg); border-radius: 16px; width: 90%; max-width: 560px; max-height: 80vh; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.2); animation: slideUp 0.25s ease; color: var(--color-text); }
        .prompt-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--color-border); }
        .prompt-modal-close { background: none; border: none; font-size: 24px; color: #94a3b8; cursor: pointer; line-height: 1; padding: 4px 8px; border-radius: 8px; transition: all 0.15s; }
        .prompt-modal-close:hover { background: #f1f5f9; color: #475569; }
        .prompt-modal-body { padding: 20px; max-height: 50vh; overflow-y: auto; }
        .prompt-modal-text { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 13px; line-height: 1.7; color: var(--color-text-secondary); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--color-bg-subtle); padding: 14px 16px; border-radius: 10px; border: 1px solid var(--color-border); }
        .prompt-modal-footer { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--color-border); }

        @media (min-width: 769px) {
            .draw-card-body { padding: 14px 16px; }
            .draw-card-prompt { font-size: 12px; margin-bottom: 10px; }
            .draw-card-btn { padding: 9px 10px; font-size: 12px; border-radius: 10px; gap: 5px; }
            .draw-card-btn i { font-size: 12px; }
            .draw-card-meta { font-size: 11px; }
            .draw-card-tag { font-size: 11px; padding: 2px 8px; }
            .draw-card-img-wrap .img-expired i { font-size: 32px; }
            .draw-card-img-wrap .img-expired span { font-size: 14px; }
        }

        @media (max-width: 768px) {
            #drawResults { gap: 10px !important; }
            .draw-card { border-radius: 12px !important; }
            .draw-card-body { padding: 8px 10px 8px 10px; }
            .draw-card-prompt { font-size: 10px; -webkit-line-clamp: 1; margin-bottom: 6px; }
            .draw-card-btn { padding: 8px 3px; font-size: 11px; border-radius: 7px; min-height: 34px; }
            .draw-card-meta { font-size: 9px; gap: 4px; flex-wrap: wrap; }
            .draw-card-tag { font-size: 9px; padding: 1px 5px; }
            .draw-card-time { font-size: 9px; }
        }

        @media (max-width: 480px) {
            #drawResults { gap: 7px !important; }
            .draw-card { border-radius: 10px !important; }
            .draw-card-body { padding: 7px 8px 6px 8px; }
            .draw-card-prompt { font-size: 10px; margin-bottom: 5px; }
            .draw-card-btn { padding: 7px 2px; font-size: 10px; border-radius: 6px; min-height: 32px; gap: 3px; }
            .draw-card-btn i { font-size: 10px; }
            .draw-card-btn span { display: none; }
            .draw-card-btn-download { padding: 7px 0; }
            .draw-card-btn-apply { padding: 7px 0; }
            .draw-card-meta { font-size: 9px; gap: 3px; padding-top: 3px; }
            .draw-card-tag { font-size: 9px; padding: 0 4px; }
            .draw-card-img-wrap .img-expired i { font-size: 22px; }
            .draw-card-img-wrap .img-expired span { font-size: 11px; }
        }
        .site-notice {
            background: var(--color-bg-card);
            border: 1px solid rgba(var(--color-primary-rgb),0.15);
            border-radius: 14px;
            padding: 14px 20px;
            margin: 0 0 8px 0;
            display: flex;
            align-items: flex-start;
            gap: 12px;
            position: relative;
            box-shadow: 0 2px 12px rgba(var(--color-primary-rgb),0.08);
            transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
            overflow: hidden;
        }
        .site-notice::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background: var(--color-primary);
            border-radius: 4px 0 0 4px;
        }
        .site-notice:hover {
            box-shadow: 0 4px 20px rgba(var(--color-primary-rgb),0.15);
        }
        .site-notice-icon {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: var(--color-primary-light);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .site-notice-icon i { color: var(--color-primary); font-size: 16px; }
        .site-notice-body { flex: 1; min-width: 0; }
        .site-notice-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
        .site-notice-title { font-size: 14px; font-weight: 800; color: var(--color-text); }
        .site-notice-badge { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 10px; font-size: 10px; font-weight: 700; background: var(--color-primary-light); color: var(--color-primary); }
        .site-notice-text {
            font-size: 13px;
            color: var(--color-text-secondary);
            line-height: 1.6;
            word-break: break-word;
            max-height: 48px;
            overflow: hidden;
            transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
        }
        .site-notice-text.expanded {
            max-height: 600px;
        }
        .site-notice-toggle {
            background: none;
            border: none;
            cursor: pointer;
            color: var(--color-primary);
            font-size: 12px;
            font-weight: 700;
            padding: 2px 0;
            margin-top: 4px;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            transition: color 0.2s;
        }
        .site-notice-toggle:hover { color: var(--color-primary-dark); }
        .site-notice-toggle i { font-size: 10px; transition: transform 0.3s; }
        .site-notice-toggle.expanded i { transform: rotate(180deg); }
        .site-notice-actions {
            display: flex;
            flex-direction: column;
            gap: 4px;
            flex-shrink: 0;
            align-items: flex-end;
        }
        .site-notice-close {
            background: none;
            border: none;
            cursor: pointer;
            color: #94a3b8;
            font-size: 14px;
            padding: 4px 6px;
            border-radius: 6px;
            transition: all 0.2s;
            min-width: 28px;
            min-height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .site-notice-close:hover { color: #64748b; background: rgba(148,163,184,0.15); }
        .site-notice-read {
            background: none;
            border: none;
            cursor: pointer;
            color: #94a3b8;
            font-size: 11px;
            padding: 2px 6px;
            border-radius: 4px;
            transition: all 0.2s;
            white-space: nowrap;
        }
        .site-notice-read:hover { color: #10B981; }
        .site-notice.is-read { opacity: 0.6; }
        .site-notice.is-read .site-notice-badge { background: #f1f5f9; color: #94a3b8; }
        .site-notice-collapse {
            max-height: 0;
            padding: 0 20px;
            margin: 0;
            opacity: 0;
            overflow: hidden;
            border: none;
            box-shadow: none;
        }

        [data-theme="dark"] .glass { background: rgba(30,41,59,0.7); border-color: rgba(255,255,255,0.08); }
        [data-theme="dark"] .glass-dark { background: rgba(30,41,59,0.85); border-color: rgba(255,255,255,0.1); }
        [data-theme="dark"] .prompt-modal-close:hover { background: var(--color-bg-hover); color: var(--color-text); }
        [data-theme="dark"] .draw-card-btn-download { background: var(--color-bg-hover); color: var(--color-text-secondary); }
        [data-theme="dark"] .draw-card-btn-download:active { background: var(--color-border); }
        [data-theme="dark"] .draw-card-meta { border-top-color: var(--color-border); }
        [data-theme="dark"] .draw-card-tag { background: var(--color-bg-hover); color: var(--color-text-secondary); }
        [data-theme="dark"] .draw-card-btn { border-color: var(--color-border); }
        [data-theme="dark"] .site-notice-close:hover { background: var(--color-bg-hover); }
        [data-theme="dark"] .site-notice.is-read .site-notice-badge { background: var(--color-bg-hover); color: var(--color-text-muted); }
        [data-theme="dark"] .ref-thumb-remove { border-color: var(--color-bg-card); }
        [data-theme="dark"] .nav-group-content .nav-item { color: var(--color-text-secondary); }
        [data-theme="dark"] .nav-group-content .nav-item:hover { color: var(--color-text); }
        [data-theme="dark"] .text-gray-800,
        [data-theme="dark"] .text-gray-600,
        [data-theme="dark"] .text-gray-500,
        [data-theme="dark"] .text-gray-400 { color: var(--color-text-secondary) !important; }
        [data-theme="dark"] .bg-gray-100 { background: var(--color-bg-hover) !important; }
        [data-theme="dark"] .border-gray-100,
        [data-theme="dark"] .border-gray-200 { border-color: var(--color-border) !important; }
        [data-theme="dark"] .hover\:bg-gray-100:hover { background: var(--color-bg-hover) !important; }
        [data-theme="dark"] select.input-field { background-color: var(--color-bg-input); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); }
        [data-theme="dark"] .table-wrap table { background: var(--color-bg-card); }
        [data-theme="dark"] .table-wrap th { background: var(--color-bg-subtle); color: var(--color-text-secondary); border-bottom-color: var(--color-border); }
        [data-theme="dark"] .table-wrap td { color: var(--color-text-secondary); border-bottom-color: var(--color-border-light); }
        [data-theme="dark"] .table-wrap tr:hover td { background: var(--color-bg-subtle); }
        [data-theme="dark"] .badge-accent { background: rgba(16,185,129,0.15); }
        [data-theme="dark"] .badge-secondary { background: rgba(150,198,234,0.15); }
        [data-theme="dark"] .badge-danger { background: rgba(239,68,68,0.15); }
        [data-theme="dark"] .badge-warning { background: rgba(245,158,11,0.15); }
        [data-theme="dark"] .btn-danger { background: #DC2626; }
        [data-theme="dark"] .btn-danger:hover { background: #B91C1C; }
        [data-theme="dark"] .btn-secondary { background: var(--color-text-faint); }
        [data-theme="dark"] .btn-secondary:hover { background: var(--color-text-muted); }
        [data-theme="dark"] .site-notice-text { color: var(--color-text-secondary); }
        [data-theme="dark"] .site-notice.is-read .site-notice-title { color: var(--color-text-secondary); }
        [data-theme="dark"] .site-notice.is-read .site-notice-text { color: var(--color-text-muted); }
        [data-theme="dark"] .stat-card .stat-icon.accent { background: rgba(16,185,129,0.15); }
        [data-theme="dark"] .stat-card .stat-icon.secondary { background: rgba(150,198,234,0.15); }
        [data-theme="dark"] .stat-card .stat-icon.primary { background: rgba(var(--color-primary-rgb),0.15); }
        [data-theme="dark"] .stat-card .stat-icon.danger { background: rgba(239,68,68,0.15); }

        [data-theme="dark"] .bg-primary-light { background: var(--color-primary-light) !important; }
        [data-theme="dark"] .bg-secondary-light { background: rgba(150,198,234,0.12) !important; }
        [data-theme="dark"] .bg-accent-light { background: rgba(16,185,129,0.12) !important; }
        [data-theme="dark"] .bg-danger-light { background: rgba(239,68,68,0.12) !important; }
        [data-theme="dark"] .bg-gray-50 { background: var(--color-bg-hover) !important; }
        [data-theme="dark"] .text-gray-700 { color: var(--color-text-secondary) !important; }
        [data-theme="dark"] .text-gray-400 { color: var(--color-text-muted) !important; }
        [data-theme="dark"] .text-gray-800 { color: var(--color-text) !important; }
        [data-theme="dark"] .text-gray-500 { color: var(--color-text-muted) !important; }
        [data-theme="dark"] .hover\:bg-violet-50:hover { background: rgba(139,92,246,0.1) !important; }
        [data-theme="dark"] .bg-violet-light { background: rgba(139,92,246,0.1) !important; }
        [data-theme="dark"] .hover\:bg-gray-50:hover { background: var(--color-bg-hover) !important; }
        [data-theme="dark"] .text-gray-600 { color: var(--color-text-secondary) !important; }
        [data-theme="dark"] .text-secondary { color: var(--color-text-secondary) !important; }
        [data-theme="dark"] .form-control { background: var(--color-bg-input) !important; color: var(--color-text) !important; border-color: var(--color-border) !important; }
        [data-theme="dark"] input.form-control::placeholder, [data-theme="dark"] select.form-control::placeholder { color: var(--color-text-muted) !important; }
        [data-theme="dark"] .bg-white { background: var(--color-bg-card) !important; }
        [data-theme="dark"] .bg-white\/80 { background: rgba(30,41,59,0.8) !important; }
        [data-theme="dark"] .border-gray-100 { border-color: var(--color-border) !important; }
        [data-theme="dark"] .hover\:bg-gray-200:hover { background: var(--color-bg-hover) !important; }
        [data-theme="dark"] .draw-card-btn-share { background: rgba(16,185,129,0.15); color: #10B981; border-color: rgba(16,185,129,0.25); }
        [data-theme="dark"] .draw-card-btn-share:active { background: rgba(16,185,129,0.25); }
        [data-theme="dark"] .draw-card-btn-pending { background: rgba(245,158,11,0.15); color: #F59E0B; border-color: rgba(245,158,11,0.25); }
        [data-theme="dark"] .draw-card-btn-pending:active { background: rgba(245,158,11,0.25); }
        [data-theme="dark"] .draw-card-btn-approved { background: rgba(59,130,246,0.15); color: #3B82F6; border-color: rgba(59,130,246,0.25); }
        [data-theme="dark"] .draw-card-btn-approved:active { background: rgba(59,130,246,0.25); }
        [data-theme="dark"] .draw-card-btn-rejected { background: rgba(239,68,68,0.15); color: #EF4444; border-color: rgba(239,68,68,0.25); }
        [data-theme="dark"] .draw-card-btn-rejected:active { background: rgba(239,68,68,0.25); }
        [data-theme="dark"] .draw-card-dur { color: var(--color-text-muted); }
        [data-theme="dark"] .draw-card-time { color: var(--color-text-muted); }
        [data-theme="dark"] .prompt-modal-close { color: var(--color-text-secondary); }
        [data-theme="dark"] .prompt-modal-close:hover { background: var(--color-bg-hover); color: var(--color-text); }
        [data-theme="dark"] .site-notice-close { color: var(--color-text-secondary); }
        [data-theme="dark"] .site-notice-read { color: var(--color-text-secondary); }
        [data-theme="dark"] .text-yellow-600 { color: #F59E0B !important; }
        [data-theme="dark"] .text-violet-500 { color: #A78BFA !important; }
        [data-theme="dark"] .text-green-500 { color: #34D399 !important; }
        [data-theme="dark"] .text-blue-500 { color: #60A5FA !important; }
        [data-theme="dark"] .text-red-500 { color: #F87171 !important; }
        [data-theme="dark"] .draw-card-tag-status-pending { background: rgba(245,158,11,0.15); color: #F59E0B; }
        [data-theme="dark"] .draw-card-tag-status-expired { background: var(--color-bg-hover); color: var(--color-text-secondary); }
        [data-theme="dark"] .draw-card-tag-status-failed { background: rgba(239,68,68,0.15); color: #EF4444; }
        [data-theme="dark"] .home-main { background: linear-gradient(to bottom, var(--color-bg-page), var(--color-bg-page-end), var(--color-bg-page)) !important; }

        .theme-panel { position: relative; }
        .theme-panel-dropdown { position: absolute; top: 100%; right: 0; margin-top: 8px; background: var(--color-modal-bg); border: 1px solid var(--color-border); border-radius: 16px; padding: 16px; box-shadow: 0 12px 40px rgba(0,0,0,0.15); z-index: 200; min-width: 240px; animation: scaleIn 0.2s ease-out; }
        .theme-panel-title { font-size: 13px; font-weight: 800; color: var(--color-text); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
        .theme-panel-title i { color: var(--color-primary); }
        .theme-mode-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; margin-bottom: 8px; border-bottom: 1px solid var(--color-border); }
        .theme-mode-label { font-size: 13px; font-weight: 700; color: var(--color-text); display: flex; align-items: center; gap: 6px; }
        .theme-mode-label i { font-size: 14px; }
        .theme-switch { position: relative; width: 44px; height: 24px; background: var(--color-border); border-radius: 12px; cursor: pointer; transition: background 0.3s; border: none; padding: 0; }
        .theme-switch.active { background: var(--color-primary); }
        .theme-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform 0.3s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
        .theme-switch.active::after { transform: translateX(20px); }
        .theme-colors-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
        .theme-color-item { width: 36px; height: 36px; border-radius: 10px; cursor: pointer; transition: all 0.2s; border: 2px solid transparent; display: flex; align-items: center; justify-content: center; position: relative; }
        .theme-color-item:hover { transform: scale(1.1); }
        .theme-color-item.active { border-color: var(--color-text); box-shadow: 0 0 0 2px var(--color-bg-card), 0 0 0 4px var(--color-text); }
        .theme-color-item.active::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 12px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
        .theme-color-name { font-size: 10px; text-align: center; color: var(--color-text-muted); margin-top: 2px; font-weight: 600; }
        .theme-color-wrap { display: flex; flex-direction: column; align-items: center; }
        .theme-btn { width: 40px; height: 40px; border-radius: 12px; border: 2px solid var(--color-border); background: var(--color-bg-card); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s; color: var(--color-text-secondary); font-size: 16px; }
        .theme-btn:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--color-primary-rgb),0.2); }

        /* ============================================================
           全局主题包（首页模板升级为全站主题）
           主题包含背景装饰层 + 全套配色变量；暗色系主题包直接覆盖明暗，
           不依赖夜间开关，切换后登录页/仪表盘/各功能页风格同步切换
           ============================================================ */

        /* 装饰层：fixed 底层，pointer-events:none 不挡操作 */
        .xy-theme-decor { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
        body > .xy-theme-decor ~ .main-wrapper { position: relative; z-index: 1; }
        body > .xy-theme-decor + .min-h-screen { position: relative; z-index: 1; }
        @media (prefers-reduced-motion: reduce) { .xy-theme-decor * { animation: none !important; } }

        /* 星点：单元素多重 box-shadow 生成，avoid 大量 DOM */
        .xy-decor-stars { position: absolute; top: 0; left: 0; width: 2px; height: 2px; border-radius: 50%; background: transparent; will-change: opacity; }
        .xy-decor-stars-a { box-shadow: 12vw 18vh 0 0 rgba(255,255,255,0.85), 28vw 62vh 0 0 rgba(255,255,255,0.55), 44vw 12vh 0 0 rgba(255,255,255,0.7), 58vw 78vh 0 0 rgba(255,255,255,0.5), 71vw 26vh 0 0 rgba(255,255,255,0.8), 83vw 55vh 0 0 rgba(255,255,255,0.6), 92vw 15vh 0 0 rgba(255,255,255,0.75), 8vw 82vh 0 0 rgba(255,255,255,0.6), 36vw 40vh 0 0 rgba(255,255,255,0.5), 64vw 8vh 0 0 rgba(255,255,255,0.65), 78vw 88vh 0 0 rgba(255,255,255,0.55), 18vw 35vh 0 0 rgba(255,255,255,0.45), 51vw 52vh 0 0 rgba(255,255,255,0.7), 96vw 70vh 0 0 rgba(255,255,255,0.5), 5vw 8vh 0 0 rgba(255,255,255,0.6); animation: xyTwinkle 4.5s ease-in-out infinite; }
        .xy-decor-stars-b { box-shadow: 22vw 8vh 0 0 rgba(255,255,255,0.5), 38vw 88vh 0 0 rgba(255,255,255,0.4), 49vw 30vh 0 0 rgba(255,255,255,0.6), 66vw 45vh 0 0 rgba(255,255,255,0.45), 88vw 32vh 0 0 rgba(255,255,255,0.55), 74vw 92vh 0 0 rgba(255,255,255,0.4), 15vw 55vh 0 0 rgba(255,255,255,0.5), 60vw 18vh 0 0 rgba(255,255,255,0.45), 84vw 75vh 0 0 rgba(255,255,255,0.6), 32vw 22vh 0 0 rgba(255,255,255,0.4), 55vw 66vh 0 0 rgba(255,255,255,0.55), 2vw 45vh 0 0 rgba(255,255,255,0.45); animation: xyTwinkle 6s ease-in-out 1.2s infinite; }
        @keyframes xyTwinkle { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

        /* 流星：单色透明度拖尾，斜向划过 */
        .xy-decor-meteor { position: absolute; top: -10%; left: -10%; width: 130px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 100%); opacity: 0; transform: rotate(32deg); will-change: transform, opacity; }
        .xy-decor-meteor-1 { animation: xyMeteor 9s linear 2s infinite; }
        .xy-decor-meteor-2 { top: 28%; left: 52%; width: 90px; animation: xyMeteor 11s linear 6.5s infinite; }
        @keyframes xyMeteor { 0% { opacity: 0; transform: translate(0,0) rotate(32deg) scaleX(0.4); } 4% { opacity: 0.9; } 16% { opacity: 0; transform: translate(70vw, 42vh) rotate(32deg) scaleX(1); } 100% { opacity: 0; transform: translate(70vw, 42vh) rotate(32deg) scaleX(1); } }

        /* 星云：单色蓝系光晕漂移，渐变自带柔边不用 blur 滤镜，避免移动端掉帧 */
        .xy-decor-nebula { position: absolute; border-radius: 50%; will-change: transform; }
        .xy-decor-nebula-1 { width: 60vw; height: 60vw; top: -24vw; left: -20vw; background: radial-gradient(circle, rgba(56,189,248,0.20) 0%, transparent 65%); animation: xyNebulaDriftA 30s ease-in-out infinite; }
        .xy-decor-nebula-2 { width: 52vw; height: 52vw; bottom: -22vw; right: -16vw; background: radial-gradient(circle, rgba(56,189,248,0.14) 0%, transparent 65%); animation: xyNebulaDriftB 34s ease-in-out infinite; }
        @keyframes xyNebulaDriftA { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(4vw,3vw,0) scale(1.12); } }
        @keyframes xyNebulaDriftB { 0%, 100% { transform: translate3d(0,0,0) scale(1.05); } 50% { transform: translate3d(-5vw,-4vw,0) scale(1); } }

        /* 星球：蓝海同款三颗多彩行星（蓝气态 + 紫红 + 金球） */
        .xy-decor-planet { position: absolute; border-radius: 50%; will-change: transform; }
        .xy-decor-planet-1 { width: 220px; height: 220px; top: 12%; right: 8%; background: radial-gradient(circle at 32% 30%, #8fe3ff 0%, #2a7fd4 35%, #0b2c5e 70%, #04122a 100%); box-shadow: inset -22px -22px 50px rgba(0,0,0,0.75), inset 14px 14px 34px rgba(140,220,255,0.28), 0 0 60px rgba(0,217,255,0.35); animation: xyPlanetFloat1 26s ease-in-out infinite; }
        .xy-decor-planet-1::after { content: ''; position: absolute; inset: -58% -18%; border-radius: 50%; border: 8px solid rgba(0,217,255,0.28); border-bottom-color: transparent; border-left-color: transparent; transform: rotate(-22deg); box-shadow: 0 0 22px rgba(0,217,255,0.30); }
        .xy-decor-planet-2 { width: 130px; height: 130px; bottom: 22%; left: 6%; background: radial-gradient(circle at 35% 28%, #ffb8f2 0%, #c94ed6 35%, #5c0e82 70%, #1a0324 100%); box-shadow: inset -16px -16px 36px rgba(0,0,0,0.80), inset 10px 10px 26px rgba(255,180,240,0.30), 0 0 46px rgba(255,0,200,0.42); animation: xyPlanetFloat2 30s ease-in-out infinite; }
        .xy-decor-planet-3 { width: 72px; height: 72px; top: 60%; right: 22%; background: radial-gradient(circle at 30% 30%, #fff4c2 0%, #ffd166 40%, #a86a05 80%, #3a2100 100%); box-shadow: inset -10px -10px 22px rgba(0,0,0,0.7), 0 0 36px rgba(255,209,102,0.48); animation: xyPlanetFloat3 22s ease-in-out infinite; }
        @keyframes xyPlanetFloat1 { 0%, 100% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(-18px,22px,0) rotate(8deg); } }
        @keyframes xyPlanetFloat2 { 0%, 100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(22px,-20px,0); } }
        @keyframes xyPlanetFloat3 { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-14px,-16px,0) scale(1.06); } }

        /* 星尘扫描线（星际航站） */
        .xy-decor-scanlines { position: absolute; inset: 0; opacity: 0.32; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,217,255,0.022) 2px, rgba(0,217,255,0.022) 3px); }

        /* 霓虹星云（星际航站：蓝紫 / 紫粉 / 粉三色） */
        .xy-theme-decor-spaceport .xy-decor-nebula { opacity: 0.45; mix-blend-mode: screen; }
        .xy-theme-decor-spaceport .xy-decor-nebula-1 { width: 58vw; height: 58vw; top: -22vw; left: -18vw; background: radial-gradient(circle, rgba(0,217,255,0.55) 0%, rgba(180,0,255,0.20) 62%, transparent 84%); animation: xyNebulaDriftA 32s ease-in-out infinite; }
        .xy-theme-decor-spaceport .xy-decor-nebula-2 { width: 52vw; height: 52vw; bottom: -20vw; right: -14vw; background: radial-gradient(circle, rgba(180,0,255,0.55) 0%, rgba(255,0,200,0.18) 62%, transparent 84%); animation: xyNebulaDriftB 36s ease-in-out infinite; }
        .xy-theme-decor-spaceport .xy-decor-nebula-3 { width: 44vw; height: 44vw; top: 40%; left: 50%; margin: -22vw 0 0 -22vw; background: radial-gradient(circle, rgba(255,0,200,0.35) 0%, transparent 78%); animation: xyNebulaDriftC 40s ease-in-out infinite; }
        @keyframes xyNebulaDriftC { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.20); } }

        /* 透视网格地平线（星际航站） */
        .xy-decor-grid { position: absolute; left: -25%; right: -25%; bottom: 0; height: 42%; background-image: linear-gradient(rgba(0,217,255,0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(0,217,255,0.14) 1px, transparent 1px); background-size: 52px 52px; transform: perspective(420px) rotateX(62deg); transform-origin: bottom center; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 32%); mask-image: linear-gradient(180deg, transparent 0%, #000 32%); animation: xyGridMove 5s linear infinite; }
        @keyframes xyGridMove { to { background-position: 0 52px, 0 0; } }

        /* 轨道环 + 环绕星点（星轨） */
        .xy-decor-orbit { position: absolute; top: 7%; right: 5%; width: 320px; height: 320px; border-radius: 50%; border: 1px solid rgba(0,202,224,0.22); }
        .xy-decor-orbit::before { content: ''; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #00cae0; box-shadow: 0 0 14px rgba(0,202,224,0.9); transform-origin: 5px 165px; animation: xyOrbitSpin 16s linear infinite; }
        .xy-decor-orbit-sm { top: auto; bottom: 12%; left: 6%; right: auto; width: 200px; height: 200px; border-color: rgba(0,202,224,0.16); transform: rotate(-14deg); }
        .xy-decor-orbit-sm::before { width: 7px; height: 7px; margin-left: -3.5px; background: rgba(255,255,255,0.9); box-shadow: 0 0 10px rgba(0,202,224,0.8); transform-origin: 3.5px 103.5px; animation: xyOrbitSpin 11s linear infinite reverse; }
        @keyframes xyOrbitSpin { to { transform: rotate(360deg); } }

        /* 粒子画布（JS 驱动） */
        .xy-decor-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

        /* ---------- 主题包：星轨 orbit（灵芝，青色） ---------- */
        [data-theme-pack="orbit"] { --color-primary: #00cae0; --color-primary-dark: #00a3b8; --color-primary-light: rgba(0,202,224,0.15); --color-primary-rgb: 0,202,224; --color-bg-page: #04070d; --color-bg-page-end: #04070d; --color-bg-card: #0c1424; --color-bg-sidebar: rgba(6,10,20,0.48); --color-bg-header: rgba(6,10,20,0.48); --color-bg-subtle: rgba(255,255,255,0.03); --color-bg-hover: rgba(0,202,224,0.10); --color-bg-input: rgba(255,255,255,0.05); --color-text: #e8f6f8; --color-text-secondary: #93a8b8; --color-text-muted: #64798a; --color-text-faint: #47566a; --color-border: rgba(140,190,210,0.14); --color-border-light: rgba(255,255,255,0.05); --color-shadow: rgba(0,0,0,0.4); --color-shadow-hover: rgba(0,0,0,0.5); --color-overlay: rgba(2,6,12,0.7); --color-modal-bg: #0a1220; --color-scrollbar: rgba(255,255,255,0.14); --color-scrollbar-hover: rgba(0,202,224,0.4); }
        [data-theme-pack="orbit"] body { background: linear-gradient(160deg, #060b14, #04070d); }
        [data-theme-pack="orbit"] .sidebar, [data-theme-pack="orbit"] .top-header { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

        /* ---------- 主题包：星际航站 spaceport（蓝海，霓虹蓝深空） ---------- */
        [data-theme-pack="spaceport"] { --color-primary: #00d9ff; --color-primary-dark: #00b8d9; --color-primary-light: rgba(0,217,255,0.15); --color-primary-rgb: 0,217,255; --color-bg-page: #04030e; --color-bg-page-end: #0a0620; --color-bg-card: #0a0620; --color-bg-sidebar: rgba(6,5,18,0.48); --color-bg-header: rgba(6,5,18,0.48); --color-bg-subtle: rgba(255,255,255,0.03); --color-bg-hover: rgba(0,217,255,0.10); --color-bg-input: rgba(255,255,255,0.05); --color-text: #f2f2ff; --color-text-secondary: #9d9dbe; --color-text-muted: #7d7da3; --color-text-faint: #4d4d70; --color-border: rgba(255,255,255,0.10); --color-border-light: rgba(255,255,255,0.06); --color-shadow: rgba(0,0,0,0.4); --color-shadow-hover: rgba(0,0,0,0.5); --color-overlay: rgba(4,3,14,0.7); --color-modal-bg: #0a0620; --color-scrollbar: rgba(255,255,255,0.15); --color-scrollbar-hover: rgba(0,217,255,0.4); }
        [data-theme-pack="spaceport"] body { background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(180,0,255,0.18), transparent 60%), radial-gradient(ellipse 60% 40% at 15% 90%, rgba(0,217,255,0.14), transparent 60%), radial-gradient(ellipse 70% 50% at 90% 70%, rgba(255,0,200,0.10), transparent 60%), linear-gradient(180deg, #04030e 0%, #0a0620 50%, #120a2e 100%); background-attachment: fixed; }
        [data-theme-pack="spaceport"] .sidebar, [data-theme-pack="spaceport"] .top-header { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
        [data-theme-pack="spaceport"] .card, [data-theme-pack="spaceport"] .card-static { border-color: rgba(255,255,255,0.10); }

        /* ---------- 主题包：星空 starfield（懒大王，星蓝） ---------- */
        [data-theme-pack="starfield"] { --color-primary: #7aa7ff; --color-primary-dark: #5b8cff; --color-primary-light: rgba(122,167,255,0.15); --color-primary-rgb: 122,167,255; --color-bg-page: #05060d; --color-bg-page-end: #05060d; --color-bg-card: #0d1024; --color-bg-sidebar: rgba(6,7,18,0.48); --color-bg-header: rgba(6,7,18,0.48); --color-bg-subtle: rgba(255,255,255,0.03); --color-bg-hover: rgba(122,167,255,0.10); --color-bg-input: rgba(255,255,255,0.05); --color-text: #eef1ff; --color-text-secondary: #a3aad4; --color-text-muted: #8b93c9; --color-text-faint: #565d8f; --color-border: rgba(120,130,200,0.16); --color-border-light: rgba(255,255,255,0.05); --color-shadow: rgba(0,0,0,0.4); --color-shadow-hover: rgba(0,0,0,0.5); --color-overlay: rgba(2,3,10,0.7); --color-modal-bg: #10142e; --color-scrollbar: rgba(255,255,255,0.14); --color-scrollbar-hover: rgba(122,167,255,0.4); }
        [data-theme-pack="starfield"] body { background: linear-gradient(160deg, #0a0c1c, #05060d); }
        [data-theme-pack="starfield"] .sidebar, [data-theme-pack="starfield"] .top-header { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

        /* ---------- 暗色主题包通用适配：玻璃拟态与 Tailwind 硬编码色 ---------- */
        [data-theme-pack="orbit"] .glass, [data-theme-pack="orbit"] .glass-dark,
        [data-theme-pack="spaceport"] .glass, [data-theme-pack="spaceport"] .glass-dark,
        [data-theme-pack="starfield"] .glass, [data-theme-pack="starfield"] .glass-dark { background: rgba(10,16,32,0.78); border-color: rgba(255,255,255,0.10); }
        [data-theme-pack="orbit"] .text-gray-800, [data-theme-pack="orbit"] .text-gray-700,
        [data-theme-pack="spaceport"] .text-gray-800, [data-theme-pack="spaceport"] .text-gray-700,
        [data-theme-pack="starfield"] .text-gray-800, [data-theme-pack="starfield"] .text-gray-700 { color: var(--color-text); }
        [data-theme-pack="orbit"] .text-gray-600, [data-theme-pack="orbit"] .text-gray-500,
        [data-theme-pack="spaceport"] .text-gray-600, [data-theme-pack="spaceport"] .text-gray-500,
        [data-theme-pack="starfield"] .text-gray-600, [data-theme-pack="starfield"] .text-gray-500 { color: var(--color-text-secondary); }
        [data-theme-pack="orbit"] .text-gray-400,
        [data-theme-pack="spaceport"] .text-gray-400,
        [data-theme-pack="starfield"] .text-gray-400 { color: var(--color-text-muted); }
        [data-theme-pack="orbit"] .bg-gray-50, [data-theme-pack="orbit"] .bg-gray-100,
        [data-theme-pack="spaceport"] .bg-gray-50, [data-theme-pack="spaceport"] .bg-gray-100,
        [data-theme-pack="starfield"] .bg-gray-50, [data-theme-pack="starfield"] .bg-gray-100 { background: var(--color-bg-subtle); }
        [data-theme-pack="orbit"] .bg-white,
        [data-theme-pack="spaceport"] .bg-white,
        [data-theme-pack="starfield"] .bg-white { background: var(--color-bg-card); }

        /* 主题包装饰移动端适配 */
        @media (max-width: 768px) {
            .xy-decor-orbit { width: 200px; height: 200px; top: 4%; right: -6%; opacity: 0.7; }
            .xy-decor-orbit::before { transform-origin: 5px 105px; }
            .xy-decor-orbit-sm { display: none; }
            .xy-decor-planet-1 { width: 120px; height: 120px; }
            .xy-decor-planet-2 { width: 76px; height: 76px; }
            .xy-decor-grid { height: 30%; }
            .xy-decor-stars { transform: scale(0.85); }
        }

        /* ============================================================
           主题包深化：装饰元素 + 布局组件主题化 + 水墨/星海杂志/极简主题
           组件规则统一走 html[data-theme-pack]（coral 默认主题保持原生风格）
           ============================================================ */

        /* ---------- 通用装饰：柔光斑 / 角落挂件 / 扫描线 / 月亮 / 卫星 ---------- */
        .xy-decor-glow { position: absolute; border-radius: 50%; will-change: transform; }
        .xy-decor-glow-a { width: 46vw; height: 46vw; top: -14vw; right: -12vw; background: radial-gradient(circle, var(--xy-glow-decor, rgba(255,107,139,0.10)) 0%, transparent 65%); animation: xyNebulaDriftA 28s ease-in-out infinite; }
        .xy-decor-glow-b { width: 40vw; height: 40vw; bottom: -16vw; left: -10vw; background: radial-gradient(circle, var(--xy-glow-decor, rgba(255,107,139,0.07)) 0%, transparent 65%); animation: xyNebulaDriftB 32s ease-in-out infinite; }
        .xy-decor-glow-accent { --xy-glow-decor: rgba(0,107,230,0.10); }

        .xy-decor-jewel { position: absolute; width: 26px; height: 26px; border-color: var(--xy-jewel, rgba(255,255,255,0.4)); border-style: solid; border-width: 0; opacity: 0.9; }
        .xy-decor-jewel-tl { top: 16px; left: 16px; border-top-width: 2px; border-left-width: 2px; border-radius: 10px 0 0 0; }
        .xy-decor-jewel-tr { top: 16px; right: 16px; border-top-width: 2px; border-right-width: 2px; border-radius: 0 10px 0 0; }
        .xy-decor-jewel-bl { bottom: 16px; left: 16px; border-bottom-width: 2px; border-left-width: 2px; border-radius: 0 0 0 10px; }
        .xy-decor-jewel-br { bottom: 16px; right: 16px; border-bottom-width: 2px; border-right-width: 2px; border-radius: 0 0 10px 0; }

        .xy-decor-scanline { position: absolute; left: 0; right: 0; top: -140px; height: 140px; background: linear-gradient(180deg, transparent 0%, var(--xy-header-line, rgba(56,189,248,0.4)) 100%); opacity: 0.10; will-change: transform; animation: xyScan 10s linear infinite; }
        @keyframes xyScan { to { transform: translateY(calc(100vh + 140px)); } }

        .xy-decor-satellite-1 { position: absolute; top: 30%; left: 12%; width: 8px; height: 8px; border-radius: 50%; background: rgba(0,202,224,0.9); box-shadow: 0 0 12px rgba(0,202,224,0.8); animation: xySatellite 18s ease-in-out infinite; }
        @keyframes xySatellite { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(14vw, -7vh); } }

        .xy-decor-moon { position: absolute; top: 11%; left: 9%; width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle at 36% 32%, #f4f7ff 0%, #c9d6f5 45%, #8ea3d8 78%, #6d82b8 100%); box-shadow: 0 0 44px rgba(200,215,255,0.32), inset -12px -8px 22px rgba(80,95,150,0.5); }
        .xy-decor-moon::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 62% 58%, rgba(120,135,180,0.45) 0 6px, transparent 7px), radial-gradient(circle at 38% 70%, rgba(120,135,180,0.35) 0 4px, transparent 5px), radial-gradient(circle at 55% 30%, rgba(120,135,180,0.25) 0 3px, transparent 4px); }

        /* ---------- 墨韵 inkwhite（小蓝：黑底白墨） ---------- */
        .xy-decor-stain { position: absolute; border-radius: 50%; opacity: .3; will-change: transform; }
        .xy-decor-stain-1 { width: 55vw; height: 55vw; top: -20vw; left: -16vw; background: radial-gradient(circle, rgba(255,255,255,0.50), rgba(255,255,255,0.04) 45%, transparent 84%); animation: xyInkDrift1 30s ease-in-out infinite; }
        .xy-decor-stain-2 { width: 48vw; height: 48vw; bottom: -18vw; right: -12vw; background: radial-gradient(circle, rgba(255,255,255,0.45), rgba(255,255,255,0.04) 45%, transparent 84%); animation: xyInkDrift2 34s ease-in-out infinite; }
        .xy-decor-stain-3 { width: 40vw; height: 40vw; top: 42%; left: 50%; margin: -20vw 0 0 -20vw; background: radial-gradient(circle, rgba(255,255,255,0.30), transparent 82%); animation: xyInkDrift3 38s ease-in-out infinite; }
        @keyframes xyInkDrift1 { 0%, 100% { transform: translate3d(0,0,0) scale(1) rotate(0deg); } 33% { transform: translate3d(6vw,4vw,0) scale(1.12) rotate(8deg); } 66% { transform: translate3d(-3vw,6vw,0) scale(1.06) rotate(-6deg); } }
        @keyframes xyInkDrift2 { 0%, 100% { transform: translate3d(0,0,0) scale(1.05) rotate(0deg); } 50% { transform: translate3d(-6vw,-5vw,0) scale(1) rotate(10deg); } }
        @keyframes xyInkDrift3 { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.18) rotate(-8deg); } }
        .xy-decor-tones { position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.35) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 15%, transparent 78%); mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 15%, transparent 78%); will-change: opacity; animation: xyToneBreathe 9s ease-in-out infinite; }
        @keyframes xyToneBreathe { 0%, 100% { opacity: 0.09; } 50% { opacity: 0.16; } }
        .xy-decor-inkline { position: absolute; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent); will-change: transform, opacity; animation: xyInkLineFlow 12s ease-in-out infinite; opacity: 0; }
        .xy-decor-inkline-1 { top: 18%; left: 0; width: 60%; }
        .xy-decor-inkline-2 { top: 42%; right: 0; width: 70%; animation-delay: 3s; }
        .xy-decor-inkline-3 { top: 68%; left: 5%; width: 55%; animation-delay: 6s; }
        .xy-decor-inkline-4 { top: 84%; right: 8%; width: 50%; animation-delay: 9s; }
        @keyframes xyInkLineFlow { 0% { opacity: 0; transform: translateX(-30px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(30px); } }
        /* 中心放射光芒（小蓝同款：720px 白色 conic 放射，40s 匀速旋转，外圈渐隐） */
        .xy-decor-burst { position: absolute; top: 50%; left: 50%; width: 720px; height: 720px; margin: -360px 0 0 -360px; pointer-events: none; opacity: .18; background: conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,0.6) 2deg, transparent 4deg, transparent 20deg, rgba(255,255,255,0.5) 22deg, transparent 24deg, transparent 50deg, rgba(255,255,255,0.6) 52deg, transparent 54deg, transparent 80deg, rgba(255,255,255,0.5) 82deg, transparent 84deg, transparent 110deg, rgba(255,255,255,0.6) 112deg, transparent 114deg, transparent 140deg, rgba(255,255,255,0.5) 142deg, transparent 144deg, transparent 170deg, rgba(255,255,255,0.6) 172deg, transparent 174deg, transparent 200deg, rgba(255,255,255,0.5) 202deg, transparent 204deg, transparent 230deg, rgba(255,255,255,0.6) 232deg, transparent 234deg, transparent 260deg, rgba(255,255,255,0.5) 262deg, transparent 264deg, transparent 290deg, rgba(255,255,255,0.6) 292deg, transparent 294deg, transparent 320deg, rgba(255,255,255,0.5) 322deg, transparent 324deg, transparent 350deg, rgba(255,255,255,0.6) 352deg, transparent 354deg); animation: xyBurstSpin 40s linear infinite; -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 70%); mask-image: radial-gradient(circle, #000 20%, transparent 70%); }
        @keyframes xyBurstSpin { to { transform: rotate(360deg); } }
        /* 白圈扩散波纹（小蓝同款：3 圈白圈 5s 错峰放大渐隐） */
        .xy-decor-inkring { position: absolute; top: 50%; left: 50%; border-radius: 50%; pointer-events: none; will-change: transform, opacity; }
        .xy-decor-inkring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,0.30); }
        .xy-decor-inkring-1 { width: 460px; height: 460px; margin: -230px 0 0 -230px; animation: xyRingExpand 5s ease-out infinite; }
        .xy-decor-inkring-2 { width: 460px; height: 460px; margin: -230px 0 0 -230px; animation: xyRingExpand 5s ease-out infinite 1.6s; }
        .xy-decor-inkring-3 { width: 460px; height: 460px; margin: -230px 0 0 -230px; animation: xyRingExpand 5s ease-out infinite 3.2s; }
        @keyframes xyRingExpand { 0% { transform: scale(.5); opacity: 0; } 15% { opacity: .75; } 100% { transform: scale(2.2); opacity: 0; } }
        .xy-decor-noise { position: absolute; inset: 0; opacity: 0.08; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
        /* 白主色主题：选中导航底色为白，文字/图标改深色保证可见 */
        [data-theme-pack="inkwhite"] .nav-item.active { color: #0c0c10; }
        [data-theme-pack="inkwhite"] .nav-item.active i.nav-icon { color: #0c0c10; }

        /* ---------- 星海杂志 magazine（江海：深蓝黑 + 背景大图 + 青） ---------- */
        .xy-theme-decor-magazine .xy-decor-heroart { position: absolute; inset: 0; background: url("/assets/img/hero-artwork.jpg") center/cover no-repeat; opacity: 0.55; }
        .xy-theme-decor-magazine .xy-decor-heromask { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,8,20,0.88) 0%, rgba(4,8,20,0.58) 45%, rgba(4,8,20,0.82) 100%); }
        .xy-theme-decor-magazine .xy-decor-nebula-1 { background: radial-gradient(circle, rgba(0,202,224,0.13) 0%, transparent 65%); }
        .xy-theme-decor-magazine .xy-decor-nebula-2 { background: radial-gradient(circle, rgba(0,202,224,0.08) 0%, transparent 65%); }
        .xy-decor-magazine-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(0,202,224,0.05) 1px, transparent 1px); background-size: 100% 64px; }
        .xy-decor-tape { position: absolute; width: 128px; height: 26px; background: rgba(255,255,255,0.05); border-left: 1px dashed rgba(0,202,224,0.16); border-right: 1px dashed rgba(0,202,224,0.16); }
        .xy-decor-tape-a { top: 74px; right: 7%; transform: rotate(-8deg); }
        .xy-decor-tape-b { bottom: 96px; left: 6%; transform: rotate(6deg); }

        /* ---------- 极简 saas：蓝光点阵 + 漂浮卡片 + 气泡 + 底部光浪 ---------- */
        .xy-decor-dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(0,107,230,0.10) 1.2px, transparent 1.2px); background-size: 26px 26px; }
        .xy-decor-ring { position: absolute; border-radius: 50%; border: 1.5px solid rgba(0,107,230,0.16); will-change: transform; }
        .xy-decor-ring-a { width: 300px; height: 300px; top: 8%; right: -80px; animation: xyNebulaDriftA 30s ease-in-out infinite; }
        .xy-decor-ring-b { width: 190px; height: 190px; bottom: 14%; left: -60px; border-color: rgba(0,107,230,0.12); animation: xyNebulaDriftB 36s ease-in-out infinite; }
        .xy-decor-floatcard { position: absolute; border-radius: 14px; background: rgba(255,255,255,0.55); border: 1px solid rgba(0,107,230,0.10); box-shadow: 0 10px 30px rgba(15,42,72,0.06); will-change: transform; }
        .xy-decor-floatcard-1 { width: 124px; height: 74px; top: 19%; left: 7%; animation: xyNebulaDriftA 24s ease-in-out infinite; }
        .xy-decor-floatcard-2 { width: 92px; height: 118px; bottom: 17%; right: 9%; animation: xyNebulaDriftB 28s ease-in-out infinite; }

        /* ---------- 主题包：墨韵 inkwhite（自定义iiiico/小蓝，黑底白墨） ---------- */
        [data-theme-pack="inkwhite"] { --color-primary: #ffffff; --color-primary-dark: #d4d4de; --color-primary-light: rgba(255,255,255,0.12); --color-primary-rgb: 255,255,255; --color-bg-page: #050506; --color-bg-page-end: #0c0c10; --color-bg-card: #0c0c10; --color-bg-sidebar: rgba(9,9,13,0.48); --color-bg-header: rgba(9,9,13,0.48); --color-bg-subtle: rgba(255,255,255,0.03); --color-bg-hover: rgba(255,255,255,0.08); --color-bg-input: rgba(255,255,255,0.04); --color-text: #f4f4f8; --color-text-secondary: #a0a0ac; --color-text-muted: #6a6a76; --color-text-faint: #3a3a44; --color-border: rgba(255,255,255,0.10); --color-border-light: rgba(255,255,255,0.05); --color-shadow: rgba(0,0,0,0.4); --color-shadow-hover: rgba(0,0,0,0.5); --color-overlay: rgba(5,5,6,0.7); --color-modal-bg: #0c0c10; --color-scrollbar: rgba(255,255,255,0.14); --color-scrollbar-hover: rgba(255,255,255,0.4); }
        [data-theme-pack="inkwhite"] body { background: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255,255,255,0.06), transparent 60%), radial-gradient(ellipse 60% 40% at 15% 100%, rgba(255,255,255,0.04), transparent 60%), radial-gradient(ellipse 70% 50% at 90% 80%, rgba(255,255,255,0.03), transparent 60%), linear-gradient(180deg, #050506 0%, #0c0c10 55%, #16161c 100%); }
        [data-theme-pack="inkwhite"] .sidebar, [data-theme-pack="inkwhite"] .top-header { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
        [data-theme-pack="inkwhite"] .card, [data-theme-pack="inkwhite"] .card-static { border-color: rgba(255,255,255,0.10); }
        [data-theme-pack="inkwhite"] .btn-primary { color: #0c0c10; }
        [data-theme-pack="inkwhite"] .btn-primary:hover { color: #0c0c10; }
        [data-theme-pack="inkwhite"] .badge-primary { background: rgba(255,255,255,0.14); }
        [data-theme-pack="inkwhite"] .text-primary, [data-theme-pack="inkwhite"] a.text-primary { color: #ffffff; }

        /* ---------- 主题包：星海杂志 magazine（江海云，深蓝黑 + 背景大图 + 青） ---------- */
        [data-theme-pack="magazine"] { --color-primary: #00cae0; --color-primary-dark: #00a3b8; --color-primary-light: rgba(0,202,224,0.12); --color-primary-rgb: 0,202,224; --color-bg-page: #04080f; --color-bg-page-end: #04080f; --color-bg-card: #0a1220; --color-bg-sidebar: rgba(6,11,21,0.48); --color-bg-header: rgba(6,11,21,0.48); --color-bg-subtle: rgba(255,255,255,0.03); --color-bg-hover: rgba(0,202,224,0.10); --color-bg-input: rgba(255,255,255,0.05); --color-text: #f0f6fa; --color-text-secondary: #9db4c8; --color-text-muted: #647d94; --color-text-faint: #3d4e60; --color-border: rgba(0,202,224,0.14); --color-border-light: rgba(255,255,255,0.05); --color-shadow: rgba(0,0,0,0.4); --color-shadow-hover: rgba(0,0,0,0.5); --color-overlay: rgba(4,8,20,0.7); --color-modal-bg: #0a1220; --color-scrollbar: rgba(255,255,255,0.14); --color-scrollbar-hover: rgba(0,202,224,0.4); }
        [data-theme-pack="magazine"] body { background: linear-gradient(180deg, #04080f 0%, #060c18 55%, #04080f 100%); background-attachment: fixed; }
        [data-theme-pack="magazine"] .sidebar, [data-theme-pack="magazine"] .top-header { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
        [data-theme-pack="magazine"] .card, [data-theme-pack="magazine"] .card-static { border-color: rgba(0,202,224,0.14); }

        /* ---------- 主题包：极简 saas（小氢云，蓝白） ---------- */
        [data-theme-pack="saas"] { --color-primary: #006be6; --color-primary-dark: #0053bf; --color-primary-light: rgba(0,107,230,0.10); --color-primary-rgb: 0,107,230; --color-bg-page: #f7f9fc; --color-bg-page-end: #eef4ff; --color-bg-card: #ffffff; --color-bg-sidebar: rgba(255,255,255,0.60); --color-bg-header: rgba(255,255,255,0.60); --color-bg-subtle: rgba(15,23,42,0.03); --color-bg-hover: rgba(0,107,230,0.08); --color-bg-input: #ffffff; --color-text: #0f172a; --color-text-secondary: #475569; --color-text-muted: #94a3b8; --color-text-faint: #b6c2d2; --color-border: rgba(0,107,230,0.12); --color-border-light: rgba(0,107,230,0.06); --color-shadow: rgba(15,23,42,0.07); --color-shadow-hover: rgba(15,23,42,0.12); --color-overlay: rgba(15,23,42,0.35); --color-modal-bg: #ffffff; --color-scrollbar: rgba(0,107,230,0.16); --color-scrollbar-hover: rgba(0,107,230,0.5); }
        [data-theme-pack="saas"] body { background: radial-gradient(ellipse 60% 45% at 82% 8%, rgba(0,107,230,0.055), transparent 62%), radial-gradient(ellipse 55% 40% at 8% 88%, rgba(0,107,230,0.04), transparent 62%), linear-gradient(160deg, #f7f9fc, #eef4ff); background-attachment: fixed; }
        [data-theme-pack="saas"] .sidebar, [data-theme-pack="saas"] .top-header { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

        /* ---------- 主题包组件级变量（高透玻璃，突出背景装饰） ---------- */
        [data-theme-pack="orbit"] { --xy-card-bg: rgba(12,20,36,0.36); --xy-card-border: rgba(0,202,224,0.18); --xy-card-border-hover: rgba(0,202,224,0.50); --xy-card-bg-hover: rgba(0,202,224,0.12); --xy-glow: rgba(0,202,224,0.20); --xy-glow-strong: rgba(0,202,224,0.42); --xy-header-line: rgba(0,202,224,0.55); --xy-jewel: rgba(0,202,224,0.55); --xy-glass: rgba(10,16,32,0.42); --xy-input-bg: rgba(255,255,255,0.06); --xy-modal-bg: rgba(10,16,32,0.76); --xy-tab-bg: rgba(255,255,255,0.06); }
        [data-theme-pack="spaceport"] { --xy-card-bg: rgba(10,6,32,0.36); --xy-card-border: rgba(0,217,255,0.18); --xy-card-border-hover: rgba(0,217,255,0.52); --xy-card-bg-hover: rgba(0,217,255,0.12); --xy-glow: rgba(0,217,255,0.20); --xy-glow-strong: rgba(0,217,255,0.42); --xy-header-line: rgba(0,217,255,0.55); --xy-jewel: rgba(0,217,255,0.55); --xy-glass: rgba(10,6,32,0.42); --xy-input-bg: rgba(255,255,255,0.06); --xy-modal-bg: rgba(10,6,32,0.76); --xy-tab-bg: rgba(255,255,255,0.06); }
        [data-theme-pack="starfield"] { --xy-card-bg: rgba(13,16,36,0.38); --xy-card-border: rgba(122,167,255,0.18); --xy-card-border-hover: rgba(122,167,255,0.50); --xy-card-bg-hover: rgba(122,167,255,0.12); --xy-glow: rgba(122,167,255,0.18); --xy-glow-strong: rgba(122,167,255,0.42); --xy-header-line: rgba(122,167,255,0.55); --xy-jewel: rgba(122,167,255,0.55); --xy-glass: rgba(10,12,30,0.42); --xy-input-bg: rgba(255,255,255,0.06); --xy-modal-bg: rgba(13,16,36,0.76); --xy-tab-bg: rgba(255,255,255,0.06); }
        [data-theme-pack="magazine"] { --xy-card-bg: rgba(10,18,32,0.40); --xy-card-border: rgba(0,202,224,0.16); --xy-card-border-hover: rgba(0,202,224,0.55); --xy-card-bg-hover: rgba(0,202,224,0.12); --xy-glow: rgba(0,202,224,0.18); --xy-glow-strong: rgba(0,202,224,0.42); --xy-header-line: rgba(0,202,224,0.55); --xy-jewel: rgba(0,202,224,0.55); --xy-glass: rgba(8,14,26,0.42); --xy-input-bg: rgba(255,255,255,0.05); --xy-modal-bg: rgba(8,14,26,0.78); --xy-tab-bg: rgba(255,255,255,0.06); }
        [data-theme-pack="inkwhite"] { --xy-card-bg: rgba(18,18,24,0.52); --xy-card-border: rgba(255,255,255,0.10); --xy-card-border-hover: rgba(255,255,255,0.42); --xy-card-bg-hover: rgba(255,255,255,0.08); --xy-glow: rgba(255,255,255,0.14); --xy-glow-strong: rgba(255,255,255,0.30); --xy-header-line: rgba(255,255,255,0.45); --xy-jewel: rgba(255,255,255,0.40); --xy-glass: rgba(14,14,20,0.50); --xy-input-bg: rgba(255,255,255,0.05); --xy-modal-bg: rgba(14,14,20,0.86); --xy-tab-bg: rgba(255,255,255,0.05); }
        [data-theme-pack="saas"] { --xy-card-bg: rgba(255,255,255,0.54); --xy-card-border: rgba(0,107,230,0.14); --xy-card-border-hover: rgba(0,107,230,0.45); --xy-card-bg-hover: rgba(0,107,230,0.08); --xy-glow: rgba(0,107,230,0.14); --xy-glow-strong: rgba(0,107,230,0.32); --xy-header-line: rgba(0,107,230,0.45); --xy-jewel: rgba(0,107,230,0.40); --xy-glass: rgba(255,255,255,0.50); --xy-input-bg: rgba(255,255,255,0.72); --xy-modal-bg: rgba(255,255,255,0.86); --xy-tab-bg: rgba(15,23,42,0.05); }

        /* ============================================================
           组件布局主题化（除珊瑚粉默认外全部生效）
           半透明卡片、侧栏光晕、顶栏光带、导航光条、按钮发光、标题装饰
           ============================================================ */
        html[data-theme-pack]:not([data-theme-pack="coral"]) .card,
        html[data-theme-pack]:not([data-theme-pack="coral"]) .card-static { background: var(--xy-card-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--xy-card-border); }
        html[data-theme-pack]:not([data-theme-pack="coral"]) .card:hover { border-color: var(--xy-card-border-hover); box-shadow: 0 12px 36px var(--xy-glow); transform: translateY(-3px); }
        html[data-theme-pack]:not([data-theme-pack="coral"]) .glass { background: var(--xy-glass); border-color: var(--xy-card-border); }
        html[data-theme-pack]:not([data-theme-pack="coral"]) .glass-dark { background: var(--xy-glass); border-color: var(--xy-card-border); }

        html[data-theme-pack]:not([data-theme-pack="coral"]) .sidebar { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-right: 1px solid var(--xy-card-border); box-shadow: 6px 0 32px -14px var(--xy-glow-strong); }
        html[data-theme-pack]:not([data-theme-pack="coral"]) .sidebar-logo { position: relative; }
        html[data-theme-pack]:not([data-theme-pack="coral"]) .sidebar-logo::after { content: ''; position: absolute; left: 24px; right: 24px; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--xy-header-line) 50%, transparent 100%); }
        html[data-theme-pack]:not([data-theme-pack="coral"]) .sidebar-footer { position: relative; }
        html[data-theme-pack]:not([data-theme-pack="coral"]) .sidebar-footer::before { content: ''; position: absolute; left: 20px; right: 20px; top: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--xy-header-line) 50%, transparent 100%); }

        html[data-theme-pack]:not([data-theme-pack="coral"]) .nav-item:hover:not(.active) { background: var(--xy-card-bg-hover); color: var(--color-text); transform: translateX(3px); }
        html[data-theme-pack]:not([data-theme-pack="coral"]) .nav-item.active { box-shadow: 0 4px 16px var(--xy-glow-strong), inset 0 0 0 1px var(--xy-card-border-hover); }
        html[data-theme-pack]:not([data-theme-pack="coral"]) .nav-group-toggle:hover { background: var(--xy-card-bg-hover); }
        html[data-theme-pack]:not([data-theme-pack="coral"]) .nav-group-toggle i.nav-icon { color: var(--color-primary); }

        html[data-theme-pack]:not([data-theme-pack="coral"]) .top-header::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--xy-header-line) 0%, transparent 3px); opacity: 0.35; }
        html[data-theme-pack]:not([data-theme-pack="coral"]) .top-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; background: linear-gradient(90deg, transparent 0%, var(--xy-header-line) 45%, var(--xy-header-line) 55%, transparent 100%); opacity: 0.7; }

        html[data-theme-pack]:not([data-theme-pack="coral"]) .btn-primary { box-shadow: 0 4px 14px var(--xy-glow-strong); }
        html[data-theme-pack]:not([data-theme-pack="coral"]) .btn-primary:hover { box-shadow: 0 8px 26px var(--xy-glow-strong); }
        html[data-theme-pack]:not([data-theme-pack="coral"]) .btn-outline:hover { box-shadow: 0 4px 16px var(--xy-glow); }
        html[data-theme-pack]:not([data-theme-pack="coral"]) .input-field { background: var(--xy-input-bg); border-color: var(--xy-card-border); }
        html[data-theme-pack]:not([data-theme-pack="coral"]) .input-field:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--xy-glow); }
        html[data-theme-pack]:not([data-theme-pack="coral"]) .badge-primary { background: var(--xy-glow); }
        html[data-theme-pack]:not([data-theme-pack="coral"]) .modal-content { background: var(--xy-modal-bg); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--xy-card-border); box-shadow: 0 24px 70px rgba(0,0,0,0.45); }
        html[data-theme-pack]:not([data-theme-pack="coral"]) .toast { border: 1px solid var(--xy-card-border); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
        html[data-theme-pack]:not([data-theme-pack="coral"]) .theme-switch::after { box-shadow: 0 1px 4px var(--xy-glow-strong); }
        html[data-theme-pack]:not([data-theme-pack="coral"]) .content-area h1::before,
        html[data-theme-pack]:not([data-theme-pack="coral"]) .content-area h2::before { content: ''; display: inline-block; width: 5px; height: 0.82em; margin-right: 10px; border-radius: 3px; background: var(--color-primary); box-shadow: 0 0 10px var(--xy-glow-strong); vertical-align: -0.06em; }

        /* Tailwind 硬编码色适配（除默认外生效） */
        html[data-theme-pack]:not([data-theme-pack="coral"]) .text-gray-800,
        html[data-theme-pack]:not([data-theme-pack="coral"]) .text-gray-700 { color: var(--color-text); }
        html[data-theme-pack]:not([data-theme-pack="coral"]) .text-gray-600,
        html[data-theme-pack]:not([data-theme-pack="coral"]) .text-gray-500 { color: var(--color-text-secondary); }
        html[data-theme-pack]:not([data-theme-pack="coral"]) .text-gray-400,
        html[data-theme-pack]:not([data-theme-pack="coral"]) .text-gray-300 { color: var(--color-text-muted); }
        html[data-theme-pack]:not([data-theme-pack="coral"]) .bg-gray-50,
        html[data-theme-pack]:not([data-theme-pack="coral"]) .bg-gray-100 { background: var(--color-bg-subtle); }
        html[data-theme-pack]:not([data-theme-pack="coral"]) .bg-white { background: var(--xy-card-bg); }
        html[data-theme-pack]:not([data-theme-pack="coral"]) .border-gray-200,
        html[data-theme-pack]:not([data-theme-pack="coral"]) .border-gray-100 { border-color: var(--color-border); }

        /* 移动端：装饰缩小 + 降低模糊保帧率 */
        @media (max-width: 768px) {
            .xy-decor-jewel { width: 18px; height: 18px; top: 10px; left: 10px; }
            .xy-decor-jewel-tr { right: 10px; }
            .xy-decor-jewel-bl { bottom: 10px; }
            .xy-decor-jewel-br { bottom: 10px; right: 10px; }
            .xy-decor-moon { width: 62px; height: 62px; top: 8%; }
            .xy-decor-inkline, .xy-decor-floatcard, .xy-decor-scanline, .xy-decor-tape-b, .xy-decor-orbit-sm, .xy-decor-satellite-1, .xy-decor-burst, .xy-decor-inkring-3 { display: none; }
            .xy-decor-tape { width: 88px; height: 20px; }
            .xy-decor-ring { display: none; }
            .xy-decor-dots { background-size: 20px 20px; }
            .xy-decor-planet-1 { width: 120px; height: 120px; }
            .xy-decor-planet-2 { width: 76px; height: 76px; }
            .xy-decor-planet-3 { width: 52px; height: 52px; }
            .xy-decor-scanlines { display: none; }
            .xy-decor-grid { height: 30%; }
            .xy-decor-stars { transform: scale(0.85); }
            html[data-theme-pack]:not([data-theme-pack="coral"]) .card,
            html[data-theme-pack]:not([data-theme-pack="coral"]) .card-static { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
            html[data-theme-pack]:not([data-theme-pack="coral"]) .sidebar { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
            html[data-theme-pack]:not([data-theme-pack="coral"]) .nav-item:hover:not(.active) { transform: none; }
        }

        /* ============================================================
           主题包装饰深化二期：各主题专属装饰 + 主题色按钮隐藏
           ============================================================ */

        /* 主题包生效后整个主题面板（触发按钮 + 夜间模式 + 主题色）直接隐藏，配色由主题包接管 */
        html[data-theme-pack]:not([data-theme-pack="coral"]) .theme-panel { display: none; }

        /* ---------- 星轨 orbit：极光带 + 轨道刻度星点 ---------- */
        .xy-decor-aurora { position: absolute; border-radius: 50%; will-change: transform; }
        .xy-decor-aurora-a { width: 72vw; height: 34vw; top: -13vw; left: -9vw; background: radial-gradient(ellipse at 60% 60%, rgba(0,202,224,0.16) 0%, transparent 62%); animation: xyNebulaDriftA 26s ease-in-out infinite; }
        .xy-decor-aurora-b { width: 58vw; height: 26vw; bottom: -9vw; right: -11vw; background: radial-gradient(ellipse at 40% 40%, rgba(0,202,224,0.11) 0%, transparent 62%); animation: xyNebulaDriftB 30s ease-in-out infinite; }
        .xy-decor-orbit::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 0%, rgba(0,202,224,0.55) 0 1.5px, transparent 2px), radial-gradient(circle at 85% 30%, rgba(0,202,224,0.42) 0 1.5px, transparent 2px), radial-gradient(circle at 15% 70%, rgba(0,202,224,0.48) 0 1.5px, transparent 2px), radial-gradient(circle at 88% 78%, rgba(0,202,224,0.35) 0 1.5px, transparent 2px), radial-gradient(circle at 8% 22%, rgba(0,202,224,0.32) 0 1.5px, transparent 2px); }

        /* ---------- 星空 starfield：银河带 + 星团 ---------- */
        .xy-decor-galaxy { position: absolute; top: 4%; left: -22%; width: 145vw; height: 46vh; background: linear-gradient(102deg, transparent 0%, rgba(150,170,255,0.07) 30%, rgba(200,210,255,0.11) 50%, rgba(150,170,255,0.06) 70%, transparent 100%); transform: rotate(-14deg); transform-origin: center; will-change: transform, opacity; animation: xyGalaxyDrift 40s ease-in-out infinite; }
        @keyframes xyGalaxyDrift { 0%, 100% { transform: rotate(-14deg) translateX(0); opacity: 0.75; } 50% { transform: rotate(-14deg) translateX(4vw); opacity: 1; } }
        .xy-decor-cluster { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(190,205,255,0.5) 40%, transparent 70%); box-shadow: 0 0 18px rgba(160,180,255,0.7); animation: xyTwinkle 5s ease-in-out infinite; }
        .xy-decor-cluster-1 { top: 22%; right: 17%; }
        .xy-decor-cluster-2 { top: 62%; left: 24%; width: 7px; height: 7px; animation-delay: 1.6s; }

        /* ---------- 星海杂志 magazine：同心弧 + 衬线装饰引号 ---------- */
        .xy-decor-goldarc { position: absolute; bottom: -38vw; left: 50%; margin-left: -60vw; width: 120vw; height: 60vw; border-radius: 50%; border: 1px solid rgba(0,202,224,0.16); }
        .xy-decor-goldarc::after { content: ''; position: absolute; inset: 6vw; border-radius: 50%; border: 1px dashed rgba(0,202,224,0.10); }
        .xy-decor-quote { position: absolute; top: 11%; right: 8%; font-size: 190px; line-height: 1; font-family: Georgia, 'Times New Roman', serif; color: rgba(0,202,224,0.10); font-weight: 700; user-select: none; }

        /* ---------- 极简 saas：气泡 + 底部光浪 ---------- */
        .xy-decor-bubble { position: absolute; border-radius: 50%; background: radial-gradient(circle at 32% 30%, rgba(255,255,255,0.92) 0%, rgba(0,107,230,0.10) 55%, rgba(0,107,230,0.04) 100%); border: 1px solid rgba(0,107,230,0.12); will-change: transform; animation: xyBubbleFloat 14s ease-in-out infinite; }
        .xy-decor-bubble-1 { width: 84px; height: 84px; top: 24%; right: 12%; }
        .xy-decor-bubble-2 { width: 46px; height: 46px; top: 58%; left: 16%; animation-delay: 3s; opacity: 0.8; }
        @keyframes xyBubbleFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
        .xy-decor-wave { position: absolute; left: -5%; right: -5%; bottom: 0; height: 22vh; background: radial-gradient(80% 100% at 50% 100%, rgba(0,107,230,0.08) 0%, transparent 70%); }

        /* 移动端：新装饰降级（缩小/隐藏保帧率） */
        @media (max-width: 768px) {
            .xy-decor-galaxy { height: 24vh; }
            .xy-decor-quote { font-size: 110px; }
            .xy-decor-bamboo, .xy-decor-bubble-2, .xy-decor-cluster-2, .xy-decor-goldarc::after, .xy-decor-aurora-b, .xy-decor-stain-3, .xy-theme-decor-spaceport .xy-decor-nebula-3 { display: none; }
            .xy-decor-bubble-1 { width: 56px; height: 56px; }
            .xy-theme-decor-magazine .xy-decor-heroart { opacity: 0.4; }
        }