:root {
            --color-primary: #2563EB;
            --color-primary-dark: #1D4ED8;
            --color-primary-light: #EFF6FF;
            --color-primary-rgb: 37,99,235;
            --color-bg-page: #F8FBFF;
            --color-bg-page-end: #EAF3FF;
            --color-bg-card: #ffffff;
            --color-bg-sidebar: #ffffff;
            --color-bg-header: #ffffff;
            --color-bg-subtle: #F5F9FF;
            --color-bg-hover: #EFF6FF;
            --color-bg-input: #ffffff;
            --color-text: #0F172A;
            --color-text-secondary: #64748b;
            --color-text-muted: #94a3b8;
            --color-text-faint: #cbd5e1;
            --color-border: #DBEAFE;
            --color-border-light: rgba(37,99,235,0.10);
            --color-shadow: rgba(37,99,235,0.08);
            --color-shadow-hover: rgba(37,99,235,0.16);
            --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(37,99,235,0.18);
            --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); }

        /* 充值套餐档位：主金额 + 赠送说明，角标由后台套餐名称旁的 badge 控制 */
        .amount-option.amount-plan { flex-direction: column; gap: 2px; padding: 12px 8px 10px; line-height: 1.25; position: relative; }
        .amount-plan .amount-main { font-size: 17px; }
        .amount-plan .amount-give { font-size: 11px; font-weight: 600; color: #ef4444; }
        .amount-plan .amount-give-none { display: none; }
        .amount-plan .amount-badge { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 1px 8px; border-radius: 999px; background: var(--color-primary); color: #fff; font-size: 10px; font-weight: 700; white-space: nowrap; }
        .amount-option.amount-custom { padding: 8px; }
        .amount-custom input { width: 100%; font-size: 16px; font-weight: 800; color: var(--color-text); background: transparent; outline: none; border: 0; text-align: center; }
        .recharge-preview { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; border-radius: 10px; background: var(--color-primary-light); color: var(--color-primary); font-size: 12px; font-weight: 600; line-height: 1.6; }

        /* 充值记录：固定高度内部滑动，避免记录多时把页面拉长 */
        .recharge-records-card { display: flex; flex-direction: column; }
        .recharge-records-list { display: flex; flex-direction: column; gap: 10px; max-height: min(560px, calc(100vh - 260px)); overflow-y: auto; padding-right: 4px; }
        @media (max-width: 1024px) { .recharge-records-list { max-height: 420px; } }

        .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: 1.15fr 1fr 1.25fr; gap: 16px; align-items: stretch; }
        .dash-section-grid > * { min-width: 0; }
.dash-section-grid > * { display: flex; flex-direction: column; }
.dash-notice-body { font-size: 12.5px; line-height: 1.75; color: var(--color-text-secondary); word-break: break-word; max-height: 232px; overflow-y: auto; padding-right: 4px; }
.dash-notice-body::-webkit-scrollbar { width: 6px; }
.dash-notice-body::-webkit-scrollbar-thumb { background: rgba(15,23,42,.16); border-radius: 3px; }
.dash-card-header { font-size: 15px; font-weight: 800; color: var(--color-text); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.dash-shortcuts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-content: start; }
.dash-shortcut-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px; border-radius: 12px; 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: 8px; flex: 1; min-height: 0; justify-content: space-between; }
        .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: 12px; border-radius: 0 6px 6px 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-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-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-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-list {
            display: grid;
            gap: 8px;
            margin: 8px 0 10px;
        }
        .site-notice-warning { border-color: rgba(245, 158, 11, 0.28); }
        .site-notice-warning::before { background: #f59e0b; }
        .site-notice-warning .site-notice-icon { background: #fffbeb; }
        .site-notice-warning .site-notice-icon i { color: #d97706; }
        .site-notice-success { border-color: rgba(16, 185, 129, 0.28); }
        .site-notice-success::before { background: #10b981; }
        .site-notice-success .site-notice-icon { background: #ecfdf5; }
        .site-notice-success .site-notice-icon i { color: #059669; }
        .site-notice-danger { border-color: rgba(239, 68, 68, 0.28); }
        .site-notice-danger::before { background: #ef4444; }
        .site-notice-danger .site-notice-icon { background: #fef2f2; }
        .site-notice-danger .site-notice-icon i { color: #dc2626; }
        .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;
        }

        .site-announcement-fab {
            position: fixed;
            right: 20px;
            bottom: 74px;
            z-index: 901;
            height: 42px;
            padding: 0 13px;
            border: 1px solid rgba(var(--color-primary-rgb), 0.3);
            border-radius: 999px;
            background: var(--color-bg-card);
            color: var(--color-primary);
            box-shadow: 0 8px 22px rgba(15,23,42,0.18);
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-size: 12px;
            font-weight: 800;
            cursor: pointer;
            transition: transform .18s, box-shadow .18s, border-color .18s;
        }
        .site-announcement-fab:hover { transform: translateY(-2px); border-color: var(--color-primary); box-shadow: 0 12px 28px rgba(var(--color-primary-rgb), .22); }
        .site-announcement-fab i { font-size: 14px; }
        .site-announcement-badge {
            min-width: 18px;
            height: 18px;
            padding: 0 5px;
            border-radius: 999px;
            background: #ef4444;
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            line-height: 1;
        }
        .site-announcement-modal {
            position: fixed;
            inset: 0;
            z-index: 3200;
            padding: 24px;
            background: rgba(8,10,16,.58);
            backdrop-filter: blur(4px);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity .2s ease, visibility .2s ease;
        }
        .site-announcement-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
        .site-announcement-dialog {
            width: min(680px, 100%);
            height: min(500px, calc(100vh - 48px));
            max-height: calc(100vh - 48px);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border: 1px solid var(--color-border);
            border-radius: 18px;
            background: var(--color-bg-card);
            box-shadow: 0 28px 80px rgba(0,0,0,.35);
            transform: translateY(10px) scale(.985);
            transition: transform .2s ease;
        }
        .site-announcement-modal.is-open .site-announcement-dialog { transform: translateY(0) scale(1); }
        .site-announcement-head {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 18px 20px 14px;
            border-bottom: 1px solid var(--color-border-light);
        }
        .site-announcement-head-icon {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            background: var(--color-primary-light);
            color: var(--color-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
        }
        .site-announcement-head-copy { flex: 1; min-width: 0; }
        .site-announcement-title { font-size: 17px; font-weight: 900; color: var(--color-text); }
        .site-announcement-subtitle { margin-top: 3px; font-size: 12px; color: var(--color-text-muted); }
        .site-announcement-close {
            width: 34px;
            height: 34px;
            border: none;
            border-radius: 10px;
            background: transparent;
            color: var(--color-text-muted);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .site-announcement-close:hover { background: var(--color-bg-hover); color: var(--color-text); }
        .site-announcement-close:disabled { opacity: .35; cursor: not-allowed; }
        .site-announcement-list {
            display: grid;
            gap: 10px;
            margin: 0;
            padding: 16px 20px;
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            overscroll-behavior: contain;
            scrollbar-gutter: stable;
            scrollbar-width: thin;
            scrollbar-color: rgba(var(--color-primary-rgb), .45) transparent;
        }
        .site-announcement-list::-webkit-scrollbar { width: 8px; }
        .site-announcement-list::-webkit-scrollbar-track { background: transparent; }
        .site-announcement-list::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: rgba(var(--color-primary-rgb), .42); background-clip: padding-box; }
        .site-announcement-list::-webkit-scrollbar-thumb:hover { background: rgba(var(--color-primary-rgb), .65); background-clip: padding-box; }
        .site-announcement-item {
            margin: 0;
            border-radius: 12px;
            box-shadow: none;
            padding: 13px 15px;
            cursor: pointer;
            outline: none;
            transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
        }
        .site-announcement-item:hover, .site-announcement-item:focus-visible { border-color: rgba(var(--color-primary-rgb), .45); box-shadow: 0 6px 18px rgba(var(--color-primary-rgb), .10); }
        .site-announcement-item .site-notice-text { display: none; }
        .site-announcement-item-foot { display: flex; align-items: center; gap: 6px; margin-top: 7px; color: var(--color-text-muted); font-size: 11.5px; font-weight: 700; }
        .site-announcement-item-foot i { font-size: 10px; }
        .site-announcement-item.is-read .site-notice-badge { background: var(--color-bg-hover); color: var(--color-text-muted); }
        .site-announcement-item.is-read .site-announcement-item-state { color: var(--color-text-muted); }
        .site-announcement-item:not(.is-read) .site-announcement-item-state { color: var(--color-primary); }
        .site-announcement-foot {
            min-height: 58px;
            padding: 11px 20px;
            border-top: 1px solid var(--color-border-light);
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 12px;
        }
        .site-announcement-hint { margin-right: auto; font-size: 12px; font-weight: 700; color: var(--color-text-muted); }
        .site-announcement-confirm {
            min-width: 112px;
            height: 38px;
            padding: 0 16px;
            border: none;
            border-radius: 10px;
            background: var(--color-primary);
            color: #fff;
            font-size: 12.5px;
            font-weight: 800;
            cursor: pointer;
        }
        .site-announcement-confirm:disabled { opacity: .62; cursor: not-allowed; }
        .site-announcement-detail {
            position: fixed;
            inset: 0;
            z-index: 3400;
            padding: 24px;
            background: rgba(8,10,16,.68);
            backdrop-filter: blur(5px);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity .2s ease, visibility .2s ease;
        }
        .site-announcement-detail.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
        .site-announcement-detail-dialog {
            width: min(620px, 100%);
            height: min(520px, calc(100vh - 48px));
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border: 1px solid var(--color-border);
            border-radius: 18px;
            background: var(--color-bg-card);
            box-shadow: 0 30px 90px rgba(0,0,0,.42);
            transform: translateY(8px) scale(.99);
            transition: transform .2s ease;
        }
        .site-announcement-detail.is-open .site-announcement-detail-dialog { transform: translateY(0) scale(1); }
        .site-announcement-detail-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 14px;
            padding: 18px 20px 14px;
            border-bottom: 1px solid var(--color-border-light);
        }
        .site-announcement-detail-heading { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
        .site-announcement-detail-icon { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; background: var(--color-primary-light); color: var(--color-primary); display: flex; align-items: center; justify-content: center; }
        .site-announcement-detail-kicker { margin-bottom: 4px; color: var(--color-text-muted); font-size: 11px; font-weight: 800; }
        .site-announcement-detail-title { color: var(--color-text); font-size: 18px; font-weight: 900; line-height: 1.4; word-break: break-word; }
        .site-announcement-detail-close { width: 34px; height: 34px; flex: 0 0 auto; border: none; border-radius: 10px; background: transparent; color: var(--color-text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
        .site-announcement-detail-close:hover { background: var(--color-bg-hover); color: var(--color-text); }
        .site-announcement-detail-meta { display: flex; align-items: center; gap: 8px; padding: 12px 20px 0; }
        .site-announcement-detail-badge, .site-announcement-detail-read { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; }
        .site-announcement-detail-badge { background: var(--color-primary-light); color: var(--color-primary); }
        .site-announcement-detail-read { background: #ecfdf5; color: #059669; }
        .site-announcement-detail-body {
            flex: 1;
            min-height: 0;
            overflow-y: auto;
            overscroll-behavior: contain;
            scrollbar-width: thin;
            scrollbar-color: rgba(var(--color-primary-rgb), .45) transparent;
            padding: 14px 20px 20px;
            color: var(--color-text-secondary);
            font-size: 14px;
            line-height: 1.85;
            word-break: break-word;
        }
        .site-announcement-detail-body::-webkit-scrollbar { width: 8px; }
        .site-announcement-detail-body::-webkit-scrollbar-track { background: transparent; }
        .site-announcement-detail-body::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: rgba(var(--color-primary-rgb), .42); background-clip: padding-box; }
        .site-announcement-detail-body p { margin: 0 0 10px; }
        .site-announcement-detail-body ul, .site-announcement-detail-body ol { margin: 8px 0; padding-left: 22px; }
        .site-announcement-detail-body a { color: var(--color-primary); }
        .site-announcement-detail-body img { max-width: 100%; height: auto; border-radius: 10px; }
        .site-announcement-detail-foot { min-height: 58px; padding: 11px 20px; border-top: 1px solid var(--color-border-light); display: flex; justify-content: flex-end; }
        .site-announcement-detail-back { height: 38px; padding: 0 18px; border: none; border-radius: 10px; background: var(--color-primary); color: #fff; font-size: 12.5px; font-weight: 800; cursor: pointer; }
        [data-theme="dark"] .site-announcement-modal { background: rgba(0,0,0,.72); }
        [data-theme="dark"] .site-announcement-detail { background: rgba(0,0,0,.78); }
        [data-theme="dark"] .site-announcement-detail-read { background: rgba(16,185,129,.14); color: #6ee7b7; }
        @media (max-width: 640px) {
            .site-announcement-fab { right: 14px; bottom: 70px; height: 40px; padding: 0 11px; }
            .site-announcement-fab-text { display: none; }
            .site-announcement-modal { padding: 12px; align-items: flex-end; }
            .site-announcement-dialog { height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); border-radius: 16px; }
            .site-announcement-head { padding: 15px 15px 12px; }
            .site-announcement-list { padding: 12px 15px; }
            .site-announcement-foot { padding: 10px 15px; flex-wrap: wrap; }
            .site-announcement-hint { width: 100%; margin-right: 0; }
            .site-announcement-confirm { width: 100%; }
            .site-announcement-detail { padding: 12px; align-items: flex-end; }
            .site-announcement-detail-dialog { height: calc(100dvh - 24px); border-radius: 16px; }
            .site-announcement-detail-head { padding: 15px 15px 12px; }
            .site-announcement-detail-title { font-size: 16px; }
            .site-announcement-detail-meta { padding: 10px 15px 0; }
            .site-announcement-detail-body { padding: 12px 15px 16px; }
            .site-announcement-detail-foot { padding: 10px 15px; }
            .site-announcement-detail-back { width: 100%; }
        }

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

        /* 蓝白公共界面：侧边栏、顶栏、背景与轻量粒子层 */
        body {
            background:
                linear-gradient(180deg, var(--color-bg-page) 0%, var(--color-bg-subtle) 44%, var(--color-bg-page-end) 100%);
            background-attachment: fixed;
        }
        .page-particles {
            position: fixed;
            inset: 0;
            z-index: 0;
            overflow: hidden;
            pointer-events: none;
        }
        .page-particles canvas {
            display: block;
            width: 100%;
            height: 100%;
        }
        .main-wrapper {
            position: relative;
            z-index: 1;
            background: transparent;
        }
        .sidebar {
            background:
                linear-gradient(180deg, var(--color-bg-sidebar) 0%, var(--color-bg-sidebar) 62%, var(--color-primary-light) 155%);
            border-right-color: var(--color-border);
            box-shadow: 14px 0 36px rgba(var(--color-primary-rgb),0.08);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }
        .sidebar-logo {
            background: linear-gradient(135deg, var(--color-primary-light) 0%, #FFFFFF 78%);
            border-bottom-color: var(--color-border);
            color: var(--color-primary-dark);
        }
        .sidebar-nav {
            padding-top: 18px;
        }
        .nav-item.active {
            background: var(--color-primary);
            background: var(--color-primary);
            background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 74%, white) 100%);
            box-shadow: 0 8px 18px rgba(var(--color-primary-rgb),0.24);
        }
        .nav-item:hover:not(.active)
        , .nav-group-toggle:hover {
            background: var(--color-primary-light);
            color: var(--color-primary-dark);
        }
        .nav-group-toggle.open {
            color: var(--color-primary-dark);
            background: var(--color-primary-light);
        }
        .nav-group-content .nav-item.active {
            background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 74%, white) 100%);
        }
        .sidebar-footer {
            background: linear-gradient(180deg, #FFFFFF 0%, var(--color-primary-light) 100%);
            border-top-color: var(--color-border);
        }
        .top-header {
            background: rgba(255,255,255,0.88);
            border-bottom-color: var(--color-border);
            box-shadow: 0 8px 30px rgba(var(--color-primary-rgb),0.06);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
        }
        .glass, .glass-dark {
            background: rgba(255,255,255,0.84);
            border-color: rgba(var(--color-primary-rgb),0.16);
        }
        [data-theme="dark"] .page-particles {
            opacity: 0.45;
        }
        [data-theme="dark"] .sidebar,
        [data-theme="dark"] .top-header,
        [data-theme="dark"] .sidebar-footer {
            box-shadow: none;
        }

        /* 个人资料页 */
        .profile-shell { display: flex; flex-direction: column; gap: 22px; }
        .profile-summary-card { position: relative; padding: 26px 28px; overflow: hidden; }
        .profile-summary-layout { display: flex; align-items: center; justify-content: space-between; gap: 32px; min-width: 0; }
        .profile-identity { display: flex; align-items: center; gap: 18px; min-width: 0; flex: 1 1 320px; }
        .profile-avatar { width: 78px; height: 78px; border-radius: 20px; object-fit: cover; border: 3px solid rgba(var(--color-primary-rgb),0.18); box-shadow: 0 8px 22px rgba(var(--color-primary-rgb),0.14); flex-shrink: 0; }
        .profile-identity-copy { min-width: 0; }
        .profile-identity-kicker { margin-bottom: 2px; color: var(--color-primary); font-size: 11px; font-weight: 800; line-height: 1.4; }
        .profile-identity-name { margin: 0; color: var(--color-text); font-size: 24px; font-weight: 900; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .profile-identity-email { margin: 4px 0 0; color: var(--color-text-secondary); font-size: 13px; font-weight: 600; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .profile-identity-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; color: var(--color-text-muted); font-size: 11px; font-weight: 600; }
        .profile-id-chip { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border-radius: 6px; background: var(--color-primary-light); color: var(--color-primary); font-size: 11px; font-weight: 800; }
        .profile-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(100%, 560px); flex: 0 1 560px; }
        .profile-stat { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; min-height: 78px; padding: 14px 18px; border-radius: 12px; background: var(--color-bg-subtle); border: 1px solid var(--color-border-light); }
        .profile-stat-label { color: var(--color-text-muted); font-size: 11px; font-weight: 700; line-height: 1.35; white-space: nowrap; }
        .profile-stat-value { color: var(--color-text); font-size: 22px; font-weight: 900; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .profile-stat-value-primary { color: var(--color-primary); }
        .profile-stat-value-success { color: #10B981; }
        .profile-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
        .profile-column { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
        .profile-column > .card-static { width: 100%; min-width: 0; }
        .profile-account-card, .profile-api-card, .profile-email-card { overflow-wrap: anywhere; }
        .profile-avatar-editor { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: 14px; }
        .profile-avatar-preview { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; border: 2px solid var(--color-border); background: var(--color-bg-subtle); }
        .profile-avatar-fields { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
        .profile-avatar-fields .input-field { min-width: 0; }

        @media (max-width: 1100px) {
            .profile-summary-layout { align-items: stretch; flex-direction: column; gap: 20px; }
            .profile-identity { flex: 0 0 auto; }
            .profile-stats { width: 100%; max-width: none; flex-basis: auto; }
            .profile-columns { display: flex; flex-direction: column; gap: 16px; }
            .profile-column { display: contents; }
            .profile-account-card { order: 1; }
            .profile-bot-card { order: 2; }
            .profile-api-card { order: 3; }
            .profile-email-card { order: 4; }
            .profile-edit-card { order: 5; }
            .profile-security-card { order: 6; }
        }

        @media (max-width: 768px) {
            .profile-shell { gap: 16px; }
            .profile-summary-card { padding: 20px; }
            .profile-avatar { width: 64px; height: 64px; border-radius: 16px; }
            .profile-identity-name { font-size: 21px; }
            .profile-stats { gap: 8px; }
            .profile-stat { min-height: 70px; padding: 12px; }
            .profile-stat-value { font-size: 18px; }
            .profile-columns { gap: 14px; }
            .profile-account-card, .profile-bot-card, .profile-security-card, .profile-api-card, .profile-email-card, .profile-edit-card { padding: 18px; }
        }

        @media (max-width: 480px) {
            .profile-summary-card { padding: 16px; }
            .profile-summary-layout { gap: 16px; }
            .profile-identity { gap: 12px; align-items: flex-start; }
            .profile-avatar { width: 56px; height: 56px; border-radius: 14px; }
            .profile-identity-name { font-size: 19px; }
            .profile-identity-meta { gap: 5px; }
            .profile-stat { padding: 10px 8px; text-align: center; }
            .profile-stat-label { font-size: 10px; }
            .profile-stat-value { font-size: 16px; }
            .profile-account-card, .profile-bot-card, .profile-security-card, .profile-api-card, .profile-email-card, .profile-edit-card { padding: 16px; }
            .profile-avatar-editor { grid-template-columns: 1fr; gap: 10px; }
            .profile-avatar-preview { width: 56px; height: 56px; }
            .profile-email-card .flex.gap-2 { flex-wrap: wrap; }
            .profile-email-card .flex.gap-2 > .input-field { flex: 1 1 100%; }
            .profile-email-card .flex.gap-2 > button { width: 100%; justify-content: center; }
        }


        /* ===== 我的分站页 ===== */
        .site-hero { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding: 16px 20px; border-radius: 16px; background: var(--color-bg-card); border: 1px solid var(--color-border); margin-bottom: 18px; }
        .site-hero-text { min-width: 0; flex: 1 1 260px; }
        .site-hero-title { font-size: 14px; font-weight: 800; color: var(--color-text); display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; }
        .site-hero-title i { color: var(--color-primary); margin-top: 3px; }
        .site-hero-sub { font-size: 12px; color: var(--color-text-muted); margin-top: 6px; line-height: 1.6; }
        .site-hero-stats { display: flex; gap: 10px; flex-wrap: wrap; }
        .site-stat { min-width: 92px; padding: 8px 14px; border-radius: 12px; background: var(--color-bg-subtle); display: flex; flex-direction: column; gap: 2px; }
        .site-stat span { font-size: 11px; font-weight: 600; color: var(--color-text-muted); }
        .site-stat b { font-size: 16px; font-weight: 800; color: var(--color-text); }
        .site-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
        @media (max-width: 1024px) { .site-layout { grid-template-columns: minmax(0, 1fr); } }
        .site-col-main, .site-col-side { min-width: 0; }
        .site-block-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
        .site-block-head h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--color-text); display: flex; align-items: center; gap: 8px; }
        .site-block-head h3 i { color: var(--color-primary); }
        .site-block-count { font-size: 12px; font-weight: 600; color: var(--color-text-muted); }
        .site-card { padding: 16px 18px; margin-bottom: 12px; }
        .site-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
        .site-card-title { font-size: 15px; font-weight: 800; color: var(--color-text); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .site-card-domain { font-size: 12px; color: var(--color-text-muted); display: flex; align-items: center; gap: 6px; margin-top: 6px; word-break: break-all; }
        .site-card-domain a { color: var(--color-primary); font-weight: 700; text-decoration: none; }
        .site-card-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
        @media (max-width: 720px) { .site-card-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
        .site-card-stat { background: var(--color-bg-subtle); border-radius: 10px; padding: 8px 10px; min-width: 0; }
        .site-card-stat span { display: block; font-size: 11px; font-weight: 600; color: var(--color-text-muted); }
        .site-card-stat b { font-size: 14px; font-weight: 800; color: var(--color-text); word-break: break-all; }
        .site-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
        .site-btn-danger { color: #EF4444 !important; border-color: #fecaca !important; }
        .site-empty { padding: 34px 20px; text-align: center; color: var(--color-text-muted); }
        .site-empty i { font-size: 34px; opacity: 0.35; }
        .site-empty-title { font-weight: 800; color: var(--color-text); margin-top: 10px; font-size: 15px; }
        .site-empty-sub { font-size: 12px; margin-top: 6px; line-height: 1.7; }
        .site-commission { padding: 16px 18px; margin-top: 16px; }
        .site-commission-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 10px; flex-wrap: wrap; }
        .site-commission-head h3 { margin: 0; font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
        .site-commission-head h3 i { color: var(--color-primary); }
        .site-commission-head span { font-size: 12px; color: var(--color-text-muted); }
        .site-commission-head b { color: var(--color-primary); }
        .site-commission-list { max-height: 280px; overflow-y: auto; padding-right: 4px; }
        .site-commission-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--color-border); font-size: 13px; }
        .site-commission-row:last-child { border-bottom: 0; }
        .site-commission-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .site-commission-time { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; }
        .site-commission-amount { font-weight: 800; color: #10B981; white-space: nowrap; }
        .site-commission-empty { font-size: 12px; color: var(--color-text-muted); text-align: center; padding: 14px 0; }
        .site-open-card { padding: 18px; }
        .site-form-label { display: block; font-size: 12px; font-weight: 700; color: var(--color-text-secondary); margin-bottom: 6px; }
        .site-prefix-row { display: flex; align-items: center; gap: 6px; }
        .site-prefix-row .input-field { flex: 1; min-width: 0; }
        .site-prefix-suffix { font-size: 12px; font-weight: 700; color: var(--color-text-muted); white-space: nowrap; }
        .site-prefix-tip { font-size: 12px; color: var(--color-text-muted); margin-top: 6px; line-height: 1.6; }
        .site-domain-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
        .site-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 4px; }
        .site-free-tip { font-size: 12px; font-weight: 700; color: var(--color-primary); margin: 8px 0 0; }
        .site-open-tip { font-size: 11px; color: var(--color-text-muted); margin-top: 10px; line-height: 1.7; }

        /* ===== 侧边栏 / 顶栏 视觉统一（消除接缝、分组标题不再整块高亮） ===== */
        .sidebar {
            box-shadow: none;
            border-right: 1px solid var(--color-border);
        }
        .sidebar-logo {
            height: 70px;
            gap: 10px;
            background: var(--color-bg-header);
            border-bottom: 1px solid var(--color-border);
            color: var(--color-text);
        }
        .sidebar-logo img {
            height: 34px !important;
            width: 34px !important;
            max-width: 34px !important;
            border-radius: 9px;
            object-fit: cover;
            background: rgba(var(--color-primary-rgb),0.08);
            box-shadow: 0 2px 8px rgba(var(--color-primary-rgb),0.12);
        }
        .sidebar-logo span {
            font-size: 18px;
            font-weight: 900;
            letter-spacing: 0.02em;
            color: var(--color-text);
        }
        .top-header {
            box-shadow: none;
            border-bottom: 1px solid var(--color-border);
        }
        /* 展开的分组标题只做文字高亮，不再铺整块底色（避免多组同时展开像两个大色块） */
        .nav-group-toggle.open {
            background: transparent;
            color: var(--color-primary);
            box-shadow: none;
        }
        .nav-group-toggle.open:hover {
            background: var(--color-primary-light);
        }
        .nav-group-toggle.open .group-label i {
            color: var(--color-primary);
        }
        .nav-group-toggle.open i.fa-chevron-down {
            color: var(--color-primary);
        }
        /* 分组之间留一点呼吸感，避免上下一串条目糊在一起 */
        .nav-group + .nav-group,
        .nav-item + .nav-group {
            margin-top: 4px;
        }
        @media (max-width: 768px) {
            .sidebar-logo { height: 56px; }
            .sidebar-logo img { height: 30px !important; width: 30px !important; max-width: 30px !important; }
            .sidebar-logo span { font-size: 16px; }
        }

        /* ===== A. 侧边栏：紧凑版菜单 ===== */
        .sidebar-logo { height: 64px; }
        .sidebar-nav { padding: 12px 0 16px; }
        .nav-item {
            padding: 9px 14px;
            margin: 2px 10px;
            border-radius: 10px;
            font-size: 13.5px;
            min-height: 40px;
            gap: 9px;
        }
        .nav-item i.nav-icon { width: 18px; margin-right: 0; font-size: 15px; }
        .nav-item.active { box-shadow: 0 4px 12px rgba(var(--color-primary-rgb),0.22); }
        .nav-group-toggle {
            position: relative;
            padding: 9px 14px;
            margin: 2px 10px;
            width: calc(100% - 20px);
            border-radius: 10px;
            font-size: 13.5px;
            min-height: 40px;
            color: var(--color-text-secondary);
        }
        .nav-group-toggle .group-label i.nav-icon { width: 18px; margin-right: 9px; font-size: 15px; }
        .nav-group-toggle i.fa-chevron-down { font-size: 10px; }
        .nav-group-toggle.open::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 16px;
            border-radius: 0 3px 3px 0;
            background: var(--color-primary);
        }
        .nav-group-content .nav-item { padding-left: 30px; font-size: 13px; min-height: 36px; }
        .nav-group-content .nav-item i.nav-icon { width: 16px; font-size: 13px; }

        /* ===== B. 顶栏：64px 纯白 + 图标方块标题 ===== */
        .top-header {
            height: 64px;
            padding: 0 24px;
            background: var(--color-bg-header);
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        .top-header .text-lg { font-size: 16px; font-weight: 800; color: var(--color-text); gap: 10px; }
        .top-header .text-lg > i {
            width: 28px;
            height: 28px;
            border-radius: 8px;
            background: var(--color-primary-light);
            color: var(--color-primary);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
        }
        .top-header .bg-primary-light {
            height: 30px;
            padding: 0 12px;
            border-radius: 999px;
            gap: 6px;
            font-size: 13px;
        }
        .top-header .bg-primary-light .font-extrabold { font-size: 13px; }
        .top-header .theme-btn { width: 32px; height: 32px; border-radius: 10px; border-width: 1px; font-size: 14px; }
        .top-header img[data-theme-avatar] { width: 32px; height: 32px; border-width: 1px; }
        .top-header .mobile-toggle { width: 38px; height: 38px; }

        @media (max-width: 768px) {
            .sidebar-logo { height: 52px; }
            .top-header { height: 52px; padding: 0 12px; }
            .top-header .text-lg { font-size: 15px; }
            .top-header .text-lg > i { width: 24px; height: 24px; border-radius: 7px; font-size: 11px; }
            .top-header .mobile-toggle { width: 34px; height: 34px; }
            .nav-item { min-height: 40px; }
        }

        /* ===== 侧栏底部：用户卡片 ===== */
        .sidebar-footer {
            padding: 10px 12px;
            background: transparent;
            border-top: 1px solid var(--color-border);
        }
        .sf-user {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 7px 9px;
            border-radius: 12px;
            background: rgba(var(--color-primary-rgb), 0.06);
            border: 1px solid rgba(var(--color-primary-rgb), 0.10);
        }
        .sf-avatar {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
            border: 2px solid var(--color-bg-card);
            box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), 0.16);
            background: var(--color-primary-light);
        }
        .sf-user-info { min-width: 0; flex: 1; }
        .sf-name {
            font-size: 13px;
            font-weight: 800;
            color: var(--color-text);
            line-height: 1.3;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .sf-points {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            margin-top: 3px;
            padding: 1px 8px;
            border-radius: 999px;
            background: var(--color-primary-light);
            color: var(--color-primary);
            font-size: 11px;
            font-weight: 800;
            line-height: 1.7;
        }
        .sf-points i { font-size: 10px; }
        .sf-logout {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            margin-top: 6px;
            padding: 7px 0;
            border-radius: 10px;
            font-size: 12px;
            font-weight: 700;
            text-decoration: none;
            color: var(--color-text-muted);
            transition: background 0.18s, color 0.18s;
        }
        .sf-logout:hover { background: rgba(239, 68, 68, 0.08); color: #EF4444; }
        [data-theme="dark"] .sf-user { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); }
        [data-theme="dark"] .sf-avatar { border-color: #1e293b; }

        /* ===== 漫画工坊 ===== */
        .comic-page { display: flex; flex-direction: column; gap: 16px; }
        .comic-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 20px; }
        .comic-title { margin: 0; font-size: 17px; font-weight: 800; color: var(--color-text); display: flex; align-items: center; gap: 8px; }
        .comic-title i { color: var(--color-primary); }
        .comic-sub { margin: 6px 0 0; font-size: 12px; color: var(--color-text-muted); line-height: 1.7; max-width: 720px; }
        .comic-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
        .comic-new { padding: 18px 20px; }
        .comic-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
        .comic-label { display: block; font-size: 12px; font-weight: 700; color: var(--color-text-secondary); margin: 0 0 6px; }
        .comic-textarea { resize: vertical; line-height: 1.7; }
        .comic-row-end { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
        .comic-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: start; }
        .comic-side { padding: 14px; }
        .comic-side-title { font-size: 13px; font-weight: 800; color: var(--color-text); display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
        .comic-count { font-size: 11px; font-weight: 700; color: var(--color-primary); background: var(--color-primary-light); border-radius: 999px; padding: 1px 8px; }
        .comic-project-list { display: flex; flex-direction: column; gap: 6px; max-height: 520px; overflow-y: auto; }
        .comic-project-item { padding: 9px 10px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; transition: all .18s; }
        .comic-project-item:hover { background: var(--color-bg-hover); }
        .comic-project-item.active { background: var(--color-primary-light); border-color: rgba(var(--color-primary-rgb),0.25); }
        .comic-project-name { font-size: 13px; font-weight: 800; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .comic-project-meta { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }
        .comic-project-empty { font-size: 12px; color: var(--color-text-muted); padding: 10px 2px; }
        .comic-main { min-width: 0; }
        .comic-empty { padding: 44px 20px; text-align: center; color: var(--color-text-muted); }
        .comic-empty i { font-size: 32px; opacity: .35; }
        .comic-empty p { margin: 10px 0 4px; font-weight: 800; color: var(--color-text); font-size: 15px; }
        .comic-empty span { font-size: 12px; }
        .comic-steps { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
        .comic-step-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-bg-card); color: var(--color-text-secondary); font-size: 12.5px; font-weight: 700; cursor: pointer; transition: all .18s; font-family: inherit; }
        .comic-step-btn b { width: 18px; height: 18px; border-radius: 50%; background: var(--color-bg-subtle); color: var(--color-text-muted); font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }
        .comic-step-btn.active { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); }
        .comic-step-btn.active b { background: var(--color-primary); color: #fff; }
        .comic-sec { padding: 18px 20px; }
        .comic-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
        .comic-sec-head h3 { margin: 0; font-size: 15px; font-weight: 800; color: var(--color-text); }
        .comic-sec-head span { font-size: 12px; color: var(--color-text-muted); }
        .comic-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
        .comic-pages-input { width: 84px; }
        .comic-sub-title { font-size: 13px; font-weight: 800; color: var(--color-text-secondary); margin: 16px 0 10px; }
        .comic-asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
        .comic-asset { border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; background: var(--color-bg-card); display: flex; flex-direction: column; }
        .comic-asset-img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; cursor: zoom-in; background: var(--color-bg-subtle); display: block; }
        .comic-asset-ph { width: 100%; aspect-ratio: 3 / 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--color-text-muted); background: var(--color-bg-subtle); font-size: 11px; }
        .comic-asset-ph i { font-size: 22px; opacity: .5; }
        .comic-asset-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
        .comic-asset-head { display: flex; align-items: center; gap: 6px; }
        .comic-asset-name { font-size: 13px; font-weight: 800; color: var(--color-text); }
        .comic-chip { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--color-bg-subtle); color: var(--color-text-muted); }
        .comic-chip.ok { background: rgba(16,185,129,.12); color: #10B981; }
        .comic-chip.err { background: rgba(239,68,68,.12); color: #EF4444; }
        .comic-asset-desc { font-size: 12px; line-height: 1.6; color: var(--color-text-secondary); border: 1px solid var(--color-border); border-radius: 8px; padding: 7px 9px; resize: vertical; font-family: inherit; background: var(--color-bg-card); }
        .comic-asset-ops { display: flex; gap: 6px; }
        .comic-danger { color: #EF4444 !important; border-color: #fecaca !important; }
        .comic-list-empty { font-size: 12px; color: var(--color-text-muted); padding: 14px 0; }
        .comic-shot-list { display: flex; flex-direction: column; gap: 8px; max-height: 560px; overflow-y: auto; padding-right: 4px; }
        .comic-shot { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; align-items: start; }
        .comic-shot-no { font-size: 12px; font-weight: 800; color: var(--color-primary); padding-top: 9px; }
        .comic-shot-text { font-size: 12.5px; line-height: 1.7; border: 1px solid var(--color-border); border-radius: 10px; padding: 8px 10px; resize: vertical; font-family: inherit; background: var(--color-bg-card); color: var(--color-text); }
        .comic-page-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
        .comic-page-card { border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; background: var(--color-bg-card); display: flex; flex-direction: column; }
        .comic-page-img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; cursor: zoom-in; display: block; background: var(--color-bg-subtle); }
        .comic-page-ph { width: 100%; aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; background: var(--color-bg-subtle); color: var(--color-text-muted); }
        .comic-page-ph i { font-size: 26px; opacity: .45; }
        .comic-page-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
        .comic-page-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--color-text); }
        .comic-page-desc { font-size: 11.5px; line-height: 1.6; color: var(--color-text-muted); max-height: 60px; overflow: hidden; }
        .comic-busy { position: fixed; inset: 0; background: rgba(15,23,42,.35); backdrop-filter: blur(3px); z-index: 3000; display: flex; align-items: center; justify-content: center; }
        .comic-busy-box { background: var(--color-bg-card); color: var(--color-text); border-radius: 14px; padding: 18px 26px; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
        .comic-busy-box i { color: var(--color-primary); }
        @media (max-width: 1024px) {
            .comic-layout { grid-template-columns: minmax(0, 1fr); }
            .comic-side { order: 2; }
            .comic-project-list { flex-direction: row; overflow-x: auto; max-height: none; }
            .comic-project-item { min-width: 150px; }
        }
        @media (max-width: 640px) {
            .comic-grid2 { grid-template-columns: minmax(0, 1fr); }
            .comic-head-actions { width: 100%; }
            .comic-shot { grid-template-columns: 60px minmax(0, 1fr); }
        }

        .comic-row-split { justify-content: space-between; align-items: center; }
        .comic-row-right { display: flex; gap: 8px; flex-wrap: wrap; }

        .comic-hint { font-size: 11px; color: var(--color-text-muted); line-height: 1.6; }
        .comic-shot-fields { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
        .comic-shot-dialog { background: rgba(var(--color-primary-rgb), 0.05); }
        .comic-page-ops { display: flex; gap: 6px; flex-wrap: wrap; }
        .comic-page-card .comic-shot-text { font-size: 11.5px; padding: 6px 8px; }

        /* 漫画工坊：生成中状态 */
        .comic-ph-busy { gap: 8px; color: var(--color-primary) !important; background: rgba(var(--color-primary-rgb), 0.06) !important; }
        .comic-ph-busy i { font-size: 22px; opacity: 1 !important; }
        .comic-ph-busy span { font-size: 12px; font-weight: 700; }
        .comic-chip.busy { background: rgba(var(--color-primary-rgb), 0.12); color: var(--color-primary); }
        .comic-err { font-size: 11px; line-height: 1.5; color: #EF4444; background: rgba(239,68,68,0.07); border-radius: 8px; padding: 6px 8px; word-break: break-all; }
        .comic-asset.is-busy, .comic-page-card.is-busy { border-color: rgba(var(--color-primary-rgb), 0.35); }
        .comic-asset-ops button[disabled], .comic-page-ops button[disabled] { opacity: 0.6; cursor: not-allowed; }

        /* 漫画工坊：新建项目弹窗 */
        .comic-modal { max-width: 560px; width: 92%; padding: 0; max-height: 88vh; display: flex; flex-direction: column; }
        .comic-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--color-border); }
        .comic-modal-head h3 { margin: 0; font-size: 16px; font-weight: 800; color: var(--color-text); display: flex; align-items: center; gap: 8px; }
        .comic-modal-head h3 i { color: var(--color-primary); }
        .comic-modal-close { width: 30px; height: 30px; border-radius: 8px; border: none; background: none; color: var(--color-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
        .comic-modal-close:hover { background: var(--color-bg-hover); color: var(--color-text); }
        .comic-modal-body { padding: 18px 20px; overflow-y: auto; }
        .comic-modal-body .input-field { margin-bottom: 12px; }
        .comic-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--color-border); }

        /* ===== 侧边栏：层级视觉 + 滚动提示 ===== */
        .sidebar-nav {
            padding-bottom: 8px;
            -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%);
        }
        .sidebar-nav::-webkit-scrollbar { display: block; width: 4px; }
        .sidebar-nav::-webkit-scrollbar-thumb { background: var(--color-scrollbar); border-radius: 999px; }
        .nav-group-toggle .label-text { font-size: 13.5px; font-weight: 800; letter-spacing: 0.01em; }
        .nav-group-toggle .group-label i.nav-icon { color: var(--color-primary); opacity: 0.8; }
        .nav-group-toggle.open .group-label i.nav-icon { opacity: 1; }
        .nav-group-content { position: relative; }
        .nav-group-content::before { content: ''; position: absolute; left: 25px; top: 3px; bottom: 6px; width: 1px; background: var(--color-border); }
        .nav-group-content .nav-item { padding-left: 38px; font-size: 12.5px; min-height: 34px; margin: 1px 10px; }
        .nav-group-content .nav-item i.nav-icon { width: 15px; font-size: 12.5px; color: var(--color-text-muted); }
        .nav-group-content .nav-item.active i.nav-icon { color: #fff; }
        .nav-divider { height: 1px; background: var(--color-border); margin: 6px 20px 6px 38px; opacity: 0.85; }

        /* ===== 侧边栏：待办角标 ===== */
        .nav-item { position: relative; }
        .nav-badge {
            margin-left: auto;
            min-width: 18px;
            height: 18px;
            padding: 0 5px;
            border-radius: 999px;
            background: #EF4444;
            color: #fff;
            font-size: 10.5px;
            font-weight: 800;
            line-height: 1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .nav-badge-dot { min-width: 8px; width: 8px; height: 8px; padding: 0; font-size: 0; }

        /* ===== 顶部栏：收起侧栏按钮 ===== */
        .header-collapse-btn {
            width: 32px;
            height: 32px;
            border-radius: 9px;
            border: 1px solid var(--color-border);
            background: var(--color-bg-card);
            color: var(--color-text-secondary);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            margin-right: 6px;
            transition: all 0.18s;
        }
        .header-collapse-btn:hover { color: var(--color-primary); border-color: var(--color-primary); }

        /* ===== 底部用户卡：夜间模式按钮 ===== */
        .sf-icon-btn {
            width: 26px;
            height: 26px;
            border-radius: 8px;
            border: none;
            background: none;
            color: var(--color-text-muted);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.18s;
        }
        .sf-icon-btn:hover { background: var(--color-primary-light); color: var(--color-primary); }
        a.sf-points { text-decoration: none; }

        /* ===== 桌面端：收起为图标栏 ===== */
        body.sidebar-collapsed .sidebar { width: 68px; }
        body.sidebar-collapsed .main-wrapper { margin-left: 68px; }
        body.sidebar-collapsed .sidebar-logo { padding: 0; justify-content: center; }
        body.sidebar-collapsed .sidebar-logo span { display: none; }
        body.sidebar-collapsed .sidebar-logo img { height: 30px !important; width: 30px !important; max-width: 30px !important; }
        body.sidebar-collapsed .nav-group-content { display: none !important; }
        body.sidebar-collapsed .nav-item,
        body.sidebar-collapsed .nav-group-toggle {
            justify-content: center;
            padding-left: 0;
            padding-right: 0;
            width: 44px;
            margin: 4px auto;
        }
        body.sidebar-collapsed .nav-item span,
        body.sidebar-collapsed .nav-group-toggle .label-text,
        body.sidebar-collapsed .nav-group-toggle > i.fa-chevron-down { display: none; }
        body.sidebar-collapsed .nav-item i.nav-icon,
        body.sidebar-collapsed .nav-group-toggle .group-label i.nav-icon { margin: 0; width: auto; font-size: 16px; }
        body.sidebar-collapsed .nav-badge {
            position: absolute;
            top: 5px;
            right: 8px;
            margin: 0;
            min-width: 7px;
            width: 7px;
            height: 7px;
            padding: 0;
            font-size: 0;
        }
        body.sidebar-collapsed .sf-user { flex-direction: column; gap: 6px; padding: 8px 4px; }
        body.sidebar-collapsed .sf-user-info { display: none; }
        body.sidebar-collapsed .sf-logout { font-size: 0; }
        body.sidebar-collapsed .sf-logout i { font-size: 14px; }

        @media (max-width: 1024px) {
            .header-collapse-btn { display: none; }
            body.sidebar-collapsed .sidebar { width: 280px; }
            body.sidebar-collapsed .main-wrapper { margin-left: 0; }
            body.sidebar-collapsed .nav-group-content { display: none !important; }
        }

        body.sidebar-collapsed .header-collapse-btn i { transform: rotate(180deg); }
        .header-collapse-btn i { transition: transform 0.2s ease; }

        .nav-group-toggle { position: relative; }
        .nav-group-dot { position: absolute; top: 10px; right: 14px; width: 6px; height: 6px; border-radius: 50%; background: #EF4444; }
        body.sidebar-collapsed .nav-group-dot { top: 8px; right: 10px; }

        .nav-group-dot { right: 34px !important; }
        .nav-group-toggle.open .nav-group-dot { display: none; }
        body.sidebar-collapsed .nav-group-dot { right: 9px !important; display: block !important; }

        /* 控制台公告富文本 */
        .dash-notice-rich { font-size: 12.5px; line-height: 1.8; color: var(--color-text-secondary); word-break: break-word; }
        .dash-notice-rich p { margin: 0 0 6px; }
        .dash-notice-rich h3 { font-size: 14px; margin: 8px 0 6px; color: var(--color-text); }
        .dash-notice-rich h4 { font-size: 13px; margin: 6px 0 4px; color: var(--color-text); }
        .dash-notice-rich ul, .dash-notice-rich ol { padding-left: 18px; margin: 4px 0; }
        .dash-notice-rich blockquote { margin: 6px 0; padding: 4px 10px; border-left: 3px solid var(--color-border); color: var(--color-text-muted); }
        .dash-notice-rich a { color: var(--color-primary); }
        .dash-notice-rich img { max-width: 100%; border-radius: 8px; }

        /* 富文本公告块（登录页公告 / 注册公告 / 首页公告 / 全站顶部） */
        .rn-box { position: relative; display: flex; gap: 10px; align-items: flex-start; border-radius: 10px; padding: 10px 14px; font-size: 13px; line-height: 1.75; color: var(--color-text-secondary); }
        .rn-bar { margin: 12px 24px 0; background: var(--color-primary-light); border: 1px solid rgba(var(--color-primary-rgb), 0.18); }
        .rn-card { margin: 0 0 16px; background: var(--color-bg-subtle); border: 1px solid var(--color-border); }
        .rn-agree { font-size: 12px; max-height: 96px; overflow-y: auto; }
        .rn-title { flex-shrink: 0; font-weight: 800; color: var(--color-text); }
        .rn-body { flex: 1; min-width: 0; word-break: break-word; }
        .rn-body p { margin: 0 0 4px; }
        .rn-body ul, .rn-body ol { padding-left: 18px; margin: 4px 0; }
        .rn-body a { color: var(--color-primary); }
        .rn-close { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border: none; border-radius: 6px; background: transparent; color: var(--color-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
        .rn-close:hover { background: var(--color-bg-hover); color: var(--color-text); }
        @media (max-width: 768px) { .rn-bar { margin: 8px 12px 0; } }

        /* 积分商城：商品描述富文本 */
        .mall-desc { font-size: 12px; line-height: 1.7; color: var(--color-text-muted); }
        .mall-desc p { margin: 0 0 4px; }
        .mall-desc ul, .mall-desc ol { padding-left: 16px; margin: 3px 0; }
        .mall-desc a { color: var(--color-primary); }
        .mall-desc strong, .mall-desc b { color: var(--color-text); }

        /* 前台官网/登录页：深色模式切换按钮 */
        .theme-fab {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: 1px solid var(--color-border);
            background: var(--color-bg-card);
            color: var(--color-text-secondary);
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            flex-shrink: 0;
            transition: all 0.18s;
        }
        .theme-fab:hover { color: var(--color-primary); border-color: var(--color-primary); }
        .theme-fab .fa-sun { display: none; }
        [data-theme="dark"] .theme-fab .fa-moon { display: none; }
        [data-theme="dark"] .theme-fab .fa-sun { display: inline-block; }
        .theme-fab-fixed { position: fixed; bottom: 20px; right: 20px; z-index: 900; width: 42px; height: 42px; font-size: 15px; color: var(--color-primary); border-color: rgba(var(--color-primary-rgb), 0.4); box-shadow: 0 8px 22px rgba(15,23,42,0.18); }

/* ===================== Vega 风格公共层（2026-11-04） ===================== */
/* 深色主题调色板：贴近参考站点的近黑底 / 深灰面板 */
[data-theme="dark"]{
    --color-bg-page:#0a0a0b;
    --color-bg-page-end:#101012;
    --color-bg-card:#141416;
    --color-bg-sidebar:#0b0b0d;
    --color-bg-header:#0b0b0d;
    --color-bg-subtle:#1a1a1d;
    --color-bg-hover:#232327;
    --color-bg-input:#141416;
    --color-text:#f4f4f5;
    --color-text-secondary:#a1a1aa;
    --color-text-muted:#71717a;
    --color-text-faint:#52525b;
    --color-border:#26262b;
    --color-border-light:rgba(255,255,255,0.06);
    --color-modal-bg:#161618;
    --color-shadow:rgba(0,0,0,0.5);
}

/* 侧边栏：更窄、更扁平、分组小标签 */
.sidebar{width:248px}
.main-wrapper{margin-left:248px}
body.sidebar-collapsed .main-wrapper{margin-left:68px}
.sidebar-logo{height:64px;padding:0 16px;background:transparent;border-bottom:1px solid var(--color-border)}
.sidebar-nav{padding:10px 8px}
.nav-group{margin-bottom:4px}
.nav-group-toggle{height:auto;padding:7px 10px;border-radius:8px;font-size:11px;font-weight:800;letter-spacing:.4px;color:var(--color-text-muted)}
.nav-group-toggle:hover{background:transparent;color:var(--color-text-secondary)}
.nav-group-toggle .group-label{font-size:11px}
.sidebar .nav-group-toggle i.nav-icon{font-size:11px;width:14px;margin-right:6px;opacity:.8}
.sidebar .nav-group-content .nav-item{padding-left:24px}
.nav-item{height:36px;padding:0 10px;border-radius:9px;font-size:13px;font-weight:600;gap:10px;margin-bottom:2px}
.sidebar .nav-item i.nav-icon{font-size:13.5px;width:18px}
.nav-item.active{background:rgba(var(--color-primary-rgb),.12);color:var(--color-primary);font-weight:800}
[data-theme="dark"] .nav-item.active{background:rgba(255,255,255,.09);color:#fff}
.sidebar-footer{padding:12px 10px 14px}
.sf-cta{display:flex;align-items:center;justify-content:center;gap:8px;height:40px;border-radius:10px;background:var(--color-primary);color:#fff;font-size:13px;font-weight:800;text-decoration:none;margin-bottom:10px;box-shadow:0 8px 20px rgba(var(--color-primary-rgb),.28);transition:all .16s}
.sf-cta:hover{transform:translateY(-1px);color:#fff;box-shadow:0 12px 26px rgba(var(--color-primary-rgb),.34)}
.sf-card{padding:6px 8px;border-radius:10px;border:none;background:transparent}
.sf-card:hover{background:var(--color-bg-hover)}

/* 顶部条 / 内容区更紧凑 */
.top-header{height:64px;padding:0 22px}
.content-area{padding:22px}

/* 公用：搜索 + 排序 + 图标按钮 */
.app-topbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.app-search{display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;border-radius:10px;border:1px solid var(--color-border);background:var(--color-bg-subtle);min-width:240px;flex:1;max-width:440px}
.app-search i{font-size:12px;color:var(--color-text-muted)}
.app-search input{flex:1;min-width:0;border:none;background:transparent;outline:none;font-size:13px;color:var(--color-text);font-family:inherit}
.app-select{height:38px;padding:0 12px;border-radius:10px;border:1px solid var(--color-border);background:var(--color-bg-card);color:var(--color-text-secondary);font-size:12.5px;font-weight:700;cursor:pointer}
.app-select:focus{outline:none;border-color:var(--color-primary)}
.app-icbtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--color-border);background:var(--color-bg-card);color:var(--color-text-secondary);display:inline-flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;transition:all .16s}
.app-icbtn:hover{border-color:var(--color-primary);color:var(--color-primary)}

/* 公用：圆形分类筛选条 */
.chip-bar{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.chip-bar::-webkit-scrollbar{display:none}
.chip-round{display:inline-flex;align-items:center;gap:0;height:38px;padding:0 16px;border-radius:19px;border:1px solid var(--color-border);background:var(--color-bg-card);color:var(--color-text-secondary);font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .16s;flex-shrink:0}
.chip-round:hover{border-color:var(--color-primary);color:var(--color-primary)}
.chip-round.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.chip-round .ic{width:28px;height:28px;border-radius:50%;background:var(--color-bg-subtle);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--color-text-secondary)}
.chip-round.active .ic{background:rgba(255,255,255,.2);color:#fff}

/* 公用：密集作品卡网格 */
.work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}


@media(max-width:820px){.work-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}}
.work-card{position:relative;border-radius:12px;overflow:hidden;background:var(--color-bg-card);border:1px solid var(--color-border);cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s}
.work-card:hover{transform:translateY(-3px);border-color:var(--color-primary);box-shadow:0 14px 30px var(--color-shadow-hover)}
.work-shot{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--color-bg-subtle)}
.work-shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.work-card:hover .work-shot img{transform:scale(1.04)}
.work-cap{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:8px;padding:18px 10px 8px;background:linear-gradient(180deg,rgba(8,8,10,0) 0%,rgba(8,8,10,.78) 100%)}
.work-title{font-size:11.5px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.work-tag{margin-left:auto;padding:1px 7px;border-radius:5px;background:rgba(255,255,255,.16);color:#fff;font-size:9.5px;font-weight:800;white-space:nowrap;flex-shrink:0}
.work-meta{display:flex;align-items:center;gap:6px;padding:7px 9px;font-size:10.5px;font-weight:700;color:var(--color-text-muted);min-width:0}
.work-meta img{width:16px;height:16px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--color-bg-subtle)}
.work-meta .n{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--color-text-secondary);font-weight:800}
.work-meta .c{margin-left:auto;display:inline-flex;align-items:center;gap:3px;flex-shrink:0}
.work-actions{margin-left:auto;display:flex;align-items:center;gap:4px;flex-shrink:0}
.work-like,.work-fav{height:22px;border:1px solid var(--color-border-light);border-radius:6px;background:var(--color-bg-subtle);color:var(--color-text-muted);display:inline-flex;align-items:center;justify-content:center;gap:3px;padding:0 6px;font-size:10px;font-weight:800;line-height:1;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.work-like:hover{color:#EF4444;border-color:rgba(239,68,68,.35)}
.work-like.is-active{color:#EF4444;background:rgba(239,68,68,.09);border-color:rgba(239,68,68,.28)}
.work-fav{padding:0 7px}
.work-fav:hover{color:#D97706;border-color:rgba(245,158,11,.42)}
.work-fav.is-active{color:#D97706;background:rgba(245,158,11,.11);border-color:rgba(245,158,11,.38)}
@media(max-width:480px){.work-meta{gap:4px;padding:6px}.work-actions{gap:3px}.work-like,.work-fav{padding:0 5px}.work-fav{font-size:9px}}
.work-more{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:7px;border:none;background:rgba(8,8,10,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1;cursor:pointer;opacity:0;transition:opacity .16s;backdrop-filter:blur(4px)}
.work-card:hover .work-more{opacity:1}
/* 侧边栏激活态/悬浮态统一（覆盖旧的高饱和块） */
.sidebar .nav-item{height:36px;line-height:36px}
.sidebar .nav-item.active{background:rgba(var(--color-primary-rgb),.12)!important;color:var(--color-primary)!important;font-weight:800;box-shadow:none}
.sidebar .nav-item:hover{background:var(--color-bg-hover)}
[data-theme="dark"] .sidebar{background:var(--color-bg-sidebar);background-image:none;box-shadow:none;border-right-color:var(--color-border)}
[data-theme="dark"] .sidebar-logo{background:transparent;color:var(--color-text);border-bottom-color:var(--color-border)}
[data-theme="dark"] .sidebar .nav-item{color:var(--color-text-secondary)}
[data-theme="dark"] .sidebar .nav-item.active{background:rgba(255,255,255,.10)!important;color:#fff!important}
[data-theme="dark"] .sidebar .nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
/* 观赏大厅卡片菜单 */
.hall-menu-item{display:flex;align-items:center;gap:7px;width:100%;padding:8px 10px;border:none;background:transparent;border-radius:8px;color:var(--color-text-secondary);font-size:12px;font-weight:800;cursor:pointer;text-align:left}
.hall-menu-item:hover{background:var(--color-primary-light);color:var(--color-primary)}
.hall-menu-item i{font-size:11px}
/* ===== 参考图最终对齐：侧栏 / 顶栏 / 卡片（覆盖前序规则） ===== */
.sidebar{width:250px}
.main-wrapper{margin-left:250px}
.sidebar-logo{height:62px;padding:0 18px;background:transparent;border-bottom:none}
.sidebar-nav{padding:6px 10px}
.nav-group-toggle{height:30px;padding:0 8px;border-radius:6px;font-size:12px;font-weight:700;color:var(--color-text-muted);letter-spacing:0}
.sidebar .nav-group-toggle i.nav-icon{display:none}
.nav-group-toggle i.fa-chevron-down{font-size:9px;margin-left:2px}
.sidebar .nav-group-content .nav-item{padding-left:8px}
.sidebar .nav-item{height:36px;padding:0 8px;border-radius:6px;font-size:13px;font-weight:600;margin-bottom:1px}
.sidebar .nav-item i.nav-icon{width:18px;font-size:14px}
.sidebar-footer{padding:10px 12px 12px;border-top:1px solid var(--color-border)}
.sf-cta{height:38px;border-radius:8px;font-size:13px;margin-bottom:10px}
.sf-user{padding:2px}

/* 顶栏：搜索 + 排序 + 右侧图标（公共区域） */
.top-header{height:60px;padding:0 18px}
.hd-title{font-size:14px;font-weight:800;color:var(--color-text);white-space:nowrap;display:flex;align-items:center;gap:7px}
.hd-title i{font-size:13px;color:var(--color-primary)}
.hd-search{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:8px;border:1px solid var(--color-border);background:var(--color-bg-subtle);width:min(420px,40vw);min-width:180px}
.hd-search i{font-size:12px;color:var(--color-text-muted)}
.hd-search input{flex:1;min-width:0;border:none;background:transparent;outline:none;font-size:13px;color:var(--color-text);font-family:inherit}
.hd-sort{height:36px;padding:0 10px;border-radius:8px;border:1px solid var(--color-border);background:var(--color-bg-card);color:var(--color-text-secondary);font-size:12.5px;font-weight:700;cursor:pointer}
.hd-sort:focus{outline:none;border-color:var(--color-primary)}
.hd-icon{width:36px;height:36px;border-radius:50%;border:1px solid var(--color-border);background:var(--color-bg-card);color:var(--color-text-secondary);display:inline-flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer}
.hd-icon:hover{border-color:var(--color-primary);color:var(--color-primary)}
@media(max-width:980px){.hd-search{display:none}.hd-sort{display:none}}

/* 卡片：去掉卡壳，只留图片 + 叠层标题 + 下方作者行 */
.work-card{background:transparent!important;border:none!important;border-radius:0;overflow:visible;box-shadow:none!important}
.work-card:hover{transform:none!important;box-shadow:none!important;border:none!important}
.work-shot{border-radius:8px;border:1px solid var(--color-border);aspect-ratio:1/1;transition:border-color .16s}
.work-card:hover .work-shot{border-color:var(--color-primary)}
.work-cap{padding:16px 8px 7px}
.work-title{font-size:11px;font-weight:700}
.work-tag{font-size:9px;padding:1px 6px;background:rgba(255,255,255,.2)}
.work-meta{padding:6px 2px 2px;font-size:10.5px}
.work-meta .n{font-weight:700}
.top-header .text-lg.font-extrabold{font-size:14px}

/* 顶部标题隐藏 + 侧栏细节对齐参考图 */
.top-header .text-lg.font-extrabold{display:none!important}

/* 用户通知中心 */
.user-notification-panel{position:relative;display:none;align-items:center;}
.user-notification-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#ef4444;color:#fff;border:2px solid var(--color-bg-header);font-size:9px;font-weight:900;line-height:13px;text-align:center;box-sizing:border-box;}
.user-notification-dropdown{position:absolute;top:calc(100% + 10px);right:0;width:min(390px,calc(100vw - 24px));max-height:min(620px,72vh);overflow:hidden;border-radius:14px;border:1px solid var(--color-border);background:var(--color-modal-bg,var(--color-bg-card));box-shadow:0 18px 50px rgba(15,23,42,.2);z-index:2600;}
.user-notification-head{height:52px;padding:0 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--color-border);}
.user-notification-head>span{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:900;color:var(--color-text);}
.user-notification-head>span i{color:var(--color-primary);}
.user-notification-head button{border:0;background:transparent;color:var(--color-primary);font-size:12px;font-weight:800;cursor:pointer;}
.user-notification-list{max-height:calc(min(620px,72vh) - 52px);overflow-y:auto;padding:6px;box-sizing:border-box;}
.user-notification-item{width:100%;border:0;border-radius:10px;background:transparent;padding:11px 10px;display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:start;gap:9px;text-align:left;cursor:pointer;color:inherit;}
.user-notification-item:hover{background:var(--color-bg-subtle);}
.user-notification-item.unread{background:rgba(var(--color-primary-rgb),.06);}
.user-notification-dot{width:7px;height:7px;border-radius:50%;background:transparent;margin-top:6px;}
.user-notification-item.unread .user-notification-dot{background:var(--color-primary);}
.user-notification-copy{min-width:0;display:flex;flex-direction:column;gap:4px;}
.user-notification-copy strong{font-size:12.5px;line-height:1.45;color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.user-notification-copy small{font-size:11px;line-height:1.5;color:var(--color-text-muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.user-notification-item time{font-size:10px;color:var(--color-text-muted);white-space:nowrap;padding-top:2px;}
.user-notification-empty{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--color-text-muted);font-size:12px;}
.user-notification-empty i{font-size:28px;opacity:.55;}
.user-notification-detail{max-height:calc(min(620px,72vh) - 52px);overflow-y:auto;padding:14px 16px 20px;box-sizing:border-box;}
.user-notification-back{border:0;background:transparent;color:var(--color-text-muted);font-size:11px;font-weight:800;cursor:pointer;padding:0 0 12px;}
.user-notification-detail-title{font-size:16px;font-weight:900;line-height:1.45;color:var(--color-text);}
.user-notification-detail-time{margin-top:5px;font-size:10px;color:var(--color-text-muted);}
.user-notification-detail-content{margin-top:14px;font-size:13px;line-height:1.75;color:var(--color-text-secondary);word-break:break-word;}
.user-notification-detail-content img{max-width:100%;height:auto;border-radius:8px;}
@media(max-width:768px){.user-notification-dropdown{position:fixed;top:62px;right:12px;left:12px;width:auto;max-height:72vh;}.user-notification-list,.user-notification-detail{max-height:calc(72vh - 52px);}}
/* 通知中心紧凑尺寸 */
.user-notification-dropdown{top:calc(100% + 8px);width:min(320px,calc(100vw - 20px));max-height:min(500px,64vh);border-radius:12px;box-shadow:0 14px 36px rgba(15,23,42,.18);}
.user-notification-head{height:46px;padding:0 12px;}
.user-notification-head>span{gap:6px;font-size:13px;}
.user-notification-head button{font-size:11px;}
.user-notification-list{max-height:calc(min(500px,64vh) - 46px);padding:4px;}
.user-notification-item{border-radius:8px;padding:9px 8px;grid-template-columns:7px minmax(0,1fr) auto;gap:7px;}
.user-notification-dot{width:6px;height:6px;margin-top:5px;}
.user-notification-copy{gap:3px;}
.user-notification-copy strong{font-size:12px;line-height:1.4;}
.user-notification-copy small{font-size:10.5px;line-height:1.45;-webkit-line-clamp:1;}
.user-notification-item time{font-size:9.5px;padding-top:1px;}
.user-notification-empty{min-height:110px;gap:7px;font-size:11.5px;}
.user-notification-empty i{font-size:24px;opacity:.5;}
.user-notification-detail{max-height:calc(min(500px,64vh) - 46px);padding:12px 14px 16px;}
.user-notification-back{font-size:10.5px;padding:0 0 10px;}
.user-notification-detail-title{font-size:15px;}
.user-notification-detail-content{margin-top:11px;font-size:12.5px;line-height:1.7;}
@media(max-width:768px){.user-notification-dropdown{top:58px;right:8px;left:8px;max-height:62vh;}.user-notification-list,.user-notification-detail{max-height:calc(62vh - 46px);}}
.nav-group-toggle{display:flex;align-items:center}
.nav-group-toggle .group-label{order:2}
.nav-group-toggle > i.fa-chevron-down{order:1;margin:0 6px 0 0}
.sidebar .nav-group-content .nav-item{padding-left:20px}
.sidebar-links{padding:8px 18px 6px;display:flex;flex-direction:column;gap:1px}
.sidebar-links a{font-size:12.5px;font-weight:600;color:var(--color-text-secondary);text-decoration:none;padding:7px 0;transition:color .16s}
.sidebar-links a:hover{color:var(--color-text)}
.sf-user{border-radius:6px}
.nav-group-toggle{justify-content:flex-start!important;gap:6px}
.nav-group-toggle i.fa-chevron-down{margin-right:2px}
/* 侧栏更紧凑，尽量一屏放下全部分组（参考站密度） */
.sidebar .nav-group{margin-bottom:2px}
.sidebar .nav-group-toggle{height:26px;padding:0 8px;font-size:11.5px}
.sidebar .nav-item{height:33px;line-height:33px;font-size:12.5px;margin-bottom:1px}
.sidebar-nav{padding-top:4px;scrollbar-width:thin}
/* 移动端必须覆盖后置的桌面侧栏/搜索宽度，避免内容整体被推到屏幕外 */
@media(max-width:768px){
    body{overflow-x:hidden}
    .main-wrapper,body.sidebar-collapsed .main-wrapper{margin-left:0!important;width:100%;min-width:0}
    .content-area{width:100%;max-width:100vw;min-width:0;padding:12px;box-sizing:border-box}
    .app-topbar{align-items:stretch;gap:8px;width:100%;min-width:0}
    .app-search{flex:1 1 100%;width:100%;max-width:none;min-width:0}
    .app-select{max-width:calc(50vw - 18px)}
    .work-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;min-width:0}
    .work-card{min-width:0}
    .work-meta{min-width:0}
    .work-meta .n{flex:1 1 auto}
}
@media(max-width:360px){.content-area{padding:8px}.work-grid{gap:7px}.work-like,.work-fav{font-size:9px;padding:0 4px}}

/* 前台登录页快捷登录（QQ / 微信）：两个等宽按钮 + 分隔线 */
.oauth-area{margin-top:22px;padding-top:20px;border-top:1px solid var(--color-border,#e5e7eb)}
.oauth-divider{text-align:center;margin-bottom:12px;font-size:12px;line-height:1.4;color:var(--color-text-secondary,#94a3b8)}
.oauth-divider span{padding:0 4px}
.oauth-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.oauth-grid>.oauth-btn:only-child{grid-column:1/-1}
.oauth-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 12px;border-radius:10px;border:1px solid var(--color-border,#e5e7eb);background:var(--color-bg-card,#fff);color:var(--color-text,#334155);font-family:inherit;font-size:13.5px;font-weight:700;cursor:pointer;transition:border-color .16s,background .16s,box-shadow .16s,transform .16s}
.oauth-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(15,23,42,.08)}
.oauth-btn i{font-size:17px;line-height:1}
.oauth-btn-wx i{color:#22c55e}
.oauth-btn-qq i{color:#3b82f6}
.oauth-btn-wx:hover{border-color:#86efac;background:#f0fdf4}
.oauth-btn-qq:hover{border-color:#93c5fd;background:#eff6ff}
[data-theme=dark] .oauth-btn-wx:hover{background:rgba(34,197,94,.12)}
[data-theme=dark] .oauth-btn-qq:hover{background:rgba(59,130,246,.14)}
@media(max-width:400px){.oauth-btn{height:40px;font-size:13px;gap:6px}}
/* 工单 AI 客服回复气泡 */
.ticket-ai-reply{background:var(--color-primary-light);border:1px solid var(--color-border-light)}
.ticket-ai-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.ticket-ai-avatar{width:28px;height:28px;border-radius:50%;overflow:hidden;flex:0 0 28px;display:inline-flex;align-items:center;justify-content:center;background:var(--color-primary);color:#fff;font-size:13px}
.ticket-ai-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.ticket-ai-name{font-size:13px;font-weight:800;color:var(--color-primary)}
.ticket-ai-tag{font-size:10px;font-weight:700;line-height:1;padding:3px 6px;border-radius:6px;background:var(--color-primary);color:#fff;opacity:.85}
.ticket-ai-time{font-size:11px;color:var(--color-text-secondary);margin-left:auto}