/* =========================================================
   JOM SILAT - BRAND LANG CLEAN V108
   Single clean layer for:
   - JOMSILAT title glow dark mode
   - subtitle under JOMSILAT
   - user box + BM/BI text toggle
   ========================================================= */

/* ---------- BRAND HEADER ---------- */

.jm86-desktop-brand-wrap{
    display:flex !important;
    align-items:center !important;
    gap:12px !important;
    margin:0 0 16px 0 !important;
    padding:0 !important;
    width:100% !important;
    box-sizing:border-box !important;
}

.jm86-desktop-brand-logo{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    max-width:42px !important;
    object-fit:contain !important;
    display:block !important;
    border-radius:999px !important;
}

.jm86-desktop-brand-text{
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:flex-start !important;
    gap:4px !important;
    min-width:0 !important;
    width:auto !important;
}

.jm86-desktop-brand-main,
.jm86-desktop-brand-text strong,
.jm86-desktop-brand-text .brand-main{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    font-size:30px !important;
    line-height:.95 !important;
    font-weight:950 !important;
    letter-spacing:.09em !important;
    white-space:nowrap !important;
    opacity:1 !important;
}

.jm86-desktop-brand-sub,
.jm86-desktop-brand-text small,
.jm86-desktop-brand-text .brand-sub{
    display:block !important;
    margin:0 !important;
    padding:0 !important;
    font-size:9.8px !important;
    line-height:1.1 !important;
    font-weight:850 !important;
    letter-spacing:.065em !important;
    white-space:nowrap !important;
    opacity:1 !important;
}

/* Dark mode: white + soft glow */
html[data-theme="dark"] .jm86-desktop-brand-main,
html.dark .jm86-desktop-brand-main,
body.dark .jm86-desktop-brand-main,
html[data-theme="dark"] .jm86-desktop-brand-text strong,
html.dark .jm86-desktop-brand-text strong,
body.dark .jm86-desktop-brand-text strong{
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    text-shadow:
        0 0 5px rgba(255,255,255,.24),
        0 0 14px rgba(255,255,255,.14),
        0 0 24px rgba(147,197,253,.10) !important;
}

html[data-theme="dark"] .jm86-desktop-brand-sub,
html.dark .jm86-desktop-brand-sub,
body.dark .jm86-desktop-brand-sub,
html[data-theme="dark"] .jm86-desktop-brand-text small,
html.dark .jm86-desktop-brand-text small,
body.dark .jm86-desktop-brand-text small{
    color:#dbeafe !important;
    -webkit-text-fill-color:#dbeafe !important;
    text-shadow:0 0 8px rgba(255,255,255,.12) !important;
}

/* Light mode: dark text, no glow */
html[data-theme="light"] .jm86-desktop-brand-main,
html:not([data-theme]) .jm86-desktop-brand-main,
body:not(.dark) .jm86-desktop-brand-main,
html[data-theme="light"] .jm86-desktop-brand-text strong,
html:not([data-theme]) .jm86-desktop-brand-text strong,
body:not(.dark) .jm86-desktop-brand-text strong{
    color:#0f172a !important;
    -webkit-text-fill-color:#0f172a !important;
    text-shadow:none !important;
}

html[data-theme="light"] .jm86-desktop-brand-sub,
html:not([data-theme]) .jm86-desktop-brand-sub,
body:not(.dark) .jm86-desktop-brand-sub,
html[data-theme="light"] .jm86-desktop-brand-text small,
html:not([data-theme]) .jm86-desktop-brand-text small,
body:not(.dark) .jm86-desktop-brand-text small{
    color:#334155 !important;
    -webkit-text-fill-color:#334155 !important;
    text-shadow:none !important;
}

/* Hide duplicate subtitle outside brand */
.jms108-duplicate-subtitle{
    display:none !important;
}

/* ---------- ACCOUNT CARD ---------- */

.direct-account-v28{
    padding:14px !important;
    border-radius:22px !important;
    margin:0 0 16px 0 !important;
    box-sizing:border-box !important;
}

.jms108-profile-row{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:8px !important;
    align-items:center !important;
    width:100% !important;
    margin:0 0 12px 0 !important;
}

/* User box */
.jms108-profile-row .direct-account-user-v28{
    height:46px !important;
    min-height:46px !important;
    max-height:46px !important;
    padding:0 10px !important;
    border-radius:16px !important;
    background:#ffffff !important;
    border:1px solid rgba(148,163,184,.28) !important;
    box-shadow:0 6px 14px rgba(15,23,42,.07) !important;
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
    margin:0 !important;
}

/* User icon */
.jms108-profile-row .direct-account-icon-v28{
    width:22px !important;
    height:22px !important;
    min-width:22px !important;
    max-width:22px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:999px !important;
    background:rgba(15,23,42,.06) !important;
    color:#111827 !important;
    -webkit-text-fill-color:#111827 !important;
}

.jms108-profile-row .direct-account-icon-v28 svg{
    width:13px !important;
    height:13px !important;
    stroke:#111827 !important;
}

/* Username */
.jms108-profile-row .direct-account-name-v28{
    flex:1 1 auto !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    font-size:14px !important;
    font-weight:900 !important;
    line-height:1 !important;
    color:#111827 !important;
    -webkit-text-fill-color:#111827 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

/* Language toggle - text only */
.jms108-lang{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;
    height:46px !important;
    min-height:46px !important;
    max-height:46px !important;
    padding:4px !important;
    border-radius:16px !important;
    background:rgba(255,255,255,.075) !important;
    border:1px solid rgba(148,163,184,.22) !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
}

.jms108-lang a{
    width:38px !important;
    min-width:38px !important;
    max-width:38px !important;
    height:36px !important;
    min-height:36px !important;
    max-height:36px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:12px !important;
    text-decoration:none !important;
    font-size:11px !important;
    font-weight:900 !important;
    line-height:1 !important;
    color:#bfdbfe !important;
    -webkit-text-fill-color:#bfdbfe !important;
    background:rgba(96,165,250,.10) !important;
    border:1px solid rgba(96,165,250,.22) !important;
    box-sizing:border-box !important;
}

.jms108-lang a.active,
.jms108-lang a[aria-current="page"]{
    background:#163f93 !important;
    color:#ffffff !important;
    -webkit-text-fill-color:#ffffff !important;
    border-color:#6ea3ff !important;
}

/* Action row */
.direct-account-actions-v28{
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:10px !important;
    width:100% !important;
    align-items:center !important;
    margin-top:0 !important;
}

.direct-account-actions-v28 > a,
.direct-account-actions-v28 > button,
.direct-account-actions-v28 .jm18-theme-slot{
    height:50px !important;
    min-height:50px !important;
    max-height:50px !important;
    border-radius:16px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    margin:0 !important;
    box-sizing:border-box !important;
}

/* Remove all old language / profile rows */
.jm93-lang-switch,
.jm95-lang-switch,
.jm97-user-lang,
.jm98-account-top,
.jm99-account-row,
.jm99-lang-switch,
.jm101-profile-row,
.jm101-lang-switch,
.jm102-profile-row,
.jm102-lang-switch,
.jms-v106-profile-row,
.jms-v106-lang,
.jm107-top-row,
.jm107-lang{
    display:none !important;
}

/* Keep final v108 visible */
.jms108-profile-row,
.jms108-profile-row .direct-account-user-v28,
.jms108-lang{
    display:grid !important;
}
.jms108-lang{
    display:inline-flex !important;
}

/* Footer */
.jm85-build{
    font-size:0 !important;
}
.jm85-build::before{
    content:"UI Build V108" !important;
    font-size:11px !important;
}

/* Light mode action icons */
html[data-theme="light"] .direct-account-actions-v28 svg,
html:not([data-theme]) .direct-account-actions-v28 svg,
body:not(.dark) .direct-account-actions-v28 svg{
    color:#0f172a !important;
    stroke:#0f172a !important;
}

/* Mobile */
@media (max-width:900px){
    .jm86-desktop-brand-logo{
        width:40px !important;
        height:40px !important;
        min-width:40px !important;
    }

    .jm86-desktop-brand-main,
    .jm86-desktop-brand-text strong{
        font-size:27px !important;
        letter-spacing:.08em !important;
    }

    .jm86-desktop-brand-sub,
    .jm86-desktop-brand-text small{
        font-size:9px !important;
        letter-spacing:.055em !important;
    }

    .jms108-profile-row{
        gap:7px !important;
    }

    .jms108-lang a{
        width:36px !important;
        min-width:36px !important;
        max-width:36px !important;
    }
}

@media (max-width:390px){
    .jm86-desktop-brand-main,
    .jm86-desktop-brand-text strong{
        font-size:25px !important;
        letter-spacing:.07em !important;
    }

    .jm86-desktop-brand-sub,
    .jm86-desktop-brand-text small{
        font-size:8.5px !important;
    }

    .jms108-lang a{
        width:34px !important;
        min-width:34px !important;
        max-width:34px !important;
        font-size:10px !important;
    }
}