*{box-sizing:border-box;font-family:Arial,Helvetica,sans-serif}body{margin:0;background:#f4f6f8}.app{display:flex;height:100vh;overflow:hidden}.sidebar{width:220px;background:#fff;border-right:1px solid #e5e7eb;padding:20px;display:flex;flex-direction:column;transition:width .25s ease,padding .25s ease}.sidebar.collapsed{width:64px;padding:20px 10px}.sidebar-brand{display:flex;align-items:center;gap:10px;margin-bottom:28px}.sidebar-brand img{width:62px;height:auto}.sidebar-brand span{font-size:15px;font-weight:700;color:#111827;white-space:nowrap}.pdf-btn{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:6px;font-size:14px;font-weight:600;border:none;cursor:pointer;transition:all .25s ease}.pdf-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}.pdf-btn.preview{background:#eef2ff;color:#4338ca;border:solid 1px #4338ca}.pdf-btn.preview:hover:not(:disabled){background:#e0e7ff;transform:translateY(-1px)}.pdf-btn.download{background:#ecfdf5;color:#047857;border:solid 1px #047857}.pdf-btn.download:hover:not(:disabled){background:#d1fae5;transform:translateY(-1px)}.pdf-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.sidebar-nav{flex:1}.sidebar button{width:100%;padding:10px 12px;margin-bottom:8px;border:none;background:#f3f4f6;cursor:pointer;text-align:left;border-radius:6px;font-size:14px;color:#111827;transition:background .15s}.sidebar button:hover{background:#e5eaeb}.sidebar button.active{background:#19d2c6;color:#fff}.sidebar button:disabled{opacity:.5;cursor:not-allowed}.sidebar.collapsed button{text-align:center;padding:10px 6px}.sidebar-footer{padding-top:16px;border-top:1px solid #e5e7eb}.main{flex:1;display:flex;flex-direction:column;overflow:hidden}.header{height:64px;background:#fff;border-bottom:1px solid #e5e7eb;padding:0 24px;display:flex;align-items:center}.header-left{display:flex;align-items:center;gap:12px}.header-left span{font-size:16px;font-weight:600;color:#111827;white-space:nowrap}.content{flex:1;padding:20px;overflow-y:auto}.card{background:#fff;padding:20px;margin-top:20px;border-radius:8px;border:1px solid #e5e7eb}.form input{width:100%;padding:10px;margin-bottom:10px}.actions button{padding:10px 15px;margin-right:10px}.pdf-box{background:#fff;padding:30px;max-width:600px;border:1px solid #ccc}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f4f6f8,#e9eef3)}.login-card{width:100%;max-width:420px;background:#fff;padding:40px;border-radius:12px;box-shadow:0 20px 50px #00000014;border:1px solid #e5e7eb}.login-header{text-align:center;margin-bottom:32px}.login-header img{height:86px;margin-bottom:4px}.login-header h2{margin:0;font-size:20px;font-weight:700;color:#111827}.login-header p{margin-top:6px;font-size:14px;color:#6b7280}.input-group{margin-bottom:20px}.input-group label{font-size:13px;font-weight:600;color:#374151;margin-bottom:6px;display:block}.login-input{width:100%;padding:12px 14px;border-radius:6px;border:1px solid #d1d5db;font-size:14px}.login-input:focus{outline:none;border-color:#1976d2;box-shadow:0 0 0 3px #1976d226}.login-btn{width:100%;padding:12px;background:#19d2c6;color:#fff;border:none;border-radius:6px;font-size:15px;font-weight:600;cursor:pointer;margin-top:8px}.login-btn:hover{background:#048d83}.login-error{background:#fdecea;color:#b71c1c;padding:10px;border-radius:6px;font-size:13px;margin-bottom:12px;text-align:center}.login-footer{margin-top:28px;text-align:center;font-size:12px;color:#9ca3af}.card{background:#fff;border-radius:8px;padding:20px;border:1px solid #e5e7eb}.input{flex:1;padding:10px;border:1px solid #d1d5db;border-radius:6px}.btn{padding:8px 14px;border-radius:6px;border:none;cursor:pointer}.btn.primary{background:#14b8a6;color:#fff}.btn.danger{background:#fee2e2;color:#b91c1c}.btn.success{background:#dcfce7;color:#166534}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:12px;border-bottom:1px solid #e5e7eb}.badge{padding:4px 10px;border-radius:999px;font-size:12px}.badge.admin{background:#e0e7ff;color:#3730a3}.badge.staff{background:#f1f5f9;color:#334155}.badge.success{background:#dcfce7;color:#166534}.badge.danger{background:#fee2e2;color:#991b1b}.grid-6{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.card.large{min-height:160px;display:flex;flex-direction:column;justify-content:space-between}.btn{padding:8px 12px;background:#14b8a6;color:#fff;border:none;border-radius:4px;text-decoration:none}.btn.secondary{background:#6c757d}.header{display:flex;align-items:center;justify-content:space-between}.header-title{font-size:18px;font-weight:600}.header-right{display:flex;align-items:center}.user-info{text-align:right;line-height:1.2}.user-email{font-size:13px;font-weight:600;color:#111827}.user-role{display:inline-block;margin-top:4px;font-size:11px;padding:2px 8px;border-radius:999px;font-weight:600;text-transform:capitalize}.user-role.admin{background:#fee2e2;color:#991b1b}.user-role.staff{background:#e0f2fe;color:#0369a1}