@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Manrope:wght@600;700;800&display=swap');
:root{--navy:#101e3a;--blue:#2864e8;--blue2:#4b8cff;--ink:#17233d;--muted:#78849b;--line:#e8edf5;--canvas:#f4f7fc;--white:#fff;--shadow:0 12px 34px rgba(28,54,100,.07)}
*{box-sizing:border-box}
body{margin:0;background:var(--canvas);color:var(--ink);font:14px 'DM Sans',Arial,sans-serif}
a{color:var(--blue);text-decoration:none}
.app-shell{min-height:100vh;display:flex}
.sidebar{width:252px;flex:0 0 252px;background:linear-gradient(165deg,#111f3e,#172c53 72%,#1d3c70);color:#dce7ff;min-height:100vh;padding:25px 17px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:11px;color:white;font:800 20px Manrope,sans-serif;letter-spacing:.4px;padding:3px 9px 34px}
.brand:hover{color:white}.brand small{display:block;font:700 9px 'DM Sans';letter-spacing:1.8px;color:#91a9d5;margin-top:2px}
.brand-mark{width:39px;height:39px;border-radius:13px;background:linear-gradient(145deg,#62a5ff,#3268ef);display:grid;place-items:center;color:white;font:800 22px Manrope;box-shadow:0 7px 18px #2864e866}
.side-caption{font-size:9px;letter-spacing:1.8px;font-weight:800;color:#7189b6;padding:0 12px 12px}
.side-nav{display:grid;gap:7px}.side-nav a{display:flex;align-items:center;gap:13px;padding:12px 13px;border-radius:10px;color:#b8c8e8;font-weight:600;transition:.2s}
.side-nav a:hover,.side-nav a:focus{background:#ffffff15;color:white;transform:translateX(2px)}
.nav-ico{width:22px;text-align:center;font-size:17px;color:#8fbaff}
.sidebar-bottom{margin-top:auto}.profile-chip{display:flex;align-items:center;gap:10px;padding:13px 8px;border-top:1px solid #ffffff20;border-bottom:1px solid #ffffff20}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#2c65d9;color:#fff;font-weight:800}
.profile-chip b,.profile-chip small{display:block}.profile-chip b{font-size:12px;color:#fff}.profile-chip small{font-size:9px;color:#9bb0d5;letter-spacing:1px;margin-top:3px}
.logout-link{display:block;color:#aebfe0;padding:15px 9px;font-weight:600}
.main-area{min-width:0;flex:1;display:flex;flex-direction:column}
.topbar{min-height:100px;padding:22px clamp(20px,4vw,54px);display:flex;align-items:center;justify-content:space-between;gap:20px;background:#fff;border-bottom:1px solid var(--line)}
.eyebrow{font-size:9px;letter-spacing:1.7px;font-weight:800;color:#8a98b0}
.topbar h1{font:800 24px Manrope,sans-serif;color:#192949;margin:5px 0 0}
.topbar-right{display:flex;align-items:center;gap:18px}.secure-pill{font-size:11px;font-weight:700;color:#23845a;background:#e9f8f0;padding:9px 12px;border-radius:30px}
.lang-switch{display:flex;background:#f1f4fa;border-radius:9px;padding:4px;gap:3px}.lang-switch a{font-size:11px;font-weight:700;color:#61708a;padding:7px 9px;border-radius:6px}.lang-switch a:hover{background:white}
main{width:min(1440px,100%);margin:0 auto;padding:30px clamp(18px,4vw,54px);flex:1}
h1{color:#192949}h2{font:800 19px Manrope,sans-serif;color:#1a2c4d;margin:0 0 12px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:23px;margin:16px 0;box-shadow:var(--shadow)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:16px}
.grid .card{position:relative;overflow:hidden;border:0;border-radius:17px;min-height:132px;padding:22px;background:linear-gradient(135deg,#2456d9,#3988f4);color:#fff;box-shadow:0 12px 25px #2864e82b}
.grid .card:nth-child(2){background:linear-gradient(135deg,#2568ca,#42a5ee)}
.grid .card:nth-child(3){background:linear-gradient(135deg,#293f9b,#526fe4)}
.grid .card:nth-child(4){background:linear-gradient(135deg,#176c9f,#24a4bf)}
.grid .card:nth-child(5){background:linear-gradient(135deg,#3c4e9b,#687ee8)}
.grid .card:after{content:"";position:absolute;width:110px;height:110px;border:1px solid #ffffff30;border-radius:50%;right:-28px;top:-38px;box-shadow:0 0 0 16px #ffffff0b,0 0 0 32px #ffffff08}
.grid .muted{color:#dceaff;font-size:11px;font-weight:700;letter-spacing:.3px}.stat{font:800 29px Manrope,sans-serif;margin-top:15px;color:white;position:relative;z-index:1}
label{display:block;margin:13px 0 6px;font-weight:700;font-size:12px;color:#42516b}
input,select,textarea{width:100%;padding:12px 13px;border:1px solid #dce3ee;border-radius:9px;background:#fff;color:#1c2b47;font:13px 'DM Sans';transition:.2s}
input:focus,select:focus,textarea:focus{outline:0;border-color:#5590fa;box-shadow:0 0 0 3px #5590fa20}
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:linear-gradient(135deg,#2864e8,#4388f7);color:#fff!important;border:0;border-radius:9px;padding:11px 17px;cursor:pointer;margin:12px 8px 0 0;font:700 12px 'DM Sans';box-shadow:0 5px 12px #2864e826;transition:.2s}
button:hover,.btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px #2864e83b}
button.danger{background:linear-gradient(135deg,#b9344b,#e45c6b)}.btn.secondary{background:#edf2fa;color:#425779!important;box-shadow:none}
table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;min-width:700px}
th,td{text-align:left;padding:14px 13px;border-bottom:1px solid #edf0f5;vertical-align:middle}
th{background:#f5f8fd;color:#60708c;font-size:10px;text-transform:uppercase;letter-spacing:.7px;white-space:nowrap}
td{font-size:12px;color:#35435c}tr:last-child td{border-bottom:0}tr:hover td{background:#f8faff}
.table-wrap{width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.muted{color:var(--muted)}.alert{padding:14px 16px;background:#fff5df;border:1px solid #ffe5ae;border-radius:10px;margin:14px 0;color:#805b1b}.success{background:#e9f9ef}
footer{padding:20px clamp(20px,4vw,54px);color:#96a1b4;font-size:11px;border-top:1px solid var(--line);background:#fff}
footer>span:first-child{font-weight:800;color:#52627d;letter-spacing:1px}.footer-right{float:right}
.filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:13px;align-items:end}.filter-actions{padding-bottom:2px}
.tag{display:inline-block;border-radius:30px;padding:5px 10px;font-size:10px;font-weight:800;background:#edf2fa;color:#47617f}.tag.credit{background:#e7f8ef;color:#168052}.tag.debit{background:#fff0ec;color:#bd513c}.tag.opening{background:#eaf0ff;color:#365ec0}
.empty{text-align:center;color:#8793a8;padding:28px}
.login-intro{background:linear-gradient(120deg,#172d5d,#2864e8 68%,#53a0fa);padding:32px;border-radius:18px;color:white;margin:10px 0 20px;box-shadow:0 15px 35px #2864e82b}
.login-intro h2{font:800 24px Manrope;color:white;margin:10px 0}.login-intro p{color:#d9e7ff;max-width:620px;line-height:1.7;margin:0}.login-badge{font-size:9px;font-weight:800;letter-spacing:2px;color:#dceaff}
.login-card{border-radius:16px;box-shadow:var(--shadow)}
@media(max-width:850px){.sidebar{width:215px;flex-basis:215px}.topbar{align-items:flex-start}.secure-pill{display:none}}
@media(max-width:650px){.app-shell{display:block}.sidebar{width:100%;height:auto;min-height:0;position:relative;padding:13px}.brand{padding:0 7px 13px}.side-caption,.sidebar-bottom{display:none}.side-nav{display:flex;overflow-x:auto;gap:5px}.side-nav a{white-space:nowrap;padding:9px;font-size:11px}.nav-ico{display:none}.topbar{padding:18px;min-height:78px}.topbar h1{font-size:19px}.topbar-right{gap:7px}.lang-switch a{padding:6px}main{padding:16px}.card{padding:17px}.grid{grid-template-columns:1fr 1fr;gap:10px}.grid .card{padding:15px;min-height:110px}.stat{font-size:22px}footer{padding:17px}.login-intro{padding:22px}}