:root{--g950:#003b30;--g900:#004c3d;--g700:#08775a;--gold:#f2cd70;--soft:#f3f8f5;--border:#d8e6df;--ink:#14231e;--muted:#68766f;--shadow:0 18px 45px rgba(0,76,61,.1)}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--soft);font-family:Inter,system-ui,sans-serif}
.ff-login-page{min-height:100vh;background:linear-gradient(135deg,rgba(0,59,48,.97),rgba(8,119,90,.82))}
.ff-login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}.ff-login-card{width:min(100%,510px);padding:38px;background:#fff;border-radius:24px;box-shadow:0 30px 80px rgba(0,25,20,.3)}
.ff-brand{display:flex;align-items:center;gap:16px}.ff-brand-icon{display:grid;width:62px;height:62px;color:#fff;background:linear-gradient(135deg,var(--g900),var(--g700));border-radius:18px;place-items:center;font-size:1.4rem}
.ff-brand-icon.small{width:46px;height:46px;border-radius:13px;font-size:1rem}.ff-brand span{color:var(--g700);font-size:.72rem;font-weight:800}.ff-brand h1{margin:3px 0 0;color:var(--g950);font-size:2rem;font-weight:850}
.ff-login-intro{margin:22px 0;color:var(--muted)}.form-control{min-height:50px;border-color:var(--border);border-radius:11px}
.ff-primary-btn{min-height:50px;color:#fff;background:linear-gradient(135deg,var(--g900),var(--g700));border:0;border-radius:11px;font-weight:800}.ff-login-note{margin-top:22px;color:var(--muted);font-size:.85rem}
.ff-app-shell{min-height:100vh;display:grid;grid-template-columns:280px 1fr}.ff-sidebar{position:sticky;top:0;height:100vh;padding:22px 18px;color:#fff;background:linear-gradient(180deg,var(--g950),#005e49)}
.ff-sidebar-brand{display:flex;gap:12px;align-items:center;padding:0 8px 22px;border-bottom:1px solid rgba(255,255,255,.13)}.ff-sidebar-brand span,.ff-sidebar-brand strong{display:block}.ff-sidebar-brand span{font-size:.7rem;color:rgba(255,255,255,.65)}
.ff-nav{display:grid;gap:6px;margin-top:22px}.ff-nav a{display:flex;gap:12px;align-items:center;padding:12px 13px;color:rgba(255,255,255,.78);border-radius:10px;text-decoration:none;font-weight:650}.ff-nav a:hover,.ff-nav a.active{color:#fff;background:rgba(255,255,255,.12)}.ff-nav-divider{height:1px;margin:10px 0;background:rgba(255,255,255,.12)}
.ff-main{min-width:0}.ff-topbar{min-height:74px;display:flex;justify-content:flex-end;align-items:center;padding:12px 30px;background:#fff;border-bottom:1px solid var(--border)}.ff-topbar span,.ff-topbar strong{display:block;text-align:right}.ff-topbar span{color:var(--g700);font-size:.68rem}
.ff-menu-button{display:none;margin-right:auto;width:42px;height:42px;border:1px solid var(--border);background:#fff;border-radius:10px}.ff-content{padding:32px}
.ff-page-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px}.ff-page-heading span{color:var(--g700);font-size:.72rem;font-weight:850}.ff-page-heading h1{margin:4px 0;color:var(--g950);font-size:clamp(2rem,4vw,3.2rem);font-weight:850}.ff-page-heading p{margin:0;color:var(--muted)}.ff-role-badge{padding:10px 15px;background:var(--gold);border-radius:999px;font-weight:850}
.ff-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:24px}.ff-stat-card{padding:22px;background:#fff;border:1px solid var(--border);border-radius:17px;box-shadow:var(--shadow)}.ff-stat-card span{display:block;color:var(--muted)}.ff-stat-card strong{display:block;margin-top:6px;color:var(--g950);font-size:1.75rem}
.ff-panel{padding:28px;background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow)}.ff-profile-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.ff-profile-item{padding:18px;background:var(--soft);border:1px solid var(--border);border-radius:13px}.ff-profile-item span{display:block;color:var(--muted);font-size:.75rem}.ff-profile-item strong{display:block;margin-top:7px}
.ff-table thead th{color:#fff;background:var(--g900)}
.ff-lapse-days {
    display: inline-block;
    padding: 6px 10px;
    color: #9a2525;
    background: #fff0f0;
    border: 1px solid #f2cccc;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}
.ff-commission-highlight {
    background:
        linear-gradient(
            135deg,
            #006b53,
            #078966
        );
    color: #ffffff;
}

.ff-commission-highlight span,
.ff-commission-highlight strong,
.ff-commission-highlight .ff-stat-icon {
    color: #ffffff;
}

.ff-commission-amount {
    display: inline-block;
    padding: 7px 11px;
    color: #006b53;
    background: #e8f8f2;
    border: 1px solid #bce7d7;
    border-radius: 999px;
    font-weight: 800;
    white-space: nowrap;
}
.ff-allowance-highlight {
    background: linear-gradient(135deg, #006b53, #078966);
    color: #ffffff;
}

.ff-allowance-highlight span,
.ff-allowance-highlight strong,
.ff-allowance-highlight .ff-stat-icon {
    color: #ffffff;
}

.ff-allowance-amount {
    display: inline-block;
    padding: 7px 11px;
    color: #006b53;
    background: #e8f8f2;
    border: 1px solid #bce7d7;
    border-radius: 999px;
    font-weight: 800;
    white-space: nowrap;
}
@media(max-width:1000px){.ff-card-grid{grid-template-columns:repeat(2,1fr)}.ff-profile-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.ff-app-shell{grid-template-columns:1fr}.ff-sidebar{position:fixed;z-index:1200;left:-290px;width:280px;transition:.2s}.ff-sidebar.open{left:0}.ff-menu-button{display:grid;place-items:center}.ff-content{padding:20px}.ff-profile-grid{grid-template-columns:1fr}}
@media(max-width:560px){.ff-login-card{padding:26px 22px}.ff-card-grid{grid-template-columns:1fr}.ff-page-heading{align-items:flex-start;flex-direction:column}}