*{box-sizing:border-box}html,body,#root{min-height:100%}body{color:#172033;background:#f4f7fb;min-width:320px;margin:0;font-family:Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif}button,input,select,textarea{font:inherit}*{box-sizing:border-box;margin:0;padding:0}body{color:#1e293b;background:#f4f7fb;font-family:Arial,Helvetica,sans-serif}button,input,select{font:inherit}.app{width:100%;min-height:100vh}.header{background:#fff;border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:center;width:100%;height:60px;padding:0 30px;display:flex}.logo{color:#2563eb;font-size:21px;font-weight:700}.header-right{align-items:center;gap:16px;display:flex}.search{color:#1e293b;border:1px solid #cbd5e1;border-radius:8px;outline:none;width:230px;padding:9px 13px}.search:focus{border-color:#2563eb}.notification{cursor:pointer;background:#eff6ff;border:none;border-radius:8px;padding:8px 10px;font-size:18px}.user-name{color:#334155;font-size:14px;font-weight:600}.layout{width:100%;min-height:calc(100vh - 60px);display:flex}.dashboard{background:#fff;border-right:1px solid #e2e8f0;flex:0 0 20%;min-width:220px;padding:24px 14px}.menu-title{color:#64748b;margin:0 10px 14px;font-size:12px;font-weight:700}.menu{flex-direction:column;gap:6px;display:flex}.menu-item{color:#475569;cursor:pointer;text-align:left;background:0 0;border:none;border-radius:8px;width:100%;padding:12px 10px;font-size:15px;transition:background .2s}.menu-item:hover{background:#f1f5f9}.menu-item.active{color:#fff;background:#2563eb}.content{flex:0 0 80%;min-width:0;padding:30px}.content-header{justify-content:space-between;align-items:center;margin-bottom:28px;display:flex}.content-header h1{color:#1e293b;margin-bottom:8px;font-size:26px}.content-header p{color:#64748b}.add-button{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:8px;padding:12px 16px;font-size:15px;font-weight:600}.add-button:hover{background:#1d4ed8}.stats{grid-template-columns:repeat(4,1fr);gap:18px;display:grid}.stat-card{background:#fff;border-radius:12px;align-items:center;gap:14px;padding:20px;display:flex;box-shadow:0 2px 8px #0f172a0d}.stat-card span{background:#eff6ff;border-radius:10px;padding:12px;font-size:24px}.stat-card p{color:#64748b;margin-bottom:5px;font-size:14px}.stat-card h2{color:#1e293b;font-size:25px}.activity-card{background:#fff;border-radius:12px;margin-top:24px;padding:22px;box-shadow:0 2px 8px #0f172a0d}.activity-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.activity-header h2{color:#1e293b;margin-bottom:5px;font-size:19px}.activity-header p{color:#64748b;font-size:14px}.view-all-button{color:#2563eb;cursor:pointer;background:0 0;border:none;font-size:14px;font-weight:600}.activity-table{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.table-row{border-top:1px solid #e2e8f0;grid-template-columns:2fr 2fr 1fr;gap:12px;padding:14px;display:grid}.table-row:first-child{border-top:none}.table-head{color:#64748b;background:#f8fafc;font-size:13px;font-weight:700}.page-card{background:#fff;border-radius:12px;padding:30px;box-shadow:0 2px 8px #0f172a0d}.page-card h1{color:#1e293b;margin-bottom:12px;font-size:26px}.page-card p{color:#64748b;line-height:1.6}.users-card{background:#fff;border-radius:12px;padding:22px;box-shadow:0 2px 8px #0f172a0d}.users-toolbar{gap:12px;margin-bottom:20px;display:flex}.users-search,.role-select{color:#1e293b;border:1px solid #cbd5e1;border-radius:8px;outline:none;padding:11px 13px;font-size:14px}.users-search{flex:1}.role-select{cursor:pointer;background:#fff;min-width:150px}.users-table{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.user-row{border-top:1px solid #e2e8f0;grid-template-columns:2fr 1fr 1fr 110px;align-items:center;gap:16px;padding:14px;display:grid}.user-row:first-child{border-top:none}.user-head{color:#64748b;background:#f8fafc;font-size:13px;font-weight:700}.user-row strong,.user-row small{display:block}.user-row strong{color:#1e293b}.user-row small{color:#64748b;margin-top:4px}.role-badge,.status-badge{text-align:center;border-radius:999px;width:fit-content;padding:6px 10px;font-size:13px}.role-badge{color:#1d4ed8;background:#eff6ff}.status-active{color:#15803d;background:#dcfce7}.status-inactive{color:#b91c1c;background:#fee2e2}.edit-button{color:#334155;cursor:pointer;background:#f1f5f9;border:none;border-radius:7px;padding:9px 10px;font-size:13px;font-weight:600}.edit-button:hover{background:#e2e8f0}@media (width<=1000px){.stats{grid-template-columns:repeat(2,1fr)}}@media (width<=700px){.header{padding:0 16px}.search,.user-name{display:none}.layout{flex-direction:column}.dashboard,.content{flex:none;width:100%}.dashboard{min-width:auto}.content{padding:20px}.content-header{flex-direction:column;align-items:flex-start;gap:16px}.stats{grid-template-columns:1fr}.users-toolbar{flex-direction:column}.user-row{grid-template-columns:1fr;gap:8px}.user-head{display:none}}.logo{flex-shrink:0;align-items:center;height:60px;padding:0 16px 0 0;display:flex}.logo-image{object-fit:contain;width:auto;height:65px;display:block}.welcome-message{color:#64748b;white-space:nowrap;margin-left:18px;font-size:14px}.welcome-message strong{color:#1e293b}.header-actions{align-items:center;gap:8px;margin-left:auto;display:flex}.header-icon-button{color:#2563eb;cursor:pointer;background:0 0;border:0;border-radius:8px;justify-content:center;align-items:center;width:36px;height:36px;padding:0;transition:background .2s;display:flex}.header-icon-button:hover{background:#eff6ff}.header-icon-button svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8px;width:21px;height:21px}.header-icon-button.is-dark svg{fill:#2563eb;stroke:#2563eb}.user-profile{align-items:center;gap:10px;margin-left:14px;display:flex}.user-avatar{color:#fff;background:#2563eb;border-radius:50%;flex:0 0 45px;justify-content:center;align-items:center;width:45px;height:45px;font-size:13px;font-weight:700;display:flex}.user-details{white-space:nowrap;flex-direction:column;gap:3px;line-height:1.1;display:flex}.user-details strong{color:#1e293b;font-size:13px}.user-details span{color:#64748b;font-size:12px}@media (width<=700px){.welcome-message,.user-details{display:none}.header-actions{gap:4px}.user-profile{margin-left:8px}}.header-menu-wrapper{position:relative}.search-wrapper{align-items:center;display:flex}.search-box{width:200px;margin-right:8px;position:relative}.header-search-input{color:#1e293b;background:#fff;border:1px solid #cbd5e1;border-radius:8px;outline:none;width:200px;height:36px;padding:0 38px 0 12px}.header-search-input:focus{border-color:#2563eb}.search-input-icon{color:#2563eb;fill:none;pointer-events:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8px;width:18px;height:18px;position:absolute;top:9px;right:11px}.search-suggestions{z-index:20;background:#fff;border:1px solid #e2e8f0;border-radius:10px;width:280px;margin-top:7px;position:absolute;top:36px;left:0;overflow:hidden;box-shadow:0 12px 25px #0f172a29}.search-suggestion{color:#1e293b;cursor:pointer;text-align:left;background:#fff;border:0;border-bottom:1px solid #e2e8f0;flex-direction:column;gap:4px;width:100%;padding:11px 13px;display:flex}.search-suggestion:last-child{border-bottom:0}.search-suggestion:hover{background:#eff6ff}.search-suggestion strong{font-size:14px}.search-suggestion span{color:#64748b;font-size:12px}.search-empty{color:#64748b;padding:14px;font-size:13px}.context-menu{z-index:30;background:#fff;border:1px solid #e2e8f0;border-radius:10px;width:280px;position:absolute;top:calc(100% + 8px);right:0;overflow:hidden;box-shadow:0 12px 25px #0f172a29}.context-menu-title{color:#1e293b;border-bottom:1px solid #e2e8f0;padding:13px 14px;font-size:14px;font-weight:700}.context-menu-item{color:#334155;cursor:pointer;text-align:left;background:#fff;border:0;border-bottom:1px solid #e2e8f0;flex-direction:column;gap:4px;width:100%;padding:12px 14px;display:flex}.context-menu-item:last-child{border-bottom:0}.context-menu-item:hover{background:#eff6ff}.context-menu-item strong{color:#1e293b;font-size:13px}.context-menu-item span{color:#64748b;font-size:12px;line-height:1.4}.profile-menu{width:210px}.profile-role{color:#64748b;background:#f8fafc;border-bottom:1px solid #e2e8f0;padding:12px 14px;font-size:12px;font-weight:700}.logout-item{color:#dc2626}.logout-item:hover{background:#fef2f2}.user-profile{cursor:pointer;text-align:left;background:0 0;border:0;align-items:center;gap:10px;margin-left:14px;padding:0;display:flex}.search-result-page{max-width:700px}.search-result-type{text-transform:uppercase;margin-bottom:8px;font-size:13px;font-weight:700;color:#2563eb!important}.search-result-id{color:#1d4ed8;background:#eff6ff;border-radius:7px;margin-top:20px;padding:8px 10px;font-size:13px;font-weight:600;display:inline-block}.profile-page-info{border-top:1px solid #e2e8f0;align-items:center;gap:16px;margin-top:24px;padding-top:24px;display:flex}.profile-page-avatar{color:#fff;background:#2563eb;border-radius:50%;flex:0 0 70px;justify-content:center;align-items:center;width:70px;height:70px;font-size:19px;font-weight:700;display:flex}.profile-page-info h2{color:#1e293b;margin-bottom:8px;font-size:19px}.profile-page-info p{margin-bottom:4px}.dark-mode{color:#f8fafc;background:#0b1120}.dark-mode .header,.dark-mode .dashboard,.dark-mode .stat-card,.dark-mode .activity-card,.dark-mode .page-card,.dark-mode .users-card,.dark-mode .context-menu,.dark-mode .search-suggestions{background:#172033;border-color:#334155}.dark-mode .content{background:#0b1120}.dark-mode .header{border-bottom-color:#334155}.dark-mode .dashboard{border-right-color:#334155}.dark-mode .content-header h1,.dark-mode .page-card h1,.dark-mode .activity-header h2,.dark-mode .stat-card h2,.dark-mode .user-row strong,.dark-mode .user-details strong,.dark-mode .welcome-message strong,.dark-mode .context-menu-title,.dark-mode .context-menu-item strong,.dark-mode .profile-page-info h2{color:#f8fafc}.dark-mode .content-header p,.dark-mode .page-card p,.dark-mode .activity-header p,.dark-mode .stat-card p,.dark-mode .menu-title,.dark-mode .user-row small,.dark-mode .user-details span,.dark-mode .welcome-message,.dark-mode .context-menu-item,.dark-mode .context-menu-item span,.dark-mode .search-suggestion span,.dark-mode .search-empty{color:#94a3b8}.dark-mode .menu-item{color:#cbd5e1}.dark-mode .menu-item:hover,.dark-mode .header-icon-button:hover,.dark-mode .context-menu-item:hover,.dark-mode .search-suggestion:hover{background:#26344d}.dark-mode .users-table,.dark-mode .activity-table,.dark-mode .profile-page-info,.dark-mode .user-row,.dark-mode .table-row,.dark-mode .context-menu-title,.dark-mode .context-menu-item,.dark-mode .search-suggestion,.dark-mode .profile-role{border-color:#334155}.dark-mode .user-head,.dark-mode .table-head,.dark-mode .profile-role{color:#cbd5e1;background:#202c42}.dark-mode .header-search-input,.dark-mode .users-search,.dark-mode .role-select{color:#f8fafc;background:#0b1120;border-color:#475569}.dark-mode .search-suggestion,.dark-mode .context-menu-item{background:#172033}.dark-mode .edit-button{color:#e2e8f0;background:#26344d}.dark-mode .edit-button:hover{background:#334155}.dark-mode .search-result-id{color:#dbeafe;background:#1e3a8a}.dark-mode .logout-item{color:#fca5a5}.dark-mode .logout-item:hover{background:#3b1d28}@media (width<=700px){.header-actions{gap:4px}.welcome-message,.user-details{display:none}.search-box,.header-search-input{width:180px}.search-suggestions{width:260px;left:auto;right:0}.user-profile{margin-left:8px}.context-menu{width:min(280px,100vw - 24px);position:fixed;top:68px;right:12px}}.auth-page{box-sizing:border-box;background-color:#f1f5f9;justify-content:center;align-items:center;min-height:100vh;padding:24px 16px;display:flex}.auth-card{box-sizing:border-box;background:#fff;border-radius:12px;width:100%;max-width:440px;padding:32px 28px;box-shadow:0 4px 20px #00000014}.auth-logo{color:#fff;background-color:#0284c7;border-radius:10px;justify-content:center;align-items:center;width:48px;height:48px;margin:0 auto 16px;font-size:22px;font-weight:700;display:flex}.auth-card h1{text-align:center;color:#0f172a;margin:0 0 6px;font-size:20px;font-weight:700}.auth-card h2{color:#1e293b;border-bottom:1px solid #e2e8f0;margin:0 0 16px;padding-bottom:8px;font-size:17px;font-weight:600}.auth-subtitle{color:#64748b;text-align:center;margin:0 0 20px;font-size:13px}.auth-form{flex-direction:column;gap:12px;display:flex}.auth-form label{color:#334155;margin-bottom:-4px;font-size:13px;font-weight:500}.auth-form input,.auth-form select{color:#0f172a;box-sizing:border-box;background:#fff;border:1px solid #cbd5e1;border-radius:8px;outline:none;width:100%;padding:10px 12px;font-size:14px}.auth-form input:focus,.auth-form select:focus{border-color:#0284c7;box-shadow:0 0 0 2px #0284c726}.auth-password{align-items:center;display:flex;position:relative}.auth-password input{padding-right:80px}.auth-password button{color:#0284c7;cursor:pointer;background:0 0;border:none;padding:4px 6px;font-size:12px;font-weight:600;position:absolute;right:8px}.auth-phone{background:#fff;border:1px solid #cbd5e1;border-radius:8px;align-items:center;display:flex;overflow:hidden}.auth-phone span{color:#475569;background:#f8fafc;border-right:1px solid #cbd5e1;padding:10px 10px 10px 12px;font-size:14px;font-weight:600}.auth-phone input{border:none;border-radius:0}.auth-checkbox{color:#475569;cursor:pointer;align-items:center;gap:8px;margin:4px 0;font-size:13px;display:flex!important}.auth-checkbox input{cursor:pointer;width:auto;margin:0}.auth-submit{color:#fff;cursor:pointer;background-color:#0284c7;border:none;border-radius:8px;width:100%;margin-top:8px;padding:11px 16px;font-size:14px;font-weight:600}.auth-submit:hover:not(:disabled){background-color:#0369a1}.auth-link{color:#0284c7;cursor:pointer;text-align:center;background:0 0;border:none;padding:4px;font-size:13px}.auth-switch{color:#64748b;text-align:center;margin:12px 0 0;font-size:13px}.auth-switch button{color:#0284c7;cursor:pointer;background:0 0;border:none;padding:0 4px;font-weight:600}.auth-message{border-radius:6px;margin-bottom:12px;padding:10px 12px;font-size:13px}.auth-message.success{color:#065f46;background-color:#ecfdf5;border:1px solid #a7f3d0}.auth-message.error{color:#991b1b;background-color:#fef2f2;border:1px solid #fecaca}.auth-logo{background:0 0!important;width:auto!important;height:auto!important}.auth-logo-image{object-fit:contain;max-width:300px;max-height:100px;margin:0 auto;display:block}.account-card{box-sizing:border-box;background:#fff;border:1px solid #e2e8f0;border-radius:14px;width:100%;max-width:none;padding:24px 28px;box-shadow:0 4px 6px -1px #0000000d}.account-title{color:#1e293b;margin-bottom:20px;font-size:20px;font-weight:700}.account-alert{border-radius:8px;margin-bottom:20px;padding:12px 16px;font-size:14px}.account-alert-error{color:#dc2626;background:#fef2f2;border:1px solid #fecaca}.account-alert-success{color:#16a34a;background:#f0fdf4;border:1px solid #bbf7d0}.account-avatar-section{border-bottom:1px solid #f1f5f9;align-items:center;gap:20px;margin-bottom:24px;padding-bottom:24px;display:flex}.account-avatar-wrapper{flex-shrink:0;width:90px;height:90px;position:relative}.account-avatar-img,.account-avatar-placeholder{object-fit:cover;border:2px solid #e2e8f0;border-radius:50%;width:90px;height:90px}.account-avatar-placeholder{color:#64748b;background:#f8fafc;justify-content:center;align-items:center;font-size:28px;font-weight:700;display:flex}.account-camera-btn{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:15px;display:flex;position:absolute;bottom:0;right:0;box-shadow:0 2px 4px #00000026}.account-camera-btn:hover{background:#1d4ed8}.account-avatar-desc h3{color:#334155;margin:0 0 4px;font-size:15px;font-weight:600}.account-avatar-desc p{color:#64748b;margin:0;font-size:12px}.account-form{flex-direction:column;gap:18px;display:flex}.account-form-group{flex-direction:column;gap:6px;display:flex}.account-form-group label{color:#475569;font-size:13px;font-weight:600}.account-form-group input,.account-form-group textarea{color:#1e293b;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:8px;outline:none;width:100%;padding:10px 14px;font-family:inherit;font-size:14px;transition:border-color .2s}.account-form-group input:focus,.account-form-group textarea:focus{border-color:#2563eb;box-shadow:0 0 0 2px #2563eb1a}.account-form-actions{border-top:1px solid #f1f5f9;justify-content:flex-end;padding-top:16px;display:flex}.account-save-btn{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:8px;padding:10px 24px;font-size:14px;font-weight:600;transition:background .2s}.account-save-btn:hover{background:#1d4ed8}.account-save-btn:disabled{cursor:not-allowed;background:#94a3b8}