/* SIPESAT account workspace — desktop-only overhaul. Mobile layout remains native. */
@media (min-width: 992px) {
    body.account-premium-page {
        min-height: 100vh;
        padding: 28px 32px 72px !important;
        overflow-x: hidden;
        background:
            radial-gradient(circle at 7% 0%, rgba(37,99,235,.13), transparent 30%),
            radial-gradient(circle at 96% 8%, rgba(14,165,233,.1), transparent 28%),
            #eef3f9 !important;
    }

    body.account-premium-page .header-premium,
    body.account-premium-page .profil-header {
        position: relative;
        width: 100% !important;
        max-width: 1440px !important;
        min-height: 150px;
        margin: 0 auto 24px !important;
        padding: 34px 40px !important;
        border: 1px solid rgba(255,255,255,.45) !important;
        border-radius: 28px !important;
        overflow: hidden;
        color: #fff !important;
        background: linear-gradient(125deg,#0f2f68 0%,#1458b9 58%,#1688e8 100%) !important;
        box-shadow: 0 24px 58px rgba(15,47,104,.2) !important;
    }
    body.account-premium-page .header-premium::before,
    body.account-premium-page .profil-header::before {
        content: '';
        position: absolute;
        width: 420px;
        height: 420px;
        right: -140px;
        top: -250px;
        border-radius: 50%;
        background: rgba(255,255,255,.1) !important;
    }
    body.account-premium-page .header-premium h4,
    body.account-premium-page .header-premium span,
    body.account-premium-page .profil-header h4,
    body.account-premium-page .profil-header p { color: #fff !important; }
    body.account-premium-page .header-premium :where(span,small,p):not(.badge),
    body.account-premium-page .profil-email { color: rgba(255,255,255,.78) !important; }
    body.account-premium-page .btn-back {
        width: 48px !important;
        height: 48px !important;
        color: #fff !important;
        background: rgba(255,255,255,.14) !important;
        border: 1px solid rgba(255,255,255,.2) !important;
    }
    body.account-premium-page .btn-quick-logout {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        top: 32px !important;
        right: 38px !important;
        min-height: 42px;
        padding: 0 18px !important;
        color: #fff !important;
        background: rgba(255,255,255,.13) !important;
        border: 1px solid rgba(255,255,255,.2) !important;
    }
    body.account-premium-page > .container,
    body.account-premium-page > .main-content,
    body.account-premium-page .main-content > .container {
        width: 100% !important;
        max-width: 1240px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Profile hub */
    body.account-profile-page .profil-header {
        display: grid !important;
        grid-template-columns: 160px minmax(0,1fr);
        grid-template-rows: repeat(3,auto);
        align-items: center;
        text-align: left !important;
        padding-right: 150px !important;
    }
    body.account-profile-page .avatar-wrapper { grid-column: 1; grid-row: 1 / span 3; margin: 0 !important; }
    body.account-profile-page .profil-name { grid-column: 2; grid-row: 1; align-self: end; margin: 0 !important; font-size: 2rem !important; }
    body.account-profile-page .profil-email { grid-column: 2; grid-row: 2; margin: 5px 0 0 !important; opacity: .82; }
    body.account-profile-page .profil-header > .mt-3 { grid-column: 2; grid-row: 3; margin-top: 12px !important; }
    body.account-profile-page .role-badge { color: #fff !important; background: rgba(255,255,255,.15) !important; border-color: rgba(255,255,255,.18) !important; }
    body.account-profile-page > .container {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 24px;
        padding: 0 !important;
    }
    body.account-profile-page .section-title { margin: 0 0 10px !important; }
    body.account-profile-page .menu-container {
        height: calc(100% - 34px);
        border: 1px solid rgba(148,163,184,.18) !important;
        border-radius: 22px !important;
        background: rgba(255,255,255,.9) !important;
        box-shadow: 0 14px 36px rgba(15,23,42,.07) !important;
        overflow: hidden;
    }
    body.account-profile-page .menu-item { min-height: 78px; padding: 17px 20px !important; }
    body.account-profile-page .menu-icon-box { width: 46px; height: 46px; border-radius: 14px !important; }
    body.account-profile-page .btn-logout-wrapper { grid-column: 1 / -1; margin: 0 !important; }
    body.account-profile-page .btn-logout { max-width: 360px; margin: 0 auto; }

    /* Forms */
    body.account-edit-page .main-content { max-width: 1440px !important; }
    body.account-edit-page .main-content > .header-premium { max-width: 1440px !important; }
    body.account-edit-page .main-content > .container,
    body.account-password-page > .container { max-width: 1100px !important; padding: 0 !important; }
    body.account-premium-page .form-card {
        padding: 34px 38px !important;
        border: 1px solid rgba(148,163,184,.18) !important;
        border-radius: 24px !important;
        background: rgba(255,255,255,.92) !important;
        box-shadow: 0 18px 45px rgba(15,23,42,.08) !important;
    }
    body.account-premium-page .form-section-title {
        padding-bottom: 13px;
        border-bottom: 1px solid #e7edf5;
        letter-spacing: .08em;
    }
    body.account-premium-page .form-control,
    body.account-premium-page .form-select,
    body.account-premium-page .input-group-text { min-height: 50px; }
    body.account-password-page > .container form { max-width: 780px; margin: 0 auto; }
    body.account-password-page .header-premium { max-width: 1100px !important; }
    body.account-edit-page .mini-avatar,
    body.account-password-page .mini-avatar,
    body.account-edit-page .avatar-placeholder,
    body.account-password-page .avatar-placeholder { width: 52px !important; height: 52px !important; }

    /* About */
    body.account-about-page > .container {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 18px;
        padding: 4px 0 0 !important;
    }
    body.account-about-page .section-title,
    body.account-about-page .terminal-card,
    body.account-about-page > .container > .mb-4,
    body.account-about-page > .container > hr,
    body.account-about-page > .container > .text-center { grid-column: 1 / -1; }
    body.account-about-page .section-title { margin: 12px 0 0 !important; }
    body.account-about-page .terminal-card,
    body.account-about-page .feature-card {
        margin: 0 !important;
        border-radius: 22px !important;
        box-shadow: 0 14px 36px rgba(15,23,42,.07) !important;
    }
    body.account-about-page .feature-card { min-height: 138px; padding: 24px !important; }
    body.account-about-page .terminal-card { padding: 28px !important; }

    /* Support */
    body.account-support-page > .container { max-width: 1040px !important; padding: 0 !important; }
    body.account-support-page .support-card {
        max-width: 1040px !important;
        display: grid;
        grid-template-columns: 230px minmax(0,1fr);
        column-gap: 42px;
        align-items: center;
        padding: 40px !important;
        text-align: left !important;
        border: 1px solid rgba(148,163,184,.18) !important;
        border-radius: 26px !important;
        background: rgba(255,255,255,.92) !important;
        box-shadow: 0 20px 50px rgba(15,23,42,.09) !important;
    }
    body.account-support-page .support-card > .avatar-wrapper { grid-column: 1; grid-row: 1 / span 8; margin: 0 auto !important; }
    body.account-support-page .support-card > :not(.avatar-wrapper) { grid-column: 2; }
    body.account-support-page .support-card .name-title { margin-top: 12px !important; font-size: 1.65rem !important; }
    body.account-support-page .terminal-wrapper { width: 100%; }
    body.account-support-page .avatar-glow { width: 126px !important; height: 126px !important; box-shadow: 0 16px 38px rgba(15,23,42,.16) !important; }
    body.account-support-page .terminal-wrapper { justify-content: flex-start !important; margin: 4px 0 18px !important; }
    body.account-support-page .terminal-text { padding: 10px 14px !important; font-size: .75rem !important; border-radius: 10px !important; }
    body.account-support-page .btn-wa { min-height: 50px; display: flex !important; align-items: center; justify-content: center; }

    body.account-premium-page.dark-mode {
        background:
            radial-gradient(circle at 7% 0%,rgba(37,99,235,.18),transparent 32%),
            radial-gradient(circle at 96% 8%,rgba(14,165,233,.12),transparent 30%),
            #08111f !important;
    }
    body.account-premium-page.dark-mode .menu-container,
    body.account-premium-page.dark-mode .form-card,
    body.account-premium-page.dark-mode .support-card,
    body.account-premium-page.dark-mode .feature-card { background: rgba(15,23,42,.93) !important; border-color: rgba(148,163,184,.16) !important; }
    body.account-premium-page.dark-mode .menu-text,
    body.account-premium-page.dark-mode .form-label,
    body.account-premium-page.dark-mode .feature-title,
    body.account-premium-page.dark-mode .name-title { color: #f8fafc !important; }
    body.account-premium-page.dark-mode .menu-item,
    body.account-premium-page.dark-mode .form-section-title { border-color: rgba(148,163,184,.14) !important; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    body.account-premium-page { padding-left: 22px !important; padding-right: 22px !important; }
    body.account-support-page .support-card { grid-template-columns: 190px minmax(0,1fr); column-gap: 28px; }
}

/* Riwayat is loaded before nav_bawah; these late rules deliberately win over
   the global mobile-first design layer on real authenticated desktop pages. */
@media (min-width: 992px) {
    body.member-history-page {
        min-height: 100vh;
        padding: 28px 32px 72px !important;
        background:
            radial-gradient(circle at 7% 0%,rgba(37,99,235,.13),transparent 30%),
            radial-gradient(circle at 96% 8%,rgba(14,165,233,.1),transparent 28%),
            #eef3f9 !important;
    }
    body.member-history-page .header-premium {
        width: 100% !important;
        max-width: 1440px !important;
        margin: 0 auto 24px !important;
        padding: 34px 40px !important;
        border-radius: 28px !important;
        background: linear-gradient(125deg,#0f2f68 0%,#1458b9 58%,#1688e8 100%) !important;
        box-shadow: 0 24px 58px rgba(15,47,104,.2) !important;
    }
    body.member-history-page .header-premium :where(h1,h2,h3,h4,h5,h6) { color: #fff !important; }
    body.member-history-page .header-premium :where(span,small,p):not(.badge) { color: rgba(255,255,255,.78) !important; }
    body.member-history-page .history-metric strong { color: #fff !important; }
    body.member-history-page .history-metric small { color: rgba(255,255,255,.76) !important; }
    body.member-history-page .btn-quick-logout {
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
        color: #fff !important;
        background: rgba(255,255,255,.13) !important;
        border: 1px solid rgba(255,255,255,.2) !important;
    }
    body.member-history-page > .container-fluid {
        width: 100% !important;
        max-width: 1440px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
    body.member-history-page .history-toolbar-shell {
        display: grid !important;
        grid-template-columns: minmax(320px,1fr) auto !important;
        gap: 22px !important;
        padding: 18px 20px !important;
        margin-bottom: 24px !important;
        border: 1px solid rgba(148,163,184,.18) !important;
        border-radius: 22px !important;
        background: rgba(255,255,255,.9) !important;
        box-shadow: 0 14px 36px rgba(15,23,42,.07) !important;
    }
    body.member-history-page .history-desktop-layout {
        display: grid !important;
        grid-template-columns: minmax(0,1fr) !important;
        gap: 24px !important;
        align-items: start !important;
    }
    body.member-history-page .history-desktop-aside {
        display: none !important;
    }
    body.member-history-page #list-surat-wrapper {
        display: grid !important;
        grid-template-columns: minmax(0,1fr) !important;
        gap: 16px !important;
    }
    body.member-history-page #list-surat-wrapper .history-card {
        width: 100% !important;
        min-height: 226px !important;
        margin: 0 !important;
        display: grid !important;
        grid-template-columns: minmax(0,1fr) 380px !important;
        border-radius: 22px !important;
        overflow: hidden !important;
        box-shadow: 0 12px 32px rgba(15,23,42,.07) !important;
    }
    body.member-history-page #list-surat-wrapper .history-card-actions-row {
        grid-column: 2 !important;
        grid-row: 1 / span 3 !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 28px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: stretch !important;
        border-top: 0 !important;
        border-left: 1px solid #e8eef6 !important;
        background: #f8fafc !important;
    }
    body.member-history-page.dark-mode { background: #08111f !important; }
    body.member-history-page.dark-mode .history-toolbar-shell,
    body.member-history-page.dark-mode .history-desktop-aside,
    body.member-history-page.dark-mode #list-surat-wrapper .history-card { background: #0f172a !important; }
    body.member-history-page.dark-mode #list-surat-wrapper .history-card-actions-row { background: #0b1628 !important; border-color: rgba(148,163,184,.15) !important; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    body.member-history-page .history-desktop-layout { grid-template-columns: 1fr !important; }
    body.member-history-page .history-desktop-aside { position: static !important; }
}