:root{--color-bg: #ffffff;--color-surface: #ffffff;--color-card: #ffffff;--color-text-main: #000000;--color-text-sec: #666666;--color-border: #dddddd;--color-border-focus: #000000;--color-btn-bg: #000000;--color-btn-text: #ffffff;--color-btn-hover: #333333;--color-primary: #000000;--spacing-unit: 8px;--spacing-md: 16px;--spacing-lg: 24px;--input-height: 40px;--radius: 4px;--sidebar-width: 240px;--header-height: 64px;--transition: .3s ease}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background-color:var(--color-bg);color:var(--color-text-main);min-height:100vh;line-height:1.5}#app-container{width:100%;min-height:100vh}#app-container:has(.login-wrapper):not(:has(.app-layout)){display:flex;justify-content:center;align-items:center}.form-group{margin-bottom:1.25rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:500;font-size:.875rem;color:#374151}.form-label{display:block;font-size:12px;font-weight:500;color:var(--color-text-main);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}.form-input-wrapper{position:relative}.form-input,.input-control{width:100%;padding:0 12px;font-size:14px;color:var(--color-text-main);background-color:#fff;border:1px solid var(--color-border);border-radius:var(--radius);transition:border-color .2s ease,box-shadow .2s ease;appearance:none}.form-input{height:var(--input-height)}.input-control{padding:8px 12px}.form-input:focus,.input-control:focus{outline:none;border-color:var(--color-border-focus);box-shadow:0 0 0 1px var(--color-border-focus)}.input-control:focus{border-color:var(--color-primary)}.form-input::placeholder{color:#bbb}.error-message{display:none;color:#ef4444;font-size:.75rem;margin-top:.25rem}.password-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center}.password-toggle svg{width:16px;height:16px;fill:none;stroke:#999;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.password-toggle:hover svg{stroke:#000}.btn{padding:.625rem 1rem;border:none;border-radius:4px;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s}.btn-submit{width:100%;height:var(--input-height);background-color:var(--color-btn-bg);color:var(--color-btn-text);font-size:14px;font-weight:500;border:none;border-radius:var(--radius);cursor:pointer;transition:background-color .2s ease;letter-spacing:.2px;margin-top:8px}.btn-submit:hover{background-color:var(--color-btn-hover)}.btn-submit:active{transform:translateY(1px)}.btn-submit:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background:#3b82f6;color:#fff;padding:9px 16px;border-radius:var(--radius);font-size:13px;font-weight:500;cursor:pointer;transition:opacity .2s;border:none}.btn-primary:hover:not(:disabled){background:#2563eb}.btn-primary:disabled{background:#93c5fd;cursor:not-allowed}.btn-ghost{background:transparent;color:#6b7280;border:1px solid #d1d5db;padding:9px 16px;border-radius:var(--radius);font-size:13px;font-weight:500;cursor:pointer;transition:opacity .2s}.btn-ghost:hover:not(:disabled){background:#f3f4f6;color:#374151}.btn-ghost:disabled{opacity:.5;cursor:not-allowed}.btn:hover{opacity:.8}.btn-logout{padding:6px 10px;background-color:transparent;border:1px solid var(--color-border);border-radius:var(--radius);font-size:11px;font-weight:500;cursor:pointer;transition:all .2s;color:var(--color-text-main);margin-left:auto}.btn-logout:hover{background-color:#f9f9f9;border-color:var(--color-text-main)}.btn-icon{background:none;border:none;cursor:pointer;color:var(--color-text-sec);padding:4px;border-radius:4px;display:flex;align-items:center;justify-content:center}.btn-icon:hover{background-color:#eee;color:var(--color-primary)}.btn-icon.delete:hover{background-color:#ffebee;color:var(--color-danger)}.login-wrapper{width:100%;max-width:420px;padding:40px;margin:20px;background-color:var(--color-card);border:1px solid #f0f0f0}.login-header{margin-bottom:32px;text-align:left}.login-header h1{font-size:24px;font-weight:600;color:var(--color-text-main);margin-bottom:8px;letter-spacing:-.5px}.login-header p{font-size:14px;color:var(--color-text-sec)}.login-footer{margin-top:32px;text-align:center;font-size:13px;color:var(--color-text-sec)}.app-layout{display:flex;height:100vh;width:100%}.sidebar{width:var(--sidebar-width);background-color:var(--color-surface);border-right:1px solid var(--color-border);display:flex;flex-direction:column;padding:var(--spacing-lg);position:fixed;height:100%;z-index:100;transition:transform var(--transition)}.brand{font-size:20px;font-weight:700;margin-bottom:40px;color:var(--color-text-main);display:flex;align-items:center;gap:10px}.brand-icon{width:24px;height:24px;background-color:var(--color-primary);border-radius:4px}.nav-menu{list-style:none;flex:1;padding:0;margin:0}.nav-item{margin-bottom:4px}.nav-link{display:flex;align-items:center;padding:10px 12px;color:var(--color-text-sec);text-decoration:none;border-radius:var(--radius);font-size:14px;font-weight:500;transition:all .2s;cursor:pointer}.nav-link:hover,.nav-link.active{background-color:#f9f9f9;color:var(--color-primary)}.nav-link svg{width:18px;height:18px;margin-right:12px;stroke:currentColor;stroke-width:2;fill:none}.user-profile{display:flex;align-items:center;padding-top:var(--spacing-md);border-top:1px solid var(--color-border)}.avatar{width:32px;height:32px;border-radius:50%;background-color:#ddd;margin-right:10px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#666;flex-shrink:0}.avatar img{width:100%;height:100%;object-fit:cover}.user-info{flex:1;min-width:0}.user-info span{display:block;font-size:13px}.user-name{font-weight:600;color:var(--color-text-main)}.user-role{font-size:11px;color:var(--color-text-sec)}.main-content{flex:1;margin-left:var(--sidebar-width);display:flex;flex-direction:column;height:100vh;overflow-y:auto;transition:margin-left var(--transition)}.topbar{height:var(--header-height);background-color:var(--color-surface);display:flex;align-items:center;justify-content:space-between;padding:20px var(--spacing-lg);position:sticky;top:0;z-index:90;border-bottom:1px solid var(--color-border)}.mobile-menu-btn{display:none;background:none;border:none;cursor:pointer;padding:5px;margin-right:10px;color:var(--color-text-main)}.mobile-menu-btn svg{display:block}.page-title{font-size:18px;font-weight:600;margin:0}.content-scroll,.dashboard-container{padding:var(--spacing-lg);max-width:1200px;margin:0 auto;width:100%}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--spacing-lg)}.stat-label{font-size:12px;color:var(--color-text-sec);text-transform:uppercase;letter-spacing:.5px;font-weight:600;margin-bottom:4px}.stat-value{font-size:24px;font-weight:700;color:var(--color-text-main)}.filters-card{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--spacing-md);margin-bottom:var(--spacing-md)}.filters-bar{display:flex;flex-wrap:wrap;gap:var(--spacing-md);align-items:flex-end}.filter-group{display:flex;flex-direction:column;flex:1;min-width:200px}.filter-group label{font-size:12px;font-weight:600;color:var(--color-text-sec);margin-bottom:6px}.table-container{background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:14px;min-width:600px}th{text-align:left;padding:12px var(--spacing-md);background-color:#fafafa;border-bottom:1px solid var(--color-border);color:var(--color-text-sec);font-weight:600;font-size:12px;text-transform:uppercase}td{padding:12px var(--spacing-md);border-bottom:1px solid var(--color-border);color:var(--color-text-main);vertical-align:middle}tr:last-child td{border-bottom:none}tr:hover td{background-color:#fafafa}.user-cell{display:flex;align-items:center;gap:12px}.user-cell-info{display:flex;flex-direction:column}.user-email{font-size:12px;color:var(--color-text-sec)}.actions-cell{display:flex;gap:8px}.status-badge{display:inline-block;padding:4px 10px;border-radius:12px;font-size:11px;font-weight:600}.status-active{background-color:#e8f5e9;color:#1b5e20}.status-inactive{background-color:#eceff1;color:#455a64}.status-suspended{background-color:#ffebee;color:#b71c1c}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal-content{background:#fff;border-radius:8px;width:90%;max-width:500px;max-height:90vh;overflow:hidden;box-shadow:0 10px 40px #0003;animation:slideUp .3s ease;display:flex;flex-direction:column}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{padding:1.5rem;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center}.modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#6b7280;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}.modal-close:hover{background:#f3f4f6;color:#1f2937}.modal-body{padding:1.5rem;overflow-y:auto;flex:1}.modal-footer{padding:1rem 1.5rem;border-top:1px solid #e5e7eb;display:flex;justify-content:flex-end;gap:.75rem}.toast{position:fixed;top:20px;right:20px;background-color:#333;color:#fff;padding:12px 24px;border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:9999;opacity:0;transform:translateY(-20px);transition:all .3s ease;pointer-events:none}.toast.show{opacity:1;transform:translateY(0);pointer-events:auto}@media(max-width:768px){.sidebar{transform:translate(-100%);box-shadow:2px 0 10px #0000001a}.sidebar.open{transform:translate(0)}.sidebar.open:after{content:"";position:fixed;inset:0 0 0 240px;background:#00000080;z-index:-1}.main-content{margin-left:0}.mobile-menu-btn{display:block}.topbar{justify-content:flex-start}.filters-bar{flex-direction:column;align-items:stretch}.filter-group{width:100%}.login-wrapper{padding:24px;margin:16px;border:none}}@media(max-width:640px){.modal-content{width:95%;max-height:95vh}.modal-header,.modal-body,.modal-footer{padding:1rem}}