@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@600;700;800&display=swap');

:root{
    --navy:#071a33;
    --navy-2:#0b2345;
    --blue:#2457e6;
    --gold:#d8a82f;
    --bg:#f4f7fb;
    --text:#17243a;
    --muted:#728099;
    --line:#e8edf5;
    --white:#fff;
    --shadow:0 18px 45px rgba(12,36,72,.08);
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,-apple-system,sans-serif;color:var(--text)}
h1,h2,h3,h4,h5,.sidebar-brand strong{font-family:Manrope,Inter,sans-serif}
a{text-decoration:none}
.eyebrow{font-size:.69rem;letter-spacing:.16em;font-weight:800;color:#6d7d96}

/* Login */
.login-body{margin:0;background:#eef3f9;min-height:100vh}
.login-shell{display:grid;grid-template-columns:46% 54%;min-height:100vh}
.login-brand-panel{position:relative;padding:8vw;background:
    radial-gradient(circle at 70% 15%,rgba(216,168,47,.18),transparent 27%),
    linear-gradient(145deg,#06162c,#0b2b57);color:white;align-items:center;overflow:hidden}
.login-brand-panel:after{content:"";position:absolute;width:500px;height:500px;border:1px solid rgba(255,255,255,.08);border-radius:50%;right:-250px;bottom:-180px;box-shadow:0 0 0 70px rgba(255,255,255,.025),0 0 0 140px rgba(255,255,255,.02)}
.brand-mark{display:grid;place-items:center;width:68px;height:68px;border-radius:18px;background:linear-gradient(145deg,#e8c460,#bd8422);color:#0a1c35;font-family:Manrope;font-weight:800;box-shadow:0 12px 30px rgba(0,0,0,.18);margin-bottom:28px}
.brand-mark.small-mark{width:42px;height:42px;border-radius:12px;margin:0;font-size:.8rem}
.login-brand-panel h1{font-size:clamp(3rem,6vw,6.5rem);font-weight:800;line-height:.9;letter-spacing:-.055em;margin:0 0 24px}
.login-brand-panel p{font-size:1.1rem;color:#d1d9e8;margin-bottom:7px}
.login-brand-panel span{color:#d8a82f;font-weight:700}
.login-form-panel{display:flex;align-items:center;justify-content:center;padding:36px}
.login-card{width:min(460px,100%);background:white;padding:46px;border-radius:28px;box-shadow:var(--shadow)}
.login-card h2{font-weight:800;letter-spacing:-.03em}
.form-label{font-size:.82rem;font-weight:700}
.form-control{border:1px solid #dce4ef;border-radius:12px;padding:.82rem 1rem;font-size:.95rem}
.form-control:focus{border-color:#7293ef;box-shadow:0 0 0 .24rem rgba(36,87,230,.11)}
.btn-premium{border:0;border-radius:13px;background:linear-gradient(135deg,#173d94,#2457e6);color:white;font-weight:700;padding:.85rem 1rem;box-shadow:0 12px 24px rgba(36,87,230,.2)}
.btn-premium:hover{color:white;transform:translateY(-1px)}
.login-footer{text-align:center;color:#9aa5b7;font-size:.75rem;margin:28px 0 0}

/* App */
.app-body{background:var(--bg);margin:0}
.app-layout{min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;width:265px;background:linear-gradient(180deg,#06162c,#081f3d);padding:24px 18px;flex-direction:column;color:white;z-index:1020}
.sidebar-brand{display:flex;align-items:center;gap:12px;color:white;padding:0 8px 24px}
.sidebar-brand strong{display:block;font-size:.9rem;letter-spacing:.025em}
.sidebar-brand small{display:block;color:#7f91ab;font-size:.65rem;margin-top:2px}
.sidebar-nav{display:flex;flex-direction:column;gap:5px;overflow-y:auto}
.nav-caption{font-size:.58rem;letter-spacing:.16em;color:#61758f;font-weight:800;padding:18px 12px 7px}
.sidebar .nav-link,.mobile-sidebar .nav-link{color:#a9b6c9;padding:10px 12px;border-radius:11px;display:flex;align-items:center;gap:12px;font-size:.82rem;font-weight:600}
.sidebar .nav-link span,.mobile-sidebar .nav-link span{width:22px;text-align:center;color:#7287a3}
.sidebar .nav-link.active{background:linear-gradient(100deg,rgba(36,87,230,.34),rgba(36,87,230,.12));color:white;border:1px solid rgba(82,124,238,.18)}
.sidebar .nav-link.active span{color:#e1b94f}
.disabled-link{opacity:.67;cursor:default}
.disabled-link em{font-size:.55rem;font-style:normal;margin-left:auto;color:#71849e}
.sidebar-footer{margin-top:auto;padding:18px 10px 4px;border-top:1px solid rgba(255,255,255,.07)}
.system-status{font-size:.68rem;color:#8ea0b7;margin-bottom:12px}
.system-status span{display:inline-block;width:7px;height:7px;border-radius:50%;background:#3fd18a;margin-right:7px;box-shadow:0 0 0 4px rgba(63,209,138,.08)}
.logout-link{font-size:.76rem;color:#efb8bc;font-weight:700}
.main-content{margin-left:265px;min-height:100vh}
.topbar{height:78px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 30px;position:sticky;top:0;z-index:1010}
.topbar h5{font-weight:800;font-size:.98rem}
.topbar-user{display:flex;align-items:center;gap:11px}
.topbar-user strong{display:block;font-size:.75rem}
.topbar-user small{display:block;font-size:.62rem;color:var(--muted)}
.avatar{width:36px;height:36px;border-radius:12px;background:#e7edff;color:#2049bb;display:grid;place-items:center;font-weight:800}
.avatar-lg{width:52px;height:52px;border-radius:15px}
.sidebar-toggle{font-size:1.25rem}
.content-wrap{padding:28px 30px 38px;max-width:1650px;margin:auto}
.hero-panel{background:
    radial-gradient(circle at 92% 10%,rgba(216,168,47,.22),transparent 30%),
    linear-gradient(120deg,#071a33,#103666);border-radius:22px;color:white;padding:30px 34px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 18px 38px rgba(6,26,51,.12)}
.hero-panel .eyebrow{color:#d9b85d}
.hero-panel h1{font-weight:800;letter-spacing:-.035em;font-size:clamp(1.7rem,3vw,2.65rem);margin:5px 0 7px}
.hero-panel p:last-child{color:#b8c6da;margin:0;font-size:.85rem}
.hero-badge{width:78px;height:78px;border:1px solid rgba(255,255,255,.16);border-radius:18px;display:grid;place-content:center;text-align:center;background:rgba(255,255,255,.06)}
.hero-badge span{font-family:Manrope;font-size:1.8rem;font-weight:800;line-height:1}
.hero-badge small{font-size:.55rem;letter-spacing:.09em;color:#dcb44a;margin-top:4px}
.metric-card{background:white;border:1px solid #ebeff5;border-radius:18px;padding:19px;display:flex;align-items:center;gap:14px;box-shadow:0 8px 22px rgba(13,42,80,.04);height:100%}
.metric-icon{width:43px;height:43px;flex:0 0 43px;border-radius:13px;background:#edf2ff;color:#244fc0;display:grid;place-items:center;font-size:.72rem;font-weight:800}
.metric-card span{font-size:.67rem;color:var(--muted);font-weight:600;display:block}
.metric-card strong{font-family:Manrope;display:block;font-size:1.35rem;letter-spacing:-.04em;margin:1px 0}
.metric-card strong.money{font-size:1rem}
.metric-card small{font-size:.6rem;color:#a4afbf}
.panel-card{background:white;border:1px solid #e9eef5;border-radius:19px;padding:22px;box-shadow:0 8px 26px rgba(14,42,78,.045)}
.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:20px}
.panel-head h4{font-size:1rem;font-weight:800;margin:2px 0 0}
.status-pill{font-size:.57rem;font-weight:800;letter-spacing:.08em;background:#eaf8f1;color:#168758;padding:7px 9px;border-radius:999px}
.progress-list{display:grid;gap:8px}
.progress-row{display:flex;justify-content:space-between;font-size:.7rem;color:#65748b;margin-top:4px}
.progress-row b{color:#2b3b52;font-size:.67rem}
.progress{height:5px;background:#eef2f7}
.progress-bar{background:#2457e6;border-radius:99px}
.progress-bar.pending{background:#d8a82f}
.account-card{display:flex;align-items:center;gap:13px;padding-bottom:18px}
.account-card strong{font-size:.78rem;display:block}
.account-card span{font-size:.65rem;color:var(--muted);display:block;margin-top:2px}
.role-box{display:flex;justify-content:space-between;background:#f7f9fc;border:1px solid #edf1f6;border-radius:12px;padding:12px;font-size:.7rem}
.role-box span{color:var(--muted)}
.role-box strong{color:#244fc0}
.premium-table{font-size:.7rem}
.premium-table thead th{font-size:.58rem;letter-spacing:.08em;color:#8390a2;border-bottom-color:#edf1f5;font-weight:800;padding:12px 10px}
.premium-table td{padding:12px 10px;border-bottom-color:#f0f3f7;color:#58687d}
.table-badge{background:#eef3ff;color:#2953bc;font-size:.58rem;font-weight:800;border-radius:999px;padding:5px 8px}
.app-footer{display:flex;justify-content:space-between;color:#98a4b5;font-size:.62rem;padding:8px 30px 22px}
.mobile-sidebar{background:#071a33;color:white;width:280px}
.mobile-sidebar .offcanvas-header{border-bottom:1px solid rgba(255,255,255,.07)}
.mobile-sidebar .sidebar-nav .nav-link{color:#b4c1d2}

@media(max-width:991.98px){
    .login-shell{display:block}
    .login-form-panel{min-height:100vh;padding:22px}
    .login-card{padding:30px}
    .main-content{margin-left:0}
    .topbar{padding:0 18px}
    .content-wrap{padding:20px 15px 30px}
    .hero-panel{padding:24px}
    .hero-badge{display:none}
    .app-footer{padding:8px 16px 20px;gap:10px;flex-wrap:wrap}
}
@media(max-width:575px){
    .metric-card{padding:14px;display:block}
    .metric-icon{width:35px;height:35px;margin-bottom:9px}
    .metric-card strong{font-size:1.15rem}
    .panel-card{padding:17px}
}