:root{
 --ib-blue-950:#061d4f;--ib-blue-900:#082b70;--ib-blue-800:#0b45a6;--ib-blue-700:#1263d6;
 --ib-blue-600:#2180f2;--ib-blue-500:#3d99ff;--ib-blue-300:#91c8ff;--ib-blue-100:#e8f4ff;--ib-blue-50:#f4f9ff;
 --ib-ink:#122443;--ib-muted:#6d7c96;--ib-line:#e2ebf6;--ib-panel:#ffffff;--ib-bg:#f5f9fe;
 --ib-success:#138a63;--ib-warning:#a96b00;--ib-danger:#c83e4d;--ib-radius:18px;--ib-shadow:0 18px 50px rgba(19,68,132,.09);
 --sidebar-w:252px;--topbar-h:76px
}
*{box-sizing:border-box}body{color:var(--ib-ink);background:var(--ib-bg);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,"Noto Sans",sans-serif}
a{color:var(--ib-blue-700)}
/* brand */
.brand-lockup{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;padding:4px 6px 24px}.brand-cube{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(145deg,#fff,#dcedff);color:var(--ib-blue-900);font-weight:950;letter-spacing:-.08em;box-shadow:0 9px 26px rgba(0,0,0,.15)}.brand-copy{display:flex;flex-direction:column;line-height:1}.brand-copy strong{font-size:1.04rem;letter-spacing:.18em;font-weight:900}.brand-copy small{margin-top:6px;font-size:.62rem;letter-spacing:.34em;color:#9dc8ff}
/* login */
.auth-bg{min-height:100vh;background:radial-gradient(circle at 16% 18%,rgba(255,255,255,.95),rgba(255,255,255,0) 28%),radial-gradient(circle at 82% 75%,rgba(76,156,255,.24),rgba(76,156,255,0) 30%),linear-gradient(135deg,#eef8ff 0%,#dceeff 46%,#c8e2ff 100%);position:relative;overflow:hidden}.auth-bg:before,.auth-bg:after{content:"";position:fixed;border-radius:50%;filter:blur(1px);pointer-events:none}.auth-bg:before{width:460px;height:460px;left:-140px;top:-160px;background:linear-gradient(145deg,rgba(255,255,255,.7),rgba(48,141,255,.08))}.auth-bg:after{width:540px;height:540px;right:-210px;bottom:-250px;background:linear-gradient(145deg,rgba(25,112,224,.18),rgba(255,255,255,.12))}.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:36px 20px;position:relative;z-index:2}.auth-panel{width:min(100%,452px)}.auth-logo{display:flex;justify-content:center;margin-bottom:24px}.auth-brand-cube{width:56px;height:56px;border-radius:15px;background:linear-gradient(150deg,var(--ib-blue-900),var(--ib-blue-600));color:#fff;display:grid;place-items:center;font-weight:950;font-size:1.25rem;letter-spacing:-.08em;box-shadow:0 16px 36px rgba(14,82,177,.25)}.auth-wordmark{text-align:center;margin-bottom:22px}.auth-wordmark strong{display:block;font-size:1.05rem;letter-spacing:.28em;font-weight:950;color:var(--ib-blue-950)}.auth-wordmark small{display:block;margin-top:7px;letter-spacing:.28em;color:var(--ib-blue-700);font-size:.66rem}.auth-card{border:1px solid rgba(255,255,255,.88)!important;border-radius:22px!important;background:rgba(255,255,255,.88)!important;box-shadow:0 28px 70px rgba(20,75,145,.16)!important;backdrop-filter:blur(18px)}.auth-card .card-body{padding:36px!important}.auth-title{text-align:center;font-size:1.25rem;font-weight:850;margin-bottom:6px}.auth-subtitle{text-align:center;color:var(--ib-muted);font-size:.88rem;margin-bottom:28px}.auth-card .form-label{font-size:.78rem;color:#536782;font-weight:750}.auth-card .form-control{border:1px solid #d9e5f3;background:#f9fcff;border-radius:11px;padding:.78rem .9rem;box-shadow:none}.auth-card .form-control:focus{border-color:var(--ib-blue-500);box-shadow:0 0 0 .22rem rgba(61,153,255,.12);background:#fff}.auth-primary{border:0;border-radius:11px;padding:.82rem 1rem;font-weight:800;background:linear-gradient(90deg,var(--ib-blue-800),var(--ib-blue-600));box-shadow:0 12px 28px rgba(20,105,214,.22);color:#fff}.auth-primary:hover{color:#fff;background:linear-gradient(90deg,var(--ib-blue-900),var(--ib-blue-700))}.auth-lang{position:fixed;right:24px;top:20px;z-index:3}.auth-lang a{background:rgba(255,255,255,.72);border:1px solid rgba(12,77,167,.12);color:var(--ib-blue-800);border-radius:999px;padding:.5rem .8rem;text-decoration:none;font-size:.78rem;font-weight:800;backdrop-filter:blur(12px)}.auth-foot{text-align:center;color:#7890ad;font-size:.72rem;margin-top:20px}
/* shell */
.ibilik-app{margin:0;background:var(--ib-bg)}.app-frame{min-height:100vh}.app-sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);padding:22px 18px;background:linear-gradient(180deg,var(--ib-blue-950) 0%,#082d68 52%,#0b418d 100%);z-index:1040;display:flex;flex-direction:column;box-shadow:14px 0 38px rgba(7,37,84,.13)}.sidebar-caption{font-size:.62rem;font-weight:850;letter-spacing:.2em;color:#77aeed;padding:0 12px 9px}.sidebar-nav{display:flex;flex-direction:column;gap:5px}.sidebar-link{display:flex;align-items:center;gap:11px;color:#c6ddf9;text-decoration:none;padding:10px 11px;border-radius:12px;font-size:.86rem;font-weight:680;transition:.18s ease}.sidebar-link:hover{color:#fff;background:rgba(255,255,255,.08)}.sidebar-link.active{color:#fff;background:linear-gradient(90deg,rgba(52,145,255,.34),rgba(52,145,255,.13));box-shadow:inset 3px 0 0 #66b2ff}.nav-mark{display:grid;place-items:center;width:29px;height:29px;border-radius:9px;background:rgba(255,255,255,.08);font-size:.57rem;letter-spacing:.05em;font-weight:900;color:#a9d4ff}.sidebar-link.active .nav-mark{background:#fff;color:var(--ib-blue-900)}.sidebar-foot{margin-top:auto;border-top:1px solid rgba(255,255,255,.1);padding:16px 10px 4px;display:flex;gap:8px;align-items:center;color:#9fc5ef;font-size:.72rem}.secure-dot{width:7px;height:7px;border-radius:50%;background:#56e3ae;box-shadow:0 0 0 4px rgba(86,227,174,.1)}.app-main{margin-left:var(--sidebar-w);min-height:100vh}.app-topbar{height:var(--topbar-h);position:sticky;top:0;z-index:1020;background:rgba(255,255,255,.93);backdrop-filter:blur(18px);border-bottom:1px solid var(--ib-line);display:flex;align-items:center;justify-content:space-between;padding:0 30px}.topbar-left{display:flex;align-items:center;gap:14px}.page-eyebrow{font-size:.66rem;color:#8190a8;letter-spacing:.08em;text-transform:uppercase}.page-title-top{font-weight:840;font-size:.99rem;color:var(--ib-ink)}.topbar-actions{display:flex;align-items:center;gap:15px}.topbar-link{text-decoration:none;font-size:.77rem;font-weight:750;color:#657791}.topbar-link:hover{color:var(--ib-blue-700)}.logout-link{padding-left:4px}.user-chip{display:flex;align-items:center;gap:9px;padding:6px 10px 6px 7px;border:1px solid var(--ib-line);border-radius:999px;background:#fff}.user-avatar{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,var(--ib-blue-800),var(--ib-blue-500));font-weight:850;font-size:.78rem}.user-copy{display:flex;flex-direction:column;line-height:1.1}.user-copy strong{font-size:.75rem}.user-copy small{font-size:.62rem;color:#8a98ad;margin-top:4px}.sidebar-toggle{display:none;border:0;background:transparent;font-size:1.2rem;color:var(--ib-blue-900)}.app-content{padding:28px 30px 48px;max-width:1800px;margin:0 auto}.sidebar-backdrop{display:none}
/* components */
.page-hero{padding:4px 0 21px}.page-hero h1{font-size:1.62rem;font-weight:880;letter-spacing:-.025em;margin:0 0 6px}.page-hero p{margin:0;color:var(--ib-muted);font-size:.88rem}.card{border:1px solid var(--ib-line);border-radius:var(--ib-radius);box-shadow:0 7px 28px rgba(26,76,137,.045);background:#fff}.card-header{background:#fff;border-bottom:1px solid var(--ib-line);border-radius:var(--ib-radius) var(--ib-radius) 0 0!important}.kpi-card{position:relative;overflow:hidden}.kpi-card:after{content:"";position:absolute;width:90px;height:90px;border-radius:50%;right:-30px;top:-38px;background:rgba(35,133,246,.07)}.kpi-label{color:var(--ib-muted);font-size:.72rem;font-weight:700}.kpi-value{font-size:1.45rem;font-weight:880;letter-spacing:-.03em;margin-top:7px}.kpi-meta{font-size:.69rem;color:#8495ad;margin-top:8px}.btn{border-radius:10px;font-weight:720;font-size:.82rem}.btn-dark,.btn-primary{background:linear-gradient(90deg,var(--ib-blue-800),var(--ib-blue-600));border-color:transparent}.btn-dark:hover,.btn-primary:hover{background:linear-gradient(90deg,var(--ib-blue-900),var(--ib-blue-700));border-color:transparent}.btn-outline-dark{border-color:#cbd9e9;color:var(--ib-blue-900}.btn-outline-dark:hover{background:var(--ib-blue-50);color:var(--ib-blue-900);border-color:#a9c7e9}.form-control,.form-select{border-radius:10px;border-color:#dce6f2}.form-control:focus,.form-select:focus{border-color:var(--ib-blue-500);box-shadow:0 0 0 .2rem rgba(61,153,255,.11)}.table{font-size:.82rem}.table>thead th{font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;color:#73839a;font-weight:800;border-bottom-color:var(--ib-line);background:#fbfdff}.table>:not(caption)>*>*{padding:.78rem .82rem;border-bottom-color:#ecf1f7}.table-hover>tbody>tr:hover>*{background:var(--ib-blue-50)}.badge{font-weight:750;border-radius:999px;padding:.42em .68em}.alert{border-radius:13px;border-width:1px}.permission-item{display:flex;gap:.35rem;border:1px solid var(--ib-line);border-radius:12px;padding:.8rem 1rem;height:100%;background:#fff}.permission-item:hover{background:var(--ib-blue-50)}
.module-card{text-decoration:none;color:inherit;display:block;height:100%;transition:.18s ease}.module-card:hover{transform:translateY(-2px);box-shadow:var(--ib-shadow);border-color:#c8dff8}.module-icon{width:42px;height:42px;border-radius:12px;background:linear-gradient(145deg,var(--ib-blue-100),#f7fbff);display:grid;place-items:center;color:var(--ib-blue-800);font-weight:900;font-size:.72rem;margin-bottom:18px}.module-title{font-weight:820;margin-bottom:5px}.module-desc{font-size:.77rem;color:var(--ib-muted);line-height:1.55}
@media(max-width:991.98px){.app-sidebar{transform:translateX(-104%);transition:.22s ease}.app-main{margin-left:0}.sidebar-toggle{display:block}.sidebar-open .app-sidebar{transform:translateX(0)}.sidebar-open .sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(4,24,58,.4);z-index:1030}.app-topbar{padding:0 17px}.app-content{padding:22px 17px 40px}.user-copy{display:none}.logout-link{display:none}}
@media(max-width:575.98px){.auth-card .card-body{padding:28px 22px!important}.auth-lang{right:15px;top:14px}.page-title-top{font-size:.88rem}.topbar-actions{gap:8px}.topbar-link{font-size:.7rem}.app-content{padding-top:18px}}


/* ============================================================
   Phase 8BC v1.1 Dashboard + Admin visual hierarchy
   ============================================================ */

.dashboard-welcome{
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:32px;
    padding:30px 34px;
    margin-bottom:30px;
    border:1px solid #dce9f8;
    border-radius:24px;
    background:
        radial-gradient(circle at 92% 20%,rgba(71,154,255,.18),transparent 29%),
        linear-gradient(135deg,#ffffff 0%,#f5faff 54%,#edf6ff 100%);
    box-shadow:0 18px 50px rgba(22,78,145,.06)
}
.dashboard-welcome:before{
    content:"";
    position:absolute;
    width:170px;height:170px;
    right:-45px;bottom:-88px;
    border-radius:38px;
    transform:rotate(22deg);
    background:linear-gradient(145deg,rgba(26,116,235,.08),rgba(126,192,255,.18))
}
.dashboard-kicker{
    position:relative;
    z-index:1;
    margin-bottom:9px;
    font-size:.66rem;
    font-weight:900;
    letter-spacing:.19em;
    color:var(--ib-blue-700)
}
.dashboard-welcome h1{
    position:relative;
    z-index:1;
    margin:0 0 7px;
    font-size:2rem;
    line-height:1.1;
    font-weight:900;
    letter-spacing:-.035em;
    color:var(--ib-blue-950)
}
.dashboard-welcome p{
    position:relative;
    z-index:1;
    max-width:760px;
    margin:0;
    color:var(--ib-muted);
    font-size:.9rem;
    line-height:1.75
}
.dashboard-status{
    position:relative;
    z-index:1;
    min-width:220px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 15px;
    border:1px solid rgba(63,143,236,.15);
    border-radius:16px;
    background:rgba(255,255,255,.78);
    backdrop-filter:blur(10px)
}
.dashboard-status-dot{
    width:11px;height:11px;border-radius:50%;
    background:#31bf8c;
    box-shadow:0 0 0 6px rgba(49,191,140,.09)
}
.dashboard-status div{display:flex;flex-direction:column}
.dashboard-status strong{font-size:.76rem;color:#233956}
.dashboard-status small{margin-top:4px;font-size:.63rem;color:#7d8fa7}

.dashboard-section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
    margin:0 0 18px
}
.dashboard-section-head span,
.section-heading span,
.admin-guide-card>span{
    display:block;
    margin-bottom:5px;
    font-size:.61rem;
    font-weight:900;
    letter-spacing:.16em;
    color:var(--ib-blue-700)
}
.dashboard-section-head h2,
.section-heading h2{
    margin:0;
    font-size:1.16rem;
    font-weight:880;
    letter-spacing:-.02em
}
.dashboard-section-head p{
    max-width:460px;
    margin:0;
    text-align:right;
    color:#8190a5;
    font-size:.74rem
}

.module-card-v2{
    --module-accent:#2e89ef;
    position:relative;
    min-height:278px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    padding:25px;
    color:inherit;
    text-decoration:none;
    border:1px solid var(--ib-line);
    border-radius:22px;
    background:#fff;
    box-shadow:0 9px 32px rgba(23,72,133,.045);
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease
}
.module-card-v2:hover{
    color:inherit;
    transform:translateY(-4px);
    border-color:#c5ddf8;
    box-shadow:0 22px 50px rgba(24,83,153,.11)
}
.module-card-accent{
    position:absolute;
    top:0;left:0;right:0;
    height:4px;
    background:linear-gradient(90deg,var(--module-accent),rgba(132,201,255,.55))
}
.module-card-v2:after{
    content:"";
    position:absolute;
    width:125px;height:125px;
    right:-54px;top:-48px;
    border-radius:50%;
    background:color-mix(in srgb,var(--module-accent) 8%, transparent)
}
.module-card-head{
    position:relative;z-index:1;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:26px
}
.module-icon-v2{
    width:50px;height:50px;
    display:grid;
    place-items:center;
    border-radius:15px;
    color:var(--module-accent);
    background:color-mix(in srgb,var(--module-accent) 9%, #fff);
    border:1px solid color-mix(in srgb,var(--module-accent) 15%, #eaf2fb)
}
.module-icon-v2 span{
    font-size:.67rem;
    font-weight:950;
    letter-spacing:.08em
}
.module-arrow{
    width:32px;height:32px;
    display:grid;place-items:center;
    border:1px solid #e1eaf4;
    border-radius:50%;
    color:#8292a8;
    font-size:.92rem;
    transition:.2s ease
}
.module-card-v2:hover .module-arrow{
    border-color:color-mix(in srgb,var(--module-accent) 28%, #fff);
    color:var(--module-accent);
    transform:translate(2px,-2px)
}
.module-eyebrow{
    position:relative;z-index:1;
    margin-bottom:7px;
    color:#8494aa;
    font-size:.61rem;
    font-weight:850;
    text-transform:uppercase;
    letter-spacing:.13em
}
.module-title-v2{
    position:relative;z-index:1;
    margin:0 0 10px;
    font-size:1.18rem;
    line-height:1.3;
    font-weight:900;
    letter-spacing:-.025em;
    color:var(--ib-ink)
}
.module-desc-v2{
    position:relative;z-index:1;
    margin:0;
    color:#687b94;
    font-size:.78rem;
    line-height:1.72
}
.module-card-foot{
    position:relative;z-index:1;
    margin-top:auto;
    padding-top:21px;
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--module-accent);
    font-size:.68rem;
    font-weight:850
}
.module-foot-line{
    flex:1;
    height:1px;
    background:linear-gradient(90deg,color-mix(in srgb,var(--module-accent) 34%, #fff),transparent)
}

.module-management{--module-accent:#176fda}
.module-investor{--module-accent:#2687e8}
.module-capital{--module-accent:#3b78cf}
.module-formula{--module-accent:#2299ca}
.module-pool{--module-accent:#147db8}
.module-accounting{--module-accent:#275fc3}
.module-admin{--module-accent:#536f9b}

/* Admin */
.admin-layout-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    gap:22px;
    align-items:start
}
.section-heading{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:22px
}
.section-heading.compact{margin-bottom:14px}
.section-heading h3{
    margin:0;
    font-size:1rem;
    font-weight:860
}
.section-badge{
    white-space:nowrap;
    padding:7px 10px;
    border-radius:999px;
    background:var(--ib-blue-50);
    color:var(--ib-blue-700);
    font-size:.67rem;
    font-weight:800
}
.admin-divider{
    height:1px;
    margin:29px 0 25px;
    background:var(--ib-line)
}
.role-template-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px
}
.role-template-card{
    position:relative;
    display:flex;
    gap:11px;
    align-items:flex-start;
    min-height:104px;
    padding:15px;
    border:1px solid var(--ib-line);
    border-radius:14px;
    background:#fbfdff;
    cursor:pointer;
    transition:.18s ease
}
.role-template-card:hover{
    border-color:#bbd8f7;
    background:#f5faff
}
.role-template-card .form-check-input{
    flex:none;
    margin-top:2px
}
.role-template-copy{
    display:flex;
    flex-direction:column;
    line-height:1.35
}
.role-template-copy strong{
    font-size:.78rem;
    color:#243a57
}
.role-template-copy small{
    margin-top:6px;
    color:#8190a5;
    font-size:.66rem;
    line-height:1.55
}
.permission-details{
    margin-top:18px;
    border:1px solid var(--ib-line);
    border-radius:15px;
    background:#fff
}
.permission-details>summary{
    list-style:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:16px 18px
}
.permission-details>summary::-webkit-details-marker{display:none}
.permission-details>summary span:first-child{
    display:flex;
    flex-direction:column
}
.permission-details>summary strong{font-size:.78rem}
.permission-details>summary small{
    margin-top:4px;
    color:#8796aa;
    font-size:.66rem;
    line-height:1.45
}
.details-toggle{
    width:28px;height:28px;
    display:grid;place-items:center;
    border-radius:50%;
    background:var(--ib-blue-50);
    color:var(--ib-blue-700);
    font-weight:900
}
.permission-details[open] .details-toggle{transform:rotate(45deg)}
.permission-details-body{
    padding:0 18px 18px
}
.admin-guide-card{
    position:sticky;
    top:calc(var(--topbar-h) + 24px);
    padding:24px;
    border:1px solid #d8e7f7;
    border-radius:20px;
    background:
        radial-gradient(circle at 100% 0%,rgba(67,151,250,.14),transparent 38%),
        linear-gradient(145deg,#ffffff,#f4f9ff);
    box-shadow:0 14px 38px rgba(19,69,130,.055)
}
.guide-icon{
    width:48px;height:48px;
    display:grid;place-items:center;
    margin-bottom:21px;
    border-radius:15px;
    color:#fff;
    background:linear-gradient(145deg,var(--ib-blue-800),var(--ib-blue-500));
    font-size:.69rem;
    font-weight:900;
    letter-spacing:.08em
}
.admin-guide-card h3{
    margin:0 0 10px;
    font-size:1.08rem;
    font-weight:880
}
.admin-guide-card p{
    color:#72849b;
    font-size:.73rem;
    line-height:1.68
}
.admin-guide-card ul{
    padding-left:18px;
    margin:18px 0 0;
    color:#62758e;
    font-size:.7rem;
    line-height:1.9
}
.code-pill{
    display:inline-flex;
    padding:.33rem .5rem;
    border-radius:8px;
    background:#f0f6fd;
    color:#416489;
    font-size:.7rem;
    font-weight:750
}
.status-pill{
    display:inline-flex;
    padding:.34rem .58rem;
    border-radius:999px;
    font-size:.63rem;
    font-weight:850
}
.status-active{background:#eaf9f3;color:#16845f}
.status-suspended{background:#fff6df;color:#986700}
.status-disabled{background:#fcecef;color:#b13b4b}
.empty-state{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:36px 15px;
    color:#74869d
}
.empty-state strong{font-size:.8rem;color:#405874}
.empty-state span{margin-top:5px;font-size:.68rem}

@media(max-width:1199.98px){
    .admin-layout-grid{grid-template-columns:1fr}
    .admin-guide-card{position:static}
}
@media(max-width:991.98px){
    .dashboard-welcome{align-items:flex-start;flex-direction:column}
    .dashboard-status{width:100%}
    .dashboard-section-head{align-items:flex-start;flex-direction:column;gap:7px}
    .dashboard-section-head p{text-align:left}
    .role-template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:575.98px){
    .dashboard-welcome{padding:24px 21px}
    .dashboard-welcome h1{font-size:1.62rem}
    .module-card-v2{min-height:250px;padding:21px}
    .role-template-grid{grid-template-columns:1fr}
}