*{box-sizing:border-box;margin:0;padding:0}html,body{color:#333;background:#f5f6fa;width:100%;height:100%;font-family:Corbel,Segoe UI,Tahoma,Gene,Verdana,sans-serif;font-size:14px;overflow:hidden}#app,#workbenchPageContent,.CanvasZone,.ControlZone{width:100%;height:100vh}.login-page{background:linear-gradient(135deg,#5b197b,#8a1538);justify-content:center;align-items:center;width:100%;height:100vh;display:flex}.login-card{text-align:center;background:#fff;border-radius:16px;width:400px;padding:40px;box-shadow:0 15px 35px #0003}.company-logo{width:120px;margin:0 auto 20px;display:block}.login-card h2{color:#5b197b;margin-bottom:5px;font-size:22px}.login-card h4{color:#8a1538;margin-bottom:10px;font-size:17px}.login-card p{color:#777;margin-bottom:25px}.btn{cursor:pointer;border:none;border-radius:8px;width:100%;padding:13px;font-size:15px;transition:all .3s}.btn-primary{color:#fff;background:#5b197b}.btn-primary:hover{background:#471460}.app-layout{height:100vh;display:flex}.sidebar{color:#fff;background:linear-gradient(#5b197b,#8a1538);flex-direction:column;width:280px;display:flex;box-shadow:0 0 25px #0000001f}.brand{text-align:center;border-bottom:1px solid #ffffff1f;padding:15px 20px}.brand img{width:110px;margin-bottom:10px}.brand h2{margin-bottom:8px;font-size:18px}.brand p{color:#ddd;font-size:13px}.menu{flex-direction:column;gap:6px;padding:15px;list-style:none;display:flex}.menu li{cursor:pointer;border-radius:12px;align-items:center;gap:14px;margin-bottom:10px;padding:14px 18px;font-size:15px;transition:all .3s;display:flex}.menu li:hover{background:#ffffff26}.menu li.active{color:#5b197b;background:#fff;font-weight:700}.logout{margin-top:0}.main-content{flex-direction:column;flex:1;display:flex;overflow:hidden}.topbar{background:#fff;justify-content:space-between;align-items:center;height:75px;padding:0 25px;display:flex;box-shadow:0 3px 12px #00000014}.topbar-left h2{color:#5b197b;margin-bottom:3px;font-size:18px}.topbar-left span{color:#777;font-size:13px}.topbar-right{align-items:center;gap:22px;display:flex}.notification{background:#f4f4f4;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;display:flex;position:relative}.notification i{color:#5b197b;font-size:18px}.notification-badge{color:#fff;background:#d71920;border-radius:50%;justify-content:center;align-items:center;width:18px;height:18px;font-size:11px;display:flex;position:absolute;top:-3px;right:-3px}.profile{align-items:center;gap:12px;display:flex}.avatar{color:#fff;background:linear-gradient(135deg,#5b197b,#8a1538);border-radius:50%;justify-content:center;align-items:center;width:46px;height:46px;font-size:18px;font-weight:700;display:flex}.profile-details{flex-direction:column;display:flex}.profile-name{color:#222;font-size:15px;font-weight:700}.profile-company{color:#777;font-size:12px}.page-content{flex:1;padding:25px;overflow-y:auto}.stats-grid{grid-template-columns:repeat(4,1fr);gap:18px;display:grid}.stat-card span{color:#666;font-size:14px}.table-card{background:#fff;border-radius:12px;margin-top:22px;padding:22px;box-shadow:0 5px 15px #00000014}.table-card h3{color:#333;margin-bottom:18px;font-size:18px}table{border-collapse:collapse;width:100%}table th{color:#fff;text-align:left;background:#5b197b;padding:12px;font-size:14px}table td{border-bottom:1px solid #ececec;padding:13px;font-size:14px}table tbody tr:hover{background:#fafafa}.badge{color:#fff;border-radius:30px;padding:6px 14px;font-size:12px;font-weight:600}.badge.pending{color:#fff;background:#f39c12}.badge.in-progress{color:#fff;background:#e67e22;border:1px solid #c96b10;font-weight:700}.badge.approved{color:#fff;background:#27ae60}.badge.rejected{color:#fff;background:#e74c3c}.badge.completed{color:#fff;background:#5b197b}.request-card{background:#fff;border-radius:15px;max-width:950px;margin:0 auto;padding:35px;box-shadow:0 8px 20px #00000014}.page-header{margin-bottom:30px}.page-header h2{color:#5b197b;margin-bottom:8px;font-size:28px;font-weight:600}.page-header p{color:#666;font-size:14px}.request-form{flex-direction:column;gap:25px;display:flex}.form-grid{grid-template-columns:repeat(2,1fr);gap:22px;display:grid}.form-group{flex-direction:column;display:flex}.form-group.full{grid-column:1/-1}.form-group label{color:#444;margin-bottom:8px;font-size:14px;font-weight:600}.form-group label span{color:#d62828}.form-group input,.form-group select,.form-group textarea{background:#fafbfc;border:1px solid #d7dbe4;border-radius:10px;width:100%;padding:13px 15px;font-family:Corbel,sans-serif;font-size:14px;transition:all .3s}.form-group input:hover,.form-group select:hover,.form-group textarea:hover{border-color:#5b197b}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{background:#fff;border-color:#5b197b;outline:none;box-shadow:0 0 0 4px #5b197b1f}.form-group textarea{resize:vertical;min-height:180px}input[type=file]{background:#fff;padding:10px}.form-actions{justify-content:flex-end;display:flex}.form-actions .btn{color:#fff;background:#5b197b;width:220px;font-weight:600;transition:all .3s}.form-actions .btn:hover{background:#471460;transform:translateY(-2px)}.form-actions .btn:disabled{cursor:not-allowed;background:#999}.success-message{color:#1b7f44;background:#e9f8ef;border:1px solid #b7e4c7;border-radius:8px;margin-bottom:20px;padding:14px 18px}@media (width<=992px){.stats-grid{grid-template-columns:repeat(2,1fr)}.form-grid{grid-template-columns:1fr}}@media (width<=768px){.sidebar{width:80px}.brand h2,.brand p,.menu li span{display:none}.topbar{flex-direction:column;align-items:flex-start;gap:12px;height:auto;padding:15px}.stats-grid{grid-template-columns:1fr}.form-actions{justify-content:center}.form-actions .btn{width:100%}}.badge{border-radius:20px;padding:5px 10px;font-size:12px;font-weight:600;display:inline-block}.status-pending{color:#856404;background:#fff3cd}.status-approved{color:#155724;background:#d4edda}.status-rejected{color:#721c24;background:#f8d7da}.status-completed{color:#0c5460;background:#d1ecf1}.table-wrapper{overflow-x:auto}select.statusSelect{cursor:pointer;border:1px solid #ccc;border-radius:6px;padding:6px}.dashboard-cards{grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:30px;display:grid}.stat-card{background:#fff;border-radius:16px;padding:24px;box-shadow:0 2px 10px #00000014}.stat-card h3{color:#6a1b9a;margin-bottom:10px;font-size:32px}.stat-card p{color:#666;margin:0}.menu a{color:inherit;align-items:center;gap:14px;width:100%;text-decoration:none;display:flex}