: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); }