*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth}body{font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;line-height:1.6;color:#1e293b;background:#f8fafc;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{min-height:100vh}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f5f9;border-radius:4px}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px;transition:background 0.3s ease}::-webkit-scrollbar-thumb:hover{background:#94a3b8}::selection{background:rgba(37,99,235,0.2);color:#1e293b}:focus{outline:2px solid #3b82f6;outline-offset:2px}button{cursor:pointer;border:none;background:none;font-family:inherit}a{color:#3b82f6;text-decoration:none;transition:color 0.3s ease}a:hover{color:#1d4ed8}input,textarea,select{font-family:inherit;font-size:inherit}img{max-width:100%;height:auto}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.d-none{display:none !important}.d-block{display:block !important}.d-flex{display:flex !important}.d-inline-flex{display:inline-flex !important}.fade-enter-active,.fade-leave-active{transition:opacity 0.3s ease}.fade-enter,.fade-leave-to{opacity:0}.slide-enter-active,.slide-leave-active{transition:transform 0.3s ease}.slide-enter,.slide-leave-to{transform:translateX(-100%)}@media (max-width: 768px){.d-md-none{display:none !important}.d-md-block{display:block !important}}@media (max-width: 480px){.d-sm-none{display:none !important}.d-sm-block{display:block !important}}
[data-v-700c0eb7]:root{--primary-color: #3b82f6;--primary-dark: #1d4ed8;--primary-light: #60a5fa;--secondary-color: #64748b;--accent-color: #f59e0b;--gray-50: #f8fafc;--gray-100: #f1f5f9;--gray-200: #e2e8f0;--gray-300: #cbd5e1;--gray-400: #94a3b8;--gray-500: #64748b;--gray-600: #475569;--gray-700: #334155;--gray-800: #1e293b;--gray-900: #0f172a;--success-color: #10b981;--warning-color: #f59e0b;--error-color: #ef4444;--info-color: #3b82f6;--bg-primary: #ffffff;--bg-secondary: #f8fafc;--bg-tertiary: #f1f5f9;--bg-dark: #1e293b;--bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--text-primary: #1e293b;--text-secondary: #475569;--text-tertiary: #64748b;--text-inverse: #ffffff;--border-light: #e2e8f0;--border-medium: #cbd5e1;--border-dark: #94a3b8;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--text-xs: 12px;--text-sm: 14px;--text-base: 16px;--text-lg: 18px;--text-xl: 20px;--text-2xl: 24px;--text-3xl: 30px;--text-4xl: 36px;--font-light: 300;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--font-extrabold: 800;--leading-tight: 1.25;--leading-normal: 1.5;--leading-relaxed: 1.625;--transition-fast: 0.15s ease;--transition-normal: 0.3s ease;--transition-slow: 0.5s ease;--z-dropdown: 1000;--z-sticky: 1020;--z-fixed: 1030;--z-modal-backdrop: 1040;--z-modal: 1050;--z-popover: 1060;--z-tooltip: 1070;--breakpoint-sm: 640px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px;--breakpoint-2xl: 1536px}.login-page[data-v-700c0eb7]{min-height:100vh;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--bg-gradient)}.background[data-v-700c0eb7]{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1}.particles[data-v-700c0eb7]{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden}.particle[data-v-700c0eb7]{position:absolute;width:4px;height:4px;background:rgba(255,255,255,0.1);border-radius:50%;animation:float-700c0eb7 linear infinite}@keyframes float-700c0eb7{0%{transform:translateY(100vh) rotate(0deg);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-100px) rotate(360deg);opacity:0}}.grid-overlay[data-v-700c0eb7]{position:absolute;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);background-size:50px 50px;animation:grid-move-700c0eb7 20s linear infinite}@keyframes grid-move-700c0eb7{0%{transform:translate(0, 0)}100%{transform:translate(50px, 50px)}}.container[data-v-700c0eb7]{position:relative;z-index:2;width:100%;max-width:1200px;padding:var(--spacing-lg);display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-2xl)}.welcome-section[data-v-700c0eb7]{flex:1;color:white;text-align:center}@media (max-width: 767px){.welcome-section[data-v-700c0eb7]{display:none}}.welcome-title[data-v-700c0eb7]{font-size:var(--text-4xl);font-weight:var(--font-bold);margin-bottom:var(--spacing-md);line-height:var(--leading-tight)}@media (min-width: 768px) and (max-width: 1023px){.welcome-title[data-v-700c0eb7]{font-size:var(--text-3xl)}}.welcome-subtitle[data-v-700c0eb7]{font-size:var(--text-xl);font-weight:var(--font-medium);opacity:0.9;line-height:var(--leading-normal)}@media (min-width: 768px) and (max-width: 1023px){.welcome-subtitle[data-v-700c0eb7]{font-size:var(--text-lg)}}.login-container[data-v-700c0eb7]{flex:0 0 400px}@media (max-width: 767px){.login-container[data-v-700c0eb7]{flex:1;max-width:100%}}.login-card[data-v-700c0eb7]{background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);border-radius:var(--radius-xl);padding:var(--spacing-2xl);box-shadow:var(--shadow-xl);border:1px solid rgba(255,255,255,0.2)}.card-header[data-v-700c0eb7]{text-align:center;margin-bottom:var(--spacing-xl)}.logo[data-v-700c0eb7]{margin-bottom:var(--spacing-md)}.logo-image[data-v-700c0eb7]{height:60px;width:auto;margin:0 auto}.subtitle[data-v-700c0eb7]{font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--text-primary);margin:0}.login-tabs[data-v-700c0eb7]{display:flex;margin-bottom:var(--spacing-xl);background:var(--bg-tertiary);border-radius:var(--radius-lg);padding:var(--spacing-xs)}.tab-btn[data-v-700c0eb7]{flex:1;padding:var(--spacing-sm) var(--spacing-md);background:transparent;border:none;border-radius:var(--radius-md);color:var(--text-secondary);font-size:var(--text-sm);font-weight:var(--font-medium);cursor:pointer;transition:all var(--transition-normal)}.tab-btn.active[data-v-700c0eb7]{background:white;color:var(--primary-color);box-shadow:var(--shadow-sm)}.tab-btn[data-v-700c0eb7]:hover:not(.active){color:var(--text-primary)}.form-container[data-v-700c0eb7]{position:relative}.login-form[data-v-700c0eb7]{display:none}.login-form.active[data-v-700c0eb7]{display:block}.input-group[data-v-700c0eb7]{margin-bottom:var(--spacing-lg);position:relative}.input-container[data-v-700c0eb7]{position:relative}.input-container input[data-v-700c0eb7]{width:100%;padding:var(--spacing-md) var(--spacing-md) var(--spacing-sm);border:2px solid var(--border-light);border-radius:var(--radius-md);background:white;font-size:var(--text-base);color:var(--text-primary);transition:all var(--transition-normal)}.input-container input[data-v-700c0eb7]:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(59,130,246,0.1)}.input-container input:focus+label[data-v-700c0eb7],.input-container input:not(:placeholder-shown)+label[data-v-700c0eb7]{transform:translateY(-8px) scale(0.85);color:var(--primary-color)}.input-container label[data-v-700c0eb7]{position:absolute;left:var(--spacing-md);top:var(--spacing-md);color:var(--text-tertiary);font-size:var(--text-base);pointer-events:none;transition:all var(--transition-normal);transform-origin:left top}.input-border[data-v-700c0eb7]{position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--primary-color);transform:scaleX(0);transition:transform var(--transition-normal)}.input-container input:focus ~ .input-border[data-v-700c0eb7]{transform:scaleX(1)}.password-toggle[data-v-700c0eb7]{position:absolute;right:var(--spacing-md);top:50%;transform:translateY(-50%);width:24px;height:24px;background:none;border:none;color:var(--text-tertiary);cursor:pointer;transition:color var(--transition-normal)}.password-toggle[data-v-700c0eb7]:hover{color:var(--primary-color)}.password-toggle svg[data-v-700c0eb7]{width:100%;height:100%}.captcha-group[data-v-700c0eb7]{display:flex;gap:var(--spacing-md)}.captcha-input[data-v-700c0eb7]{flex:1}.captcha-image[data-v-700c0eb7]{flex:0 0 120px;height:48px;background:var(--bg-tertiary);border:2px solid var(--border-light);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;transition:all var(--transition-normal)}.captcha-image[data-v-700c0eb7]:hover{border-color:var(--primary-color)}.captcha-image span[data-v-700c0eb7]{font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--text-primary);letter-spacing:2px}.refresh-captcha[data-v-700c0eb7]{position:absolute;top:-8px;right:-8px;width:20px;height:20px;background:var(--primary-color);border:none;border-radius:50%;color:white;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-normal)}.refresh-captcha[data-v-700c0eb7]:hover{background:var(--primary-dark);transform:scale(1.1)}.refresh-captcha svg[data-v-700c0eb7]{width:12px;height:12px}.form-options[data-v-700c0eb7]{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xl)}.checkbox-container[data-v-700c0eb7]{display:flex;align-items:center;gap:var(--spacing-sm);cursor:pointer;font-size:var(--text-sm);color:var(--text-secondary)}.checkbox-container input[type="checkbox"][data-v-700c0eb7]{display:none}.checkbox-container .checkmark[data-v-700c0eb7]{width:18px;height:18px;border:2px solid var(--border-medium);border-radius:var(--radius-sm);position:relative;transition:all var(--transition-normal)}.checkbox-container .checkmark[data-v-700c0eb7]::after{content:'';position:absolute;left:4px;top:1px;width:6px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0;transition:opacity var(--transition-normal)}.checkbox-container input[type="checkbox"]:checked+.checkmark[data-v-700c0eb7]{background:var(--primary-color);border-color:var(--primary-color)}.checkbox-container input[type="checkbox"]:checked+.checkmark[data-v-700c0eb7]::after{opacity:1}.forgot-password[data-v-700c0eb7]{color:var(--primary-color);font-size:var(--text-sm);transition:color var(--transition-normal)}.forgot-password[data-v-700c0eb7]:hover{color:var(--primary-dark)}.login-btn[data-v-700c0eb7]{width:100%;padding:var(--spacing-md);background:linear-gradient(135deg, var(--primary-color), var(--primary-dark));border:none;border-radius:var(--radius-md);color:white;font-size:var(--text-base);font-weight:var(--font-semibold);cursor:pointer;transition:all var(--transition-normal);position:relative;overflow:hidden}.login-btn[data-v-700c0eb7]:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow-lg)}.login-btn[data-v-700c0eb7]:active{transform:translateY(0)}.login-btn[data-v-700c0eb7]:disabled{opacity:0.7;cursor:not-allowed}.btn-text[data-v-700c0eb7]{position:relative;z-index:1}.btn-loader[data-v-700c0eb7]{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:20px;height:20px;border:2px solid rgba(255,255,255,0.3);border-top:2px solid white;border-radius:50%;animation:spin-700c0eb7 1s linear infinite}@keyframes spin-700c0eb7{0%{transform:translate(-50%, -50%) rotate(0deg)}100%{transform:translate(-50%, -50%) rotate(360deg)}}.action-buttons[data-v-700c0eb7]{margin-top:var(--spacing-xl);text-align:center}.member-notification-btn[data-v-700c0eb7]{display:inline-flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:var(--radius-md);color:white;font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-normal)}.member-notification-btn[data-v-700c0eb7]:hover{background:rgba(255,255,255,0.2);transform:translateY(-1px)}.member-notification-btn svg[data-v-700c0eb7]{width:16px;height:16px}@media (max-width: 767px){.container[data-v-700c0eb7]{padding:var(--spacing-md)}.login-card[data-v-700c0eb7]{padding:var(--spacing-xl)}.captcha-group[data-v-700c0eb7]{flex-direction:column}.captcha-image[data-v-700c0eb7]{flex:none;width:100%}}.quick-access[data-v-700c0eb7]{margin-top:var(--spacing-lg);display:flex;gap:var(--spacing-md);justify-content:center}.quick-access .quick-btn[data-v-700c0eb7]{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:var(--radius-lg);color:white;font-size:14px;font-weight:500;cursor:pointer;transition:all 0.3s ease;backdrop-filter:blur(10px)}.quick-access .quick-btn[data-v-700c0eb7]:hover{background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.3);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.2)}.quick-access .quick-btn i[data-v-700c0eb7]{font-size:12px}@media (max-width: 767px){.quick-access[data-v-700c0eb7]{flex-direction:column}.quick-access .quick-btn[data-v-700c0eb7]{justify-content:center}}
.header[data-v-fcfb665e]{display:flex;align-items:center;justify-content:space-between;height:70px;background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,0.2);padding:0 24px;position:sticky;top:0;z-index:1000;box-shadow:0 2px 20px rgba(0,0,0,0.1)}.header-left[data-v-fcfb665e]{display:flex;align-items:center}.platform-logo[data-v-fcfb665e]{height:40px;width:auto}.header-center[data-v-fcfb665e]{flex:1;max-width:500px;margin:0 40px}.search-container[data-v-fcfb665e]{position:relative;width:100%}.search-icon[data-v-fcfb665e]{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:#64748b;font-size:16px;z-index:1}.search-input[data-v-fcfb665e]{width:100%;height:44px;padding:0 16px 0 48px;border:2px solid #e2e8f0;border-radius:22px;background:rgba(255,255,255,0.9);font-size:14px;transition:all 0.3s ease}.search-input[data-v-fcfb665e]:focus{outline:none;border-color:#3b82f6;background:white;box-shadow:0 0 0 3px rgba(59,130,246,0.1)}.search-input[data-v-fcfb665e]::placeholder{color:#94a3b8}.search-shortcut[data-v-fcfb665e]{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:#f1f5f9;color:#64748b;font-size:11px;padding:2px 6px;border-radius:4px;font-weight:500}.header-right[data-v-fcfb665e]{display:flex;align-items:center;gap:16px}.todo-btn[data-v-fcfb665e],.notification-btn[data-v-fcfb665e],.user-menu-btn[data-v-fcfb665e]{position:relative;display:flex;align-items:center;gap:8px;padding:8px 16px;background:rgba(255,255,255,0.8);border:1px solid #e2e8f0;border-radius:12px;cursor:pointer;transition:all 0.3s ease;font-size:14px;color:#475569}.todo-btn[data-v-fcfb665e]:hover,.notification-btn[data-v-fcfb665e]:hover,.user-menu-btn[data-v-fcfb665e]:hover{background:white;border-color:#3b82f6;color:#3b82f6;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.1)}.todo-btn i[data-v-fcfb665e],.notification-btn i[data-v-fcfb665e],.user-menu-btn i[data-v-fcfb665e]{font-size:18px}.todo-badge[data-v-fcfb665e],.notification-badge[data-v-fcfb665e]{position:absolute;top:-4px;right:-4px;background:#ef4444;color:white;font-size:10px;font-weight:600;padding:2px 6px;border-radius:10px;min-width:18px;text-align:center;line-height:1.2}.system-management[data-v-fcfb665e]{display:flex;align-items:center;gap:8px;padding:8px 16px;background:linear-gradient(135deg, #3b82f6, #1d4ed8);color:white;text-decoration:none;border-radius:12px;font-size:14px;font-weight:500;transition:all 0.3s ease}.system-management[data-v-fcfb665e]:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(59,130,246,0.3);color:white}.system-management i[data-v-fcfb665e]{font-size:16px}.user-dropdown[data-v-fcfb665e]{position:absolute;top:100%;right:24px;background:white;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,0.15);border:1px solid #e2e8f0;overflow:hidden;z-index:1001;min-width:160px;opacity:0;transform:translateY(-10px);transition:all 0.3s ease}.user-dropdown.show[data-v-fcfb665e]{opacity:1;transform:translateY(0)}.dropdown-item[data-v-fcfb665e]{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;transition:background 0.2s ease;color:#475569;font-size:14px}.dropdown-item[data-v-fcfb665e]:hover{background:#f8fafc;color:#3b82f6}.dropdown-item i[data-v-fcfb665e]{width:16px;text-align:center}@media (max-width: 768px){.header[data-v-fcfb665e]{padding:0 16px}.header-center[data-v-fcfb665e]{margin:0 16px}.search-shortcut[data-v-fcfb665e]{display:none}.header-right[data-v-fcfb665e]{gap:8px}.todo-btn[data-v-fcfb665e],.notification-btn[data-v-fcfb665e],.user-menu-btn[data-v-fcfb665e]{padding:8px 12px}.todo-btn .user-name[data-v-fcfb665e],.notification-btn .user-name[data-v-fcfb665e],.user-menu-btn .user-name[data-v-fcfb665e]{display:none}.system-management span[data-v-fcfb665e]{display:none}}
.floating-nav[data-v-0a1b5d64]{position:fixed;right:20px;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,0.15);border:1px solid rgba(255,255,255,0.2);z-index:1000;transition:all 0.3s ease;min-width:60px;max-width:300px;overflow:hidden}.floating-nav.expanded[data-v-0a1b5d64]{min-width:280px}.floating-nav-header[data-v-0a1b5d64]{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e2e8f0;background:rgba(255,255,255,0.8)}.floating-nav-title[data-v-0a1b5d64]{font-size:16px;font-weight:600;color:#1e293b;margin:0;opacity:0;transition:opacity 0.3s ease}.expanded .floating-nav-title[data-v-0a1b5d64]{opacity:1}.toggle-btn[data-v-0a1b5d64]{width:32px;height:32px;border-radius:8px;background:#f1f5f9;border:1px solid #e2e8f0;color:#64748b;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease}.toggle-btn[data-v-0a1b5d64]:hover{background:#3b82f6;color:white;border-color:#3b82f6}.toggle-btn i[data-v-0a1b5d64]{font-size:14px}.floating-nav-content[data-v-0a1b5d64]{padding:16px 20px;max-height:400px;overflow-y:auto}.nav-group[data-v-0a1b5d64]{margin-bottom:20px}.nav-group[data-v-0a1b5d64]:last-child{margin-bottom:0}.nav-group-title[data-v-0a1b5d64]{font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px;padding:0 4px}.nav-items[data-v-0a1b5d64]{display:flex;flex-direction:column;gap:4px}.nav-item-link[data-v-0a1b5d64]{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:8px;color:#475569;text-decoration:none;font-size:14px;transition:all 0.3s ease;cursor:pointer}.nav-item-link[data-v-0a1b5d64]:hover{background:#f8fafc;color:#3b82f6;transform:translateX(4px)}.nav-item-link i[data-v-0a1b5d64]{width:16px;text-align:center;font-size:14px}.nav-item-link span[data-v-0a1b5d64]{font-weight:500}@media (max-width: 768px){.floating-nav[data-v-0a1b5d64]{display:none}}.floating-nav-content[data-v-0a1b5d64]::-webkit-scrollbar{width:4px}.floating-nav-content[data-v-0a1b5d64]::-webkit-scrollbar-track{background:#f1f5f9;border-radius:2px}.floating-nav-content[data-v-0a1b5d64]::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}.floating-nav-content[data-v-0a1b5d64]::-webkit-scrollbar-thumb:hover{background:#94a3b8}
.system-tabs[data-v-2514b4b8]{background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);border-radius:16px;margin-bottom:20px;box-shadow:0 4px 20px rgba(0,0,0,0.08);border:1px solid rgba(255,255,255,0.2)}.tabs-container[data-v-2514b4b8]{padding:20px}.tabs-header[data-v-2514b4b8]{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.tabs-title[data-v-2514b4b8]{font-size:18px;font-weight:600;color:#1e293b;margin:0}.tabs-actions[data-v-2514b4b8]{display:flex;gap:8px}.tab-action-btn[data-v-2514b4b8]{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;color:#64748b;font-size:14px;cursor:pointer;transition:all 0.3s ease}.tab-action-btn[data-v-2514b4b8]:hover{background:#f1f5f9;border-color:#cbd5e1}.tab-action-btn.active[data-v-2514b4b8]{background:#3b82f6;border-color:#3b82f6;color:white}.tab-action-btn i[data-v-2514b4b8]{font-size:14px}.tabs-content[data-v-2514b4b8]{overflow-x:auto;padding-bottom:8px}.tabs-list[data-v-2514b4b8]{display:flex;gap:8px;min-width:max-content}.tab-item[data-v-2514b4b8]{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;color:#64748b;font-size:14px;cursor:pointer;transition:all 0.3s ease;white-space:nowrap;position:relative;min-height:50px}.tab-item[data-v-2514b4b8]:hover{background:#f1f5f9;border-color:#cbd5e1;transform:translateY(-1px)}.tab-item.active[data-v-2514b4b8]{background:linear-gradient(135deg, #3b82f6, #1d4ed8);border-color:#3b82f6;color:white;box-shadow:0 4px 12px rgba(59,130,246,0.3)}.tab-item.active .tab-icon[data-v-2514b4b8]{color:white}.tab-icon[data-v-2514b4b8]{font-size:16px;width:20px;text-align:center;color:#64748b;transition:color 0.3s ease}.tab-title[data-v-2514b4b8]{font-weight:500}.tab-badge[data-v-2514b4b8]{padding:2px 8px;border-radius:12px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}.tab-badge.new[data-v-2514b4b8]{background:#10b981;color:white}.tab-badge.hot[data-v-2514b4b8]{background:#ef4444;color:white}.tab-badge.beta[data-v-2514b4b8]{background:#f59e0b;color:white}.tab-count[data-v-2514b4b8]{position:absolute;top:-4px;right:-4px;background:#ef4444;color:white;font-size:10px;font-weight:600;padding:2px 6px;border-radius:10px;min-width:18px;text-align:center;line-height:1.2}@media (max-width: 1200px){.tabs-list[data-v-2514b4b8]{gap:6px}.tab-item[data-v-2514b4b8]{padding:10px 14px;font-size:13px;min-height:46px}.tab-icon[data-v-2514b4b8]{font-size:14px;width:18px}}@media (max-width: 768px){.tabs-container[data-v-2514b4b8]{padding:16px}.tabs-header[data-v-2514b4b8]{flex-direction:column;align-items:flex-start;gap:12px}.tabs-title[data-v-2514b4b8]{font-size:16px}.tabs-list[data-v-2514b4b8]{gap:4px}.tab-item[data-v-2514b4b8]{padding:8px 12px;font-size:12px;min-height:42px}.tab-icon[data-v-2514b4b8]{font-size:13px;width:16px}.tab-title[data-v-2514b4b8]{font-size:12px}}@media (max-width: 480px){.tabs-list[data-v-2514b4b8]{flex-wrap:wrap}.tab-item[data-v-2514b4b8]{flex:1;min-width:120px;justify-content:center}.tab-title[data-v-2514b4b8]{display:none}.tab-icon[data-v-2514b4b8]{font-size:16px}}.tabs-content[data-v-2514b4b8]::-webkit-scrollbar{height:4px}.tabs-content[data-v-2514b4b8]::-webkit-scrollbar-track{background:#f1f5f9;border-radius:2px}.tabs-content[data-v-2514b4b8]::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:2px}.tabs-content[data-v-2514b4b8]::-webkit-scrollbar-thumb:hover{background:#94a3b8}
.system-card[data-v-53abe8aa]{position:relative;background:white;border-radius:16px;padding:24px;box-shadow:0 4px 20px rgba(0,0,0,0.08);border:1px solid #e2e8f0;cursor:pointer;transition:all 0.3s ease;overflow:hidden;display:flex;flex-direction:column;min-height:200px}.system-card[data-v-53abe8aa]:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.15);border-color:#3b82f6}.system-card:hover .card-hover-effect[data-v-53abe8aa]{opacity:1}.system-card:hover .card-action-btn[data-v-53abe8aa]{opacity:1;transform:translateX(0)}.system-card[data-v-53abe8aa]:focus{outline:2px solid #3b82f6;outline-offset:2px}.system-card.list-view[data-v-53abe8aa]{flex-direction:row;align-items:center;min-height:auto;padding:20px}.system-card.list-view .card-icon[data-v-53abe8aa]{margin-right:20px;margin-bottom:0;flex-shrink:0}.system-card.list-view .card-content[data-v-53abe8aa]{flex:1}.system-card.list-view .card-actions[data-v-53abe8aa]{margin-left:20px}.card-icon[data-v-53abe8aa]{width:60px;height:60px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;position:relative;overflow:hidden}.card-icon[data-v-53abe8aa]::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1));border-radius:16px}.card-icon i[data-v-53abe8aa]{font-size:24px;color:white;position:relative;z-index:1}.card-content[data-v-53abe8aa]{flex:1;display:flex;flex-direction:column}.card-title[data-v-53abe8aa]{font-size:18px;font-weight:600;color:#1e293b;margin:0 0 8px 0;line-height:1.4}.card-description[data-v-53abe8aa]{font-size:14px;color:#64748b;margin:0 0 16px 0;line-height:1.5;flex:1}.card-meta[data-v-53abe8aa]{display:flex;align-items:center;gap:12px;margin-top:auto}.card-status[data-v-53abe8aa]{padding:4px 12px;border-radius:20px;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:0.5px}.card-status.status-online[data-v-53abe8aa]{background:#dcfce7;color:#166534}.card-status.status-offline[data-v-53abe8aa]{background:#fee2e2;color:#991b1b}.card-status.status-maintenance[data-v-53abe8aa]{background:#fef3c7;color:#92400e}.card-users[data-v-53abe8aa]{font-size:12px;color:#64748b;font-weight:500}.card-actions[data-v-53abe8aa]{position:absolute;top:20px;right:20px}.card-action-btn[data-v-53abe8aa]{width:36px;height:36px;border-radius:50%;background:rgba(59,130,246,0.1);border:1px solid rgba(59,130,246,0.2);color:#3b82f6;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;opacity:0;transform:translateX(10px)}.card-action-btn[data-v-53abe8aa]:hover{background:#3b82f6;color:white;transform:translateX(0) scale(1.1)}.card-action-btn i[data-v-53abe8aa]{font-size:14px}.card-hover-effect[data-v-53abe8aa]{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg, rgba(59,130,246,0.05), rgba(147,51,234,0.05));opacity:0;transition:opacity 0.3s ease;pointer-events:none}.status-online .card-icon[data-v-53abe8aa]{box-shadow:0 0 20px rgba(16,185,129,0.3)}.status-maintenance .card-icon[data-v-53abe8aa]{box-shadow:0 0 20px rgba(245,158,11,0.3)}.status-offline .card-icon[data-v-53abe8aa]{box-shadow:0 0 20px rgba(239,68,68,0.3)}@media (max-width: 768px){.system-card[data-v-53abe8aa]{padding:20px;min-height:180px}.system-card.list-view[data-v-53abe8aa]{padding:16px}.card-icon[data-v-53abe8aa]{width:50px;height:50px;margin-bottom:16px}.card-icon i[data-v-53abe8aa]{font-size:20px}.card-title[data-v-53abe8aa]{font-size:16px}.card-description[data-v-53abe8aa]{font-size:13px}.card-actions[data-v-53abe8aa]{top:16px;right:16px}.card-action-btn[data-v-53abe8aa]{width:32px;height:32px}.card-action-btn i[data-v-53abe8aa]{font-size:12px}}
.right-panel[data-v-af1a8710]{width:320px;background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);border-left:1px solid rgba(255,255,255,0.2);overflow-y:auto;height:calc(100vh - 70px)}.panel-content[data-v-af1a8710]{padding:20px;display:flex;flex-direction:column;gap:24px}.section-header[data-v-af1a8710]{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title[data-v-af1a8710]{font-size:16px;font-weight:600;color:#1e293b;margin:0}.reminder-count[data-v-af1a8710]{background:#3b82f6;color:white;font-size:12px;font-weight:600;padding:4px 8px;border-radius:12px;min-width:20px;text-align:center}.calendar-controls[data-v-af1a8710]{display:flex;align-items:center;gap:12px}.nav-btn[data-v-af1a8710]{width:28px;height:28px;border-radius:6px;background:#f1f5f9;border:1px solid #e2e8f0;color:#64748b;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease}.nav-btn[data-v-af1a8710]:hover{background:#3b82f6;color:white;border-color:#3b82f6}.nav-btn i[data-v-af1a8710]{font-size:12px}.current-month[data-v-af1a8710]{font-size:14px;font-weight:500;color:#475569;min-width:100px;text-align:center}.calendar-grid[data-v-af1a8710]{background:white;border-radius:12px;border:1px solid #e2e8f0;overflow:hidden}.calendar-header[data-v-af1a8710]{display:grid;grid-template-columns:repeat(7, 1fr);background:#f8fafc;border-bottom:1px solid #e2e8f0}.calendar-day-header[data-v-af1a8710]{padding:8px 4px;text-align:center;font-size:12px;font-weight:600;color:#64748b}.calendar-body[data-v-af1a8710]{display:grid;grid-template-columns:repeat(7, 1fr)}.calendar-day[data-v-af1a8710]{aspect-ratio:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s ease;border-right:1px solid #f1f5f9;border-bottom:1px solid #f1f5f9}.calendar-day[data-v-af1a8710]:hover{background:#f8fafc}.calendar-day.today[data-v-af1a8710]{background:#dbeafe;color:#1d4ed8;font-weight:600}.calendar-day.selected[data-v-af1a8710]{background:#3b82f6;color:white}.calendar-day.other-month[data-v-af1a8710]{color:#cbd5e1}.day-number[data-v-af1a8710]{font-size:14px;font-weight:500}.reminders-list[data-v-af1a8710]{display:flex;flex-direction:column;gap:8px}.reminder-item[data-v-af1a8710]{display:flex;align-items:center;gap:12px;padding:12px;background:white;border-radius:8px;border:1px solid #e2e8f0;transition:all 0.3s ease}.reminder-item[data-v-af1a8710]:hover{border-color:#3b82f6;box-shadow:0 2px 8px rgba(59,130,246,0.1)}.reminder-icon[data-v-af1a8710]{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:white;font-size:14px}.type-meeting .reminder-icon[data-v-af1a8710]{background:#3b82f6}.type-task .reminder-icon[data-v-af1a8710]{background:#10b981}.type-deadline .reminder-icon[data-v-af1a8710]{background:#f59e0b}.type-notification .reminder-icon[data-v-af1a8710]{background:#ef4444}.reminder-content[data-v-af1a8710]{flex:1}.reminder-title[data-v-af1a8710]{font-size:14px;font-weight:500;color:#1e293b;margin-bottom:2px}.reminder-time[data-v-af1a8710]{font-size:12px;color:#64748b}.reminder-remove[data-v-af1a8710]{width:24px;height:24px;border-radius:4px;background:#fee2e2;border:none;color:#ef4444;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease}.reminder-remove[data-v-af1a8710]:hover{background:#ef4444;color:white}.reminder-remove i[data-v-af1a8710]{font-size:10px}.todo-filters[data-v-af1a8710]{display:flex;gap:4px}.filter-btn[data-v-af1a8710]{padding:4px 8px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;color:#64748b;font-size:12px;cursor:pointer;transition:all 0.3s ease}.filter-btn[data-v-af1a8710]:hover{background:#f1f5f9}.filter-btn.active[data-v-af1a8710]{background:#3b82f6;border-color:#3b82f6;color:white}.todos-list[data-v-af1a8710]{display:flex;flex-direction:column;gap:8px}.todo-item[data-v-af1a8710]{display:flex;align-items:center;gap:12px;padding:12px;background:white;border-radius:8px;border:1px solid #e2e8f0;transition:all 0.3s ease}.todo-item[data-v-af1a8710]:hover{border-color:#3b82f6;box-shadow:0 2px 8px rgba(59,130,246,0.1)}.todo-item.completed[data-v-af1a8710]{opacity:0.6}.todo-item.completed .todo-title[data-v-af1a8710]{text-decoration:line-through;color:#94a3b8}.todo-checkbox[data-v-af1a8710]{width:20px;height:20px;border-radius:4px;background:#f8fafc;border:1px solid #e2e8f0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;color:#64748b}.todo-checkbox[data-v-af1a8710]:hover{border-color:#3b82f6;color:#3b82f6}.todo-checkbox i[data-v-af1a8710]{font-size:12px}.todo-content[data-v-af1a8710]{flex:1}.todo-title[data-v-af1a8710]{font-size:14px;font-weight:500;color:#1e293b;margin-bottom:2px}.todo-meta[data-v-af1a8710]{display:flex;gap:8px;font-size:12px;color:#64748b}.todo-category[data-v-af1a8710]{background:#f1f5f9;padding:2px 6px;border-radius:4px}.todo-remove[data-v-af1a8710]{width:24px;height:24px;border-radius:4px;background:#fee2e2;border:none;color:#ef4444;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease}.todo-remove[data-v-af1a8710]:hover{background:#ef4444;color:white}.todo-remove i[data-v-af1a8710]{font-size:10px}@media (max-width: 1200px){.right-panel[data-v-af1a8710]{width:280px}.panel-content[data-v-af1a8710]{padding:16px}}@media (max-width: 992px){.right-panel[data-v-af1a8710]{display:none}}
.custom-system-manager[data-v-0d571e44]{display:flex;flex-direction:column;gap:24px}.stats-section[data-v-0d571e44]{background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);border-radius:12px;padding:20px;color:white}.stats-grid[data-v-0d571e44]{display:grid;grid-template-columns:repeat(3, 1fr);gap:20px}.stat-item[data-v-0d571e44]{text-align:center}.stat-value[data-v-0d571e44]{font-size:32px;font-weight:700;margin-bottom:4px}.stat-label[data-v-0d571e44]{font-size:14px;opacity:0.9}.actions-section[data-v-0d571e44]{display:flex;justify-content:space-between;align-items:center;gap:16px}.search-container[data-v-0d571e44]{position:relative;flex:1;max-width:300px}.search-icon[data-v-0d571e44]{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#64748b;font-size:14px}.search-input[data-v-0d571e44]{width:100%;padding:8px 12px 8px 36px;border:1px solid #e2e8f0;border-radius:8px;font-size:14px;transition:border-color 0.3s ease}.search-input[data-v-0d571e44]:focus{outline:none;border-color:#3b82f6}.action-buttons[data-v-0d571e44]{display:flex;gap:8px}.action-btn[data-v-0d571e44]{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;color:#475569;font-size:14px;cursor:pointer;transition:all 0.3s ease}.action-btn[data-v-0d571e44]:hover{background:#f1f5f9;border-color:#cbd5e1}.action-btn.primary[data-v-0d571e44]{background:#3b82f6;border-color:#3b82f6;color:white}.action-btn.primary[data-v-0d571e44]:hover{background:#1d4ed8;border-color:#1d4ed8}.action-btn.small[data-v-0d571e44]{padding:6px 8px;font-size:12px}.action-btn.danger[data-v-0d571e44]{background:#fee2e2;border-color:#fecaca;color:#dc2626}.action-btn.danger[data-v-0d571e44]:hover{background:#ef4444;border-color:#ef4444;color:white}.systems-section[data-v-0d571e44]{background:white;border-radius:12px;border:1px solid #e2e8f0;overflow:hidden}.systems-header[data-v-0d571e44]{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#f8fafc;border-bottom:1px solid #e2e8f0}.section-title[data-v-0d571e44]{font-size:16px;font-weight:600;color:#1e293b;margin:0}.view-controls[data-v-0d571e44]{display:flex;gap:4px}.view-btn[data-v-0d571e44]{width:32px;height:32px;border:1px solid #e2e8f0;background:white;border-radius:6px;color:#64748b;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease}.view-btn[data-v-0d571e44]:hover{border-color:#3b82f6;color:#3b82f6}.view-btn.active[data-v-0d571e44]{background:#3b82f6;border-color:#3b82f6;color:white}.view-btn i[data-v-0d571e44]{font-size:14px}.systems-grid[data-v-0d571e44]{display:grid;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:16px;padding:20px}.systems-grid.list-view[data-v-0d571e44]{grid-template-columns:1fr}.systems-grid.list-view .system-item[data-v-0d571e44]{flex-direction:row;align-items:center}.systems-grid.list-view .system-item .system-icon[data-v-0d571e44]{margin-right:16px;margin-bottom:0}.systems-grid.list-view .system-item .system-content[data-v-0d571e44]{flex:1}.system-item[data-v-0d571e44]{display:flex;flex-direction:column;padding:16px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;transition:all 0.3s ease}.system-item[data-v-0d571e44]:hover{border-color:#3b82f6;box-shadow:0 2px 8px rgba(59,130,246,0.1)}.system-icon[data-v-0d571e44]{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;color:white}.system-icon i[data-v-0d571e44]{font-size:20px}.system-content[data-v-0d571e44]{flex:1;margin-bottom:12px}.system-name[data-v-0d571e44]{font-size:16px;font-weight:600;color:#1e293b;margin:0 0 4px 0}.system-description[data-v-0d571e44]{font-size:14px;color:#64748b;margin:0 0 8px 0;line-height:1.4}.system-meta[data-v-0d571e44]{display:flex;gap:8px;align-items:center}.system-category[data-v-0d571e44]{background:#e0e7ff;color:#3730a3;font-size:12px;padding:2px 8px;border-radius:12px;font-weight:500}.system-status[data-v-0d571e44]{font-size:12px;padding:2px 8px;border-radius:12px;font-weight:500}.system-status.status-online[data-v-0d571e44]{background:#dcfce7;color:#166534}.system-status.status-offline[data-v-0d571e44]{background:#fee2e2;color:#991b1b}.system-status.status-maintenance[data-v-0d571e44]{background:#fef3c7;color:#92400e}.system-actions[data-v-0d571e44]{display:flex;gap:8px;justify-content:flex-end}.empty-state[data-v-0d571e44]{grid-column:1 / -1;text-align:center;padding:40px 20px;color:#64748b}.empty-icon[data-v-0d571e44]{font-size:48px;color:#cbd5e1;margin-bottom:16px}.empty-title[data-v-0d571e44]{font-size:18px;font-weight:600;color:#475569;margin:0 0 8px 0}.empty-description[data-v-0d571e44]{font-size:14px;margin:0 0 20px 0}.modal-overlay[data-v-0d571e44]{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all 0.3s ease;z-index:3000}.modal-overlay.show[data-v-0d571e44]{opacity:1;visibility:visible}.modal[data-v-0d571e44]{background:white;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,0.3);max-width:500px;width:90%;max-height:80vh;overflow:hidden;transform:scale(0.9) translateY(20px);transition:all 0.3s ease}.modal-overlay.show .modal[data-v-0d571e44]{transform:scale(1) translateY(0)}.modal-header[data-v-0d571e44]{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #e2e8f0;background:#f8fafc}.modal-title[data-v-0d571e44]{font-size:18px;font-weight:600;color:#1e293b;margin:0}.modal-close[data-v-0d571e44]{width:32px;height:32px;border-radius:8px;background:#f1f5f9;border:1px solid #e2e8f0;color:#64748b;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease}.modal-close[data-v-0d571e44]:hover{background:#ef4444;border-color:#ef4444;color:white}.modal-close i[data-v-0d571e44]{font-size:14px}.modal-content[data-v-0d571e44]{padding:24px;max-height:60vh;overflow-y:auto}.form-group[data-v-0d571e44]{margin-bottom:20px}.form-row[data-v-0d571e44]{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-label[data-v-0d571e44]{display:block;font-size:14px;font-weight:500;color:#374151;margin-bottom:6px}.form-input[data-v-0d571e44],.form-textarea[data-v-0d571e44],.form-select[data-v-0d571e44]{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;transition:border-color 0.3s ease}.form-input[data-v-0d571e44]:focus,.form-textarea[data-v-0d571e44]:focus,.form-select[data-v-0d571e44]:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,0.1)}.form-textarea[data-v-0d571e44]{resize:vertical;min-height:80px}.color-picker[data-v-0d571e44]{display:flex;gap:8px;flex-wrap:wrap}.color-option[data-v-0d571e44]{width:32px;height:32px;border-radius:8px;cursor:pointer;border:2px solid transparent;transition:all 0.3s ease}.color-option[data-v-0d571e44]:hover{transform:scale(1.1)}.color-option.active[data-v-0d571e44]{border-color:#1e293b;box-shadow:0 0 0 2px white, 0 0 0 4px #1e293b}.form-actions[data-v-0d571e44]{display:flex;gap:12px;justify-content:flex-end;margin-top:24px}.btn[data-v-0d571e44]{padding:10px 20px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all 0.3s ease;border:1px solid transparent}.btn.secondary[data-v-0d571e44]{background:#f8fafc;border-color:#e2e8f0;color:#475569}.btn.secondary[data-v-0d571e44]:hover{background:#f1f5f9;border-color:#cbd5e1}.btn.primary[data-v-0d571e44]{background:#3b82f6;border-color:#3b82f6;color:white}.btn.primary[data-v-0d571e44]:hover{background:#1d4ed8;border-color:#1d4ed8}@media (max-width: 768px){.stats-grid[data-v-0d571e44]{grid-template-columns:1fr;gap:16px}.actions-section[data-v-0d571e44]{flex-direction:column;align-items:stretch}.search-container[data-v-0d571e44]{max-width:none}.systems-grid[data-v-0d571e44]{grid-template-columns:1fr;padding:16px}.form-row[data-v-0d571e44]{grid-template-columns:1fr}.modal[data-v-0d571e44]{width:95%;margin:20px}}
.modal-container[data-v-52a52df2]{position:fixed;top:0;left:0;right:0;bottom:0;z-index:2000;pointer-events:none}.modal-overlay[data-v-52a52df2]{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all 0.3s ease;pointer-events:none}.modal-overlay.show[data-v-52a52df2]{opacity:1;visibility:visible;pointer-events:all}.modal[data-v-52a52df2]{background:white;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,0.3);max-width:500px;width:90%;max-height:80vh;overflow:hidden;transform:scale(0.9) translateY(20px);transition:all 0.3s ease}.modal-overlay.show .modal[data-v-52a52df2]{transform:scale(1) translateY(0)}.modal.large[data-v-52a52df2]{max-width:800px}.modal-header[data-v-52a52df2]{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #e2e8f0;background:#f8fafc}.modal-title[data-v-52a52df2]{font-size:18px;font-weight:600;color:#1e293b;margin:0}.modal-close[data-v-52a52df2]{width:32px;height:32px;border-radius:8px;background:#f1f5f9;border:1px solid #e2e8f0;color:#64748b;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease}.modal-close[data-v-52a52df2]:hover{background:#ef4444;border-color:#ef4444;color:white}.modal-close i[data-v-52a52df2]{font-size:14px}.modal-content[data-v-52a52df2]{padding:24px;max-height:60vh;overflow-y:auto}.shortcut-list[data-v-52a52df2]{display:flex;flex-direction:column;gap:16px}.shortcut-item[data-v-52a52df2]{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#f8fafc;border-radius:8px;border:1px solid #e2e8f0}.shortcut-keys[data-v-52a52df2]{display:flex;align-items:center;gap:4px;font-family:'Monaco', 'Menlo', 'Ubuntu Mono', monospace}kbd[data-v-52a52df2]{background:#1e293b;color:white;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:600;box-shadow:0 2px 4px rgba(0,0,0,0.2)}.shortcut-description[data-v-52a52df2]{font-size:14px;color:#475569;font-weight:500}.system-management-content[data-v-52a52df2]{text-align:center}.system-management-content p[data-v-52a52df2]{font-size:16px;color:#64748b;margin-bottom:24px}.management-options[data-v-52a52df2]{display:grid;grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));gap:16px}.management-btn[data-v-52a52df2]{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;cursor:pointer;transition:all 0.3s ease}.management-btn[data-v-52a52df2]:hover{background:#3b82f6;border-color:#3b82f6;color:white;transform:translateY(-2px);box-shadow:0 4px 12px rgba(59,130,246,0.3)}.management-btn i[data-v-52a52df2]{font-size:24px;color:#64748b;transition:color 0.3s ease}.management-btn:hover i[data-v-52a52df2]{color:white}.management-btn span[data-v-52a52df2]{font-size:14px;font-weight:500;color:#475569;transition:color 0.3s ease}.management-btn:hover span[data-v-52a52df2]{color:white}@media (max-width: 768px){.modal[data-v-52a52df2]{width:95%;margin:20px}.modal-header[data-v-52a52df2]{padding:16px 20px}.modal-content[data-v-52a52df2]{padding:20px}.management-options[data-v-52a52df2]{grid-template-columns:1fr}.shortcut-item[data-v-52a52df2]{flex-direction:column;align-items:flex-start;gap:8px}}.modal-content[data-v-52a52df2]::-webkit-scrollbar{width:6px}.modal-content[data-v-52a52df2]::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.modal-content[data-v-52a52df2]::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.modal-content[data-v-52a52df2]::-webkit-scrollbar-thumb:hover{background:#94a3b8}
[data-v-f6d3620c]:root{--primary-color: #3b82f6;--primary-dark: #1d4ed8;--primary-light: #60a5fa;--secondary-color: #64748b;--accent-color: #f59e0b;--gray-50: #f8fafc;--gray-100: #f1f5f9;--gray-200: #e2e8f0;--gray-300: #cbd5e1;--gray-400: #94a3b8;--gray-500: #64748b;--gray-600: #475569;--gray-700: #334155;--gray-800: #1e293b;--gray-900: #0f172a;--success-color: #10b981;--warning-color: #f59e0b;--error-color: #ef4444;--info-color: #3b82f6;--bg-primary: #ffffff;--bg-secondary: #f8fafc;--bg-tertiary: #f1f5f9;--bg-dark: #1e293b;--bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--text-primary: #1e293b;--text-secondary: #475569;--text-tertiary: #64748b;--text-inverse: #ffffff;--border-light: #e2e8f0;--border-medium: #cbd5e1;--border-dark: #94a3b8;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--text-xs: 12px;--text-sm: 14px;--text-base: 16px;--text-lg: 18px;--text-xl: 20px;--text-2xl: 24px;--text-3xl: 30px;--text-4xl: 36px;--font-light: 300;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--font-extrabold: 800;--leading-tight: 1.25;--leading-normal: 1.5;--leading-relaxed: 1.625;--transition-fast: 0.15s ease;--transition-normal: 0.3s ease;--transition-slow: 0.5s ease;--z-dropdown: 1000;--z-sticky: 1020;--z-fixed: 1030;--z-modal-backdrop: 1040;--z-modal: 1050;--z-popover: 1060;--z-tooltip: 1070;--breakpoint-sm: 640px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px;--breakpoint-2xl: 1536px}.dashboard[data-v-f6d3620c]{min-height:100vh;background:var(--bg-gradient);position:relative}.main-container[data-v-f6d3620c]{display:flex;min-height:calc(100vh - 70px);position:relative}.main-content[data-v-f6d3620c]{flex:1;padding:var(--spacing-lg);overflow-y:auto;position:relative;z-index:1}.systems-section[data-v-f6d3620c]{background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);border-radius:var(--radius-xl);padding:var(--spacing-xl);margin-bottom:var(--spacing-lg);box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,0.2);position:relative;overflow:hidden}.systems-section[data-v-f6d3620c]::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg, var(--primary-color), var(--accent-color))}.systems-header[data-v-f6d3620c]{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-md);border-bottom:1px solid var(--border-light)}.systems-title[data-v-f6d3620c]{font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--text-primary);margin:0;position:relative}.systems-title[data-v-f6d3620c]::after{content:'';position:absolute;bottom:-8px;left:0;width:40px;height:3px;background:var(--primary-color);border-radius:var(--radius-full)}.systems-actions[data-v-f6d3620c]{display:flex;gap:var(--spacing-sm)}.view-toggle-btn[data-v-f6d3620c]{width:40px;height:40px;border:1px solid var(--border-light);background:white;border-radius:var(--radius-md);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-normal);color:var(--text-secondary)}.view-toggle-btn[data-v-f6d3620c]:hover{border-color:var(--primary-color);color:var(--primary-color);transform:translateY(-1px)}.view-toggle-btn.active[data-v-f6d3620c]{background:var(--primary-color);border-color:var(--primary-color);color:white;box-shadow:var(--shadow-md)}.view-toggle-btn i[data-v-f6d3620c]{font-size:var(--text-base)}.systems-grid[data-v-f6d3620c]{display:grid;grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));gap:var(--spacing-lg)}.systems-grid.list-view[data-v-f6d3620c]{grid-template-columns:1fr}.systems-grid.list-view .system-card[data-v-f6d3620c]{display:flex;flex-direction:row;align-items:center;min-height:auto;padding:var(--spacing-lg)}.systems-grid.list-view .system-card .card-icon[data-v-f6d3620c]{margin-right:var(--spacing-lg);margin-bottom:0;flex-shrink:0}.systems-grid.list-view .system-card .card-content[data-v-f6d3620c]{flex:1;margin-bottom:0}.systems-grid.list-view .system-card .card-actions[data-v-f6d3620c]{margin-left:var(--spacing-lg)}.system-card[data-v-f6d3620c]{background:white;border-radius:var(--radius-xl);padding:var(--spacing-xl);box-shadow:var(--shadow-md);border:1px solid var(--border-light);cursor:pointer;transition:all var(--transition-normal);overflow:hidden;position:relative;display:flex;flex-direction:column;min-height:200px}.system-card[data-v-f6d3620c]:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl);border-color:var(--primary-color)}.system-card:hover .card-hover-effect[data-v-f6d3620c]{opacity:1}.system-card:hover .card-action-btn[data-v-f6d3620c]{opacity:1;transform:translateX(0)}.system-card[data-v-f6d3620c]:focus{outline:2px solid var(--primary-color);outline-offset:2px}.card-icon[data-v-f6d3620c]{width:60px;height:60px;border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;margin-bottom:var(--spacing-lg);position:relative;overflow:hidden}.card-icon[data-v-f6d3620c]::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1));border-radius:var(--radius-xl)}.card-icon i[data-v-f6d3620c]{font-size:var(--text-2xl);color:white;position:relative;z-index:1}.card-content[data-v-f6d3620c]{flex:1;display:flex;flex-direction:column;margin-bottom:var(--spacing-lg)}.card-title[data-v-f6d3620c]{font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--text-primary);margin:0 0 var(--spacing-sm) 0;line-height:var(--leading-tight)}.card-description[data-v-f6d3620c]{font-size:var(--text-sm);color:var(--text-secondary);margin:0 0 var(--spacing-md) 0;line-height:var(--leading-normal);flex:1}.card-meta[data-v-f6d3620c]{display:flex;align-items:center;gap:var(--spacing-md);margin-top:auto}.card-status[data-v-f6d3620c]{padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:0.5px}.card-status.status-online[data-v-f6d3620c]{background:#dcfce7;color:#166534}.card-status.status-offline[data-v-f6d3620c]{background:#fee2e2;color:#991b1b}.card-status.status-maintenance[data-v-f6d3620c]{background:#fef3c7;color:#92400e}.card-users[data-v-f6d3620c]{font-size:var(--text-xs);color:var(--text-tertiary);font-weight:var(--font-medium)}.card-actions[data-v-f6d3620c]{position:absolute;top:var(--spacing-lg);right:var(--spacing-lg)}.card-action-btn[data-v-f6d3620c]{width:36px;height:36px;border-radius:50%;background:rgba(59,130,246,0.1);border:1px solid rgba(59,130,246,0.2);color:var(--primary-color);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-normal);opacity:0;transform:translateX(10px)}.card-action-btn[data-v-f6d3620c]:hover{background:var(--primary-color);color:white;transform:translateX(0) scale(1.1)}.card-action-btn i[data-v-f6d3620c]{font-size:var(--text-sm)}.card-hover-effect[data-v-f6d3620c]{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg, rgba(59,130,246,0.05), rgba(147,51,234,0.05));opacity:0;transition:opacity var(--transition-normal);pointer-events:none}.status-online .card-icon[data-v-f6d3620c]{box-shadow:0 0 20px rgba(16,185,129,0.3)}.status-maintenance .card-icon[data-v-f6d3620c]{box-shadow:0 0 20px rgba(245,158,11,0.3)}.status-offline .card-icon[data-v-f6d3620c]{box-shadow:0 0 20px rgba(239,68,68,0.3)}@media (max-width: 767px){.main-content[data-v-f6d3620c]{padding:var(--spacing-md)}.systems-section[data-v-f6d3620c]{padding:var(--spacing-lg)}.systems-header[data-v-f6d3620c]{flex-direction:column;align-items:flex-start;gap:var(--spacing-md)}.systems-title[data-v-f6d3620c]{font-size:var(--text-xl)}.systems-grid[data-v-f6d3620c]{grid-template-columns:1fr;gap:var(--spacing-md)}.system-card[data-v-f6d3620c]{padding:var(--spacing-lg);min-height:180px}.system-card.list-view[data-v-f6d3620c]{padding:var(--spacing-md)}.card-icon[data-v-f6d3620c]{width:50px;height:50px;margin-bottom:var(--spacing-md)}.card-icon i[data-v-f6d3620c]{font-size:var(--text-xl)}.card-title[data-v-f6d3620c]{font-size:var(--text-base)}.card-description[data-v-f6d3620c]{font-size:var(--text-xs)}.card-actions[data-v-f6d3620c]{top:var(--spacing-md);right:var(--spacing-md)}.card-action-btn[data-v-f6d3620c]{width:32px;height:32px}.card-action-btn i[data-v-f6d3620c]{font-size:var(--text-xs)}}@media (min-width: 768px) and (max-width: 1023px){.systems-grid[data-v-f6d3620c]{grid-template-columns:repeat(auto-fill, minmax(280px, 1fr))}}.dashboard[data-v-f6d3620c]{min-height:100vh;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%)}.main-container[data-v-f6d3620c]{display:flex;min-height:calc(100vh - 70px)}.main-content[data-v-f6d3620c]{flex:1;padding:20px;overflow-y:auto}.systems-section[data-v-f6d3620c]{background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);border-radius:16px;padding:24px;margin-bottom:20px;box-shadow:0 8px 32px rgba(0,0,0,0.1)}.systems-header[data-v-f6d3620c]{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.systems-title[data-v-f6d3620c]{font-size:24px;font-weight:600;color:#1e293b;margin:0}.systems-actions[data-v-f6d3620c]{display:flex;gap:8px}.view-toggle-btn[data-v-f6d3620c]{padding:8px 12px;border:1px solid #e2e8f0;background:white;border-radius:8px;cursor:pointer;transition:all 0.3s ease}.view-toggle-btn[data-v-f6d3620c]:hover{border-color:#3b82f6;color:#3b82f6}.view-toggle-btn.active[data-v-f6d3620c]{background:#3b82f6;border-color:#3b82f6;color:white}.systems-grid[data-v-f6d3620c]{display:grid;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:20px}.systems-grid.list-view[data-v-f6d3620c]{grid-template-columns:1fr}.systems-grid.list-view .system-card[data-v-f6d3620c]{display:flex;flex-direction:row;align-items:center}.systems-grid.list-view .system-card .card-icon[data-v-f6d3620c]{margin-right:16px;margin-bottom:0}.systems-grid.list-view .system-card .card-content[data-v-f6d3620c]{flex:1}@media (max-width: 768px){.main-content[data-v-f6d3620c]{padding:16px}.systems-section[data-v-f6d3620c]{padding:16px}.systems-grid[data-v-f6d3620c]{grid-template-columns:1fr;gap:16px}}
/* 重置和基础样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* 主色调 */
--primary-color: #17226a;
--primary-dark: #0f1a4a;
--primary-light: #2a3d8a;
--secondary-color: #64748b;
--accent-color: #f59e0b;
/* 中性色 */
--gray-50: #f8fafc;
--gray-100: #f1f5f9;
--gray-200: #e2e8f0;
--gray-300: #cbd5e1;
--gray-400: #94a3b8;
--gray-500: #64748b;
--gray-600: #475569;
--gray-700: #334155;
--gray-800: #1e293b;
--gray-900: #0f172a;
/* 状态色 */
--success-color: #10b981;
--warning-color: #f59e0b;
--error-color: #ef4444;
--info-color: #3b82f6;
/* 阴影 */
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
/* 圆角 */
--radius-sm: 0.375rem;
--radius-md: 0.5rem;
--radius-lg: 0.75rem;
--radius-xl: 1rem;
/* 间距 */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #f5f9ff 0%, #f5f9ff 100%);
background-attachment: fixed;
color: var(--gray-800);
line-height: 1.6;
overflow-x: hidden;
overflow-y: hidden;
font-size: 14px;
font-weight: 400;
height: 100vh;
}
/* 顶部导航栏 */
.header {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
color: var(--gray-800);
padding: 0 var(--spacing-xl);
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: var(--shadow-lg);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
transition: all 0.3s ease;
}
.header-left .platform-logo {
height: 40px;
width: auto;
max-width: 200px;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
.header-center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 600px;
width: 100%;
}
.search-container {
position: relative;
width: 100%;
}
.search-input {
width: 100%;
padding: 12px 50px 12px 20px;
border: 2px solid var(--gray-200);
border-radius: var(--radius-xl);
background: var(--gray-50);
color: var(--gray-800);
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
box-shadow: var(--shadow-sm);
}
.search-input::placeholder {
color: var(--gray-400);
font-weight: 400;
}
.search-input:focus {
outline: none;
background: white;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
transform: translateY(-1px);
}
.search-icon {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--gray-400);
font-size: 16px;
transition: color 0.3s ease;
}
.search-input:focus + .search-icon {
color: var(--primary-color);
}
.search-shortcut {
position: absolute;
right: 50px;
top: 50%;
transform: translateY(-50%);
background: var(--gray-200);
color: var(--gray-600);
padding: 2px 6px;
border-radius: var(--radius-sm);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
opacity: 0;
transition: opacity 0.3s ease;
}
.search-input:focus ~ .search-shortcut {
opacity: 1;
}
.header-right {
display: flex;
align-items: center;
gap: var(--spacing-md);
}
.notification-btn, .todo-btn, .user-menu-btn {
position: relative;
background: none;
border: none;
padding: var(--spacing-sm);
border-radius: var(--radius-md);
color: var(--gray-600);
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.notification-btn:hover, .todo-btn:hover, .user-menu-btn:hover {
background: var(--gray-100);
color: var(--gray-800);
}
.notification-badge, .todo-badge {
position: absolute;
top: 2px;
right: 2px;
background: var(--error-color);
color: white;
border-radius: 50%;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 600;
}
.todo-badge {
background: var(--primary-color);
}
.user-name {
font-weight: 500;
color: var(--gray-700);
}
.system-management {
color: var(--gray-700);
text-decoration: none;
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--radius-md);
transition: all 0.3s ease;
font-weight: 500;
border: 1px solid var(--gray-200);
background: white;
}
.system-management:hover {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
}
/* 主容器 */
.main-container {
display: flex;
margin-top: 60px;
height: calc(100vh - 60px);
background: var(--gray-50);
gap: 0;
overflow: hidden;
}
/* 主要工作区域 */
.main-content {
flex: 1;
background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
backdrop-filter: blur(20px);
border-right: 1px solid rgba(23, 34, 106, 0.08);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.5),
0 4px 20px rgba(23, 34, 106, 0.08);
height: 100%;
overflow-y: hidden;
z-index: 100;
display: flex;
flex-direction: column;
position: relative;
}
.main-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(23, 34, 106, 0.1), transparent);
z-index: 1;
}
/* 左侧菜单导航 */
.left-sidebar {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
/* padding: var(--spacing-lg); */
gap: var(--spacing-md);
}
/* 系统标签页样式 */
.system-tabs {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--spacing-xs);
background: rgba(255, 255, 255, 0.8);
border-radius: var(--radius-xl);
padding: var(--spacing-sm);
box-shadow:
0 4px 20px rgba(23, 34, 106, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
border: 1px solid rgba(23, 34, 106, 0.06);
backdrop-filter: blur(10px);
}
/* 紧凑型布局 - 默认6列 */
.system-tabs {
grid-template-columns: repeat(6, 1fr);
}
/* 当标签页数量较少时，使用固定列数 */
.system-tabs[data-tab-count="1"] { grid-template-columns: 1fr; }
.system-tabs[data-tab-count="2"] { grid-template-columns: repeat(2, 1fr); }
.system-tabs[data-tab-count="3"] { grid-template-columns: repeat(3, 1fr); }
.system-tabs[data-tab-count="4"] { grid-template-columns: repeat(4, 1fr); }
.system-tabs[data-tab-count="5"] { grid-template-columns: repeat(5, 1fr); }
.system-tabs[data-tab-count="6"] { grid-template-columns: repeat(6, 1fr); }
/* 超过6个标签页时，自动换行 */
.system-tabs[data-tab-count="7"],
.system-tabs[data-tab-count="8"],
.system-tabs[data-tab-count="9"],
.system-tabs[data-tab-count="10"],
.system-tabs[data-tab-count="11"],
.system-tabs[data-tab-count="12"] {
grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 1199px) {
.system-tabs {
grid-template-columns: repeat(4, 1fr);
}
}
@media (max-width: 768px) {
.system-tabs {
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-xs);
padding: var(--spacing-sm);
}
.tab-button {
min-height: 50px;
padding: var(--spacing-xs) var(--spacing-sm);
gap: 6px;
}
.tab-icon {
font-size: 13px;
width: 18px;
}
.tab-title {
font-size: 13px;
}
.tab-count {
position: static;
margin-left: auto;
}
}
.tab-button {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: 8px;
padding: var(--spacing-sm) var(--spacing-md);
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(23, 34, 106, 0.08);
border-radius: var(--radius-lg);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 14px;
font-weight: 500;
color: var(--gray-700);
text-align: left;
position: relative;
user-select: none;
backdrop-filter: blur(10px);
box-shadow: 0 2px 8px rgba(23, 34, 106, 0.04);
min-height: 50px;
overflow: hidden;
}
.tab-button::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(23, 34, 106, 0.05), transparent);
opacity: 0;
transition: opacity 0.3s ease;
}
.tab-button:hover::after {
opacity: 1;
}
.tab-button:hover {
background: rgba(255, 255, 255, 1);
color: var(--gray-800);
transform: translateY(-3px);
box-shadow:
0 8px 25px rgba(23, 34, 106, 0.12),
0 2px 8px rgba(23, 34, 106, 0.08);
border-color: rgba(23, 34, 106, 0.15);
}
.tab-button:hover .tab-icon {
transform: scale(1.1);
/* 保持原有颜色，不覆盖为 primary-color */
}
.tab-button:hover .tab-count {
background: var(--primary-color);
color: white;
transform: scale(1.05);
}
.tab-button:focus {
outline: 2px solid var(--primary-color);
outline-offset: -2px;
}
.tab-button.active {
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
color: white;
font-weight: 600;
box-shadow:
0 8px 25px rgba(23, 34, 106, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
border: 1px solid var(--primary-color);
transform: translateY(-2px);
}
.tab-button.active .tab-icon {
color: white;
}
.tab-icon {
font-size: 13px;
color: var(--gray-500);
transition: color 0.3s ease;
flex-shrink: 0;
width: 20px;
text-align: center;
}
/* 系统标签页图标颜色 */
.tab-button .fa-chart-line { color: #3b82f6; } /* 实时监控 - 蓝色 */
.tab-button .fa-shield-alt { color: #10b981; } /* 风险管控 - 绿色 */
.tab-button .fa-chart-bar { color: #8b5cf6; } /* 数据分析 - 紫色 */
.tab-button .fa-cogs { color: #6b7280; } /* 系统管理 - 灰色 */
.tab-button .fa-exchange-alt { color: #f59e0b; } /* 交易管理 - 橙色 */
.tab-button .fa-users { color: #ec4899; } /* 会员服务 - 粉色 */
.tab-button .fa-coins { color: #fbbf24; } /* 财务管理 - 金色 */
.tab-button .fa-calculator { color: #06b6d4; } /* 结算管理 - 青色 */
.tab-button .fa-warehouse { color: #84cc16; } /* 仓储管理 - 青绿色 */
.tab-button .fa-chart-area { color: #ef4444; } /* 市场管理 - 红色 */
.tab-button .fa-file-alt { color: #6366f1; } /* 报表中心 - 靛蓝色 */
.tab-title {
font-size: 14px;
font-weight: 500;
line-height: 1.2;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
color: inherit;
transition: color 0.3s ease;
}
.tab-count {
background: rgba(107, 114, 128, 0.15);
color: var(--gray-600);
padding: 2px 6px;
border-radius: 10px;
font-size: 8px;
font-weight: 600;
min-width: 16px;
text-align: center;
transition: all 0.3s ease;
flex-shrink: 0;
position: static;
margin-left: auto;
backdrop-filter: blur(10px);
}
.tab-button.active .tab-count {
background: rgba(255, 255, 255, 0.25);
color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 标签页内容样式 */
.tab-content {
padding: 0;
flex: 1;
overflow-y: auto;
background: rgba(255, 255, 255, 0.6);
border-radius: var(--radius-xl);
margin-top: var(--spacing-sm);
backdrop-filter: blur(10px);
border: 1px solid rgba(23, 34, 106, 0.06);
position: relative;
overflow: hidden;
}
.tab-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(23, 34, 106, 0.1), transparent);
z-index: 1;
}
.tab-panel {
display: none;
animation: fadeInUp 0.4s ease forwards;
opacity: 0;
transform: translateY(10px);
}
.tab-panel.active {
display: block;
opacity: 1;
transform: translateY(0);
animation: slideInFromRight 0.3s ease forwards;
}
.tab-panel[hidden] {
display: none;
}
.menu-list {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
padding: var(--spacing-lg);
}
.menu-item {
display: flex;
align-items: center;
padding: var(--spacing-md) var(--spacing-lg);
margin: 2px 0;
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
user-select: none;
position: relative;
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(23, 34, 106, 0.05);
backdrop-filter: blur(5px);
overflow: hidden;
}
.menu-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left 0.5s ease;
}
.menu-item:hover::before {
left: 100%;
}
.menu-item:hover {
background: rgba(255, 255, 255, 0.95);
transform: translateX(6px);
box-shadow:
0 4px 12px rgba(23, 34, 106, 0.08),
0 1px 3px rgba(23, 34, 106, 0.04);
border-color: rgba(23, 34, 106, 0.1);
}
.menu-item:focus {
outline: none;
background: var(--primary-color);
color: white;
}
.menu-item.active {
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
color: white;
box-shadow:
0 4px 12px rgba(23, 34, 106, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
border-color: var(--primary-color);
transform: translateX(4px);
}
.menu-item.active .menu-icon {
color: white;
}
.menu-item.active .menu-title {
color: white;
font-weight: 600;
}
.menu-icon {
width: 18px;
height: 18px;
margin-right: var(--spacing-md);
color: var(--gray-500);
font-size: 15px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.menu-icon.favorite {
color: var(--accent-color);
}
.menu-item:hover .menu-icon {
color: var(--primary-color);
}
.menu-item:focus .menu-icon {
color: white;
}
.menu-title {
flex: 1;
color: var(--gray-700);
font-size: 15px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
line-height: 1.4;
transition: all 0.3s ease;
}
.menu-item:hover .menu-title {
color: var(--gray-800);
}
.menu-item:focus .menu-title {
color: white;
}
.menu-badge {
background: linear-gradient(135deg, var(--success-color), #059669);
color: white;
padding: 3px 8px;
border-radius: var(--radius-md);
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-left: var(--spacing-md);
box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
transition: all 0.3s ease;
}
/* 右侧待办与消息提醒区域 */
.right-sidebar {
width: 320px;
flex-shrink: 0;
padding: var(--spacing-sm);
background: transparent;
height: 100%;
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
overflow: hidden;
}
/* 通用部分样式 */
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-sm);
padding-bottom: var(--spacing-xs);
}
.section-title {
font-size: 13px;
font-weight: 600;
color: var(--gray-800);
position: relative;
padding-left: var(--spacing-xs);
}
.section-title::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 16px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
border-radius: var(--radius-sm);
}
/* 日程安排部分 */
.schedule-section {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: var(--radius-md);
padding: var(--spacing-xs);
box-shadow: var(--shadow-sm);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.current-date {
font-size: 11px;
color: var(--gray-600);
font-weight: 500;
display: flex;
align-items: center;
gap: 4px;
}
.current-date i {
color: var(--primary-color);
}
.calendar-container {
background: var(--gray-50);
border-radius: var(--radius-md);
border: 1px solid var(--gray-200);
padding: var(--spacing-sm);
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-sm);
}
.calendar-nav-btn {
width: 28px;
height: 28px;
border: none;
background: var(--gray-200);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
color: var(--gray-600);
font-size: 12px;
}
.calendar-nav-btn:hover {
background: var(--primary-color);
color: white;
transform: scale(1.1);
}
.calendar-month {
font-size: 14px;
font-weight: 600;
color: var(--gray-800);
}
.calendar-grid {
background: white;
border-radius: var(--radius-md);
padding: var(--spacing-sm);
box-shadow: var(--shadow-sm);
border: 1px solid var(--gray-200);
}
.calendar-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
margin-bottom: var(--spacing-xs);
}
.weekday {
text-align: center;
font-size: 10px;
color: var(--gray-500);
font-weight: 500;
padding: 2px 0;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.calendar-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.calendar-day {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: var(--gray-700);
cursor: pointer;
border-radius: var(--radius-sm);
transition: all 0.3s ease;
font-weight: 500;
position: relative;
border: 1px solid transparent;
min-height: 24px;
}
.calendar-day:hover {
background: var(--primary-color);
color: white;
transform: scale(1.1);
box-shadow: var(--shadow-md);
}
.calendar-day.other-month {
color: var(--gray-400);
cursor: default;
}
.calendar-day.other-month:hover {
background: transparent;
color: var(--gray-400);
transform: none;
box-shadow: none;
}
.calendar-day.current-day {
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
color: white;
font-weight: 700;
box-shadow: var(--shadow-md);
border: 2px solid var(--primary-light);
}
.calendar-day.current-day::after {
content: '';
position: absolute;
bottom: 4px;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 4px;
background: white;
border-radius: 50%;
}
/* 今日提醒部分 */
.reminders-section {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: var(--radius-md);
padding: var(--spacing-xs);
box-shadow: var(--shadow-sm);
border: 1px solid rgba(255, 255, 255, 0.2);
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
}
.reminder-badge {
width: 20px;
height: 20px;
background: linear-gradient(135deg, var(--error-color), #dc2626);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 600;
box-shadow: var(--shadow-sm);
}
.reminder-list {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
flex: 1;
/* max-height: 120px; 最大高度限制 */
overflow-y: auto;
padding-right: 4px;
scrollbar-width: thin;
scrollbar-color: rgba(102, 126, 234, 0.3) transparent;
}
/* 自定义滚动条样式 */
.reminder-list::-webkit-scrollbar {
width: 6px;
}
.reminder-list::-webkit-scrollbar-track {
background: transparent;
border-radius: 3px;
}
.reminder-list::-webkit-scrollbar-thumb {
background: rgba(102, 126, 234, 0.3);
border-radius: 3px;
transition: background 0.3s ease;
}
.reminder-list::-webkit-scrollbar-thumb:hover {
background: rgba(102, 126, 234, 0.5);
}
.reminder-item {
display: flex;
align-items: flex-start;
gap: var(--spacing-xs);
padding: var(--spacing-sm);
background: var(--gray-50);
border-radius: var(--radius-md);
border: 1px solid var(--gray-200);
transition: all 0.3s ease;
position: relative;
}
.reminder-item:hover {
background: white;
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.reminder-indicator {
width: 3px;
height: 32px;
border-radius: var(--radius-sm);
flex-shrink: 0;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.reminder-indicator.urgent {
background: linear-gradient(135deg, var(--error-color), #dc2626);
}
.reminder-indicator.normal {
background: linear-gradient(135deg, var(--gray-500), var(--gray-600));
}
.reminder-content {
flex: 1;
margin-left: var(--spacing-xs);
}
.reminder-title {
font-size: 12px;
font-weight: 600;
color: var(--gray-800);
margin-bottom: 2px;
line-height: 1.3;
}
.reminder-time {
font-size: 10px;
color: var(--gray-500);
display: flex;
align-items: center;
gap: 3px;
font-weight: 500;
}
.reminder-time i {
color: var(--gray-400);
}
.reminder-action {
background: none;
border: none;
color: var(--gray-400);
cursor: pointer;
padding: 2px;
border-radius: var(--radius-sm);
transition: all 0.3s ease;
opacity: 0;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
}
.reminder-item:hover .reminder-action {
opacity: 1;
}
.reminder-action:hover {
background: var(--gray-200);
color: var(--gray-600);
transform: scale(1.1);
}
/* 待办事项部分 */
.todo-section {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
border-radius: var(--radius-md);
padding: var(--spacing-xs);
box-shadow: var(--shadow-sm);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.todo-overview {
margin-bottom: var(--spacing-sm);
}
.todo-summary-card {
background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
border-radius: var(--radius-lg);
/* padding: var(--spacing-md); */
text-align: center;
position: relative;
color: white;
box-shadow: var(--shadow-md);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: var(--spacing-xs);
}
.todo-count {
font-size: 36px;
font-weight: 700;
color: white;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
line-height: 1;
}
.todo-label {
font-size: 12px;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
}
.refresh-btn {
position: absolute;
top: var(--spacing-sm);
right: var(--spacing-sm);
width: 24px;
height: 24px;
border: none;
background: rgba(255, 255, 255, 0.2);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
color: white;
font-size: 12px;
}
.refresh-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
.todo-categories {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-xs);
}
.todo-category {
display: flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-sm);
background: var(--gray-50);
border-radius: var(--radius-md);
transition: all 0.3s ease;
cursor: pointer;
border: 1px solid var(--gray-200);
}
.todo-category:hover {
background: white;
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.todo-category:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
}
.category-indicator {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--gray-300);
flex-shrink: 0;
transition: all 0.3s ease;
border: 1px solid transparent;
}
.category-indicator.active {
background: var(--primary-color);
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
border-color: var(--primary-light);
}
.category-name {
font-size: 12px;
color: var(--gray-700);
flex: 1;
font-weight: 500;
}
.todo-category .category-count {
font-size: 12px;
font-weight: 600;
color: var(--gray-600);
background: var(--gray-200);
padding: 2px 4px;
border-radius: var(--radius-sm);
min-width: 18px;
text-align: center;
}
.todo-category:hover .category-count {
background: var(--primary-100);
color: var(--primary-700);
}
/* 滚动条样式 */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--gray-100);
border-radius: var(--radius-sm);
}
::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, var(--gray-400), var(--gray-500));
border-radius: var(--radius-sm);
transition: background 0.3s ease;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, var(--gray-500), var(--gray-600));
}
/* 响应式设计 */
@media (max-width: 1366px) {
.right-sidebar {
width: 220px;
}
.main-content {
/* margin-right: 220px; */
}
.calendar-container {
padding: var(--spacing-xs);
}
.calendar-grid {
padding: var(--spacing-xs);
}
.calendar-day {
font-size: 9px;
min-height: 18px;
padding: 2px;
}
.weekday {
font-size: 8px;
padding: 2px 0;
}
.calendar-nav-btn {
width: 20px;
height: 20px;
font-size: 9px;
}
.calendar-month {
font-size: 11px;
}
.reminders-section {
padding: var(--spacing-xs);
min-height: 100px;
}
.reminder-item {
padding: 4px 6px;
margin: 1px 0;
}
.reminder-title {
font-size: 10px;
line-height: 1.2;
}
.reminder-time {
font-size: 8px;
}
/* 优化待办事项区域 */
.todo-section {
padding: var(--spacing-xs);
}
.todo-card {
padding: 8px;
}
.todo-count {
font-size: 18px;
}
.todo-label {
font-size: 10px;
}
.todo-categories {
gap: 4px;
}
.todo-category {
font-size: 9px;
padding: 2px 6px;
}
/* 紧凑模式：只显示当前周和前后一周 */
.calendar-days {
max-height: 100px;
overflow: hidden;
position: relative;
}
/* 隐藏非当前周的日期 */
.calendar-days .calendar-day:nth-child(n+8):nth-child(-n+28) {
display: none;
}
/* 只显示第一周和最后一周 */
.calendar-days .calendar-day:nth-child(1):nth-child(-n+7),
.calendar-days .calendar-day:nth-child(29):nth-child(-n+35) {
display: flex;
}
/* 添加周切换按钮 */
.calendar-header::after {
content: "周视图";
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
font-size: 8px;
color: var(--primary-color);
background: rgba(37, 99, 235, 0.1);
padding: 2px 6px;
border-radius: 4px;
font-weight: 600;
}
/* 调整提醒区域确保可见 */
.reminders-section {
flex: 1;
min-height: 150px;
max-height: 200px;
}
.reminder-list {
max-height: 120px;
}
}
@media (max-width: 1200px) {
.right-sidebar {
width: 280px;
}
.system-tabs {
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: var(--spacing-xs);
}
.tab-button {
min-height: 70px;
padding: var(--spacing-sm) var(--spacing-xs);
font-size: 11px;
}
}
@media (max-width: 992px) {
.main-container {
flex-direction: column;
}
.main-content {
height: auto;
min-height: 60vh;
}
.right-sidebar {
width: 100%;
height: auto;
min-height: 40vh;
padding: var(--spacing-xs);
}
.left-sidebar {
padding: var(--spacing-sm);
gap: var(--spacing-xs);
}
.system-tabs {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
padding: var(--spacing-xs);
}
.tab-button {
min-height: 50px;
padding: var(--spacing-xs) var(--spacing-sm);
font-size: 10px;
gap: 6px;
}
.menu-list {
padding: var(--spacing-md);
}
.menu-item {
padding: var(--spacing-sm) var(--spacing-md);
}
.todo-categories {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.header {
padding: 0 var(--spacing-sm);
height: 50px;
}
.main-container {
margin-top: 50px;
}
.main-content {
height: calc(100vh - 50px);
}
.header-center {
margin: 0 var(--spacing-sm);
}
.left-sidebar {
padding: var(--spacing-xs);
gap: 4px;
}
.system-tabs {
grid-template-columns: repeat(2, 1fr);
padding: 4px;
gap: 4px;
}
.tab-button {
min-height: 45px;
padding: var(--spacing-xs) var(--spacing-sm);
font-size: 10px;
gap: 4px;
}
.tab-icon {
font-size: 13px;
width: 16px;
}
.menu-list {
padding: var(--spacing-sm);
}
.menu-item {
padding: var(--spacing-sm);
margin: 1px 0;
}
.menu-title {
font-size: 13px;
}
.right-sidebar {
padding: var(--spacing-lg) var(--spacing-md);
}
.schedule-section,
.reminders-section,
.todo-section {
padding: var(--spacing-lg);
}
.calendar-nav-btn {
width: 32px;
height: 32px;
}
.calendar-month {
font-size: 16px;
}
}
@media (max-width: 480px) {
.header {
padding: 0 var(--spacing-xs);
}
.left-sidebar {
padding: 4px;
}
.system-tabs {
grid-template-columns: repeat(2, 1fr);
padding: 2px;
gap: 2px;
}
.tab-button {
min-height: 40px;
padding: 4px 6px;
font-size: 8px;
gap: 3px;
}
.tab-icon {
font-size: 13px;
width: 14px;
}
.tab-title {
font-size: 13px;
}
.tab-count {
font-size: 6px;
padding: 1px 3px;
position: static;
margin-left: auto;
}
.menu-list {
padding: var(--spacing-xs);
}
.menu-item {
padding: var(--spacing-xs) var(--spacing-sm);
}
.menu-title {
font-size: 12px;
}
.right-sidebar {
padding: var(--spacing-md) var(--spacing-sm);
gap: var(--spacing-lg);
}
.schedule-section,
.reminders-section,
.todo-section {
padding: var(--spacing-md);
}
.todo-count {
font-size: 36px;
}
.todo-label {
font-size: 14px;
}
.calendar-container {
padding: var(--spacing-md);
}
}
/* 动画效果 */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInFromRight {
from {
opacity: 0;
transform: translateX(20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
@keyframes shimmer {
0% {
background-position: -200px 0;
}
100% {
background-position: calc(200px + 100%) 0;
}
}
/* 页面加载动画 */
.schedule-section {
animation: fadeInUp 0.6s ease forwards;
animation-delay: 0.1s;
opacity: 0;
}
.reminders-section {
animation: fadeInUp 0.6s ease forwards;
animation-delay: 0.2s;
opacity: 0;
}
.todo-section {
animation: fadeInUp 0.6s ease forwards;
animation-delay: 0.3s;
opacity: 0;
}
.left-sidebar {
animation: slideInLeft 0.6s ease forwards;
opacity: 0;
}
.tab-button {
animation: slideInLeft 0.4s ease forwards;
opacity: 0;
}
.tab-button:nth-child(1) { animation-delay: 0.1s; }
.tab-button:nth-child(2) { animation-delay: 0.2s; }
.tab-button:nth-child(3) { animation-delay: 0.3s; }
.tab-button:nth-child(4) { animation-delay: 0.4s; }
/* 焦点状态 */
*:focus {
outline: 2px solid var(--primary-color);
outline-offset: 2px;
}
/* 选择状态 */
::selection {
background: var(--primary-color);
color: white;
}
/* 加载状态 */
.loading {
position: relative;
overflow: hidden;
}
.loading::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
animation: loading 1.5s infinite;
}
@keyframes loading {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
/* 移动端菜单按钮 */
.mobile-menu-btn {
display: none;
background: none;
border: none;
color: var(--gray-600);
font-size: 20px;
cursor: pointer;
padding: var(--spacing-sm);
border-radius: var(--radius-md);
transition: all 0.3s ease;
}
.mobile-menu-btn:hover {
background: var(--gray-100);
color: var(--gray-800);
}
@media (max-width: 992px) {
.mobile-menu-btn {
display: block;
}
.header-left {
display: flex;
align-items: center;
gap: var(--spacing-md);
}
}
/* 遮罩层 */
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 99;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.overlay.active {
opacity: 1;
visibility: visible;
}
@media (max-width: 992px) {
.left-sidebar.open ~ .overlay {
opacity: 1;
visibility: visible;
}
}
/* ============================================ */
/* 会员服务菜单方案样式 */
/* ============================================ */
/* 方案切换按钮 */
.demo-switcher {
display: flex;
gap: var(--spacing-xs);
margin-bottom: var(--spacing-lg);
padding: var(--spacing-sm);
background: var(--gray-100);
border-radius: var(--radius-lg);
overflow-x: auto;
}
.demo-btn {
padding: var(--spacing-sm) var(--spacing-md);
border: none;
background: transparent;
color: var(--gray-600);
border-radius: var(--radius-md);
cursor: pointer;
font-size: 12px;
font-weight: 500;
white-space: nowrap;
transition: all 0.3s ease;
flex-shrink: 0;
}
.demo-btn:hover {
background: var(--gray-200);
color: var(--gray-800);
}
.demo-btn.active {
background: var(--primary-color);
color: white;
font-weight: 600;
box-shadow: var(--shadow-sm);
}
/* 方案内容容器 */
.demo-content {
display: none;
animation: fadeInUp 0.4s ease forwards;
}
.demo-content.active {
display: block;
}
/* ============================================ */
/* 方案1: 多级折叠树状结构 */
/* ============================================ */
.tree-search {
position: relative;
margin-bottom: var(--spacing-lg);
}
.tree-search-input {
width: 100%;
padding: var(--spacing-sm) var(--spacing-xl) var(--spacing-sm) var(--spacing-md);
border: 1px solid var(--gray-300);
border-radius: var(--radius-md);
font-size: 13px;
background: white;
color: var(--gray-700);
transition: all 0.3s ease;
}
.tree-search-input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.tree-search i {
position: absolute;
right: var(--spacing-md);
top: 50%;
transform: translateY(-50%);
color: var(--gray-400);
font-size: 14px;
}
.tree-item {
margin-bottom: 2px;
}
.tree-node {
display: flex;
align-items: center;
padding: var(--spacing-xs) var(--spacing-sm);
cursor: pointer;
border-radius: var(--radius-sm);
transition: all 0.2s ease;
user-select: none;
position: relative;
}
.tree-node:hover {
background: var(--gray-100);
}
.tree-node:active {
background: var(--gray-200);
}
.tree-icon {
width: 16px;
height: 16px;
margin-right: var(--spacing-xs);
color: var(--gray-500);
font-size: 10px;
transition: transform 0.2s ease;
flex-shrink: 0;
}
.tree-icon.expanded {
transform: rotate(90deg);
}
.tree-node.leaf .tree-icon {
opacity: 0;
}
.tree-title {
flex: 1;
font-size: 13px;
color: var(--gray-700);
font-weight: 500;
line-height: 1.3;
}
.tree-count {
background: var(--gray-200);
color: var(--gray-600);
padding: 2px 6px;
border-radius: var(--radius-sm);
font-size: 10px;
font-weight: 600;
margin-left: var(--spacing-xs);
min-width: 20px;
text-align: center;
}
.tree-children {
margin-left: var(--spacing-lg);
border-left: 1px dashed var(--gray-300);
padding-left: var(--spacing-md);
margin-top: 2px;
overflow: hidden;
transition: all 0.3s ease;
}
.tree-children.collapsed {
max-height: 0;
margin-top: 0;
opacity: 0;
}
.tree-children.expanded {
max-height: 1000px;
opacity: 1;
}
/* 不同层级的样式 */
.level-1 .tree-node {
font-weight: 600;
background: var(--gray-50);
border: 1px solid var(--gray-200);
margin-bottom: 4px;
border-radius: var(--radius-md);
}
.level-1 .tree-node:hover {
background: var(--gray-100);
border-color: var(--primary-color);
}
.level-2 .tree-node {
font-weight: 500;
}
.level-3 .tree-node {
font-size: 12px;
}
.level-4 .tree-node,
.level-5 .tree-node,
.level-6 .tree-node {
font-size: 11px;
color: var(--gray-600);
}
/* ============================================ */
/* 多级侧边栏菜单系统 */
/* ============================================ */
.multilevel-sidebar {
display: flex;
flex-direction: column;
height: 100%;
background: rgba(255, 255, 255, 0.8);
border-radius: var(--radius-xl);
border: 1px solid rgba(23, 34, 106, 0.08);
overflow: hidden;
backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(23, 34, 106, 0.06);
}
.menu-container {
flex: 1;
display: flex;
overflow-x: auto;
overflow-y: hidden;
position: relative;
scroll-behavior: smooth;
border-top: 1px solid var(--gray-200);
}
/* 自定义滚动条样式 */
.menu-container::-webkit-scrollbar {
height: 8px;
}
.menu-container::-webkit-scrollbar-track {
background: var(--gray-100);
border-radius: 4px;
}
.menu-container::-webkit-scrollbar-thumb {
background: var(--gray-300);
border-radius: 4px;
transition: background 0.2s ease;
}
.menu-container::-webkit-scrollbar-thumb:hover {
background: var(--gray-400);
}
/* 滚动指示器 */
.menu-container::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 20px;
height: 100%;
background: linear-gradient(to left, rgba(255,255,255,0.8), transparent);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 10;
}
.menu-container.scrollable::after {
opacity: 1;
}
/* 左侧滚动指示器 */
.menu-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 100%;
background: linear-gradient(to right, rgba(255,255,255,0.8), transparent);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
z-index: 10;
}
.menu-container.scrollable-left::before {
opacity: 1;
}
.menu-level {
min-width: 250px;
max-width: 300px;
width: 250px;
flex-shrink: 0;
background: white;
border-right: 1px solid var(--gray-200);
display: none;
flex-direction: column;
overflow: hidden;
}
.menu-level.active {
display: flex;
animation: slideInRight 0.3s ease;
}
.menu-level:last-child {
border-right: none;
}
.menu-level-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-sm) var(--spacing-md);
background: var(--gray-50);
border-bottom: 1px solid var(--gray-200);
font-size: 14px;
font-weight: 600;
color: var(--gray-800);
}
.menu-level-title {
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
.menu-level-actions {
display: flex;
gap: var(--spacing-xs);
}
.menu-level-action {
background: none;
border: none;
color: var(--gray-400);
cursor: pointer;
padding: var(--spacing-xs);
border-radius: var(--radius-sm);
transition: all 0.3s ease;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.menu-level-action:hover {
background: var(--gray-200);
color: var(--gray-600);
}
.menu-level-content {
flex: 1;
overflow-y: auto;
padding: var(--spacing-sm);
}
.menu-level-item {
margin-bottom: var(--spacing-xs);
border-radius: var(--radius-sm);
transition: all 0.2s ease;
}
.menu-level-item:hover {
background: var(--gray-50);
}
.menu-item-content {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--radius-sm);
transition: all 0.2s ease;
cursor: pointer;
}
.menu-item-content:hover {
background: var(--gray-100);
}
.menu-item-title {
flex: 1;
font-size: 14px;
color: var(--gray-700);
}
.menu-item-count {
background: var(--primary-color);
color: white;
font-size: 12px;
padding: 2px 6px;
border-radius: 10px;
font-weight: 500;
}
.menu-item-arrow {
color: var(--gray-400);
font-size: 12px;
transition: transform 0.2s ease;
}
.menu-level-item:hover .menu-item-arrow {
transform: translateX(2px);
}
.menu-item {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-md);
margin-bottom: 2px;
border-radius: var(--radius-sm);
cursor: pointer;
transition: all 0.3s ease;
position: relative;
background: transparent;
border: none;
width: 100%;
text-align: left;
font-size: 14px;
color: var(--gray-700);
}
.menu-item:hover {
background: var(--gray-100);
color: var(--gray-900);
}
.menu-item.active {
background: var(--primary-color);
color: white;
}
.menu-item.has-children {
justify-content: space-between;
}
.menu-item.has-children::after {
content: '\f054';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
font-size: 12px;
color: var(--gray-400);
transition: transform 0.3s ease;
}
.menu-item.active.has-children::after {
color: white;
transform: rotate(90deg);
}
.menu-icon {
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: var(--gray-500);
}
.menu-item.active .menu-icon {
color: white;
}
.menu-title {
flex: 1;
font-weight: 500;
}
.menu-count {
background: var(--gray-200);
color: var(--gray-600);
padding: 2px 6px;
border-radius: 10px;
font-size: 11px;
font-weight: 600;
min-width: 18px;
text-align: center;
}
.menu-item.active .menu-count {
background: rgba(255, 255, 255, 0.2);
color: white;
}
.menu-badge {
background: var(--warning-color);
color: white;
padding: 2px 6px;
border-radius: 10px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
}
/* 面包屑导航 */
.breadcrumb-nav {
display: flex;
align-items: center;
padding: var(--spacing-md) var(--spacing-lg);
background: rgba(248, 250, 252, 0.8);
border-top: 1px solid rgba(23, 34, 106, 0.08);
gap: var(--spacing-sm);
overflow-x: auto;
min-height: 48px;
backdrop-filter: blur(5px);
}
.breadcrumb-item {
display: flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all 0.3s ease;
font-size: 12px;
color: var(--gray-600);
white-space: nowrap;
}
.breadcrumb-item:hover {
background: var(--gray-200);
color: var(--gray-800);
}
.breadcrumb-item.active {
background: var(--primary-color);
color: white;
}
.breadcrumb-separator {
color: var(--gray-400);
font-size: 12px;
}
/* 菜单操作按钮 */
.menu-actions {
display: flex;
justify-content: center;
gap: var(--spacing-xs);
padding: var(--spacing-xs) var(--spacing-sm);
background: rgba(248, 250, 252, 0.8);
border-top: 1px solid rgba(23, 34, 106, 0.08);
backdrop-filter: blur(5px);
}
.action-btn {
background: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(23, 34, 106, 0.1);
color: var(--gray-600);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--radius-sm);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 12px;
display: flex;
align-items: center;
gap: var(--spacing-xs);
font-weight: 500;
box-shadow: 0 1px 3px rgba(23, 34, 106, 0.04);
min-height: 28px;
}
.action-btn:hover {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(23, 34, 106, 0.15);
}
/* 测试按钮特殊样式 */
.test-separator {
width: 1px;
height: 16px;
background: var(--gray-300);
margin: 0 var(--spacing-xs);
align-self: center;
}
.test-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
font-weight: 600;
position: relative;
overflow: hidden;
}
.test-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: left 0.5s;
}
.test-btn:hover::before {
left: 100%;
}
.test-btn:hover {
background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}
.test-btn:active {
transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
}
/* 菜单项缩进 */
.menu-item[data-level="1"] { padding-left: calc(var(--spacing-md) + 20px); }
.menu-item[data-level="2"] { padding-left: calc(var(--spacing-md) + 40px); }
.menu-item[data-level="3"] { padding-left: calc(var(--spacing-md) + 60px); }
.menu-item[data-level="4"] { padding-left: calc(var(--spacing-md) + 80px); }
.menu-item[data-level="5"] { padding-left: calc(var(--spacing-md) + 100px); }
/* 加载状态 */
.menu-level.loading {
opacity: 0.6;
pointer-events: none;
}
.menu-level.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid var(--gray-300);
border-top: 2px solid var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* 空菜单状态 */
.empty-menu {
text-align: center;
color: var(--gray-400);
font-size: 12px;
padding: var(--spacing-lg);
font-style: italic;
}
/* 响应式适配 */
@media (max-width: 768px) {
.multilevel-sidebar {
height: 400px;
}
.menu-level {
min-width: 200px;
max-width: 250px;
}
.menu-actions {
flex-wrap: wrap;
gap: 4px;
padding: 6px var(--spacing-xs);
}
.action-btn {
font-size: 10px;
padding: 4px 6px;
min-height: 24px;
gap: 3px;
}
.breadcrumb-nav {
padding: var(--spacing-xs) var(--spacing-sm);
}
.breadcrumb-item {
font-size: 11px;
padding: 2px var(--spacing-xs);
}
}
/* ============================================ */
/* 方案5: 标签页混合 */
/* ============================================ */
.member-tabs {
background: white;
border-radius: var(--radius-md);
border: 1px solid var(--gray-200);
overflow: hidden;
}
.member-tab-list {
display: flex;
background: var(--gray-50);
border-bottom: 1px solid var(--gray-200);
}
.member-tab {
flex: 1;
padding: var(--spacing-sm) var(--spacing-md);
background: none;
border: none;
cursor: pointer;
font-size: 12px;
font-weight: 500;
color: var(--gray-600);
transition: all 0.3s ease;
border-bottom: 2px solid transparent;
}
.member-tab:hover {
background: var(--gray-100);
color: var(--gray-800);
}
.member-tab.active {
background: white;
color: var(--primary-color);
font-weight: 600;
border-bottom-color: var(--primary-color);
}
.member-tab-content {
padding: var(--spacing-md);
max-height: 320px;
overflow-y: auto;
}
.member-tab-panel {
display: none;
}
.member-tab-panel.active {
display: block;
animation: fadeInUp 0.3s ease;
}
/* ============================================ */
/* 响应式适配 */
/* ============================================ */
@media (max-width: 768px) {
.demo-switcher {
gap: 4px;
padding: 6px;
}
.demo-btn {
padding: 6px 8px;
font-size: 11px;
}
.member-tab-content {
max-height: 300px;
}
.sidebar-demo {
flex-direction: column;
max-height: 350px;
}
.secondary-menu {
flex: none;
height: 200px;
border-left: none;
border-top: 1px solid var(--gray-200);
}
.member-tab-list {
overflow-x: auto;
}
.member-tab {
white-space: nowrap;
flex-shrink: 0;
min-width: 80px;
}
}
/* ============================================ */
/* 搜索高亮样式 */
/* ============================================ */
.search-highlight {
background: var(--warning-color);
color: white;
padding: 1px 3px;
border-radius: 2px;
font-weight: 600;
}
/* ============================================ */
/* 加载状态 */
/* ============================================ */
.demo-content.loading {
position: relative;
opacity: 0.6;
pointer-events: none;
}
.demo-content.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border: 2px solid var(--gray-300);
border-top: 2px solid var(--primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
.reminder-indicator{width:4px;height:20px;border-radius:2px;flex-shrink:0;margin-right:12px;margin-top:2px}.reminder-indicator.urgent{background-color:#ef4444;box-shadow:0 0 6px rgba(239,68,68,0.4)}.reminder-indicator.important{background-color:#f59e0b;box-shadow:0 0 6px rgba(245,158,11,0.4)}.reminder-indicator.warning{background-color:#eab308;box-shadow:0 0 6px rgba(234,179,8,0.4)}.reminder-indicator.normal{background-color:#3b82f6;box-shadow:0 0 6px rgba(59,130,246,0.4)}.reminder-indicator.info{background-color:#10b981;box-shadow:0 0 6px rgba(16,185,129,0.4)}.menu-container{flex:1;display:flex;overflow-x:auto;overflow-y:hidden;position:relative;scroll-behavior:smooth;border-top:1px solid var(--gray-200)}.menu-level{min-width:250px;max-width:300px;width:250px;flex-shrink:0;background:white;border-right:1px solid var(--gray-200);display:none;flex-direction:column;overflow:hidden}.menu-level.active{display:flex;animation:slideInRight 0.3s ease}.menu-container::after{content:'';position:absolute;top:0;right:0;width:20px;height:100%;background:linear-gradient(to left, rgba(255,255,255,0.8), transparent);pointer-events:none;opacity:0;transition:opacity 0.3s ease;z-index:10}.menu-container.scrollable::after{opacity:1}.menu-container::before{content:'';position:absolute;top:0;left:0;width:20px;height:100%;background:linear-gradient(to right, rgba(255,255,255,0.8), transparent);pointer-events:none;opacity:0;transition:opacity 0.3s ease;z-index:10}.menu-container.scrollable-left::before{opacity:1}@keyframes slideInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}.portal{min-height:100vh;background:#f8fafc;font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}.test-results-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:10000;display:flex;justify-content:center;align-items:center;animation:fadeIn 0.3s ease}.test-results-modal{background:white;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.3);max-width:90vw;max-height:90vh;overflow:hidden;animation:slideInScale 0.3s ease}.test-results-modal.large{width:800px;max-width:90vw}.test-results-header{background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);color:white;padding:20px;display:flex;justify-content:space-between;align-items:center}.test-results-header h3{margin:0;font-size:1.3rem;font-weight:600}.test-results-header h3 i{margin-right:10px}.test-results-header .close-results{background:none;border:none;color:white;font-size:1.2rem;cursor:pointer;padding:8px;border-radius:6px;transition:background-color 0.2s ease}.test-results-header .close-results:hover{background-color:rgba(255,255,255,0.2)}.test-results-content{padding:24px;max-height:calc(90vh - 140px);overflow-y:auto}.test-metric{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid #f0f0f0}.test-metric:last-child{border-bottom:none}.test-metric label{font-weight:600;color:#374151}.test-metric .metric-value{font-weight:500;color:#111827}.test-metric .metric-value.performance-excellent{color:#10b981;font-weight:600}.test-metric .metric-value.performance-good{color:#3b82f6;font-weight:600}.test-metric .metric-value.performance-fair{color:#f59e0b;font-weight:600}.test-metric .metric-value.performance-poor{color:#ef4444;font-weight:600}.test-summary{display:flex;gap:24px;margin-bottom:24px;padding-bottom:24px;border-bottom:2px solid #f0f0f0}.summary-item{flex:1;text-align:center;padding:16px;background:#f8fafc;border-radius:8px}.summary-item .summary-value{font-size:2rem;font-weight:700;color:#1f2937;margin-bottom:4px}.summary-item .summary-label{font-size:0.9rem;color:#6b7280;font-weight:500}.test-details{display:flex;flex-direction:column;gap:16px}.test-detail-item{background:#f8fafc;border-radius:8px;padding:16px;border-left:4px solid #3b82f6}.test-detail-item .test-name{font-weight:600;color:#1f2937;margin-bottom:8px;font-size:1.1rem}.test-detail-item .test-metrics{display:flex;flex-wrap:wrap;gap:12px}.test-detail-item .test-metrics .metric{background:white;padding:6px 12px;border-radius:6px;font-size:0.85rem;color:#374151;border:1px solid #e5e7eb;font-weight:500}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideInScale{from{opacity:0;transform:scale(0.9) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@media (max-width: 768px){.test-results-modal{margin:20px;max-height:calc(100vh - 40px)}.test-results-modal.large{width:auto}.test-summary{flex-direction:column;gap:12px}.test-metrics .metric{font-size:0.8rem;padding:4px 8px}}.monitoring-tree-panel{margin-top:var(--spacing-md);background:white;border-radius:var(--radius-lg);border:1px solid var(--gray-200);box-shadow:0 2px 8px rgba(0,0,0,0.06);overflow:hidden;animation:slideDown 0.3s ease}.menu-item .toggle-icon{margin-left:auto;transition:transform 0.3s ease;color:var(--gray-400);font-size:12px}.menu-item .toggle-icon.expanded{transform:rotate(180deg)}.monitoring-tree-panel .monitoring-tree-container{height:500px;max-height:calc(100vh - 400px)}.monitoring-tree-panel .tree-wrapper{flex:1;overflow:auto;min-height:300px}.monitoring-tree-panel .tree-toolbar{padding:var(--spacing-sm) var(--spacing-md);background:var(--gray-50);border-bottom:1px solid var(--gray-200)}.monitoring-tree-panel .tree-toolbar .tree-title{font-size:14px;font-weight:600;color:var(--gray-700)}.monitoring-tree-panel .tree-toolbar .tree-info{font-size:12px;color:var(--gray-500)}.monitoring-tree-panel .tree-toolbar .tool-btn{width:28px;height:28px;padding:0;border:1px solid var(--gray-200);background:white;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s ease;color:var(--gray-500);font-size:12px}.monitoring-tree-panel .tree-toolbar .tool-btn:hover{background:var(--gray-50);border-color:var(--gray-300);color:var(--gray-700)}.monitoring-tree-panel .performance-info{padding:var(--spacing-xs) var(--spacing-md);background:var(--gray-25);border-bottom:1px solid var(--gray-200);display:flex;gap:var(--spacing-md);font-size:11px}.monitoring-tree-panel .performance-info .perf-item{display:flex;align-items:center;gap:4px}.monitoring-tree-panel .performance-info .perf-label{color:var(--gray-500)}.monitoring-tree-panel .performance-info .perf-value{color:var(--gray-700);font-weight:500}.monitoring-tree-panel .node-detail-panel{position:absolute;right:0;top:0;width:200px;background:white;border-left:1px solid var(--gray-200);height:100%;transform:translateX(100%);transition:transform 0.3s ease;z-index:100}.monitoring-tree-panel .node-detail-panel.show{transform:translateX(0)}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideDown{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.menu-badge{background:linear-gradient(135deg, #ff6b6b, #feca57);color:white;font-size:10px;font-weight:600;padding:2px 6px;border-radius:8px;margin-left:8px;box-shadow:0 2px 4px rgba(255,107,107,0.3);animation:pulse 2s infinite}@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.05);opacity:0.9}}#risk-panel{padding:0;height:100%;background:transparent}.risk-management-container{display:flex;height:100%;background:linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);border-radius:20px;overflow:hidden;box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04),inset 0 1px 0 rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);position:relative}.risk-management-container::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 80%, rgba(102,126,234,0.08) 0%, transparent 50%),radial-gradient(circle at 80% 20%, rgba(139,92,246,0.06) 0%, transparent 50%),radial-gradient(circle at 40% 40%, rgba(16,185,129,0.04) 0%, transparent 50%);pointer-events:none;z-index:0}.risk-menu-sidebar{width:280px;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);border-right:1px solid var(--gray-200);display:flex;flex-direction:column;position:relative}.risk-menu-sidebar .menu-header{padding:24px 20px;border-bottom:1px solid rgba(255,255,255,0.2);background:rgba(255,255,255,0.1)}.risk-menu-sidebar .menu-header h3{margin:0;color:white;font-size:18px;font-weight:600;text-align:center}.menu-list-vertical{padding:20px 0;flex:1;overflow-y:auto}.menu-category{display:flex;align-items:center;padding:16px 20px;margin:4px 12px;border-radius:10px;cursor:pointer;transition:all 0.3s ease;color:rgba(255,255,255,0.9);position:relative;overflow:hidden}.menu-category::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);transition:left 0.6s ease}.menu-category:hover::before{left:100%}.menu-category:hover{background:rgba(255,255,255,0.15);transform:translateX(5px);box-shadow:0 4px 12px rgba(0,0,0,0.2)}.menu-category.active{background:rgba(255,255,255,0.25);color:white;box-shadow:0 4px 12px rgba(0,0,0,0.3);border-left:4px solid white}.menu-category .menu-icon{font-size:16px;width:20px;margin-right:12px;opacity:0.9}.menu-category .menu-title{flex:1;font-weight:500;font-size:14px}.menu-category .arrow-icon{font-size:12px;opacity:0.7;transition:transform 0.3s ease}.menu-category.active .arrow-icon{transform:rotate(90deg)}.debug-info{background:rgba(255,255,255,0.2);padding:10px;margin:10px;border-radius:5px;color:white;font-size:12px}.debug-info p{margin:5px 0}.risk-management-container{display:flex;height:100%;width:100%;background:transparent}.main-content{padding:0 !important}.left-tree-panel{width:330px;min-width:330px;background:rgba(255,255,255,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-right:1px solid rgba(255,255,255,0.3);position:relative;z-index:1;display:flex;flex-direction:column;height:100%}.left-tree-panel::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg, rgba(102,126,234,0.02) 0%, rgba(139,92,246,0.02) 50%, rgba(16,185,129,0.02) 100%);pointer-events:none;z-index:-1}.tree-content{flex:1;overflow-y:auto;padding:24px;position:relative;z-index:1}.tree-header{padding:10px 24px;background:linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);border:1px solid #e2e8f0;border-radius:0;margin:0;position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;flex-wrap:nowrap;gap:12px;min-height:52px;box-shadow:0 1px 3px rgba(0,0,0,0.05);flex-shrink:0;z-index:2}.tree-header::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 50%, rgba(255,255,255,0.05) 100%);pointer-events:none}.tree-header h3{color:#475569;font-size:18px;margin:0;font-weight:600;letter-spacing:0.02em;text-shadow:none;position:relative;z-index:1;flex:1}.tree-controls{display:flex;gap:8px;flex-wrap:nowrap;align-items:center;justify-content:center;position:relative;z-index:1;height:100%;overflow-x:auto}.tree-control-btn{display:flex;align-items:center;justify-content:center;gap:4px;padding:6px 10px;background:rgba(148,163,184,0.1);border:1px solid rgba(148,163,184,0.2);border-radius:8px;color:#64748b;font-size:12px;font-weight:500;cursor:pointer;transition:all 0.2s ease;backdrop-filter:none;-webkit-backdrop-filter:none;min-width:32px;height:32px;position:relative;overflow:hidden}.tree-control-btn::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);opacity:0;transition:opacity 0.3s ease}.tree-control-btn:hover{background:rgba(148,163,184,0.15);border-color:rgba(148,163,184,0.3);color:#475569;transform:none;box-shadow:0 1px 3px rgba(0,0,0,0.1)}.tree-control-btn:hover::before{opacity:1}.tree-control-btn:active{transform:none;box-shadow:0 1px 2px rgba(0,0,0,0.1)}.tree-control-btn i{font-size:12px;color:inherit}.tree-control-btn span{font-size:10px;font-weight:700;color:inherit;line-height:1}.tree-control-btn.expand-all{background:rgba(148,163,184,0.08);border-color:rgba(148,163,184,0.15)}.tree-control-btn.expand-all:hover{background:rgba(148,163,184,0.12);border-color:rgba(148,163,184,0.25)}.tree-control-btn.collapse-all{background:rgba(148,163,184,0.08);border-color:rgba(148,163,184,0.15)}.tree-control-btn.collapse-all:hover{background:rgba(148,163,184,0.12);border-color:rgba(148,163,184,0.25)}.tree-control-btn.expand-level-1,.tree-control-btn.expand-level-2,.tree-control-btn.expand-level-3,.tree-control-btn.expand-level-4{background:rgba(148,163,184,0.08);border-color:rgba(148,163,184,0.15)}.tree-control-btn.expand-level-1:hover,.tree-control-btn.expand-level-2:hover,.tree-control-btn.expand-level-3:hover,.tree-control-btn.expand-level-4:hover{background:rgba(148,163,184,0.12);border-color:rgba(148,163,184,0.25)}@media (max-width: 768px){.left-tree-panel{width:100%;min-width:100%}.tree-header{flex-direction:row;align-items:center;gap:12px;flex-wrap:nowrap;padding:8px 16px}.tree-header h3{text-align:left;flex-shrink:0}.tree-controls{flex:1;justify-content:flex-start;overflow-x:auto;min-width:0}.tree-control-btn{flex:0 0 auto;min-width:24px;height:24px;padding:2px 6px;font-size:10px}.tree-control-btn i{font-size:10px}.tree-control-btn span{font-size:8px}.tree-content{padding:16px}}.tree-category,.tree-subcategory{margin:4px 0}.tree-node.parent-node{display:flex;align-items:center;padding:14px 18px;margin:6px 0;border-radius:12px;background:rgba(102,126,234,0.08);color:#334155;cursor:pointer;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);border:2px solid transparent;position:relative;overflow:hidden;font-weight:500}.tree-node.parent-node::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(102,126,234,0.1), transparent);transition:left 0.6s ease}.tree-node.parent-node:hover::before{left:100%}.tree-node.parent-node:hover{background:rgba(102,126,234,0.15);border-color:rgba(102,126,234,0.3);transform:translateX(6px) translateY(-1px);box-shadow:0 4px 12px rgba(102,126,234,0.2);color:#1e293b}.tree-node.parent-node.active{background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);border-color:#667eea;box-shadow:0 8px 25px rgba(102,126,234,0.3);color:white;transform:translateX(0) translateY(0)}.tree-node.parent-node i{margin-right:12px;width:20px;text-align:center;font-size:16px;transition:all 0.3s ease;opacity:0.8}.tree-node.parent-node:hover i{opacity:1;transform:scale(1.1)}.tree-node.parent-node.active i{opacity:1;color:white}.tree-node.parent-node span{flex:1;font-size:14px;font-weight:600;letter-spacing:0.01em;transition:all 0.3s ease}.tree-node.parent-node.active span{color:white;font-weight:700}.tree-node.parent-node .arrow-icon{margin-left:auto;margin-right:0;font-size:12px;opacity:0.6;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.tree-node.parent-node:hover .arrow-icon{opacity:0.8;transform:translateX(2px)}.tree-node.parent-node.active .arrow-icon{opacity:1;color:white;transform:rotate(90deg)}.tree-children{margin-left:20px;border-left:2px solid rgba(102,126,234,0.2);padding-left:16px;margin-top:8px;position:relative}.tree-children::before{content:'';position:absolute;left:-2px;top:0;bottom:0;width:2px;background:linear-gradient(180deg, rgba(102,126,234,0.3) 0%, transparent 100%)}.tree-subcategory .tree-node.parent-node{background:rgba(102,126,234,0.05);padding:10px 14px;font-size:13px;margin:3px 0;border-radius:10px}.tree-subcategory .tree-node.parent-node:hover{background:rgba(102,126,234,0.1);transform:translateX(4px);box-shadow:0 2px 8px rgba(102,126,234,0.15)}.right-content-panel{flex:1;background:rgba(255,255,255,0.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);overflow:hidden;position:relative;z-index:1;display:flex;flex-direction:column}.content-area{height:100%}.content-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;padding-bottom:15px;border-bottom:2px solid rgba(255,255,255,0.1)}.header-left{display:flex;align-items:center;flex:1}.header-right{display:flex;align-items:center;margin-left:20px}.content-header i{font-size:24px;margin-right:15px;color:#409EFF}.content-header h3{color:#475569;font-size:20px;font-weight:600;margin:0;flex:1}.search-container{position:relative}.search-input-wrapper{position:relative;display:flex;align-items:center;box-shadow:0 0 0 3px rgba(102,126,234,0.1);background:rgba(255,255,255,0.95);border-radius:12px;padding:0;min-width:300px;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.search-input-wrapper:focus-within{box-shadow:0 0 0 3px rgba(102,126,234,0.1);background:rgba(255,255,255,0.95)}.search-icon{color:#94a3b8;font-size:16px;margin-right:12px;transition:color 0.3s ease}.search-input-wrapper:focus-within .search-icon{color:#667eea}.search-input{border:none;outline:none;box-shadow:0 0 0 3px rgba(102,126,234,0.1);background:rgba(255,255,255,0.95);flex:1;font-size:14px;color:#1e293b;font-weight:500}.search-input::placeholder{color:#94a3b8;font-weight:400}.clear-search-btn{background:none;border:none;color:#94a3b8;cursor:pointer;padding:4px;border-radius:6px;transition:all 0.2s ease;display:flex;align-items:center;justify-content:center;margin-left:8px}.clear-search-btn:hover{color:#ef4444;background:rgba(239,68,68,0.1)}.search-results{margin-bottom:20px}.search-results-header{display:flex;align-items:center;margin-bottom:16px;padding:12px 16px;background:linear-gradient(135deg, rgba(102,126,234,0.1) 0%, rgba(139,92,246,0.1) 100%);border-radius:12px;border:1px solid rgba(102,126,234,0.2)}.search-results-header i{color:#667eea;font-size:18px;margin-right:12px}.search-results-header h4{color:#1e293b;font-size:16px;font-weight:600;margin:0}.search-results-list{display:grid;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:16px}.search-result-item{cursor:pointer;transition:transform 0.2s ease}.search-result-item:hover{transform:translateY(-2px)}.search-result-card{background:rgba(255,255,255,0.9);border:2px solid #e2e8f0;border-radius:12px;padding:16px;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);position:relative;overflow:hidden}.search-result-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg, #667eea 0%, #764ba2 50%, #8b5cf6 100%);border-radius:12px 12px 0 0}.search-result-card:hover{border-color:#667eea;box-shadow:0 8px 25px rgba(102,126,234,0.15);background:rgba(255,255,255,0.95)}.search-result-card i{font-size:24px;color:#667eea;margin-bottom:12px;display:block}.search-result-info h4{color:#1e293b;font-size:16px;font-weight:600;margin:0 0 8px 0;line-height:1.4}.search-path{color:#64748b;font-size:12px;margin:0 0 8px 0;font-weight:500;background:rgba(100,116,139,0.1);padding:4px 8px;border-radius:6px;display:inline-block}.search-description{color:#64748b;font-size:14px;margin:0 0 12px 0;line-height:1.5}.search-match-type{position:absolute;top:12px;right:12px}.match-title{background:linear-gradient(135deg, #10b981 0%, #059669 100%);color:white;font-size:11px;font-weight:600;padding:4px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:0.5px}.match-description{background:linear-gradient(135deg, #f59e0b 0%, #d97706 100%);color:white;font-size:11px;font-weight:600;padding:4px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:0.5px}.search-no-results{text-align:center;padding:60px 20px}.search-no-results .empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center}.search-no-results .empty-state i{font-size:48px;color:#cbd5e1;margin-bottom:16px}.search-no-results .empty-state p{color:#64748b;font-size:16px;margin:0 0 8px 0;font-weight:500}.search-hint{color:#94a3b8 !important;font-size:14px !important;font-weight:400 !important}.child-count{color:rgba(19,18,18,0.9);font-size:14px;padding:4px 12px;background:rgba(255,255,255,0.15);border-radius:12px;border:1px solid rgba(255,255,255,0.2)}.path-breadcrumb{display:flex;align-items:center;gap:10px}.path-breadcrumb i{color:#667eea;font-size:16px;opacity:0.8}.path-text{color:#475569;font-size:14px;font-weight:500;line-height:1.5;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.grouped-children{display:flex;flex-direction:column;gap:30px}.parent-group{background:#ffffff;border-radius:12px;padding:20px;box-shadow:0 2px 12px rgba(0,0,0,0.05);border:1px solid rgba(0,0,0,0.05)}.group-header{display:flex;align-items:center;margin-bottom:24px;padding:0 0 16px 0;border-bottom:2px solid #f1f5f9;position:relative}.group-title-bar{width:4px;height:28px;background:linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);border-radius:2px;margin-right:16px;box-shadow:0 2px 8px rgba(59,130,246,0.3)}.group-title{color:#1e293b;font-size:18px;font-weight:700;margin:0;letter-spacing:0.02em;line-height:1.3;word-break:break-word;white-space:normal;overflow-wrap:break-word;max-width:100%;position:relative}.group-title::after{content:'';position:absolute;bottom:-20px;left:0;width:60px;height:2px;background:linear-gradient(90deg, #3b82f6 0%, transparent 100%);border-radius:1px}.group-children{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:24px;width:100%;justify-items:stretch}.last-level-group{background:transparent;border:none;box-shadow:none;padding:0;margin-bottom:0}.last-level-children{display:grid;grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));gap:24px;width:100%;padding:24px;justify-items:stretch}.last-level-children .child-node-item{width:100%;min-width:0}@media (max-width: 1200px){.group-children,.last-level-children{grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));gap:20px;padding:20px}}@media (max-width: 768px){.group-children,.last-level-children{grid-template-columns:1fr;gap:16px;padding:16px}}.child-node-item{transition:all 0.2s ease}.child-node-item:hover{transform:translateY(-1px)}.empty-state{text-align:center;padding:40px 20px;color:rgba(255,255,255,0.6)}.empty-state i{font-size:48px;margin-bottom:15px;color:rgba(255,255,255,0.3)}.empty-state p{font-size:16px;margin:0}.content-body{height:calc(100% - 80px);overflow-y:auto;overflow-x:hidden;padding-right:5px}.content-body::-webkit-scrollbar{width:6px}.content-body::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.content-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px;transition:background 0.3s ease}.content-body::-webkit-scrollbar-thumb:hover{background:#94a3b8}.content-body{scrollbar-width:thin;scrollbar-color:#cbd5e1 #f1f5f9}.child-nodes{display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap:20px;padding:20px}.child-node-item{transition:all 0.2s ease}.child-node-item:hover{transform:translateY(-2px)}.child-node-card{position:relative;display:flex;align-items:center;padding:20px 24px;background:#ffffff;border-radius:16px;border:1px solid #e2e8f0;cursor:pointer;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);box-shadow:0 4px 20px rgba(0,0,0,0.08);overflow:hidden;min-height:80px;width:100%}.child-node-card:hover{background:#ffffff;border-color:#3b82f6;transform:translateY(-4px);box-shadow:0 12px 40px rgba(59,130,246,0.15)}.child-node-card:hover::before{opacity:1}.child-node-card::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg, rgba(59,130,246,0.02) 0%, rgba(139,92,246,0.02) 100%);opacity:0;transition:opacity 0.3s ease;pointer-events:none}.child-node-card i{position:relative;z-index:1;font-size:24px;margin-right:16px;color:#3b82f6;width:28px;text-align:center;transition:all 0.3s ease;flex-shrink:0}.child-node-card:hover i{color:#2563eb;transform:scale(1.1)}.child-info{position:relative;z-index:1;flex:1;min-width:0}.child-info h4{color:#1e293b;font-size:14px;font-weight:600;margin:0;line-height:1.4;transition:color 0.3s ease;word-break:break-word}.child-node-card:hover .child-info h4{color:#0f172a}.node-details{padding:20px;background:rgba(255,255,255,0.05);border-radius:10px;color:rgba(255,255,255,0.8);font-size:14px;line-height:1.6}.placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:rgba(255,255,255,0.5);text-align:center}.placeholder i{font-size:48px;margin-bottom:20px;opacity:0.3}.placeholder p{font-size:16px;margin:0}.risk-giant-tree{width:100%;background:transparent;color:#0f172a}.risk-giant-tree .ztree{background:transparent !important;border:none !important}.risk-giant-tree .ztree li{margin:2px 0}.risk-giant-tree .ztree li a{height:auto !important;padding:12px 8px 12px 0 !important;background:rgba(255,255,255,0.85) !important;margin:4px 0 !important;border-radius:8px !important;border:1px solid rgba(15,23,42,0.08) !important;transition:all 0.3s ease !important;color:#0f172a !important;text-decoration:none !important;display:flex !important;align-items:center !important}.risk-giant-tree .ztree li a:hover{background:#fff !important;border-color:rgba(79,70,229,0.25) !important;transform:translateX(5px) !important}.risk-giant-tree .ztree li a.curSelectedNode{background:linear-gradient(135deg, #eef2ff 0%, #e9d5ff 100%) !important;border-color:rgba(79,70,229,0.35) !important;box-shadow:0 4px 15px rgba(102,126,234,0.25) !important;color:#0f172a !important;position:relative !important;font-weight:600 !important;transform:translateX(3px) !important;transition:all 0.3s ease !important}.risk-giant-tree .ztree li a.curSelectedNode,.risk-giant-tree .ztree li a.curSelectedNode:hover,.risk-giant-tree .ztree li a.curSelectedNode:focus,.risk-giant-tree .ztree li a.curSelectedNode:active{background:linear-gradient(135deg, #eef2ff 0%, #e9d5ff 100%) !important;border-color:rgba(79,70,229,0.35) !important;box-shadow:0 4px 15px rgba(102,126,234,0.25) !important;color:#0f172a !important;font-weight:600 !important}.risk-giant-tree .ztree li a.curSelectedNode::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);border-radius:0 0 8px 8px;box-shadow:0 2px 4px rgba(251,191,36,0.3)}.risk-giant-tree .ztree li a.selected{background:linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;border-color:rgba(251,191,36,0.4) !important;box-shadow:0 4px 15px rgba(251,191,36,0.2) !important;color:#0f172a !important;position:relative !important}.risk-giant-tree .ztree li a.selected::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);border-radius:0 0 8px 8px;box-shadow:0 2px 4px rgba(251,191,36,0.3)}.risk-giant-tree .ztree li a .node_name{color:#0f172a !important}.risk-giant-tree .ztree li a span{color:#0f172a !important}.left-tree-panel .ztree li a,.left-tree-panel .ztree li a span,.left-tree-panel .ztree li a.curSelectedNode,.left-tree-panel .ztree li a:hover{color:#0f172a !important}.left-tree-panel .risk-giant-tree .ztree li a,.left-tree-panel .risk-giant-tree .ztree li a *,.left-tree-panel .risk-giant-tree .ztree li a span,.left-tree-panel .risk-giant-tree .ztree li a .node_name,.left-tree-panel .risk-giant-tree .ztree li a .button,.left-tree-panel .risk-giant-tree .ztree li a .curSelectedNode,.left-tree-panel .risk-giant-tree .ztree li a:hover,.left-tree-panel .risk-giant-tree .ztree li a:focus,.left-tree-panel .risk-giant-tree .ztree li a:active{color:#0f172a !important}.left-tree-panel .risk-giant-tree .ztree li a::before,.left-tree-panel .risk-giant-tree .ztree li a::after{color:#4f46e5 !important}.risk-giant-tree .ztree li a{display:flex;align-items:center;padding:4px 8px;text-decoration:none;color:white;position:relative}.risk-giant-tree .ztree li a .button{margin-right:8px;font-size:14px;color:#4f46e5;width:16px;height:16px;text-align:center;line-height:16px;display:inline-block}.risk-giant-tree .ztree li span.button{margin-right:8px;font-size:12px;color:#6b7280;width:16px;height:16px;text-align:center;line-height:16px;display:inline-block}.risk-giant-tree .ztree li a span{color:white;font-size:14px;flex:1}.risk-giant-tree .ztree li a:hover{background-color:rgba(79,70,229,0.1);border-radius:4px}.risk-giant-tree .ztree li a.curSelectedNode{background-color:rgba(79,70,229,0.2);border-radius:4px;font-weight:500}.risk-giant-tree .ztree li a .button i{font-size:14px;color:#4f46e5;width:16px;height:16px;display:inline-block;text-align:center;line-height:16px}.risk-giant-tree .ztree li a i.folder-icon{font-size:14px;color:#4f46e5;width:16px;height:16px;display:inline-block;text-align:center;line-height:16px;margin-right:8px;transition:color 0.2s ease}.risk-giant-tree .ztree li a .button[class*="fa-"],.risk-giant-tree .ztree li a i[class*="fa-"]{font-family:"Font Awesome 5 Free", "Font Awesome 5 Pro";font-weight:900;font-style:normal}.risk-giant-tree .ztree li a:hover i.folder-icon{color:#6366f1}.ico_open{background-image:url(/images/folder-open.87e27ba7b0bfe792ecf6.png);background-size:contain;background-repeat:no-repeat;background-position:center;width:16px;height:16px;display:inline-block;margin-right:8px;vertical-align:middle}.ico_close{background-image:url(/images/folder-close.d8c13eb36599c365b657.png);background-size:contain;background-repeat:no-repeat;background-position:center;width:16px;height:16px;display:inline-block;margin-right:8px;vertical-align:middle}.ico_open:hover,.ico_close:hover{opacity:0.8;transition:opacity 0.2s ease}.risk-giant-tree .ztree li a .ico_close,.risk-giant-tree .ztree li a .ico_open{background-color:transparent !important;color:transparent !important;font-size:0 !important;width:16px;height:16px;display:inline-block;text-align:center;line-height:16px;margin-right:8px;transition:opacity 0.2s ease;border:none;border-radius:0;padding:0;background-size:contain !important;background-repeat:no-repeat !important;background-position:center !important}.risk-giant-tree .ztree li a:hover .ico_close,.risk-giant-tree .ztree li a:hover .ico_open{opacity:0.8;background-color:transparent !important}.tree-node-content{display:flex;align-items:center;width:100%}.tree-node-content .node-icon{margin-right:12px;font-size:16px;color:#409EFF;min-width:20px}.tree-node-content .node-label{font-size:14px;font-weight:500;color:white;flex:1}.risk-tree{background:transparent !important;color:white !important;width:100% !important;overflow:visible !important}.risk-tree .el-tree-node,.risk-tree .gt-tree-node,.risk-tree .tree-node,.risk-tree .giant-tree-node{color:white !important}.vue-giant-tree li{padding:5px 0}.risk-tree .el-tree-node__content,.risk-tree .gt-tree-node__content,.risk-tree .tree-node__content,.risk-tree .giant-tree-node__content{height:40px;line-height:40px;padding:0 12px;margin:2px 8px;border-radius:8px;background:rgba(255,255,255,0.05);transition:all 0.3s ease}.risk-tree .el-tree-node__content:hover{background:rgba(255,255,255,0.1);transform:translateX(3px)}.risk-tree .el-tree-node.is-current>.el-tree-node__content{background:rgba(255,255,255,0.15);border-left:3px solid white}.risk-tree .el-tree-node__expand-icon{color:rgba(255,255,255,0.7);font-size:12px;margin-right:8px}.risk-tree .el-tree-node__expand-icon.expanded{transform:rotate(90deg)}.risk-tree .tree-node-content{display:flex;align-items:center;width:100%}.risk-tree .tree-icon{font-size:14px;width:16px;margin-right:8px;color:rgba(255,255,255,0.8)}.risk-tree .tree-label{font-size:13px;color:white;flex:1}.risk-tree .tree-node-content.is-leaf .tree-icon{font-size:12px;color:rgba(255,255,255,0.6)}.risk-tree .tree-node-content.is-leaf .tree-label{font-size:12px;color:rgba(255,255,255,0.8)}.risk-tree .el-tree-node__children{padding-left:20px}.risk-tree .el-tree-node__children .el-tree-node__content{margin-left:0;background:rgba(255,255,255,0.03)}.risk-tree .el-tree-node__children .el-tree-node__children .el-tree-node__content{background:rgba(255,255,255,0.02);font-size:12px;height:36px;line-height:36px}.risk-tree .el-tree-node__children::before{display:none}.risk-tree .el-tree-node__children::after{display:none}.risk-content-area{flex:1;display:flex;flex-direction:column;background:#fafbfc;overflow:hidden}.content-header{padding:12px 40px;background:linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,250,252,0.9) 100%);border-bottom:1px solid rgba(102,126,234,0.1);position:relative;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.content-header::before{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg, #667eea 0%, #764ba2 50%, #8b5cf6 100%);border-radius:0}.content-header h4{margin:0 0 12px 0;color:#1e293b;font-size:28px;font-weight:700;letter-spacing:-0.01em;text-shadow:0 1px 2px rgba(0,0,0,0.05)}.content-subtitle{margin:0;color:#64748b;font-size:15px;line-height:1.6;font-weight:500}.risk-items-grid{flex:1;padding:40px;display:grid;grid-template-columns:repeat(auto-fill, minmax(360px, 1fr));gap:24px;overflow-y:auto;align-content:start;background:linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%)}.risk-items-grid::-webkit-scrollbar{width:8px}.risk-items-grid::-webkit-scrollbar-track{background:transparent}.risk-items-grid::-webkit-scrollbar-thumb{background:rgba(102,126,234,0.3);border-radius:4px;transition:background 0.3s ease}.risk-items-grid::-webkit-scrollbar-thumb:hover{background:rgba(102,126,234,0.5)}.risk-item-card{background:#ffffff;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:16px;padding:24px;cursor:pointer;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);border:1px solid rgba(102,126,234,0.1);display:flex;align-items:center;gap:20px;position:relative;overflow:hidden;box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06)}.risk-item-card::before{content:'';position:absolute;top:0;left:0;width:5px;height:100%;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);opacity:0;transition:all 0.3s ease}.risk-item-card::after{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(102,126,234,0.05), transparent);transition:left 0.6s ease}.risk-item-card:hover::before{opacity:1}.risk-item-card:hover::after{left:100%}.risk-item-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 20px 25px -5px rgba(0,0,0,0.1),0 10px 10px -5px rgba(0,0,0,0.04);border-color:rgba(102,126,234,0.3)}.risk-item-card:active{transform:translateY(-3px) scale(1.01)}.item-icon{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);display:flex;align-items:center;justify-content:center;color:white;font-size:22px;flex-shrink:0;position:relative;overflow:hidden;box-shadow:0 4px 12px rgba(102,126,234,0.3);transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1)}.item-icon::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%, rgba(255,255,255,0.1) 100%);opacity:0;transition:opacity 0.3s ease}.risk-item-card:hover .item-icon{transform:scale(1.1) rotate(5deg);box-shadow:0 8px 25px rgba(102,126,234,0.4)}.risk-item-card:hover .item-icon::before{opacity:1}.item-content{flex:1;min-width:0;position:relative;z-index:1}.item-title{margin:0 0 8px 0;color:#0f172a;font-size:18px;font-weight:700;line-height:1.3;letter-spacing:-0.01em;transition:color 0.3s ease}.risk-item-card:hover .item-title{color:#4f46e5}.item-description{margin:0;color:#475569;font-size:14px;line-height:1.5;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2;overflow:hidden;transition:color 0.3s ease}.risk-item-card:hover .item-description{color:#334155}.item-action{color:#64748b;font-size:16px;opacity:0.8;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:rgba(102,126,234,0.08);flex-shrink:0}.risk-item-card:hover .item-action{color:#4f46e5;opacity:1;transform:translateX(6px);background:rgba(79,70,229,0.12);box-shadow:0 2px 8px rgba(79,70,229,0.25)}@media (max-width: 1024px){.risk-management-container{flex-direction:column}.risk-menu-sidebar{width:100%;height:auto;background:linear-gradient(90deg, #667eea 0%, #764ba2 100%)}.menu-list-vertical{display:flex;overflow-x:auto;padding:10px 0}.menu-category{flex-shrink:0;margin:0 8px;white-space:nowrap}.risk-items-grid{grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap:16px;padding:24px}}@media (max-width: 768px){.risk-items-grid{grid-template-columns:1fr;gap:12px;padding:16px}.content-header{padding:20px 24px;flex-direction:column;align-items:flex-start;gap:16px}.header-left{width:100%}.header-right{width:100%;margin-left:0}.search-input-wrapper{min-width:auto;width:100%}.search-results-list{grid-template-columns:1fr;gap:12px}.content-header h4{font-size:20px}}.view-toggle-btn{display:flex;align-items:center;justify-content:center;background:#f8fafc;border:2px solid #e2e8f0;border-radius:8px;padding:8px;cursor:pointer;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);margin-left:12px;width:40px;height:40px;box-shadow:0 1px 3px rgba(0,0,0,0.05)}.view-toggle-btn:hover{background:#f1f5f9;border-color:#cbd5e1;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.1)}.view-toggle-btn.active{background:#3b82f6;border-color:#3b82f6;color:white;box-shadow:0 4px 12px rgba(59,130,246,0.3)}.view-toggle-btn i{font-size:16px;transition:all 0.3s ease}.view-toggle-btn:hover i{transform:scale(1.1)}@media (max-width: 768px){.view-toggle-btn{width:36px;height:36px;margin-left:8px}.view-toggle-btn i{font-size:14px}}@media (max-width: 480px){.view-toggle-btn{width:32px;height:32px;margin-left:6px}.view-toggle-btn i{font-size:12px}}.settings-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:10000;display:flex;justify-content:center;align-items:center;animation:fadeIn 0.3s ease}.settings-modal{background:white;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.3);max-width:90vw;max-height:90vh;width:600px;overflow:hidden;animation:slideInScale 0.3s ease}.settings-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid #e0e0e0;background:#f8f9fa}.settings-header h3{margin:0;font-size:18px;font-weight:600;color:#333}.settings-header h3 i{margin-right:8px;color:#007bff}.settings-header .close-settings{background:none;border:none;font-size:18px;color:#666;cursor:pointer;padding:4px;border-radius:4px;transition:all 0.2s ease}.settings-header .close-settings:hover{background:#e9ecef;color:#333}.settings-content{padding:24px;max-height:60vh;overflow-y:auto}.settings-section{margin-bottom:32px}.settings-section:last-child{margin-bottom:0}.settings-section h4{margin:0 0 12px 0;font-size:16px;font-weight:600;color:#333}.settings-section h4 i{margin-right:8px;color:#007bff}.settings-section .settings-description{margin:0 0 16px 0;font-size:14px;color:#666;line-height:1.4}.priority-list{border:1px solid #e0e0e0;border-radius:8px;overflow:hidden}.priority-item{display:flex;align-items:center;padding:12px 16px;border-bottom:1px solid #f0f0f0;background:white;transition:all 0.2s ease;cursor:move}.priority-item:last-child{border-bottom:none}.priority-item:hover{background:#f8f9fa}.priority-item.dragging{opacity:0.5;transform:rotate(2deg)}.priority-handle{margin-right:12px;color:#999;cursor:grab}.priority-handle:active{cursor:grabbing}.priority-handle i{font-size:14px}.priority-content{flex:1;display:flex;align-items:center}.priority-content .priority-icon{margin-right:12px;font-size:16px;color:#007bff;width:20px;text-align:center}.priority-content .priority-title{flex:1;font-weight:500;color:#333}.priority-content .priority-count{background:#e9ecef;color:#666;padding:2px 8px;border-radius:12px;font-size:12px;font-weight:500}.priority-actions{display:flex;flex-direction:column;gap:2px}.priority-actions .move-btn{background:none;border:none;color:#666;cursor:pointer;padding:4px;border-radius:4px;transition:all 0.2s ease}.priority-actions .move-btn:hover:not(:disabled){background:#e9ecef;color:#333}.priority-actions .move-btn:disabled{opacity:0.3;cursor:not-allowed}.priority-actions .move-btn i{font-size:12px}.setting-item{margin-bottom:16px}.setting-item:last-child{margin-bottom:0}.setting-label{display:flex;align-items:center;cursor:pointer;font-size:14px;color:#333}.setting-label input[type="checkbox"]{display:none}.setting-label .checkmark{width:18px;height:18px;border:2px solid #ddd;border-radius:4px;margin-right:12px;position:relative;transition:all 0.2s ease}.setting-label .checkmark::after{content:'';position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0;transition:opacity 0.2s ease}.setting-label input[type="checkbox"]:checked+.checkmark{background:#007bff;border-color:#007bff}.setting-label input[type="checkbox"]:checked+.checkmark::after{opacity:1}.setting-label:hover .checkmark{border-color:#007bff}.theme-options{display:grid;grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));gap:12px}.theme-option{display:flex;flex-direction:column;align-items:center;padding:16px;border:2px solid #e0e0e0;border-radius:8px;cursor:pointer;transition:all 0.2s ease}.theme-option:hover{border-color:#007bff}.theme-option input[type="radio"]{display:none}.theme-option input[type="radio"]:checked+.theme-preview{border-color:#007bff;box-shadow:0 0 0 2px rgba(0,123,255,0.2)}.theme-option input[type="radio"]:checked ~ .theme-name{color:#007bff;font-weight:600}.theme-preview{width:40px;height:30px;border-radius:4px;margin-bottom:8px;border:2px solid transparent;transition:all 0.2s ease}.theme-preview.default{background:linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)}.theme-preview.dark{background:linear-gradient(135deg, #343a40 0%, #495057 100%)}.theme-preview.blue{background:linear-gradient(135deg, #007bff 0%, #0056b3 100%)}.theme-preview.green{background:linear-gradient(135deg, #28a745 0%, #1e7e34 100%)}.theme-name{font-size:12px;color:#666;text-align:center;transition:all 0.2s ease}.settings-footer{display:flex;justify-content:flex-end;gap:12px;padding:20px 24px;border-top:1px solid #e0e0e0;background:#f8f9fa}.btn-primary,.btn-secondary{padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all 0.2s ease;border:none}.btn-primary{background:#007bff;color:white}.btn-primary:hover{background:#0056b3}.btn-secondary{background:#6c757d;color:white}.btn-secondary:hover{background:#545b62}@keyframes slideInRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes slideInScale{from{opacity:0;transform:scale(0.9) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@media (max-width: 768px){.settings-modal{margin:20px;width:auto;max-height:calc(100vh - 40px)}.settings-content{padding:16px}.theme-options{grid-template-columns:repeat(2, 1fr)}.priority-item{padding:8px 12px}.priority-content .priority-title{font-size:14px}}
*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;line-height:1.6;color:var(--text-primary);background:var(--bg-secondary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{margin:0;font-weight:inherit;font-size:inherit}p{margin:0}ul,ol{list-style:none}a{color:inherit;text-decoration:none}button{background:none;border:none;cursor:pointer;font-family:inherit}input,textarea,select{font-family:inherit;font-size:inherit}img{max-width:100%;height:auto;display:block}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-tertiary);border-radius:var(--radius-sm)}::-webkit-scrollbar-thumb{background:var(--border-medium);border-radius:var(--radius-sm);transition:background var(--transition-normal)}::-webkit-scrollbar-thumb:hover{background:var(--border-dark)}::selection{background:rgba(59,130,246,0.2);color:var(--text-primary)}:focus{outline:2px solid var(--primary-color);outline-offset:2px}:focus:not(:focus-visible){outline:none}:root{--primary-color: #3b82f6;--primary-dark: #1d4ed8;--primary-light: #60a5fa;--secondary-color: #64748b;--accent-color: #f59e0b;--gray-50: #f8fafc;--gray-100: #f1f5f9;--gray-200: #e2e8f0;--gray-300: #cbd5e1;--gray-400: #94a3b8;--gray-500: #64748b;--gray-600: #475569;--gray-700: #334155;--gray-800: #1e293b;--gray-900: #0f172a;--success-color: #10b981;--warning-color: #f59e0b;--error-color: #ef4444;--info-color: #3b82f6;--bg-primary: #ffffff;--bg-secondary: #f8fafc;--bg-tertiary: #f1f5f9;--bg-dark: #1e293b;--bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--text-primary: #1e293b;--text-secondary: #475569;--text-tertiary: #64748b;--text-inverse: #ffffff;--border-light: #e2e8f0;--border-medium: #cbd5e1;--border-dark: #94a3b8;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--text-xs: 12px;--text-sm: 14px;--text-base: 16px;--text-lg: 18px;--text-xl: 20px;--text-2xl: 24px;--text-3xl: 30px;--text-4xl: 36px;--font-light: 300;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--font-extrabold: 800;--leading-tight: 1.25;--leading-normal: 1.5;--leading-relaxed: 1.625;--transition-fast: 0.15s ease;--transition-normal: 0.3s ease;--transition-slow: 0.5s ease;--z-dropdown: 1000;--z-sticky: 1020;--z-fixed: 1030;--z-modal-backdrop: 1040;--z-modal: 1050;--z-popover: 1060;--z-tooltip: 1070;--breakpoint-sm: 640px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px;--breakpoint-2xl: 1536px}body{font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;line-height:var(--leading-normal);color:var(--text-primary)}h1,h2,h3,h4,h5,h6{font-weight:var(--font-semibold);line-height:var(--leading-tight);color:var(--text-primary)}h1{font-size:var(--text-4xl)}h2{font-size:var(--text-3xl)}h3{font-size:var(--text-2xl)}h4{font-size:var(--text-xl)}h5{font-size:var(--text-lg)}h6{font-size:var(--text-base)}p{margin-bottom:var(--spacing-md);line-height:var(--leading-normal)}a{color:var(--primary-color);text-decoration:none;transition:color var(--transition-normal)}a:hover{color:var(--primary-dark)}.text-xs{font-size:var(--text-xs)}.text-sm{font-size:var(--text-sm)}.text-base{font-size:var(--text-base)}.text-lg{font-size:var(--text-lg)}.text-xl{font-size:var(--text-xl)}.text-2xl{font-size:var(--text-2xl)}.text-3xl{font-size:var(--text-3xl)}.text-4xl{font-size:var(--text-4xl)}.font-light{font-weight:var(--font-light)}.font-normal{font-weight:var(--font-normal)}.font-medium{font-weight:var(--font-medium)}.font-semibold{font-weight:var(--font-semibold)}.font-bold{font-weight:var(--font-bold)}.font-extrabold{font-weight:var(--font-extrabold)}.text-primary{color:var(--text-primary)}.text-secondary{color:var(--text-secondary)}.text-tertiary{color:var(--text-tertiary)}.text-inverse{color:var(--text-inverse)}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.leading-tight{line-height:var(--leading-tight)}.leading-normal{line-height:var(--leading-normal)}.leading-relaxed{line-height:var(--leading-relaxed)}.d-none{display:none !important}.d-block{display:block !important}.d-inline{display:inline !important}.d-inline-block{display:inline-block !important}.d-flex{display:flex !important}.d-inline-flex{display:inline-flex !important}.d-grid{display:grid !important}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.flex-nowrap{flex-wrap:nowrap}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.items-stretch{align-items:stretch}.flex-1{flex:1}.flex-auto{flex:auto}.flex-none{flex:none}.m-0{margin:0}.m-1{margin:var(--spacing-xs)}.m-2{margin:var(--spacing-sm)}.m-3{margin:var(--spacing-md)}.m-4{margin:var(--spacing-lg)}.m-5{margin:var(--spacing-xl)}.mt-0{margin-top:0}.mt-1{margin-top:var(--spacing-xs)}.mt-2{margin-top:var(--spacing-sm)}.mt-3{margin-top:var(--spacing-md)}.mt-4{margin-top:var(--spacing-lg)}.mt-5{margin-top:var(--spacing-xl)}.mb-0{margin-bottom:0}.mb-1{margin-bottom:var(--spacing-xs)}.mb-2{margin-bottom:var(--spacing-sm)}.mb-3{margin-bottom:var(--spacing-md)}.mb-4{margin-bottom:var(--spacing-lg)}.mb-5{margin-bottom:var(--spacing-xl)}.ml-0{margin-left:0}.ml-1{margin-left:var(--spacing-xs)}.ml-2{margin-left:var(--spacing-sm)}.ml-3{margin-left:var(--spacing-md)}.ml-4{margin-left:var(--spacing-lg)}.ml-5{margin-left:var(--spacing-xl)}.mr-0{margin-right:0}.mr-1{margin-right:var(--spacing-xs)}.mr-2{margin-right:var(--spacing-sm)}.mr-3{margin-right:var(--spacing-md)}.mr-4{margin-right:var(--spacing-lg)}.mr-5{margin-right:var(--spacing-xl)}.p-0{padding:0}.p-1{padding:var(--spacing-xs)}.p-2{padding:var(--spacing-sm)}.p-3{padding:var(--spacing-md)}.p-4{padding:var(--spacing-lg)}.p-5{padding:var(--spacing-xl)}.pt-0{padding-top:0}.pt-1{padding-top:var(--spacing-xs)}.pt-2{padding-top:var(--spacing-sm)}.pt-3{padding-top:var(--spacing-md)}.pt-4{padding-top:var(--spacing-lg)}.pt-5{padding-top:var(--spacing-xl)}.pb-0{padding-bottom:0}.pb-1{padding-bottom:var(--spacing-xs)}.pb-2{padding-bottom:var(--spacing-sm)}.pb-3{padding-bottom:var(--spacing-md)}.pb-4{padding-bottom:var(--spacing-lg)}.pb-5{padding-bottom:var(--spacing-xl)}.pl-0{padding-left:0}.pl-1{padding-left:var(--spacing-xs)}.pl-2{padding-left:var(--spacing-sm)}.pl-3{padding-left:var(--spacing-md)}.pl-4{padding-left:var(--spacing-lg)}.pl-5{padding-left:var(--spacing-xl)}.pr-0{padding-right:0}.pr-1{padding-right:var(--spacing-xs)}.pr-2{padding-right:var(--spacing-sm)}.pr-3{padding-right:var(--spacing-md)}.pr-4{padding-right:var(--spacing-lg)}.pr-5{padding-right:var(--spacing-xl)}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}.w-full{width:100%}.w-auto{width:auto}.h-full{height:100%}.h-auto{height:auto}.rounded-none{border-radius:0}.rounded-sm{border-radius:var(--radius-sm)}.rounded{border-radius:var(--radius-md)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-full{border-radius:var(--radius-full)}.shadow-none{box-shadow:none}.shadow-sm{box-shadow:var(--shadow-sm)}.shadow{box-shadow:var(--shadow-md)}.shadow-lg{box-shadow:var(--shadow-lg)}.shadow-xl{box-shadow:var(--shadow-xl)}.transition{transition:all var(--transition-normal)}.transition-fast{transition:all var(--transition-fast)}.transition-slow{transition:all var(--transition-slow)}.cursor-pointer{cursor:pointer}.cursor-not-allowed{cursor:not-allowed}.select-none{user-select:none}.select-text{user-select:text}.select-all{user-select:all}.overflow-hidden{overflow:hidden}.overflow-auto{overflow:auto}.overflow-scroll{overflow:scroll}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}@media (max-width: 767px){.d-md-none{display:none !important}.d-md-block{display:block !important}.d-md-flex{display:flex !important}}@media (min-width: 768px) and (max-width: 1023px){.d-lg-none{display:none !important}.d-lg-block{display:block !important}.d-lg-flex{display:flex !important}}:root{--primary-color: #3b82f6;--primary-dark: #1d4ed8;--primary-light: #60a5fa;--secondary-color: #64748b;--accent-color: #f59e0b;--gray-50: #f8fafc;--gray-100: #f1f5f9;--gray-200: #e2e8f0;--gray-300: #cbd5e1;--gray-400: #94a3b8;--gray-500: #64748b;--gray-600: #475569;--gray-700: #334155;--gray-800: #1e293b;--gray-900: #0f172a;--success-color: #10b981;--warning-color: #f59e0b;--error-color: #ef4444;--info-color: #3b82f6;--bg-primary: #ffffff;--bg-secondary: #f8fafc;--bg-tertiary: #f1f5f9;--bg-dark: #1e293b;--bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--text-primary: #1e293b;--text-secondary: #475569;--text-tertiary: #64748b;--text-inverse: #ffffff;--border-light: #e2e8f0;--border-medium: #cbd5e1;--border-dark: #94a3b8;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--text-xs: 12px;--text-sm: 14px;--text-base: 16px;--text-lg: 18px;--text-xl: 20px;--text-2xl: 24px;--text-3xl: 30px;--text-4xl: 36px;--font-light: 300;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--font-extrabold: 800;--leading-tight: 1.25;--leading-normal: 1.5;--leading-relaxed: 1.625;--transition-fast: 0.15s ease;--transition-normal: 0.3s ease;--transition-slow: 0.5s ease;--z-dropdown: 1000;--z-sticky: 1020;--z-fixed: 1030;--z-modal-backdrop: 1040;--z-modal: 1050;--z-popover: 1060;--z-tooltip: 1070;--breakpoint-sm: 640px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px;--breakpoint-2xl: 1536px}.login-page{min-height:100vh;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--bg-gradient)}.background{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1}.particles{position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden}.particle{position:absolute;width:4px;height:4px;background:rgba(255,255,255,0.1);border-radius:50%;animation:float linear infinite}@keyframes float{0%{transform:translateY(100vh) rotate(0deg);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-100px) rotate(360deg);opacity:0}}.grid-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px);background-size:50px 50px;animation:grid-move 20s linear infinite}@keyframes grid-move{0%{transform:translate(0, 0)}100%{transform:translate(50px, 50px)}}.container{position:relative;z-index:2;width:100%;max-width:1200px;padding:var(--spacing-lg);display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-2xl)}.welcome-section{flex:1;color:white;text-align:center}@media (max-width: 767px){.welcome-section{display:none}}.welcome-title{font-size:var(--text-4xl);font-weight:var(--font-bold);margin-bottom:var(--spacing-md);line-height:var(--leading-tight)}@media (min-width: 768px) and (max-width: 1023px){.welcome-title{font-size:var(--text-3xl)}}.welcome-subtitle{font-size:var(--text-xl);font-weight:var(--font-medium);opacity:0.9;line-height:var(--leading-normal)}@media (min-width: 768px) and (max-width: 1023px){.welcome-subtitle{font-size:var(--text-lg)}}.login-container{flex:0 0 400px}@media (max-width: 767px){.login-container{flex:1;max-width:100%}}.login-card{background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);border-radius:var(--radius-xl);padding:var(--spacing-2xl);box-shadow:var(--shadow-xl);border:1px solid rgba(255,255,255,0.2)}.card-header{text-align:center;margin-bottom:var(--spacing-xl)}.logo{margin-bottom:var(--spacing-md)}.logo-image{height:60px;width:auto;margin:0 auto}.subtitle{font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--text-primary);margin:0}.login-tabs{display:flex;margin-bottom:var(--spacing-xl);background:var(--bg-tertiary);border-radius:var(--radius-lg);padding:var(--spacing-xs)}.tab-btn{flex:1;padding:var(--spacing-sm) var(--spacing-md);background:transparent;border:none;border-radius:var(--radius-md);color:var(--text-secondary);font-size:var(--text-sm);font-weight:var(--font-medium);cursor:pointer;transition:all var(--transition-normal)}.tab-btn.active{background:white;color:var(--primary-color);box-shadow:var(--shadow-sm)}.tab-btn:hover:not(.active){color:var(--text-primary)}.form-container{position:relative}.login-form{display:none}.login-form.active{display:block}.input-group{margin-bottom:var(--spacing-lg);position:relative}.input-container{position:relative}.input-container input{width:100%;padding:var(--spacing-md) var(--spacing-md) var(--spacing-sm);border:2px solid var(--border-light);border-radius:var(--radius-md);background:white;font-size:var(--text-base);color:var(--text-primary);transition:all var(--transition-normal)}.input-container input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(59,130,246,0.1)}.input-container input:focus+label,.input-container input:not(:placeholder-shown)+label{transform:translateY(-8px) scale(0.85);color:var(--primary-color)}.input-container label{position:absolute;left:var(--spacing-md);top:var(--spacing-md);color:var(--text-tertiary);font-size:var(--text-base);pointer-events:none;transition:all var(--transition-normal);transform-origin:left top}.input-border{position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--primary-color);transform:scaleX(0);transition:transform var(--transition-normal)}.input-container input:focus ~ .input-border{transform:scaleX(1)}.password-toggle{position:absolute;right:var(--spacing-md);top:50%;transform:translateY(-50%);width:24px;height:24px;background:none;border:none;color:var(--text-tertiary);cursor:pointer;transition:color var(--transition-normal)}.password-toggle:hover{color:var(--primary-color)}.password-toggle svg{width:100%;height:100%}.captcha-group{display:flex;gap:var(--spacing-md)}.captcha-input{flex:1}.captcha-image{flex:0 0 120px;height:48px;background:var(--bg-tertiary);border:2px solid var(--border-light);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;transition:all var(--transition-normal)}.captcha-image:hover{border-color:var(--primary-color)}.captcha-image span{font-size:var(--text-lg);font-weight:var(--font-bold);color:var(--text-primary);letter-spacing:2px}.refresh-captcha{position:absolute;top:-8px;right:-8px;width:20px;height:20px;background:var(--primary-color);border:none;border-radius:50%;color:white;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-normal)}.refresh-captcha:hover{background:var(--primary-dark);transform:scale(1.1)}.refresh-captcha svg{width:12px;height:12px}.form-options{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xl)}.checkbox-container{display:flex;align-items:center;gap:var(--spacing-sm);cursor:pointer;font-size:var(--text-sm);color:var(--text-secondary)}.checkbox-container input[type="checkbox"]{display:none}.checkbox-container .checkmark{width:18px;height:18px;border:2px solid var(--border-medium);border-radius:var(--radius-sm);position:relative;transition:all var(--transition-normal)}.checkbox-container .checkmark::after{content:'';position:absolute;left:4px;top:1px;width:6px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0;transition:opacity var(--transition-normal)}.checkbox-container input[type="checkbox"]:checked+.checkmark{background:var(--primary-color);border-color:var(--primary-color)}.checkbox-container input[type="checkbox"]:checked+.checkmark::after{opacity:1}.forgot-password{color:var(--primary-color);font-size:var(--text-sm);transition:color var(--transition-normal)}.forgot-password:hover{color:var(--primary-dark)}.login-btn{width:100%;padding:var(--spacing-md);background:linear-gradient(135deg, var(--primary-color), var(--primary-dark));border:none;border-radius:var(--radius-md);color:white;font-size:var(--text-base);font-weight:var(--font-semibold);cursor:pointer;transition:all var(--transition-normal);position:relative;overflow:hidden}.login-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:var(--shadow-lg)}.login-btn:active{transform:translateY(0)}.login-btn:disabled{opacity:0.7;cursor:not-allowed}.btn-text{position:relative;z-index:1}.btn-loader{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:20px;height:20px;border:2px solid rgba(255,255,255,0.3);border-top:2px solid white;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:translate(-50%, -50%) rotate(0deg)}100%{transform:translate(-50%, -50%) rotate(360deg)}}.action-buttons{margin-top:var(--spacing-xl);text-align:center}.member-notification-btn{display:inline-flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:var(--radius-md);color:white;font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-normal)}.member-notification-btn:hover{background:rgba(255,255,255,0.2);transform:translateY(-1px)}.member-notification-btn svg{width:16px;height:16px}@media (max-width: 767px){.container{padding:var(--spacing-md)}.login-card{padding:var(--spacing-xl)}.captcha-group{flex-direction:column}.captcha-image{flex:none;width:100%}}.quick-access{margin-top:var(--spacing-lg);display:flex;gap:var(--spacing-md);justify-content:center}.quick-access .quick-btn{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:var(--radius-lg);color:white;font-size:14px;font-weight:500;cursor:pointer;transition:all 0.3s ease;backdrop-filter:blur(10px)}.quick-access .quick-btn:hover{background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.3);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.2)}.quick-access .quick-btn i{font-size:12px}@media (max-width: 767px){.quick-access{flex-direction:column}.quick-access .quick-btn{justify-content:center}}:root{--primary-color: #3b82f6;--primary-dark: #1d4ed8;--primary-light: #60a5fa;--secondary-color: #64748b;--accent-color: #f59e0b;--gray-50: #f8fafc;--gray-100: #f1f5f9;--gray-200: #e2e8f0;--gray-300: #cbd5e1;--gray-400: #94a3b8;--gray-500: #64748b;--gray-600: #475569;--gray-700: #334155;--gray-800: #1e293b;--gray-900: #0f172a;--success-color: #10b981;--warning-color: #f59e0b;--error-color: #ef4444;--info-color: #3b82f6;--bg-primary: #ffffff;--bg-secondary: #f8fafc;--bg-tertiary: #f1f5f9;--bg-dark: #1e293b;--bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--text-primary: #1e293b;--text-secondary: #475569;--text-tertiary: #64748b;--text-inverse: #ffffff;--border-light: #e2e8f0;--border-medium: #cbd5e1;--border-dark: #94a3b8;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 48px;--text-xs: 12px;--text-sm: 14px;--text-base: 16px;--text-lg: 18px;--text-xl: 20px;--text-2xl: 24px;--text-3xl: 30px;--text-4xl: 36px;--font-light: 300;--font-normal: 400;--font-medium: 500;--font-semibold: 600;--font-bold: 700;--font-extrabold: 800;--leading-tight: 1.25;--leading-normal: 1.5;--leading-relaxed: 1.625;--transition-fast: 0.15s ease;--transition-normal: 0.3s ease;--transition-slow: 0.5s ease;--z-dropdown: 1000;--z-sticky: 1020;--z-fixed: 1030;--z-modal-backdrop: 1040;--z-modal: 1050;--z-popover: 1060;--z-tooltip: 1070;--breakpoint-sm: 640px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px;--breakpoint-2xl: 1536px}.dashboard{min-height:100vh;background:var(--bg-gradient);position:relative}.main-container{display:flex;min-height:calc(100vh - 70px);position:relative}.main-content{flex:1;padding:var(--spacing-lg);overflow-y:auto;position:relative;z-index:1}.systems-section{background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);border-radius:var(--radius-xl);padding:var(--spacing-xl);margin-bottom:var(--spacing-lg);box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,0.2);position:relative;overflow:hidden}.systems-section::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg, var(--primary-color), var(--accent-color))}.systems-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xl);padding-bottom:var(--spacing-md);border-bottom:1px solid var(--border-light)}.systems-title{font-size:var(--text-2xl);font-weight:var(--font-bold);color:var(--text-primary);margin:0;position:relative}.systems-title::after{content:'';position:absolute;bottom:-8px;left:0;width:40px;height:3px;background:var(--primary-color);border-radius:var(--radius-full)}.systems-actions{display:flex;gap:var(--spacing-sm)}.view-toggle-btn{width:40px;height:40px;border:1px solid var(--border-light);background:white;border-radius:var(--radius-md);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-normal);color:var(--text-secondary)}.view-toggle-btn:hover{border-color:var(--primary-color);color:var(--primary-color);transform:translateY(-1px)}.view-toggle-btn.active{background:var(--primary-color);border-color:var(--primary-color);color:white;box-shadow:var(--shadow-md)}.view-toggle-btn i{font-size:var(--text-base)}.systems-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));gap:var(--spacing-lg)}.systems-grid.list-view{grid-template-columns:1fr}.systems-grid.list-view .system-card{display:flex;flex-direction:row;align-items:center;min-height:auto;padding:var(--spacing-lg)}.systems-grid.list-view .system-card .card-icon{margin-right:var(--spacing-lg);margin-bottom:0;flex-shrink:0}.systems-grid.list-view .system-card .card-content{flex:1;margin-bottom:0}.systems-grid.list-view .system-card .card-actions{margin-left:var(--spacing-lg)}.system-card{background:white;border-radius:var(--radius-xl);padding:var(--spacing-xl);box-shadow:var(--shadow-md);border:1px solid var(--border-light);cursor:pointer;transition:all var(--transition-normal);overflow:hidden;position:relative;display:flex;flex-direction:column;min-height:200px}.system-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl);border-color:var(--primary-color)}.system-card:hover .card-hover-effect{opacity:1}.system-card:hover .card-action-btn{opacity:1;transform:translateX(0)}.system-card:focus{outline:2px solid var(--primary-color);outline-offset:2px}.card-icon{width:60px;height:60px;border-radius:var(--radius-xl);display:flex;align-items:center;justify-content:center;margin-bottom:var(--spacing-lg);position:relative;overflow:hidden}.card-icon::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1));border-radius:var(--radius-xl)}.card-icon i{font-size:var(--text-2xl);color:white;position:relative;z-index:1}.card-content{flex:1;display:flex;flex-direction:column;margin-bottom:var(--spacing-lg)}.card-title{font-size:var(--text-lg);font-weight:var(--font-semibold);color:var(--text-primary);margin:0 0 var(--spacing-sm) 0;line-height:var(--leading-tight)}.card-description{font-size:var(--text-sm);color:var(--text-secondary);margin:0 0 var(--spacing-md) 0;line-height:var(--leading-normal);flex:1}.card-meta{display:flex;align-items:center;gap:var(--spacing-md);margin-top:auto}.card-status{padding:var(--spacing-xs) var(--spacing-sm);border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:var(--font-semibold);text-transform:uppercase;letter-spacing:0.5px}.card-status.status-online{background:#dcfce7;color:#166534}.card-status.status-offline{background:#fee2e2;color:#991b1b}.card-status.status-maintenance{background:#fef3c7;color:#92400e}.card-users{font-size:var(--text-xs);color:var(--text-tertiary);font-weight:var(--font-medium)}.card-actions{position:absolute;top:var(--spacing-lg);right:var(--spacing-lg)}.card-action-btn{width:36px;height:36px;border-radius:50%;background:rgba(59,130,246,0.1);border:1px solid rgba(59,130,246,0.2);color:var(--primary-color);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-normal);opacity:0;transform:translateX(10px)}.card-action-btn:hover{background:var(--primary-color);color:white;transform:translateX(0) scale(1.1)}.card-action-btn i{font-size:var(--text-sm)}.card-hover-effect{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg, rgba(59,130,246,0.05), rgba(147,51,234,0.05));opacity:0;transition:opacity var(--transition-normal);pointer-events:none}.status-online .card-icon{box-shadow:0 0 20px rgba(16,185,129,0.3)}.status-maintenance .card-icon{box-shadow:0 0 20px rgba(245,158,11,0.3)}.status-offline .card-icon{box-shadow:0 0 20px rgba(239,68,68,0.3)}@media (max-width: 767px){.main-content{padding:var(--spacing-md)}.systems-section{padding:var(--spacing-lg)}.systems-header{flex-direction:column;align-items:flex-start;gap:var(--spacing-md)}.systems-title{font-size:var(--text-xl)}.systems-grid{grid-template-columns:1fr;gap:var(--spacing-md)}.system-card{padding:var(--spacing-lg);min-height:180px}.system-card.list-view{padding:var(--spacing-md)}.card-icon{width:50px;height:50px;margin-bottom:var(--spacing-md)}.card-icon i{font-size:var(--text-xl)}.card-title{font-size:var(--text-base)}.card-description{font-size:var(--text-xs)}.card-actions{top:var(--spacing-md);right:var(--spacing-md)}.card-action-btn{width:32px;height:32px}.card-action-btn i{font-size:var(--text-xs)}}@media (min-width: 768px) and (max-width: 1023px){.systems-grid{grid-template-columns:repeat(auto-fill, minmax(280px, 1fr))}}
.navigation-menu[data-v-079b8c30]{background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);border-right:1px solid rgba(0,0,0,0.1);height:100vh;position:fixed;left:0;top:0;width:250px;z-index:100;display:flex;flex-direction:column}.nav-container[data-v-079b8c30]{display:flex;flex-direction:column;height:100%;padding:20px 0}.nav-list[data-v-079b8c30]{list-style:none;margin:0;padding:0;flex:1}.nav-item[data-v-079b8c30]{margin-bottom:4px}.nav-link[data-v-079b8c30]{display:flex;align-items:center;padding:12px 20px;color:#64748b;text-decoration:none;transition:all 0.3s ease;border-radius:0 25px 25px 0;margin-right:20px}.nav-link[data-v-079b8c30]:hover{background:rgba(59,130,246,0.1);color:#3b82f6;transform:translateX(4px)}.nav-link.active[data-v-079b8c30]{background:linear-gradient(135deg, #3b82f6, #1d4ed8);color:white;box-shadow:0 4px 12px rgba(59,130,246,0.3)}.nav-link i[data-v-079b8c30]{width:20px;text-align:center;margin-right:12px;font-size:16px}.nav-text[data-v-079b8c30]{font-weight:500;font-size:14px}.user-section[data-v-079b8c30]{padding:20px;border-top:1px solid rgba(0,0,0,0.1);background:rgba(248,250,252,0.8)}.user-info[data-v-079b8c30]{display:flex;align-items:center;margin-bottom:12px}.user-avatar[data-v-079b8c30]{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg, #3b82f6, #1d4ed8);display:flex;align-items:center;justify-content:center;color:white;margin-right:12px}.user-avatar i[data-v-079b8c30]{font-size:16px}.user-details[data-v-079b8c30]{display:flex;flex-direction:column}.user-name[data-v-079b8c30]{font-weight:600;color:#1e293b;font-size:14px}.user-role[data-v-079b8c30]{font-size:12px;color:#64748b}.user-actions[data-v-079b8c30]{display:flex;gap:8px}.action-btn[data-v-079b8c30]{width:32px;height:32px;border-radius:8px;background:#f1f5f9;border:1px solid #e2e8f0;color:#64748b;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease}.action-btn[data-v-079b8c30]:hover{background:#ef4444;color:white;border-color:#ef4444}.action-btn i[data-v-079b8c30]{font-size:14px}@media (max-width: 768px){.navigation-menu[data-v-079b8c30]{transform:translateX(-100%);transition:transform 0.3s ease}.navigation-menu.mobile-open[data-v-079b8c30]{transform:translateX(0)}}