:root{--navy: #092541;--navy2: #103c63;--blue: #0878f9;--blue2: #075dcc;--ink: #102b47;--muted: #718096;--line: #dce6f0;--bg: #f3f7fb;--white: #fff;--green: #1ea76d;--orange: #f59e0b;--red: #ef5350;--shadow: 0 10px 30px rgba(16, 43, 71, .07)}*{box-sizing:border-box}body{margin:0;font-family:Tajawal,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg);color:var(--ink)}button,input,select,textarea{font:inherit}button{cursor:pointer}h1,h2,h3,h4,h5,h6{margin:0}.app{display:grid;grid-template-columns:176px 1fr;min-height:100vh}.sidebar{position:fixed;left:0;top:0;bottom:0;width:176px;background:linear-gradient(180deg,#071d33,#0c3558 58%,#071f38);padding:20px 12px;color:#fff;z-index:20;display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.1);overflow-y:auto}.brand{display:flex;align-items:center;gap:10px;padding:2px 8px 22px;text-align:center;justify-content:center}.brand-mark{width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,#fff,#a7d0ff);color:var(--navy);display:grid;place-items:center;font-weight:800;font-size:18px}.brand strong{display:block;font-size:18px;font-weight:700}.brand small{font-size:9px;color:#b8cadd;display:block;font-weight:500}.nav{display:grid;gap:8px;flex:1;margin-top:30px}.nav button{border:0;background:transparent;color:#c9d6e3;border-radius:12px;padding:12px 10px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;text-align:center;font-size:11px;font-weight:600;transition:all .2s ease;min-height:auto}.nav button:hover,.nav button.active{background:linear-gradient(135deg,#0878f9,#1769d1);color:#fff;box-shadow:0 7px 18px #0071f540}.nav button svg{width:28px;height:28px;flex-shrink:0}.nav .split{height:1px;background:#ffffff1c;margin:10px 4px}.logout{margin-top:auto}.main{grid-column:2;min-width:0;display:flex;flex-direction:column}.topbar{height:68px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:22px;padding:0 26px;position:sticky;top:0;z-index:15;box-shadow:0 2px 8px #102b4708}.page-title{display:flex;align-items:center;gap:11px;min-width:210px}.page-title h1{font-size:21px;font-weight:700}.page-title .icon{width:38px;height:38px;border-radius:11px;background:#eaf4ff;color:var(--blue);display:grid;place-items:center}.global-search{max-width:480px;flex:1;margin:0 auto 0 20px;position:relative}.global-search input{width:100%;height:42px;border:1px solid var(--line);background:#f8fafc;border-radius:11px;padding:0 42px 0 15px;outline:none;transition:all .2s ease}.global-search input:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px #0878f91a}.global-search svg{position:absolute;left:14px;top:11px;color:#8ca0b4;width:18px;height:18px}.user{display:flex;align-items:center;gap:10px;margin-left:auto;flex-shrink:0}.bell{position:relative;border:0;background:#f4f7fa;width:38px;height:38px;border-radius:50%;color:var(--ink);display:grid;place-items:center;transition:all .2s ease}.bell:hover{background:#e9f0f7}.bell b{position:absolute;top:-3px;left:-2px;background:var(--red);color:#fff;font-size:10px;border-radius:10px;padding:1px 5px;font-weight:700}.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#143f68,#0878f9);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px}.user-text strong,.user-text small{display:block}.user-text strong{font-size:13px;font-weight:600}.user-text small{color:var(--muted);font-size:11px;margin-top:2px}.content{padding:22px 26px 34px}.btn{border:0;border-radius:10px;height:40px;padding:0 15px;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:700;font-size:13px;transition:all .2s ease;cursor:pointer}.btn-primary{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;box-shadow:0 7px 16px #0878f92b}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px #0878f940}.btn-soft{background:#edf5ff;color:var(--blue)}.btn-soft:hover{background:#dae9ff}.btn-outline{background:#fff;border:1px solid var(--line);color:var(--ink)}.btn-outline:hover{background:#f8fbfe;border-color:var(--blue)}.btn-danger{background:#ffebeb;color:var(--red)}.btn-danger:hover{background:#ffe0e0}.btn-success{background:#e7f8f0;color:var(--green)}.btn-success:hover{background:#d4f1e6}.card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}.card-header{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)}.card-header h3{font-size:18px;font-weight:700}.card-body{padding:19px}.card-footer{padding:15px 19px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.field{position:relative;margin-bottom:15px}.field label{display:block;font-size:12px;font-weight:700;color:#5a6b7a;margin-bottom:6px}.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);background:#fff;border-radius:10px;outline:none;color:var(--ink);transition:all .2s ease;font-size:13px}.field input,.field select{height:44px;padding:0 12px}.field textarea{padding:10px 12px;min-height:100px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px #0878f91a}.field svg{position:absolute;right:13px;top:32px;color:#8497aa;width:18px;height:18px;pointer-events:none}.table{width:100%;border-collapse:collapse;font-size:13px}.table thead{background:#f1f6fa;border-bottom:1px solid var(--line)}.table th{padding:12px;text-align:left;font-weight:700;color:#61758a;font-size:11px}.table td{padding:14px 12px;border-top:1px solid var(--line);text-align:left}.table tbody tr:hover{background:#f8fbfe}.status-pill{display:inline-flex;align-items:center;gap:6px;border-radius:12px;padding:5px 11px;font-size:11px;font-weight:700;white-space:nowrap}.status-pill.active{background:#e7f8f0;color:var(--green)}.status-pill.inactive{background:#ffe9e8;color:var(--red)}.status-pill.pending{background:#fff3dc;color:#af6b00}.status-pill.progress{background:#e7f2ff;color:var(--blue)}.spinner{width:40px;height:40px;border:3px solid var(--line);border-top-color:var(--blue);border-radius:50%;animation:spin 1s linear infinite}@media (max-width: 1050px){.global-search{max-width:350px}.user-text{display:none}}@media (max-width: 780px){.app{display:block}.sidebar{width:72px}.brand span,.nav button span{display:none}.nav button{justify-content:center}.main{margin-right:72px}.topbar{flex-wrap:wrap;height:auto;padding:12px}.page-title h1,.global-search{display:none}.page-title{min-width:auto}.content{padding:15px}}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{transition-property:background-color,border-color,color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#f1f5f9}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#94a3b8}:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}button{position:relative}button:active{transform:scale(.98)}@keyframes spin{to{transform:rotate(360deg)}}.animate-spin{animation:spin 1s linear infinite}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.animate-fadeIn{animation:fadeIn .2s ease-in}