/* Auth and rolling dialogs aligned with the existing logout SweetAlert. */
:root {
    --gm-bg: #031526;
    --gm-top: #0d2942;
    --gm-line: #58758b;
    --gm-border: #9fb2c1;
    --gm-text: #eaf5fc;
    --gm-muted: #b9cbd8;
}

html body.gundam-skin :is(#login, #join, #join2).loginContainer {
    overflow: auto !important;
    background: rgb(2 13 24 / 72%) !important;
    backdrop-filter: blur(3px) brightness(.74) !important;
}

html body.gundam-skin :is(#login, #join, #join2).loginContainer .wrap1 {
    align-items: center !important;
    min-height: 100% !important;
    height: auto !important;
    padding: 24px !important;
}

html body.gundam-skin :is(#login, #join, #join2).loginContainer .wrap2 {
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid var(--gm-border) !important;
    border-radius: 0 !important;
    background: linear-gradient(135deg, rgb(255 255 255 / 5%) 0 1px, transparent 1px 24px), linear-gradient(180deg, var(--gm-top), var(--gm-bg)) !important;
    color: var(--gm-text) !important;
    box-shadow: 0 24px 64px rgb(0 8 18 / 62%), inset 0 0 0 4px #061827, inset 0 0 0 5px #6f8798 !important;
}

html body.gundam-skin #login.loginContainer .wrap2 { width: min(440px, calc(100vw - 32px)) !important; }

html body.gundam-skin :is(#join, #join2).loginContainer .wrap2.joincol {
    width: min(850px, calc(100vw - 32px)) !important;
    max-height: calc(100dvh - 48px) !important;
    overflow-y: auto !important;
    scrollbar-color: var(--gm-line) #061827 !important;
    background-color: #03101d !important;
    background-image: url('/skin/gundam_main/images/signup/gundam-signup-frame-desktop-v1.png') !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
}

html body.gundam-skin :is(#login, #join, #join2).loginContainer .wrap2 .box { padding: 22px 30px 28px !important; }
html body.gundam-skin :is(#join, #join2).loginContainer .wrap2 .box {
    box-sizing: border-box !important;
    padding-right: 50px !important;
    padding-left: 50px !important;
}

html body.gundam-skin :is(#login, #join, #join2).loginContainer .title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 64px !important;
    margin: 0 28px 24px !important;
    padding: 0 0 17px !important;
    border-bottom: 1px solid #4f7189 !important;
    color: #f2f7fa !important;
    font: 800 19px/1.2 "SEBANG_Gothic_Bold", "Malgun Gothic", sans-serif !important;
    text-shadow: 0 1px 2px #00101c !important;
}

html body.gundam-skin #login.loginContainer .title { flex-direction: column !important; gap: 7px !important; }

html body.gundam-skin :is(#login, #join, #join2).loginContainer .modal-site-logo {
    display: block !important;
    width: auto !important;
    max-width: 190px !important;
    height: auto !important;
    max-height: 48px !important;
    object-fit: contain !important;
}

html body.gundam-skin #login.loginContainer .title span { color: var(--gm-muted) !important; font-size: 10px !important; letter-spacing: .18em !important; }
html body.gundam-skin :is(#join, #join2).loginContainer .title .modal-site-logo { margin-right: 16px !important; max-width: 170px !important; max-height: 40px !important; }
html body.gundam-skin :is(#login, #join, #join2).loginContainer :is(.col, .colWrap) { gap: 12px !important; margin: 0 !important; padding: 0 !important; }
html body.gundam-skin :is(#login, #join, #join2).loginContainer .col > div { padding: 0 !important; }

html body.gundam-skin :is(#join, #join2).loginContainer .col label {
    display: block !important;
    margin: 0 0 5px !important;
    color: var(--gm-muted) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

html body.gundam-skin :is(#login, #join, #join2).loginContainer .box :is(input, select) {
    width: 100% !important;
    height: 42px !important;
    padding: 0 12px !important;
    border: 1px solid var(--gm-line) !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: #071b2b !important;
    color: var(--gm-text) !important;
    font-size: 13px !important;
    box-shadow: inset 0 1px 5px rgb(0 0 0 / 38%) !important;
}

html body.gundam-skin :is(#login, #join, #join2).loginContainer .box :is(input, select):focus { border-color: #7da0b8 !important; box-shadow: 0 0 0 2px rgb(35 185 234 / 12%) !important; }
html body.gundam-skin :is(#login, #join, #join2).loginContainer input::placeholder { color: #91a6b5 !important; opacity: 1 !important; }
html body.gundam-skin :is(#login, #join, #join2).loginContainer .btnCont { display: flex !important; gap: 7px !important; margin-top: 4px !important; }

html body.gundam-skin :is(#login, #join, #join2).loginContainer .btn_login,
html body.gundam-skin :is(#join, #join2).loginContainer .btnBig {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    min-width: 0 !important;
    border: 1px solid #58758c !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, #164d73, #082d49) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 1px #001522 !important;
    box-shadow: inset 0 1px rgb(255 255 255 / 25%), 0 3px 8px rgb(0 22 38 / 26%) !important;
}

html body.gundam-skin #login.loginContainer .btn_login { flex: 1 1 0 !important; padding: 0 5px !important; white-space: nowrap !important; }
html body.gundam-skin #login.loginContainer .btn_login:is([data-id="sign"], .join2) { background: linear-gradient(180deg, #17384f, #0a2235) !important; color: #d9e7f0 !important; }
html body.gundam-skin :is(#join, #join2).loginContainer .btnCont2 { padding: 22px 0 0 !important; }
html body.gundam-skin :is(#join, #join2).loginContainer .btnBig { min-width: 200px !important; margin: 0 auto !important; padding: 0 28px !important; }

html body.gundam-skin :is(#login, #join, #join2).loginContainer .close_login {
    border: 1px solid #7da0b8 !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, #1a628f, #0a3553) !important;
    color: #fff !important;
}

html body.gundam-skin :is(#join, #join2).loginContainer .col p { color: var(--gm-muted) !important; }

/* Rolling content keeps the same existing logout-modal frame. */
html body.gundam-skin .gundam-rolling-modal__backdrop { background: rgb(2 13 24 / 72%) !important; backdrop-filter: blur(3px) brightness(.74) !important; }
html body.gundam-skin .gundam-rolling-modal__dialog { border-color: var(--gm-border) !important; background: linear-gradient(135deg, rgb(255 255 255 / 5%) 0 1px, transparent 1px 24px), linear-gradient(180deg, var(--gm-top), var(--gm-bg)) !important; color: var(--gm-text) !important; }
html body.gundam-skin .gundam-rolling-modal__header { border-bottom-color: var(--gm-line) !important; background: transparent !important; }
html body.gundam-skin .gundam-rolling-modal__header h2 { color: #f2f7fa !important; }
html body.gundam-skin .gundam-rolling-modal__header span,
html body.gundam-skin .gundam-rolling-modal__body { color: var(--gm-muted) !important; }
html body.gundam-skin .gundam-rolling-progress,
html body.gundam-skin .gundam-rolling-summary,
html body.gundam-skin .gundam-rolling-table { border: 1px solid var(--gm-line) !important; background: rgb(3 19 32 / 70%) !important; color: var(--gm-text) !important; }
html body.gundam-skin .gundam-rolling-progress { margin-bottom: 14px !important; padding: 13px !important; }
html body.gundam-skin .gundam-rolling-progress__head,
html body.gundam-skin .gundam-rolling-summary > div { display: flex !important; justify-content: space-between !important; color: var(--gm-muted) !important; }
html body.gundam-skin .gundam-rolling-progress__head { margin-bottom: 8px !important; font-size: 12px !important; }
html body.gundam-skin .gundam-rolling-progress__track { height: 8px !important; overflow: hidden !important; background: #061522 !important; }
html body.gundam-skin .gundam-rolling-progress__bar { height: 100% !important; background: linear-gradient(90deg, #164d73, #37bfe7) !important; }
html body.gundam-skin .gundam-rolling-status { margin-top: 7px !important; color: #e9b45e !important; font-size: 11px !important; }
html body.gundam-skin .gundam-rolling-status.is-complete { color: #65cdbd !important; }
html body.gundam-skin .gundam-rolling-summary { display: grid !important; gap: 1px !important; margin-bottom: 16px !important; }
html body.gundam-skin .gundam-rolling-summary > div,
html body.gundam-skin .gundam-rolling-table :is(th, td) { padding: 7px 9px !important; border-bottom: 1px solid rgb(88 117 139 / 45%) !important; }
html body.gundam-skin .gundam-rolling-table-title { margin-bottom: 7px !important; color: #f2f7fa !important; font-size: 12px !important; font-weight: 900 !important; }
html body.gundam-skin .gundam-rolling-table { width: 100% !important; border-collapse: collapse !important; font-size: 11px !important; }
html body.gundam-skin .gundam-rolling-table :is(th, td):not(:first-child) { text-align: right !important; }

@media (max-width: 680px) {
    html body.gundam-skin :is(#login, #join, #join2).loginContainer .wrap1 { padding: 12px !important; }
    html body.gundam-skin :is(#login, #join, #join2).loginContainer .wrap2 .box { padding: 18px 16px 22px !important; }
    html body.gundam-skin :is(#join, #join2).loginContainer .wrap2 .box {
        padding-right: 36px !important;
        padding-left: 36px !important;
    }
    html body.gundam-skin :is(#join, #join2).loginContainer .wrap2.joincol {
        width: calc(100vw - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
        background-image: url('/skin/gundam_main/images/signup/gundam-signup-frame-mobile-v1.png') !important;
    }
    html body.gundam-skin :is(#join, #join2).loginContainer .colWrap { display: grid !important; grid-template-columns: 1fr !important; }
    html body.gundam-skin :is(#login, #join, #join2).loginContainer .title { flex-direction: column !important; gap: 7px !important; margin: 0 30px 18px !important; font-size: 16px !important; text-align: center !important; }
    html body.gundam-skin :is(#join, #join2).loginContainer .title .modal-site-logo { margin-right: 0 !important; max-width: 150px !important; }
}