:root{--primary:#0d9488;--primary-light:#14b8a6;--primary-dark:#0f766e;--primary-bg:rgba(13,148,136,0.1);--success:#10b981;--success-bg:rgba(16,185,129,0.1);--warning:#f59e0b;--warning-bg:rgba(245,158,11,0.1);--danger:#ef4444;--danger-bg:rgba(239,68,68,0.1);--sidebar-width:260px;--radius:12px;--radius-sm:8px;--shadow-sm:0 1px 2px rgba(0,0,0,0.04);--shadow:0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.07),0 2px 4px -1px rgba(0,0,0,0.04);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.08),0 4px 6px -2px rgba(0,0,0,0.04);--transition:all 0.2s ease}
[data-theme="light"]{--bg-body:#f8fafc;--bg-sidebar:#ffffff;--bg-card:#ffffff;--bg-input:#ffffff;--bg-hover:#f1f5f9;--bg-active:var(--primary-bg);--border:#e2e8f0;--text-primary:#0f172a;--text-secondary:#64748b;--text-muted:#94a3b8;--toggle-bg:#cbd5e1}
[data-theme="dark"]{--bg-body:#0f172a;--bg-sidebar:#1e293b;--bg-card:#1e293b;--bg-input:#334155;--bg-hover:#334155;--bg-active:rgba(13,148,136,0.2);--border:#334155;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#64748b;--toggle-bg:#475569;--shadow-sm:0 1px 2px rgba(0,0,0,0.2);--shadow:0 1px 3px rgba(0,0,0,0.3);--shadow-md:0 4px 6px rgba(0,0,0,0.3);--shadow-lg:0 10px 15px rgba(0,0,0,0.4)}
*{margin:0;padding:0;box-sizing:border-box}html{font-size:14px}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg-body);color:var(--text-primary);line-height:1.6;min-height:100vh;transition:background 0.3s,color 0.3s}
a{color:var(--primary);text-decoration:none;transition:var(--transition)}a:hover{color:var(--primary-dark)}
.app-layout{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-width);background:var(--bg-sidebar);border-right:1px solid var(--border);position:fixed;height:100vh;display:flex;flex-direction:column;transition:transform 0.3s;z-index:100}
.sidebar-header{padding:24px 20px;border-bottom:1px solid var(--border)}
.sidebar-logo{display:flex;align-items:center;gap:12px}
.sidebar-logo-icon{width:40px;height:40px;background:linear-gradient(135deg,var(--primary),var(--primary-light));border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:#fff}
.sidebar-logo-text{font-size:1.25rem;font-weight:700;color:var(--text-primary)}
.sidebar-user{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px}
.user-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-light));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600}
.user-info{flex:1;min-width:0}.user-name{font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-role{font-size:0.8rem;color:var(--text-muted)}
.sidebar-nav{flex:1;padding:16px 12px;overflow-y:auto}
.nav-section{margin-bottom:24px}.nav-section-title{font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted);padding:0 12px;margin-bottom:8px}
.nav-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--radius-sm);color:var(--text-secondary);font-weight:500;transition:var(--transition);margin-bottom:4px}
.nav-item:hover{background:var(--bg-hover);color:var(--text-primary)}.nav-item.active{background:var(--bg-active);color:var(--primary)}.nav-item svg{width:20px;height:20px;flex-shrink:0}
.sidebar-footer{padding:16px 20px;border-top:1px solid var(--border)}
.theme-toggle{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--bg-hover);border-radius:var(--radius-sm);cursor:pointer;margin-bottom:12px;transition:var(--transition)}
.theme-toggle:hover{background:var(--border)}.theme-toggle-label{display:flex;align-items:center;gap:12px;color:var(--text-secondary);font-weight:500}.theme-toggle-label svg{width:20px;height:20px}
.toggle-switch{width:48px;height:26px;background:var(--toggle-bg);border-radius:13px;position:relative;transition:var(--transition);flex-shrink:0}
.toggle-switch::after{content:'';position:absolute;width:20px;height:20px;background:#fff;border-radius:50%;top:3px;left:3px;transition:var(--transition);box-shadow:0 2px 4px rgba(0,0,0,0.2)}
.toggle-switch.active{background:var(--primary)}.toggle-switch.active::after{left:25px}
.logout-btn{display:flex;align-items:center;gap:12px;padding:12px 16px;background:transparent;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);font-weight:500;cursor:pointer;width:100%;transition:var(--transition);font-size:0.875rem}
.logout-btn:hover{background:var(--danger-bg);border-color:var(--danger);color:var(--danger)}.logout-btn svg{width:20px;height:20px}
.mobile-menu-toggle{display:none;position:fixed;top:16px;left:16px;z-index:200;width:44px;height:44px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-md)}
.mobile-menu-toggle svg{width:24px;height:24px;color:var(--text-primary)}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:90}
.main-content{flex:1;margin-left:var(--sidebar-width);padding:24px 32px;min-height:100vh;transition:var(--transition)}
.page-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px;gap:16px;flex-wrap:wrap}
.page-header-left h1{font-size:1.75rem;font-weight:700;color:var(--text-primary);margin-bottom:4px}.page-header-left p{color:var(--text-secondary)}
.page-header-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.welcome-banner{background:linear-gradient(135deg,var(--primary),var(--primary-light));border-radius:var(--radius);padding:32px;color:#fff;margin-bottom:24px;position:relative;overflow:hidden}
.welcome-banner::before{content:'';position:absolute;top:-50%;right:-20%;width:400px;height:400px;background:rgba(255,255,255,0.1);border-radius:50%}
.welcome-banner h2{font-size:1.5rem;font-weight:700;margin-bottom:8px;position:relative}.welcome-banner p{opacity:0.9;margin-bottom:20px;position:relative}
.welcome-banner-actions{display:flex;gap:12px;position:relative;flex-wrap:wrap}
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.card-header{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.card-header h3{font-size:1rem;font-weight:600;color:var(--text-primary)}.card-body{padding:24px}
.card-link{color:var(--primary);font-weight:500;font-size:0.875rem;display:flex;align-items:center;gap:4px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px 24px;display:flex;align-items:flex-start;gap:16px;transition:var(--transition)}
.stat-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.stat-icon{width:48px;height:48px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}.stat-icon svg{width:24px;height:24px}
.stat-icon.primary{background:var(--primary-bg);color:var(--primary)}.stat-icon.success{background:var(--success-bg);color:var(--success)}.stat-icon.warning{background:var(--warning-bg);color:var(--warning)}.stat-icon.danger{background:var(--danger-bg);color:var(--danger)}
.stat-content{flex:1;min-width:0}.stat-value{font-size:1.75rem;font-weight:700;color:var(--text-primary);line-height:1.2}.stat-label{font-size:0.875rem;color:var(--text-secondary);margin-top:4px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.grid-70-30{display:grid;grid-template-columns:1fr 340px;gap:24px}
.chart-container{position:relative;height:300px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;border-radius:var(--radius-sm);font-size:0.875rem;font-weight:600;cursor:pointer;border:none;transition:var(--transition);white-space:nowrap}.btn svg{width:18px;height:18px}
.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-secondary{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border)}.btn-secondary:hover{background:var(--bg-hover);border-color:var(--text-muted)}
.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{background:#dc2626}
.btn-sm{padding:8px 14px;font-size:0.8rem}.btn-lg{padding:14px 28px;font-size:1rem}
.form-group{margin-bottom:20px}.form-label{display:block;font-size:0.875rem;font-weight:600;color:var(--text-primary);margin-bottom:8px}
.form-control{width:100%;padding:12px 16px;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:0.875rem;color:var(--text-primary);transition:var(--transition)}
.form-control:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-bg)}.form-control::placeholder{color:var(--text-muted)}
.form-hint{font-size:0.8rem;color:var(--text-muted);margin-top:6px}
.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:40px}
.search-box{position:relative}.search-box input{padding-left:44px}.search-box svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--text-muted)}
.table-container{overflow-x:auto}table{width:100%;border-collapse:collapse}th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--border)}
th{font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--text-muted);background:var(--bg-body)}td{font-size:0.875rem;color:var(--text-primary)}tr:hover td{background:var(--bg-hover)}
.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:20px;font-size:0.75rem;font-weight:600}
.badge-success{background:var(--success-bg);color:var(--success)}.badge-warning{background:var(--warning-bg);color:var(--warning)}.badge-danger{background:var(--danger-bg);color:var(--danger)}.badge-secondary{background:var(--bg-hover);color:var(--text-secondary)}.badge-primary{background:var(--primary-bg);color:var(--primary)}
.cpl-success{color:var(--success);font-weight:700}.cpl-warning{color:var(--warning);font-weight:700}.cpl-danger{color:var(--danger);font-weight:700}.cpl-neutral{color:var(--text-muted)}
.alert{padding:16px 20px;border-radius:var(--radius-sm);margin-bottom:20px;display:flex;align-items:flex-start;gap:12px;font-size:0.875rem}.alert svg{width:20px;height:20px;flex-shrink:0;margin-top:1px}
.alert-success{background:var(--success-bg);color:var(--success);border:1px solid var(--success)}.alert-warning{background:var(--warning-bg);color:#92400e;border:1px solid var(--warning)}.alert-danger{background:var(--danger-bg);color:var(--danger);border:1px solid var(--danger)}.alert-info{background:var(--primary-bg);color:var(--primary-dark);border:1px solid var(--primary)}
.account-card{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border:1px solid var(--border);border-radius:var(--radius-sm);margin-bottom:12px;transition:var(--transition);cursor:pointer;text-decoration:none;color:inherit;flex-wrap:wrap;gap:16px}
.account-card:hover{border-color:var(--primary);background:var(--bg-hover);box-shadow:var(--shadow)}
.account-info h4{font-weight:600;color:var(--text-primary);margin-bottom:4px}.account-info p{font-size:0.8rem;color:var(--text-muted)}
.account-stats{display:flex;gap:32px;text-align:right;flex-wrap:wrap}.account-stats .stat-mini{font-size:0.75rem;color:var(--text-muted)}.account-stats .stat-mini-value{font-size:1.1rem;font-weight:700;color:var(--text-primary)}
.switch{position:relative;width:52px;height:28px;display:inline-block;flex-shrink:0}.switch input{opacity:0;width:0;height:0;position:absolute}
.switch-slider{position:absolute;cursor:pointer;inset:0;background:var(--toggle-bg);border-radius:28px;transition:var(--transition);border:2px solid var(--border)}
.switch-slider::before{position:absolute;content:"";height:20px;width:20px;left:2px;bottom:2px;background:#fff;border-radius:50%;transition:var(--transition);box-shadow:0 2px 4px rgba(0,0,0,0.2)}
.switch input:checked+.switch-slider{background:var(--primary);border-color:var(--primary)}.switch input:checked+.switch-slider::before{transform:translateX(24px)}
.quick-action{display:flex;align-items:center;gap:16px;padding:16px;border-radius:var(--radius-sm);transition:var(--transition);cursor:pointer;text-decoration:none;color:inherit}
.quick-action:hover{background:var(--bg-hover)}
.quick-action-icon{width:44px;height:44px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0}.quick-action-icon svg{width:22px;height:22px}
.quick-action-icon.teal{background:var(--primary-bg);color:var(--primary)}.quick-action-icon.blue{background:rgba(59,130,246,0.1);color:#3b82f6}.quick-action-icon.orange{background:var(--warning-bg);color:var(--warning)}.quick-action-icon.green{background:var(--success-bg);color:var(--success)}
.quick-action-text h4{font-weight:600;color:var(--text-primary);margin-bottom:2px}.quick-action-text p{font-size:0.8rem;color:var(--text-muted)}
.empty-state{text-align:center;padding:48px 24px}.empty-state svg{width:64px;height:64px;color:var(--text-muted);margin-bottom:16px;opacity:0.5}.empty-state h3{font-size:1.1rem;color:var(--text-primary);margin-bottom:8px}.empty-state p{color:var(--text-muted)}
.login-page{min-height:100vh;display:grid;grid-template-columns:1fr 420px}
.login-left{background:linear-gradient(135deg,var(--primary-dark),var(--primary));display:flex;flex-direction:column;justify-content:center;padding:60px 80px;position:relative;overflow:hidden}
.login-left::before{content:'';position:absolute;top:-30%;right:-20%;width:600px;height:600px;background:rgba(255,255,255,0.05);border-radius:50%}
.login-left::after{content:'';position:absolute;bottom:-30%;left:-10%;width:400px;height:400px;background:rgba(255,255,255,0.03);border-radius:50%}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:48px;position:relative;z-index:1}
.login-brand-icon{width:48px;height:48px;background:rgba(255,255,255,0.2);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:#fff}
.login-brand-text{font-size:1.5rem;font-weight:700;color:#fff}
.login-content{position:relative;z-index:1;max-width:480px}.login-content h1{font-size:2.75rem;font-weight:800;color:#fff;line-height:1.2;margin-bottom:20px}.login-content p{font-size:1.1rem;color:rgba(255,255,255,0.85);line-height:1.7;margin-bottom:32px}
.login-features{list-style:none}.login-features li{display:flex;align-items:center;gap:12px;color:rgba(255,255,255,0.9);margin-bottom:16px}.login-features li svg{width:22px;height:22px;color:rgba(255,255,255,0.7)}
.login-right{background:var(--bg-body);display:flex;flex-direction:column;justify-content:center;padding:40px}
.login-form{width:100%;max-width:340px;margin:0 auto}.login-form h2{font-size:1.5rem;font-weight:700;color:var(--text-primary);margin-bottom:8px}.login-form>p{color:var(--text-secondary);margin-bottom:32px}
.form-footer{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.checkbox-label{display:flex;align-items:center;gap:8px;font-size:0.875rem;color:var(--text-secondary);cursor:pointer}.checkbox-label input{width:16px;height:16px;accent-color:var(--primary)}
.form-link{font-size:0.875rem;color:var(--primary);font-weight:500}
.settings-layout{display:grid;grid-template-columns:240px 1fr;gap:24px}
.settings-nav{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;height:fit-content;position:sticky;top:24px}
.settings-nav-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--radius-sm);color:var(--text-secondary);font-weight:500;transition:var(--transition);margin-bottom:4px}
.settings-nav-item:hover{background:var(--bg-hover);color:var(--text-primary)}.settings-nav-item.active{background:var(--bg-active);color:var(--primary)}.settings-nav-item svg{width:20px;height:20px}
.settings-content{min-width:0}
.settings-section{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:24px}
.settings-section-header{padding:20px 24px;border-bottom:1px solid var(--border)}.settings-section-header h3{font-size:1rem;font-weight:600;color:var(--text-primary);margin-bottom:4px}.settings-section-header p{font-size:0.875rem;color:var(--text-muted)}
.settings-section-body{padding:24px}
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:1000;align-items:center;justify-content:center;padding:20px}.modal-overlay.active{display:flex}
.modal{background:var(--bg-card);border-radius:var(--radius);box-shadow:var(--shadow-lg);max-width:400px;width:100%;animation:modalSlideIn 0.2s ease}
@keyframes modalSlideIn{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-header{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:16px}
.modal-icon{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--warning-bg);color:var(--warning);flex-shrink:0}.modal-icon svg{width:24px;height:24px}
.modal-header-text h3{font-size:1.1rem;font-weight:600;color:var(--text-primary)}.modal-body{padding:24px;color:var(--text-secondary)}.modal-footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:12px}
.error-details{background:var(--bg-body);border:1px solid var(--danger);border-radius:var(--radius-sm);padding:12px;margin-top:8px;font-size:0.75rem;color:var(--danger);max-height:80px;overflow-y:auto;word-break:break-word;font-family:monospace}
.loading{display:inline-block;width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin 0.8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.last-refresh{display:flex;align-items:center;gap:8px;font-size:0.8rem;color:var(--text-muted);margin-bottom:20px}.last-refresh svg{width:16px;height:16px}
.filter-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:16px;padding:16px;background:var(--bg-hover);border-radius:var(--radius-sm)}
.filter-bar label{font-size:0.8rem;font-weight:600;color:var(--text-secondary);margin-right:4px}
@media(max-width:1200px){.stats-grid{grid-template-columns:repeat(2,1fr)}.grid-2,.grid-70-30{grid-template-columns:1fr}.settings-layout{grid-template-columns:1fr}.settings-nav{position:static;display:flex;flex-wrap:wrap;gap:8px;padding:12px}.settings-nav-item{flex:1;min-width:140px;justify-content:center;margin-bottom:0}}
@media(max-width:768px){.mobile-menu-toggle{display:flex}.sidebar{transform:translateX(-100%);box-shadow:var(--shadow-lg)}.sidebar.open{transform:translateX(0)}.sidebar-overlay.open{display:block}.main-content{margin-left:0;padding:70px 16px 24px}.stats-grid{grid-template-columns:1fr 1fr;gap:12px}.stat-card{padding:16px;flex-direction:column;gap:12px}.stat-icon{width:40px;height:40px}.stat-icon svg{width:20px;height:20px}.stat-value{font-size:1.5rem}.page-header{flex-direction:column;align-items:stretch}.page-header-left h1{font-size:1.5rem}.page-header-actions{flex-direction:column;align-items:stretch}.page-header-actions .form-control,.page-header-actions .btn{width:100%}.card-header{padding:16px}.card-body{padding:16px}.welcome-banner{padding:24px}.welcome-banner h2{font-size:1.25rem}.account-card{padding:12px 16px}.account-stats{gap:16px}.account-stats .stat-mini-value{font-size:1rem}.chart-container{height:250px}.login-page{grid-template-columns:1fr}.login-left{display:none}.login-right{padding:24px}.login-form{max-width:100%}.settings-nav{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.settings-nav-item{padding:10px 12px;font-size:0.8rem;min-width:unset}.settings-nav-item svg{width:18px;height:18px}table{font-size:0.8rem}th,td{padding:10px 12px}.quick-action{padding:12px}.quick-action-icon{width:40px;height:40px}.filter-bar{flex-direction:column;align-items:stretch}}
@media(max-width:480px){.stats-grid{grid-template-columns:1fr}.settings-nav{grid-template-columns:1fr}.account-card{flex-direction:column;align-items:flex-start}.account-stats{width:100%;justify-content:space-between}}
@media print{.sidebar,.mobile-menu-toggle,.page-header-actions,.btn,.filter-bar{display:none!important}.main-content{margin-left:0;padding:0}.card{box-shadow:none;border:1px solid #ddd}}