:root{font-family:system-ui,-apple-system,'Segoe UI',Tahoma,Arial,sans-serif;color:#152336;background:#f5f7fb;font-size:15px;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-height:100vh}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}a{color:inherit}#app{min-height:100vh}
.splash{min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;color:#77889b}.brand-icon{display:grid;place-items:center;background:#10b8a1;border-radius:17px;color:white;font-weight:800;font-size:30px;width:64px;height:64px}
.login-page{min-height:100vh;background:#0d1b2a;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,460px)}.login-aside{display:flex;flex-direction:column;justify-content:center;padding:7vw;gap:22px;color:white;background:radial-gradient(circle at 32% 50%,#124c55,#0d1b2a 60%)}.login-aside h1{max-width:520px;font-size:clamp(28px,3.6vw,54px);line-height:1.25;margin:0;font-weight:850}.login-aside p{font-size:19px;line-height:1.8;color:#bad3d8;max-width:550px;margin:0}.small-brand{display:flex;align-items:center;gap:12px;color:white;font-weight:800;font-size:22px;direction:ltr;justify-content:flex-end}.logo{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#12b8a1;color:white;font-size:24px;font-weight:800;box-shadow:0 5px 18px #10b8a14d}
.login-panel{display:flex;align-items:center;justify-content:center;background:#fff;padding:34px}.login-card{width:100%;max-width:350px}.eyebrow{display:inline-flex;align-items:center;gap:8px;color:#078b7c;font-size:12px;font-weight:800;letter-spacing:.05em}.login-card h2{font-size:30px;margin:18px 0 9px;letter-spacing:-.6px}.muted{color:#8190a3}.login-card p{color:#8996a6;line-height:1.7;margin:0 0 30px}.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}.field label{font-size:13px;font-weight:750;color:#485a70}.field input,.field select,.field textarea{border:1px solid #dfe6ef;border-radius:12px;padding:13px 14px;width:100%;background:#fff;color:#122137;min-height:46px;outline:none;transition:border .15s,box-shadow .15s}.field input:focus,.field select:focus,.field textarea:focus{border-color:#0caa98;box-shadow:0 0 0 3px #11bb9e21}.field textarea{resize:vertical;min-height:82px}.field input[dir=ltr],input[type=number]{direction:ltr;text-align:left}.field small{color:#8997aa}.btn{border:0;border-radius:12px;min-height:45px;padding:11px 17px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:800;transition:filter .15s,transform .15s;white-space:nowrap}.btn:hover{filter:brightness(.97)}.btn:active{transform:translateY(1px)}.btn.primary{background:#11b7a0;color:white}.btn.dark{background:#112338;color:white}.btn.soft{background:#eff5f9;color:#234056}.btn.warn{background:#fff0e8;color:#bc5a2f}.btn.block{width:100%}.btn.small{min-height:34px;padding:7px 12px;font-size:12px}.btn.outline{border:1px solid #dce5ed;background:#fff;color:#263d4c}
.language-bar{display:flex;gap:8px;align-items:center}.lang-btn{font-size:12px;padding:7px 10px;border:1px solid #e0e6ec;background:#fff;color:#7a8d9e;border-radius:8px}.lang-btn.active{color:#079783;border-color:#0cc4aa;background:#e7fbf6}.login-bottom{font-size:12px;color:#a3aebb;margin-top:30px;line-height:1.7}
.shell{min-height:100vh;display:grid;grid-template-columns:255px minmax(0,1fr)}.sidebar{background:#0d1b2a;color:#91a4b6;padding:26px 15px;display:flex;flex-direction:column;gap:25px;position:sticky;top:0;height:100vh;overflow:auto}.side-header{padding:5px 9px;display:flex;align-items:center;gap:12px;color:#fff;direction:ltr}.side-header .brand-text{display:flex;flex-direction:column;align-items:flex-start}.side-header .brand-text span{font-size:17px;font-weight:850;letter-spacing:.1px}.side-header .brand-text small{font-size:10px;letter-spacing:1.4px;color:#8398ad}.side-sub{font-size:10px;font-weight:800;letter-spacing:1px;color:#61788d;padding:9px 14px 4px}.side-nav{display:flex;flex-direction:column;gap:5px}.nav-btn{border:0;color:#a8bac7;background:transparent;display:flex;align-items:center;gap:12px;border-radius:12px;padding:13px 15px;text-align:start;font-weight:700;min-height:48px}.nav-btn.active{background:#16364a;color:#fff}.nav-btn.active .ic{color:#37d3bd}.nav-btn:hover{background:#1a3444}.ic{display:inline-grid;place-items:center;width:21px;height:21px;font-size:20px;line-height:1}.side-spacer{flex:1}.side-user{border-top:1px solid #293b4a;padding:17px 9px 0;display:flex;align-items:center;gap:11px}.avatar{height:38px;width:38px;flex:none;background:#23495a;display:grid;place-items:center;border-radius:12px;color:#c2fff0;font-weight:900}.side-user .detail{min-width:0;flex:1}.side-user .detail b{display:block;color:#fff;font-size:13px}.side-user .detail small{font-size:11px;color:#899cab}.side-logout{border:0;background:transparent;color:#94a6b5;font-size:19px}
.main{padding:32px clamp(18px,4.2vw,60px) 48px;min-width:0;max-width:1500px;width:100%;margin-inline:auto}.topbar{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:29px}.topbar .subtitle{font-size:12px;color:#8c9bab;font-weight:650;display:block;margin-bottom:7px}.topbar h1{font-size:clamp(22px,2.3vw,30px);letter-spacing:-.6px;margin:0;color:#172b40}.top-tools{display:flex;align-items:center;gap:9px}.top-tools .pill{background:white;border:1px solid #e6ecf1;color:#718399;border-radius:30px;padding:10px 14px;font-size:12px;font-weight:700}.status-dot{display:inline-block;width:8px;height:8px;background:#14bc93;border-radius:100%;margin-inline-end:5px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:27px 0 13px}.section-heading h2{font-size:17px;letter-spacing:-.3px;margin:0}.section-heading p{font-size:12px;color:#8c9bab;margin:5px 0 0}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.card{background:white;border:1px solid #e8eef3;border-radius:17px;padding:20px;box-shadow:0 3px 17px #26384b06;min-width:0}.kpi{display:flex;flex-direction:column;gap:11px}.kpi .kpi-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.kpi .label{color:#71839a;font-size:12px;font-weight:700}.kpi .number{font-size:clamp(22px,2.5vw,31px);color:#11283b;font-weight:850;white-space:nowrap;letter-spacing:-.5px;direction:ltr;text-align:start}.kpi .hint{color:#a5b1bd;font-size:11px}.kpi .symbol{height:39px;width:39px;border-radius:12px;display:grid;place-items:center;font-size:18px;background:#effaf7;color:#0fb29a}.kpi .symbol.orange{background:#fff3e9;color:#e68b49}.kpi .symbol.blue{background:#eef4ff;color:#4b8add}.kpi .symbol.purple{background:#f3efff;color:#8b72d7}
.wallet-hero{background:#112b3c;color:white;border-radius:20px;padding:27px;position:relative;overflow:hidden;min-height:185px;display:flex;justify-content:space-between;gap:18px;align-items:center}.wallet-hero:before{content:"";position:absolute;width:280px;height:280px;background:#0dd3ae20;border-radius:50%;left:-80px;top:-100px}.wallet-hero:after{content:"";position:absolute;width:230px;height:230px;border:1px solid #56e8d530;border-radius:50%;left:10px;bottom:-135px}.wallet-hero>*{position:relative;z-index:1}.wallet-hero .balance-label{color:#a6bdca;font-size:13px;margin-bottom:9px}.wallet-hero .balance{font-size:clamp(34px,5vw,48px);font-weight:850;direction:ltr;text-align:start;letter-spacing:-1px}.wallet-hero .available{font-size:12px;color:#b5d0d8;margin-top:10px}.wallet-circle{width:78px;height:78px;background:#13bba21c;border:1px solid #37dbc547;border-radius:21px;display:grid;place-items:center;color:#8ff2e3;font-size:40px}.action-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.action-tile{border:1px solid #e5ecf1;border-radius:15px;background:white;padding:19px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;color:#243a50;font-weight:800;font-size:13px}.action-tile .action-icon{display:grid;place-items:center;width:49px;height:49px;border-radius:14px;font-size:22px;background:#e8faf5;color:#0bb598}.action-tile:nth-child(2) .action-icon{background:#fff2e9;color:#ed935a}.action-tile:nth-child(3) .action-icon{background:#eef2ff;color:#768adb}.action-tile:nth-child(4) .action-icon{background:#f2f0ff;color:#8979d6}
.table-wrap{overflow:auto;border-radius:16px;border:1px solid #e7edf3;background:white}.table{border-collapse:collapse;width:100%;min-width:640px}.table th{text-align:start;background:#fafbfd;border-bottom:1px solid #ebf0f3;padding:15px 18px;font-size:11px;color:#889aae}.table td{padding:14px 18px;border-bottom:1px solid #f1f3f6;font-size:12px;color:#4b6173;vertical-align:middle}.table tr:last-child td{border-bottom:0}.person{display:flex;align-items:center;gap:10px}.person .avatar{width:33px;height:33px;font-size:13px;background:#ecf5f7;color:#328696;border-radius:10px}.person b{color:#24394b;font-size:13px}.money{font-weight:850;white-space:nowrap;direction:ltr;display:inline-block}.money.positive{color:#0aaf8e}.money.negative{color:#e16f59}.tag{display:inline-flex;align-items:center;justify-content:center;border-radius:30px;font-size:10px;padding:5px 9px;font-weight:850;white-space:nowrap}.tag.pending{background:#fff3e4;color:#ba742c}.tag.posted{background:#e5f8f1;color:#0b9d78}.tag.rejected{background:#f8edf0;color:#b65c6f}.section-split{display:grid;grid-template-columns:1.35fr .85fr;gap:17px}.pending-list{display:flex;flex-direction:column;gap:10px}.request{background:white;border:1px solid #e8eef2;border-radius:14px;padding:14px;display:flex;gap:12px;align-items:flex-start}.request-icon{display:grid;place-items:center;background:#fff2e5;width:39px;height:39px;flex:none;border-radius:12px;color:#d88940;font-size:17px}.request-body{min-width:0;flex:1}.request-body b{font-size:13px;color:#20364a}.request-body .desc{font-size:12px;color:#8b9caf;margin:6px 0 8px}.request-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.request-amount{font-size:17px;font-weight:900;white-space:nowrap;direction:ltr;text-align:end;color:#233849}.empty{padding:37px 14px;text-align:center;color:#91a0b0;font-size:13px}.empty .big-emoji{font-size:32px;display:block;margin-bottom:12px}.line{height:1px;background:#e8edf1;margin:16px 0}.filterbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:13px}.filterbar select{height:40px;border:1px solid #e3eaf0;background:#fff;border-radius:10px;color:#41556b;padding:0 12px;max-width:220px}.notice{background:#eff9f6;border:1px solid #d7f1e9;border-radius:13px;padding:14px 16px;color:#2d7f71;font-size:12px;line-height:1.8}.alert{background:#fff7e9;color:#9a662f;border-color:#f4e4cb}.user-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.user-card{background:#fff;border:1px solid #e6edf3;border-radius:16px;padding:19px;display:flex;flex-direction:column;gap:14px}.user-card-head{display:flex;gap:11px;align-items:center}.user-card .info{flex:1;min-width:0}.user-card .info b{display:block}.user-card .info small{color:#9daab7}.user-card .value{font-size:25px;font-weight:900;direction:ltr;text-align:start}.user-card .user-buttons{display:flex;gap:7px;flex-wrap:wrap}
.modal-scrim{position:fixed;inset:0;background:#091825a8;z-index:30;display:grid;place-items:center;padding:18px;backdrop-filter:blur(5px)}.modal{width:min(470px,100%);max-height:min(88vh,760px);overflow:auto;background:#fff;border-radius:20px;padding:25px;box-shadow:0 35px 100px #0004}.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}.modal-head h2{font-size:20px;margin:0 0 6px}.modal-head p{margin:0;font-size:12px;color:#8a9aac}.modal-close{border:0;background:#f2f6f8;border-radius:10px;width:35px;height:35px;font-size:20px;color:#6b8393}.modal-actions{display:flex;gap:9px;margin-top:19px}.modal-actions .btn{flex:1}.readonly{background:#f5f8fb!important}.inline-note{font-size:12px;line-height:1.7;color:#8da0af;margin-top:10px}.top-logout{display:none}.bottomnav{display:none}#toast{position:fixed;z-index:100;inset:auto 15px 20px auto;max-width:min(410px,calc(100% - 30px));background:#132e3e;color:white;border-radius:13px;box-shadow:0 14px 40px #0004;padding:14px 18px;font-size:13px;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .2s,transform .2s}#toast.show{opacity:1;transform:translateY(0)}#toast.error{background:#b44d42}
[dir=ltr] .kpi .number,[dir=ltr] .wallet-hero .balance,[dir=ltr] .money,[dir=ltr] .user-card .value{text-align:left}
@media(max-width:1100px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.section-split{grid-template-columns:1fr}.shell{grid-template-columns:215px minmax(0,1fr)}}
@media(max-width:750px){.login-page{display:flex;flex-direction:column;min-height:100vh}.login-aside{padding:35px 25px 28px;flex:none;min-height:190px}.login-aside h1{font-size:24px}.login-aside p{display:none}.login-panel{flex:1;align-items:flex-start;border-radius:24px 24px 0 0;margin-top:-6px;padding:33px 25px}.login-card h2{margin-top:12px}.shell{display:block;padding-bottom:72px}.sidebar{display:none}.main{padding:23px 15px 30px}.topbar{margin-bottom:18px}.topbar h1{font-size:23px}.top-tools .pill{display:none}.top-logout{display:flex}.cards{gap:9px}.card{padding:14px;border-radius:14px}.kpi .number{font-size:22px}.kpi .symbol{width:32px;height:32px;font-size:16px}.action-grid{gap:8px}.action-tile{padding:15px 5px;font-size:10px;gap:9px}.action-tile .action-icon{width:42px;height:42px;font-size:19px}.wallet-hero{padding:23px;min-height:168px}.wallet-circle{width:57px;height:57px;font-size:28px;border-radius:17px}.user-grid{grid-template-columns:1fr}.table{min-width:530px}.table th,.table td{padding:12px 11px}.bottomnav{position:fixed;inset:auto 0 0;background:#fff;box-shadow:0 -5px 25px #16283b12;display:flex;justify-content:space-around;z-index:20;padding:9px 8px max(10px,env(safe-area-inset-bottom))}.bottomnav button{border:0;background:none;color:#8798a8;min-width:58px;display:flex;gap:5px;flex-direction:column;align-items:center;font-size:10px;font-weight:750}.bottomnav button .ic{font-size:19px}.bottomnav button.active{color:#0ea991}.modal-scrim{align-items:end;padding:0}.modal{width:100%;max-height:90vh;border-radius:22px 22px 0 0;padding:23px 21px max(23px,env(safe-area-inset-bottom))}#toast{bottom:85px}}
@media(max-width:370px){.action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar h1{font-size:20px}.cards{grid-template-columns:1fr 1fr}.wallet-hero .balance{font-size:32px}}