*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:DM Sans,system-ui,sans-serif;background:#f4f5f7;color:#111827;line-height:1.5}a{text-decoration:none;color:inherit}.app-shell{display:flex;min-height:100vh}.sidebar{width:224px;min-height:100vh;background:#1a1744;display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;z-index:200;overflow-y:auto}.sidebar-brand{display:flex;align-items:center;gap:.65rem;padding:1.35rem 1.25rem 1.1rem;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.07);flex-shrink:0}.sidebar-brand svg{color:#818cf8;flex-shrink:0}.sidebar-brand-name{font-size:1rem;font-weight:700;color:#fff;letter-spacing:.06em}.sidebar-nav{flex:1;padding:.85rem .75rem;display:flex;flex-direction:column;gap:.1rem}.sidebar-nav .nav-item{display:flex;align-items:center;gap:.65rem;padding:.62rem .9rem;border-radius:8px;color:#a5b4fc;font-size:.875rem;font-weight:500;text-decoration:none;transition:background .15s,color .15s}.sidebar-nav .nav-item:hover{background:#4f46e52e;color:#e0e7ff}.sidebar-nav .nav-item.active{background:#4f46e5;color:#fff}.sidebar-nav .nav-item svg{flex-shrink:0;opacity:.75}.sidebar-nav .nav-item.active svg,.sidebar-nav .nav-item:hover svg{opacity:1}.nav-divider{height:1px;background:#ffffff12;margin:.6rem .15rem}.nav-section-label{font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#6366f1;padding:.2rem .9rem .4rem}.sidebar-footer{padding:.85rem .75rem;border-top:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:.6rem;flex-shrink:0}.sidebar-avatar{width:32px;height:32px;border-radius:50%;background:#4338ca;color:#e0e7ff;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;flex-shrink:0}.sidebar-user-info{flex:1;min-width:0}.sidebar-user-name{font-size:.8rem;font-weight:600;color:#e0e7ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-user-role{font-size:.68rem;color:#818cf8;margin-top:.05rem}.sidebar-logout-btn{background:none;border:none;cursor:pointer;color:#818cf8;padding:.35rem;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s,color .15s}.sidebar-logout-btn:hover{background:#ffffff1a;color:#fff}.main-area{flex:1;margin-left:224px;min-height:100vh;background:#f4f5f7}.content{max-width:1100px;margin:0 auto;padding:2.5rem 1.5rem}.loading{display:flex;align-items:center;justify-content:center;height:100vh;color:#6b7280;font-size:.95rem}.loading-inline{padding:2rem 0;color:#6b7280}.login-logo svg{filter:drop-shadow(0 2px 8px rgba(79,70,229,.25))}.brand-name{font-weight:700;font-size:1.05rem;color:#111827;letter-spacing:.03em}.brand-tagline{font-size:.7rem;color:#9ca3af;font-weight:400;letter-spacing:.01em}.btn-primary{background:#4f46e5;color:#fff;border:none;padding:.6rem 1.25rem;border-radius:8px;font-size:.9rem;font-weight:500;cursor:pointer;display:inline-block}.btn-primary:hover{background:#4338ca}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-primary.full-width{width:100%;text-align:center;padding:.75rem;font-size:.95rem}.btn-secondary{background:#fff;color:#374151;border:1px solid #d1d5db;padding:.6rem 1.25rem;border-radius:8px;font-size:.9rem;font-weight:500;cursor:pointer}.btn-secondary:hover{background:#f9fafb}.btn-edit{background:#eff6ff;color:#2563eb;border:none;padding:.3rem .7rem;border-radius:6px;font-size:.8rem;cursor:pointer;margin-right:.4rem}.btn-edit:hover{background:#dbeafe}.btn-delete{background:#fff1f2;color:#dc2626;border:none;padding:.3rem .7rem;border-radius:6px;font-size:.8rem;cursor:pointer}.btn-delete:hover{background:#fee2e2}.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);padding:1rem}.login-card{background:#fff;border-radius:18px;padding:2.5rem;width:100%;max-width:420px;box-shadow:0 24px 64px #0000002e}.login-logo{text-align:center;margin-bottom:2rem;display:flex;flex-direction:column;align-items:center;gap:.25rem}.login-logo h1{font-size:1.7rem;font-weight:800;letter-spacing:.04em;margin:.3rem 0 0}.login-logo .brand-tagline{font-size:.75rem;color:#9ca3af;margin-bottom:.5rem}.login-logo p:not(.brand-tagline){color:#6b7280;font-size:.9rem}.login-form{display:flex;flex-direction:column;gap:1.25rem}.form-group{display:flex;flex-direction:column;gap:.35rem}.form-group label{font-size:.82rem;font-weight:600;color:#374151;text-transform:uppercase;letter-spacing:.03em}.form-group input,.form-group select,.form-group textarea{padding:.65rem .9rem;border:1px solid #d1d5db;border-radius:8px;font-size:.9rem;outline:none;transition:border-color .15s,box-shadow .15s;background:#fff;color:#111827}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#4f46e5;box-shadow:0 0 0 3px #4f46e51f}.form-group-checks{justify-content:center;gap:.75rem}.check-label{display:flex;align-items:center;gap:.5rem;font-size:.88rem;color:#374151;cursor:pointer;font-weight:400;text-transform:none;letter-spacing:0}.check-label input[type=checkbox]{width:16px;height:16px;accent-color:#4F46E5}.error-msg{background:#fff1f2;color:#dc2626;padding:.75rem 1rem;border-radius:8px;font-size:.85rem;border:1px solid #fecdd3}.page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.75rem}.page-header h2{font-size:1.4rem;font-weight:700}.page-subtitle{color:#6b7280;font-size:.85rem;margin-top:.2rem}.breadcrumb{color:#4f46e5}.breadcrumb:hover{text-decoration:underline}.launcher-header{margin-bottom:2rem}.launcher-header h2{font-size:1.6rem;font-weight:700}.launcher-header p{color:#6b7280;margin-top:.3rem}.app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1.25rem}.app-card{background:#fff;border-radius:16px;padding:1.75rem 1.25rem;display:flex;flex-direction:column;align-items:center;gap:1rem;border:1px solid #e5e7eb;box-shadow:0 2px 8px #0000000d;transition:transform .15s,box-shadow .15s;cursor:pointer}.app-card:hover{transform:translateY(-4px);box-shadow:0 10px 28px #0000001a}.app-card-icon{width:62px;height:62px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:700;color:#fff}.app-card-info{text-align:center}.app-card-info h3{font-size:.95rem;font-weight:600}.role-badge{display:inline-block;margin-top:.4rem;padding:.2rem .65rem;border-radius:20px;font-size:.72rem;font-weight:600;text-transform:capitalize}.role-badge.role-allow{background:#d1fae5;color:#065f46}.role-badge.role-viewer{background:#eff6ff;color:#1d4ed8}.role-badge.role-superadmin{background:#ede9fe;color:#6d28d9}.status-badge{display:inline-block;padding:.2rem .65rem;border-radius:20px;font-size:.72rem;font-weight:600}.status-badge.active{background:#d1fae5;color:#065f46}.status-badge.inactive{background:#f3f4f6;color:#9ca3af}.table-wrapper{overflow-x:auto}.data-table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px #0000000d}.data-table th{background:#f9fafb;padding:.8rem 1.25rem;text-align:left;font-size:.75rem;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid #e5e7eb}.data-table td{padding:1rem 1.25rem;border-bottom:1px solid #f3f4f6;font-size:.9rem}.data-table tr:last-child td{border-bottom:none}.data-table tr:hover td{background:#fafafa}.td-name{font-weight:500}.td-muted{color:#6b7280}.user-form{background:#fff;border-radius:14px;padding:2rem;box-shadow:0 2px 8px #0000000d}.form-section{margin-bottom:2.25rem}.form-section h3{font-size:.95rem;font-weight:700;color:#374151;margin-bottom:1.25rem;padding-bottom:.6rem;border-bottom:1px solid #e5e7eb}.section-hint{font-size:.85rem;color:#6b7280;margin-top:-.75rem;margin-bottom:1rem}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:1.25rem}.app-access-grid{display:flex;flex-direction:column;gap:.65rem}.app-access-row{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.25rem;background:#f9fafb;border-radius:10px;border:1px solid #e5e7eb;gap:1rem}.app-access-name{display:flex;align-items:center;gap:.6rem;font-weight:500;font-size:.9rem;flex:1}.app-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.app-url{font-size:.78rem;color:#9ca3af;font-weight:400;margin-left:.25rem}.role-select{padding:.45rem .75rem;border:1px solid #d1d5db;border-radius:8px;font-size:.85rem;background:#fff;cursor:pointer;min-width:148px;outline:none}.role-select:focus{border-color:#4f46e5;outline:none}.role-select.role-allow-select{border-color:#10b981;color:#065f46;font-weight:600;background:#f0fdf4}.role-select.role-deny-select{border-color:#e5e7eb;color:#9ca3af}.form-actions{display:flex;justify-content:flex-end;gap:.75rem;padding-top:1.25rem;border-top:1px solid #e5e7eb}.empty-state{text-align:center;padding:4rem 2rem;color:#6b7280}.empty-state p{margin-bottom:.4rem;font-size:.95rem}@media (max-width: 768px){.sidebar{width:200px}.main-area{margin-left:200px}}@media (max-width: 640px){.sidebar{display:none}.main-area{margin-left:0}.form-row{grid-template-columns:1fr}.app-access-row{flex-direction:column;align-items:flex-start}.role-select{width:100%}.page-header{flex-direction:column;gap:1rem}.content{padding:1.5rem 1rem}}