:root{--bg:#081321;--panel:#102237;--ink:#e2edf7;--muted:#8eacc3;--line:#2a4258;--blue:#39b4cb;--cyan:#63cce0;--green:#4ec4ad;--red:#e38e9d;--orange:#d5b479;--navy:#0b1b2b;--soft:#142d42;color-scheme:dark}
body{background:var(--bg);color:var(--ink);font-family:Tahoma,Arial,sans-serif}
#login.identity-login{display:block;min-height:100vh;background:radial-gradient(ellipse at 25% 40%,#12324860,transparent 55%),#081321;padding:0 6vw;color:#e2edf7}
.identity-login-top{height:110px;border-bottom:1px solid #223b4d;display:flex;align-items:center;justify-content:space-between;max-width:1340px;margin:auto}
.identity-company{display:flex;gap:13px;align-items:center;color:#e1eef6;text-decoration:none}.identity-company img{width:52px;height:48px;object-fit:contain;padding:6px;background:#f4f8fb;border-radius:9px}.identity-company b{display:block;font:700 14px Arial;letter-spacing:.5px}.identity-company small{display:block;color:#7f9fb6;font-size:11px;margin-top:5px}.identity-signature{font:800 17px Arial;letter-spacing:1.5px;color:#8ad4e6}
#login .identity-login-layout{display:grid;grid-template-columns:minmax(350px,440px) minmax(400px,1fr);gap:7vw;align-items:center;max-width:1190px;min-height:calc(100vh - 180px);margin:auto;padding:55px 0}
.identity-access{background:#102237;border:1px solid #29465b;border-radius:18px;padding:36px;box-shadow:0 20px 70px #0002}.access-overline{font-size:10px;color:#8bb6cb;display:flex;align-items:center;gap:7px}.access-overline>span{width:6px;height:6px;border-radius:50%;background:#62cbdc}.identity-access h1{font-size:32px;line-height:1.5;margin:16px 0 6px;color:#eff7fc}.access-description{font-size:12px;line-height:1.9;color:#8faec4;margin:0 0 28px}
#login .real-login-form{display:block;margin:0;padding:0;gap:0}.identity-login .cin-field{display:grid;gap:10px;margin-bottom:19px}.identity-login .cin-field>span{font-size:12px;color:#bad0e0}.identity-login .cin-field input{height:48px;background:#0a1b2a!important;border:1px solid #35546c!important;border-radius:8px!important;color:#e6f1f9!important;padding:12px 14px;font-size:13px;width:100%;box-shadow:none!important}.identity-login input::placeholder{color:#6487a1;opacity:1}.identity-login input:focus{outline:2px solid #4ab9cf44!important;border-color:#60c2d5!important}
.identity-login .login-options{display:flex;align-items:center;justify-content:space-between;margin:6px 0 26px;gap:12px}.identity-login .remember-device{display:flex;align-items:center;gap:7px;font-size:10px;color:#9cb7cc}.identity-login .remember-device input{width:14px;height:14px;accent-color:#4bbfd6}.identity-login .forgot-link{background:none;border:0;font-size:10px;color:#7dd0e1;cursor:pointer;padding:0}
.identity-login .cin-login-btn{width:100%;height:48px;display:flex;justify-content:space-between;align-items:center;padding:0 17px;background:#49bcd2;color:#082334;border:0;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;box-shadow:none}.identity-login .cin-login-btn b{font-size:19px;background:transparent;color:#082334}.identity-login .cin-login-btn:hover{background:#67cee0}.identity-login .cin-login-btn:disabled{opacity:.5}
.access-note{display:flex;gap:9px;margin:24px 0 20px;padding-top:20px;border-top:1px solid #284357}.access-note i{width:5px;height:5px;border-radius:50%;margin-top:9px;background:#789daf;flex:none}.access-note p{font-size:10px;line-height:1.9;color:#7f9eb5;margin:0}.access-footer{display:flex;justify-content:space-between;align-items:center;color:#627e95;font:8px Arial}.identity-login .login-version{position:static!important;background:transparent!important;padding:0!important;border:0!important;color:#627e95!important;font-size:9px}
.identity-story{padding:20px 12px;position:relative}.story-kicker{color:#69bacc;font-size:11px;letter-spacing:.4px}.identity-story h2{font-size:clamp(35px,4vw,52px);line-height:1.55;font-weight:700;margin:20px 0;color:#e4f1fa}.identity-story em{font-style:normal;color:#77cada}.identity-story>p{font-size:13px;line-height:2.1;color:#7f9eb5;max-width:460px;margin:0 0 30px}.identity-workflow{border:1px solid #2a4659;border-radius:14px;background:linear-gradient(120deg,#133045,#102236);padding:6px 22px;max-width:500px}.identity-workflow>div{display:flex;align-items:center;gap:16px;padding:21px 0;border-bottom:1px solid #2c485a}.identity-workflow>div:last-child{border:0}.identity-workflow>div>span{color:#507f97;font:12px Arial}.identity-workflow section{flex:1}.identity-workflow b{font-size:13px;color:#d0e5f3}.identity-workflow small{display:block;margin-top:7px;font-size:10px;color:#7c9fb5}.identity-workflow i{font-style:normal;width:30px;height:30px;background:#204458;display:grid;place-items:center;color:#75c7d7;border-radius:8px}.story-bottom{display:flex;justify-content:space-between;gap:12px;margin-top:23px;color:#5f8198;font-size:9px;max-width:500px}.story-bottom>span{font:8px Arial;letter-spacing:1px}.story-dot{width:5px;height:5px;display:inline-block;border-radius:50%;background:#53adad;margin-left:5px}.identity-login-bottom{display:flex;justify-content:space-between;gap:15px;border-top:1px solid #1a3448;padding:19px 0;color:#587b94;font-size:9px;max-width:1340px;margin:auto}.identity-login-bottom>div{display:flex;gap:8px}
/* Work Hub shares the financial center's palette, spacing and controls. */
#app{background:#081321;grid-template-columns:252px 1fr;color:#dceaf5}
#app aside{background:#0b1b2b!important;border-left:1px solid #20384b;box-shadow:none;padding:28px 18px}#app aside .logo{width:108px;filter:none;background:#f1f6fa;padding:8px;border-radius:8px;opacity:1}#app .brand{color:#7d9eb5;font-size:10px;padding-bottom:22px;border-bottom:1px solid #213a4d;margin-bottom:20px}#app .app-version{background:#173346;color:#76a9bf;font-size:8px}
#app .employee-mini{background:#11283a;border:1px solid #29475c;border-radius:10px;padding:13px;margin:0 0 22px}#app .employee-mini b{color:#d2e5f2;font-size:12px}#app .employee-mini small{color:#759bb3;font-size:10px}#app .avatar{background:#28596b;border:1px solid #4e8095;width:40px;height:40px;font-size:14px}
#app nav{gap:6px}#app nav button{background:transparent;border:0;border-radius:8px;color:#8faec5;font-size:12px;padding:13px;text-align:right;box-shadow:none}#app nav button.active{background:#153247;border-right:3px solid #54c4da;color:#e0f3fc}#app nav button:hover{background:#132e42;color:#d5e9f5}#app .finance-nav-link{background:#153749;border:1px solid #315b70;color:#8fd3e3;border-radius:9px;padding:13px;font-size:11px;text-decoration:none;text-align:center;margin-top:15px}
#app .profile{border-color:#223e52;font-size:11px;color:#adc6da}#app .profile button{color:#91b9ce;font-size:10px;padding-top:9px}#app main{padding:0 30px 40px;background:#081321}#app main>header{height:90px;border-color:#22394e;background:#081321;box-shadow:none;position:relative;color:#dceaf5;border-radius:0}#app header h1{font-size:24px}#app header p{font-size:11px;color:#6e94ae}#app .khirbk-staff-brand{background:none!important;box-shadow:none!important;padding:0;border:0}#app .khirbk-staff-brand span{font:800 17px Arial;letter-spacing:1.5px;color:#8cd3e5;text-shadow:none!important}#app .header-actions button{background:#132c40;border:1px solid #2c4b61;color:#a4cadc;border-radius:9px}
#app .card,#app .task,#app .stage,#app .table-wrap,#app .employee-overview,#app .report-record,#app .request-card,#app .link-card,#app .salary-card,#app .team-card,#app .follow-card{background:#102237!important;border:1px solid #2a4359!important;color:#b7cfe0;border-radius:12px;box-shadow:none!important}
#app .command-hero,#app .day-hero,#app .report-hero,#app .wallet-hero,#app .payroll-hero{background:linear-gradient(110deg,#143248,#12394c)!important;color:#d6edf7;border:1px solid #31566b;box-shadow:none;border-radius:15px;padding:25px}#app .command-hero h2,#app .day-hero h2,#app .report-hero h2{color:#e3f3fc;font-size:27px}#app .command-hero p,#app .day-hero p,#app .report-hero p{color:#91b7cb;font-size:12px}
#app .section-title h2{color:#d4e8f4;font-size:17px}#app .section-title small,#app .section-title>span{color:#7d9fb7}#app h3,#app .task-main b,#app .card h2{color:#d2e6f4}
#app .command-kpis>div,#app .report-kpis>div,#app .kpi,#app .metric,#app .stat,#app .quick-card,#app .stage-summary-card,#app .attendance-summary>div{background:#102237!important;border:1px solid #2b465d!important;color:#9fbdd1;border-radius:12px;box-shadow:none}#app .command-kpis b,#app .report-kpis b,#app .metric b,#app .stat b{color:#dceffb}
#app .notice,#app .hint-box,#app .helper-card,#app .announcement,#app .lock-note{background:#122c40!important;border:1px solid #2c4c63!important;color:#a4c7dc!important;border-radius:9px;box-shadow:none}#app .notice h2,#app .notice h3{color:#d2e7f4}
#app .btn,#app .iconbtn{background:#183449;border:1px solid #33536b;color:#b7d2e5;border-radius:8px;box-shadow:none;font-size:11px;padding:9px 13px}#app .btn.blue,#app .btn.green,#app .btn.start{background:#47b9cf;color:#092535;border-color:#47b9cf}#app .btn.red{background:#3e2836;color:#e6afbd;border-color:#684456}#app .btn.ghost{background:transparent;color:#83bbd1;border-color:#34556b}
#app input,#app select,#app textarea,.modal input,.modal select,.modal textarea{background:#0b1d2d!important;color:#d9eaf6!important;border:1px solid #34536b;border-radius:8px;box-shadow:none}#app input:focus,#app select:focus,#app textarea:focus{outline:2px solid #47b9cf33;border-color:#58bcd1}#app input::placeholder,#app textarea::placeholder{color:#6c94af}
#app th{background:#183247!important;color:#a3c4d9!important}#app td{color:#bad1e2!important;border-color:#233d52!important}#app table{background:#102237}#app small{color:#7f9fb8}#app .badge,#app .chip,#app .status{background:#1c4052;color:#95cbdc;border:1px solid #315e73}#app .progress{background:#223c50}#app .progress>i,#app .progress>span{background:#55bdd0}
#app .compact-log>div,#app .attention-card,#app .helper-card,#app .salary-stats>div,#app .wallet-card,#app .attendance{background:#12293c!important;color:#b5cdde!important;border-color:#2c465a!important;border-radius:10px}#app .task-main small,#app .task small{color:#7d9fb7}#app .stage-head{background:#173247;color:#bbd9e9;border-color:#2f4e65}#app .hero-score{background:#1c4357;border:1px solid #32637a;color:#88d4e5}#app .profile small{color:#7297b0}
.modal .modal-card{background:#102237!important;color:#d9eaf6;border:1px solid #36566d;border-radius:16px;box-shadow:0 25px 80px #0008}.modal .modal-head{border-color:#2d495f}.modal h3{color:#e4f1fb}.modal .modal-head button{background:#1c3c51;color:#a7ccdf;border:1px solid #345b72}.modal label,.modal small{color:#a1bfd3}.modal .btn{background:#234c63;color:#c5e4f2;border:1px solid #406b83}.modal .notice{background:#17374b;color:#b0cede}
@media(max-width:1000px){#login .identity-login-layout{gap:4vw;grid-template-columns:minmax(320px,410px) 1fr}.identity-access{padding:28px}.identity-story h2{font-size:36px}#app{grid-template-columns:230px 1fr}#app main{padding:0 20px 30px}}
@media(max-width:760px){#login.identity-login{padding:0 20px}.identity-login-top{height:85px}.identity-company b{font-size:11px}.identity-company small{font-size:9px}.identity-company img{width:42px;height:40px}.identity-signature{font-size:14px}#login .identity-login-layout{display:flex;flex-direction:column;gap:25px;min-height:auto;padding:30px 0}.identity-access{width:100%;max-width:440px;padding:25px}.identity-access h1{font-size:29px}.identity-story{width:100%;max-width:440px;padding:10px 0}.identity-story h2{font-size:30px;margin:13px 0}.identity-story>p{font-size:11px}.identity-workflow>div{padding:16px 0}.identity-login-bottom{font-size:8px;flex-direction:column;gap:9px}.identity-login .login-options{gap:8px}.identity-login .remember-device,.identity-login .forgot-link{font-size:9px}#app{display:block}#app aside{background:#0b1b2b!important}#app main{padding:0 16px 30px}#app main>header{height:78px}#app header h1{font-size:21px}#app .khirbk-staff-brand span{font-size:14px}#app .command-hero,#app .day-hero{padding:20px}#app .command-hero h2,#app .day-hero h2{font-size:23px}}
#login .identity-login-top,#login .identity-login-bottom{width:100%;max-width:1340px;justify-content:space-between;gap:40px;box-sizing:border-box}#login .identity-login-top{display:flex!important;flex-direction:row!important;align-items:center!important;position:relative;transform:none}#login .identity-login-bottom{display:flex!important}.identity-company{flex:none}.identity-signature{margin-right:auto}
#app .pulse-card,#app .live-person{background:#102237!important;color:#b6cede!important;border:1px solid #2a475e!important;box-shadow:none;border-radius:12px}#app .pulse-card b{color:#dcf1fb!important}#app .pulse-card span{color:#91b1c8!important}#app .presence{background:#18374b;color:#accddd}#app .running-mini{background:#132e42!important;color:#94bbd2!important}#app .announcement b{color:#91cddd!important}#app .hint-box b{color:#9dcbdc!important}#app .hintDone{background:#23475e;color:#c9e8f5;border:1px solid #466c83;border-radius:7px}#app .person-top b{color:#d4ebf8!important}#app .person-progress{color:#8eb0c8!important}#app .person-progress .progress{background:#223f54}#app .muted{color:#7ea1bb!important}