*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,Tahoma,sans-serif;background:#f5f5f5;color:#333;line-height:1.6}.app{min-height:100vh;display:flex;flex-direction:column}.navbar{background:#1a1a1a;color:#fff;padding:.75rem 2rem;display:flex;align-items:center;gap:1.5rem}.navbar .brand{font-weight:600;font-size:1.1rem}.navbar .nav-link{color:silver;text-decoration:none;padding:.5rem .75rem;border-radius:4px;cursor:pointer}.navbar .nav-link:hover{background:#333;color:#fff}.navbar .spacer{flex:1}.navbar .user{color:#aaa;font-size:.9rem}.btn{padding:10px 20px;border:none;border-radius:4px;font-size:.95rem;font-weight:500;cursor:pointer}.btn-primary{background:#0d6efd;color:#fff}.btn-primary:hover{background:#0a58ca}.btn-danger{background:#dc3545;color:#fff}.btn-danger:hover{background:#b02a37}.btn-secondary{background:#6c757d;color:#fff}.btn-success{background:#198754;color:#fff}.btn:disabled{opacity:.5;cursor:not-allowed}.container{max-width:1100px;margin:0 auto;padding:2rem;flex:1}.card{background:#fff;padding:1.5rem;margin-bottom:1.5rem;border-radius:8px;box-shadow:0 2px 8px #00000014}.card h2{color:#0d6efd;margin-bottom:1rem;border-bottom:2px solid #e9ecef;padding-bottom:.5rem}.hero{text-align:center;padding:4rem 2rem}.hero h1{font-size:2.5rem;margin-bottom:1rem;color:#1a1a1a}.hero p{font-size:1.15rem;color:#666;max-width:600px;margin:0 auto 2rem}.alert{padding:1rem;margin-bottom:1rem;border-radius:4px;border-left:4px solid}.alert-warning{background:#fff3cd;border-color:#fd7e14}.alert-danger{background:#ffe0e0;border-color:#dc3545}.alert-info{background:#d1ecf1;border-color:#0dcaf0}.alert-success{background:#d3f9d8;border-color:#198754}.role-badge{display:inline-block;padding:3px 10px;border-radius:12px;font-size:.8rem;font-weight:600;margin-left:.5rem}.role-admin{background:#dc3545;color:#fff}.role-editor{background:#0d6efd;color:#fff}.role-reader{background:#6c757d;color:#fff}.role-guest{background:#adb5bd;color:#fff}table{width:100%;border-collapse:collapse}th,td{padding:10px;text-align:left;border-bottom:1px solid #dee2e6}th{background:#f8f9fa;font-weight:600}.actions button{margin-right:.5rem}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.4rem;font-weight:500}.form-group input,.form-group select{width:100%;padding:8px 12px;border:1px solid #ced4da;border-radius:4px;font-size:.95rem}.spinner{width:40px;height:40px;border:4px solid #e0e0e0;border-top-color:#0d6efd;border-radius:50%;animation:spin .8s linear infinite;margin:4rem auto}@keyframes spin{to{transform:rotate(360deg)}}