*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    background:#0b1f3c;
    overflow-x:hidden;
    color:#fff;
                                                                              
                                                                           
                                                         
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
}

                            
          
                            

header{
    width:100%;
    height:90px;
    background:#071d3a;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 70px;
    position:sticky;
    top:0;
    left:0;
    z-index:1000;
}

.logo{
    display:flex;
    align-items:center;
}

.logo img{
    width:60px;
    margin-right:15px;
}

.logo-text h2{
    font-size:16px;
    line-height:22px;
    font-weight:600;
}

.logo-text span{
    font-size:14px;
    color:#d9d9d9;
}

nav ul{
    display:flex;
    list-style:none;
}

nav ul li{
    margin-left:45px;
}

nav ul li a{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:#fff;
    text-decoration:none;
    font-size:17px;
    transition:.3s;
    position:relative;
}

nav ul li a:hover,
nav ul li a.active{
    color:#49a6ff;
}

nav ul li a.active::after{
    content:'';
    position:absolute;
    left:0;
    bottom:-10px;
    width:100%;
    height:3px;
    background:#49a6ff;
}

.pwa-install-nav{
    position:relative;
    display:flex;
    align-items:center;
}

                                                                      
                                                                         
.pwa-install-nav:not(:has(> .pwa-install-button:not([hidden]), > .pwa-install-hint:not([hidden]))){
    display:none;
}

.pwa-install-button{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:9px 16px;
    border:1px solid #49a6ff;
    border-radius:12px;
    background:#49a6ff;
    color:#071d3a;
    font:inherit;
    font-size:15px;
    font-weight:600;
    line-height:1.2;
    white-space:nowrap;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(73,166,255,.18);
    transition:background-color .2s ease, border-color .2s ease,
               color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.pwa-install-button:hover{
    border-color:#8bc7ff;
    background:#8bc7ff;
    box-shadow:0 10px 24px rgba(73,166,255,.28);
    transform:translateY(-1px);
}

.pwa-install-button:active{
    transform:translateY(0);
}

.pwa-install-button:focus-visible{
    outline:3px solid rgba(255,255,255,.9);
    outline-offset:3px;
}

.pwa-install-button[hidden],
.pwa-install-hint[hidden]{
    display:none !important;
}

.pwa-install-hint{
    position:absolute;
    top:calc(100% + 12px);
    right:0;
    width:min(310px, calc(100vw - 32px));
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:12px 14px;
    border:1px solid rgba(73,166,255,.45);
    border-radius:12px;
    background:#fff;
    color:#0b1f3c;
    font-size:13px;
    line-height:1.45;
    text-align:left;
    box-shadow:0 14px 34px rgba(0,0,0,.24);
}

.pwa-install-hint i{
    margin-top:2px;
    color:#1477d4;
    font-size:17px;
    flex:0 0 auto;
}

.hero{
    width:100%;
                                                                                   
                                                                                
    flex:1 0 auto;
                                                                            
                                                                              
                                                                    
    background:#0b1f3c;
    position:relative;
    display:flex;
    align-items:center;
    padding:28px 0;
}

.overlay{
    position:absolute;
    width:100%;
    height:100%;
    background:rgba(4,18,42,.45);
}

.hero-container{
    width:90%;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:relative;
    z-index:2;
}

                            
            
                            

.left-content{
    width:55%;
}

.left-content h4{
    color:#ff9f43;
    letter-spacing:2px;
    margin-bottom:15px;
}

.left-content h1{
    font-size:56px;
    line-height:62px;
    font-weight:500;
    margin-bottom:16px;
}

.left-content h3{
    color:#c9d9ff;
    font-size:26px;
    margin-bottom:20px;
    font-weight:500;
}

.left-content p{
    font-size:18px;
    line-height:30px;
    max-width:700px;
    margin-bottom:34px;
}

                            
        
                            

.features{
    display:flex;
    gap:30px;
}

.feature-box{
    width:250px;
}

.icon{
    width:62px;
    height:62px;
    border:1px solid rgba(255,255,255,.3);
    border-radius:16px;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:28px;
    margin-bottom:14px;
    backdrop-filter:blur(10px);
}

.feature-box h5{
    font-size:19px;
    margin-bottom:8px;
}

.feature-box p{
    font-size:16px;
    line-height:28px;
    margin:0;
    color:#e8e8e8;
}

                            
     
                            

.login-card{
    width:460px;
    max-width:100%;
    box-sizing:border-box;
    background:#fff;
    color:#222;
    border-radius:20px;
    padding:30px 34px;
    box-shadow:0 25px 50px rgba(0,0,0,.3);
}

.login-card > h1,
.login-card > h2{
    text-align:center;
    font-size:32px;
    color:#0d2d63;
}

.login-card>p{
    text-align:center;
    color:#666;
    margin-top:5px;
    margin-bottom:14px;
}

.login-card hr{
    margin-bottom:14px;
    border:none;
    height:1px;
    background:#ddd;
}

.login-card label{
    display:block;
    font-weight:600;
    margin-bottom:5px;
    margin-top:12px;
}

.input-box{
    position:relative;
}

                                                                                    
.input-box > i:first-child{
    position:absolute;
    left:18px;
    top:15px;
    color:#888;
}

.input-box input,
.input-box select{
    width:100%;
    height:48px;
    border:1px solid #d9d9d9;
    border-radius:12px;
    padding-left:55px;
    padding-right:50px;
    font-size:16px;
    outline:none;
    transition:.3s;
    margin-bottom:6px;
}

.input-box input:focus,
.input-box select:focus{
    border-color:#0d3d86;
}

#togglePassword{
    position:absolute;
    right:18px;
    top:14px;
    line-height:1;
    cursor:pointer;
    color:#666;
}

.login-card form > button[type="submit"]{
    width:100%;
    height:50px;
    border:none;
    border-radius:12px;
    background:#0d2d63;
    color:#fff;
    font-size:18px;
    margin-top:16px;
    cursor:pointer;
    transition:.3s;
}

.login-card form > button[type="submit"]:hover{
    background:#174892;
}

.login-card form > button[type="submit"] i{
    margin-right:10px;
}

                                                                         
                                                                                
button.password-toggle#togglePassword{
    top:0;
    right:4px;
    width:44px;
    min-width:44px;
    height:44px;
    min-height:44px;
    margin:0;
    padding:0;
    border:0;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    color:#666;
    line-height:1;
    box-shadow:none;
    transform:none;
    appearance:none;
}

button.password-toggle#togglePassword:hover{
    background:#eef3fa;
    color:#0d2d63;
}

button.password-toggle#togglePassword:focus-visible{
    outline:3px solid rgba(73,166,255,.45);
    outline-offset:1px;
}

button.password-toggle#togglePassword i{
    margin-right:0;
}

.forgot{
    display:block;
    text-align:center;
    margin-top:12px;
    color:#0d4ba0;
    text-decoration:none;
}

                                                                                      
button.forgot{
    width:100%;
    padding:0;
    border:0;
    background:none;
    font:inherit;
    cursor:pointer;
}

.second-step-help{
    margin-top:8px;
    color:#555;
    font-size:14px;
    line-height:1.45;
}

.register-divider{
    display:flex;
    align-items:center;
    text-align:center;
    margin:14px 0 12px;
    color:#888;
    font-size:14px;
}

.register-divider::before,
.register-divider::after{
    content:"";
    flex:1;
    border-bottom:1px solid #e0e0e0;
}

.register-divider span{
    padding:0 14px;
}

.register-options{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.btn-register-prearrival{
    grid-column:1 / -1;
}

.btn-register{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:6px;
    min-height:74px;
    padding:12px 10px;
    border:2px solid #0d2d63;
    border-radius:14px;
    font-size:14px;
    font-weight:700;
    line-height:1.25;
    text-decoration:none;
    cursor:pointer;
    transition:.25s;
}

.btn-register i{
    font-size:19px;
}

.btn-register-filled{
    background:#0d2d63;
    border-color:#0d2d63;
    color:#fff;
}

.btn-register-filled:hover{
    background:#174892;
    border-color:#174892;
}

.btn-register-outline{
    background:#fff;
    color:#0d2d63;
}

.btn-register-outline:hover{
    background:#0d2d63;
    color:#fff;
}

.btn-register.is-disabled{
    border-color:#cbd5e1;
    background:#f1f5f9;
    color:#64748b;
    cursor:not-allowed;
    box-shadow:none;
    opacity:.9;
}

.registration-availability-note{
    margin:12px 0 0;
    color:#64748b;
    font-size:12px;
    line-height:1.45;
    text-align:center;
}

.register-request{
    display:block;
}

.btn-access-request{
    width:100%;
    min-height:52px;
    flex-direction:row;
    gap:10px;
    padding:11px 16px;
    font:inherit;
    font-size:15px;
}

.btn-access-request:focus-visible{
    outline:3px solid rgba(41,98,255,.3);
    outline-offset:3px;
}

.btn-access-request:disabled{
    border-color:#cbd5e1;
    background:#f1f5f9;
    color:#64748b;
    cursor:not-allowed;
}

.registration-approval-note{
    margin:10px auto 0;
    color:#64748b;
    font-size:12px;
    line-height:1.45;
    text-align:center;
}

body.access-modal-open{
    overflow:hidden;
}

.access-modal[hidden]{
    display:none !important;
}

.access-modal{
    position:fixed;
    inset:0;
    z-index:1400;
    display:grid;
    place-items:center;
    padding:
        max(18px, env(safe-area-inset-top))
        max(18px, env(safe-area-inset-right))
        max(18px, env(safe-area-inset-bottom))
        max(18px, env(safe-area-inset-left));
    overflow:auto;
    background:rgba(2,14,35,.72);
    color:#172033;
    overscroll-behavior:contain;
}

.access-modal-panel{
    width:min(940px, 100%);
    max-height:calc(100vh - 36px);
    max-height:calc(100dvh - 36px);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid rgba(13,45,99,.12);
    border-radius:22px;
    background:#fff;
    box-shadow:0 30px 80px rgba(0,0,0,.42);
}

.access-modal-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
    padding:26px 28px 20px;
    border-bottom:1px solid #e5eaf2;
}

.access-modal-header h2{
    margin:0;
    color:#0d2d63;
    font-size:27px;
    line-height:1.2;
}

.access-modal-header p{
    margin:7px 0 0;
    color:#64748b;
    font-size:14px;
    line-height:1.5;
}

.access-modal-close{
    width:44px;
    min-width:44px;
    height:44px;
    display:inline-grid;
    place-items:center;
    margin:-7px -7px 0 0;
    padding:0;
    border:0;
    border-radius:50%;
    background:transparent;
    color:#52627a;
    font:inherit;
    font-size:22px;
    cursor:pointer;
}

.access-modal-close:hover{
    background:#eef3fa;
    color:#0d2d63;
}

.access-modal-close:focus-visible,
.access-modal-cancel:focus-visible,
.access-modal-continue:focus-visible{
    outline:3px solid rgba(41,98,255,.32);
    outline-offset:3px;
}

.access-role-form{
    min-height:0;
    display:flex;
    flex-direction:column;
}

.access-role-grid{
    min-height:0;
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:16px;
    padding:24px 28px 18px;
    overflow:auto;
}

.access-role-card{
    position:relative;
    min-height:248px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
    padding:30px 20px 22px;
    border:2px solid #d8e0eb;
    border-radius:16px;
    background:#fff;
    color:#172033;
    text-align:center;
    cursor:pointer;
    transition:border-color .18s ease, background-color .18s ease,
               box-shadow .18s ease, transform .18s ease;
}

.access-role-card:hover{
    border-color:#75adff;
    background:#f8fbff;
    transform:translateY(-2px);
}

.access-role-card:focus-within{
    outline:3px solid rgba(41,98,255,.25);
    outline-offset:2px;
}

.access-role-card.is-selected,
.access-role-card:has(input:checked){
    border-color:#1f73eb;
    background:#f3f8ff;
    box-shadow:0 10px 24px rgba(31,115,235,.13);
}

.access-role-card input[type="radio"]{
    position:absolute;
    top:16px;
    right:16px;
    width:21px;
    height:21px;
    margin:0;
    accent-color:#1f73eb;
    cursor:inherit;
}

.access-role-icon{
    width:64px;
    height:64px;
    display:grid;
    place-items:center;
    margin-top:5px;
    border-radius:16px;
    background:#edf4ff;
    color:#0d3d86;
    font-size:28px;
}

.access-role-card strong{
    color:#0d2d63;
    font-size:17px;
    line-height:1.35;
}

.access-role-description{
    color:#56657a;
    font-size:13px;
    line-height:1.6;
}

.access-role-card.is-disabled{
    border-color:#e2e8f0;
    background:#f8fafc;
    color:#94a3b8;
    cursor:not-allowed;
    transform:none;
}

.access-role-card.is-disabled .access-role-icon{
    background:#edf1f5;
    color:#94a3b8;
}

.access-role-card.is-disabled strong,
.access-role-card.is-disabled .access-role-description{
    color:#8491a3;
}

.access-role-status{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:auto;
    padding:5px 9px;
    border-radius:999px;
    background:#e9eef5;
    color:#64748b;
    font-size:11px;
    font-weight:700;
}

.access-role-guidance{
    min-height:22px;
    margin:0;
    padding:0 28px 16px;
    position:relative;
    z-index:1;
    background:#fff;
    color:#64748b;
    font-size:13px;
    line-height:1.5;
}

.access-modal-footer{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    padding:
        18px
        28px
        max(18px, env(safe-area-inset-bottom));
    border-top:1px solid #e5eaf2;
    background:#fbfcfe;
}

.access-modal-cancel,
.access-modal-continue{
    min-width:140px;
    min-height:46px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:10px 20px;
    border-radius:11px;
    font:inherit;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
}

.access-modal-cancel{
    border:1px solid #b8c4d4;
    background:#fff;
    color:#26364d;
}

.access-modal-cancel:hover{
    border-color:#7b8ba1;
    background:#f2f5f9;
}

.access-modal-continue{
    border:1px solid #0d3d86;
    background:#0d3d86;
    color:#fff;
}

.access-modal-continue:hover:not(:disabled){
    border-color:#174f9c;
    background:#174f9c;
}

.access-modal-continue:disabled{
    border-color:#cbd5e1;
    background:#dbe3ed;
    color:#7c8ba0;
    cursor:not-allowed;
}

@media(max-width:420px){
    .register-options{
        grid-template-columns:1fr;
    }

    .btn-register-prearrival{
        grid-column:auto;
    }
}

@media(max-width:700px){
    .access-modal{
        place-items:end center;
        padding:
            max(10px, env(safe-area-inset-top))
            max(10px, env(safe-area-inset-right))
            max(10px, env(safe-area-inset-bottom))
            max(10px, env(safe-area-inset-left));
    }

    .access-modal-panel{
        max-height:calc(100vh - 20px);
        max-height:calc(100dvh - 20px);
        border-radius:20px;
    }

    .access-modal-header{
        padding:20px 20px 16px;
    }

    .access-modal-header h2{
        font-size:22px;
    }

    .access-role-grid{
        grid-template-columns:1fr;
        grid-auto-rows:max-content;
        gap:12px;
        padding:18px 20px 14px;
    }

    .access-role-card{
        min-height:150px;
        display:grid;
        grid-template-columns:50px minmax(0,1fr);
        grid-template-rows:auto auto;
        align-items:center;
        gap:4px 14px;
        padding:17px 48px 17px 16px;
        text-align:left;
    }

    .access-role-icon{
        width:50px;
        height:50px;
        grid-row:1 / 3;
        margin:0;
        border-radius:13px;
        font-size:22px;
    }

    .access-role-card strong{
        font-size:15px;
    }

    .access-role-description{
        font-size:12px;
        line-height:1.45;
    }

    .access-role-status{
        grid-column:1 / -1;
        justify-self:start;
        margin-top:7px;
    }

    .access-role-guidance{
        padding:0 20px 13px;
        font-size:12px;
    }

    .access-modal-footer{
        padding:
            14px
            20px
            max(14px, env(safe-area-inset-bottom));
    }

    .access-modal-cancel,
    .access-modal-continue{
        min-width:0;
        flex:1;
    }
}

@media(max-height:500px) and (min-width:701px){
    .access-modal{
        padding:8px;
    }

    .access-modal-panel{
        max-height:calc(100vh - 16px);
        max-height:calc(100dvh - 16px);
        border-radius:18px;
    }

    .access-modal-header{
        padding:13px 20px 11px;
    }

    .access-modal-header h2{
        font-size:21px;
    }

    .access-modal-header p{
        margin-top:3px;
        font-size:12px;
    }

    .access-modal-close{
        margin:-4px -4px 0 0;
    }

    .access-role-grid{
        gap:12px;
        padding:12px 20px 8px;
    }

    .access-role-card{
        min-height:174px;
        gap:6px;
        padding:12px 10px 10px;
    }

    .access-role-card input[type="radio"]{
        top:10px;
        right:10px;
        width:18px;
        height:18px;
    }

    .access-role-icon{
        width:48px;
        height:48px;
        margin-top:0;
        border-radius:13px;
        font-size:22px;
    }

    .access-role-card strong{
        font-size:14px;
    }

    .access-role-description{
        font-size:11px;
        line-height:1.35;
    }

    .access-role-guidance{
        padding:4px 20px 7px;
        font-size:11px;
    }

    .access-modal-footer{
        padding:9px 20px max(9px, env(safe-area-inset-bottom));
    }

    .access-modal-cancel,
    .access-modal-continue{
        min-height:40px;
    }
}

.notice{
    margin-top:16px;
    border:1px solid #bfd7ff;
    background:#f4f8ff;
    border-radius:12px;
    padding:12px 14px;
    display:flex;
    align-items:center;
    color:#1d3557;
    font-size:13px;
    line-height:1.4;
}

.notice i{
    font-size:22px;
    margin-right:14px;
    color:#2962ff;
}

                                                                         
                                              
@media(max-height:840px) and (hover:hover) and (pointer:fine){
    .hero{ padding:18px 0; }
    .login-card{ padding:18px 30px; }
    .login-card > h1,
    .login-card > h2{ font-size:28px; }
    .login-card>p{ margin-bottom:10px; }
    .login-card hr{ margin-bottom:10px; }
    .login-card label{ margin-top:8px; }
    .input-box input,
    .input-box select{ height:44px; margin-bottom:5px; }
    .input-box > i:first-child{ top:13px; }
    #togglePassword{ top:12px; }
    .login-card form > button[type="submit"]{ height:46px; margin-top:12px; }
    .forgot{ margin-top:9px; }
    .register-divider{ margin:9px 0; }
    .btn-register{ min-height:60px; padding:10px; gap:5px; }
    .btn-register i{ font-size:18px; }
    .notice{ margin-top:10px; padding:10px 12px; }
}

@media(max-height:730px) and (hover:hover) and (pointer:fine){
    .hero{ padding:12px 0; }
    .login-card{ padding:16px 26px; }
    .login-card > h1,
    .login-card > h2{ font-size:25px; }
    .input-box input,
    .input-box select{ height:42px; }
    .login-card label{ margin-top:6px; font-size:14px; }
    .login-card form > button[type="submit"]{ height:44px; margin-top:10px; }
    .register-divider{ margin:7px 0; }
    .btn-register{ min-height:54px; font-size:13px; }
    .notice{ margin-top:8px; }

                                                                         
                         
    .left-content h1{ font-size:44px; line-height:50px; margin-bottom:12px; }
    .left-content h3{ font-size:22px; margin-bottom:14px; }
    .left-content p{ font-size:16px; line-height:26px; margin-bottom:20px; }
    .icon{ width:52px; height:52px; font-size:24px; margin-bottom:10px; }
    .feature-box h5{ font-size:17px; }
    .feature-box p{ font-size:14px; line-height:22px; }
}

footer{
    width:100%;
    background:#071d3a;
    color:#fff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 60px;
    flex-shrink:0;
}

.footer-left{
    display:flex;
    align-items:center;
}

.footer-left img{
    width:50px;
    margin-right:18px;
}

.footer-right{
    color:#d5d5d5;
}

@media(max-width:1200px){

header{
    flex-direction:column;
    height:auto;
    padding:14px 20px 12px;
    align-items:flex-start;
}

nav{
    width:100%;
    margin-top:10px;
}

nav ul{
    width:100%;
    justify-content:space-between;
}

nav ul li{
    margin-left:0;
}

.pwa-install-button{
    padding-left:13px;
    padding-right:13px;
}

.hero-container{
    flex-direction:column;
    padding:40px 0;
}

.left-content{
    width:100%;
    text-align:center;
}

.left-content h1{
    font-size:58px;
    line-height:65px;
}

.left-content h3{
    font-size:28px;
}

.left-content p{
    margin:auto;
    margin-bottom:40px;
}

.features{
    justify-content:center;
    flex-wrap:wrap;
    margin-bottom:0;
}

.login-card{
    width:100%;
    max-width:520px;
}

.hero-container > .login-card{
    order:-1;
    margin-bottom:48px;
}

}

@media(max-width:820px){

header{
    flex-direction:column;
    height:auto;
    padding:14px 20px 12px;
    align-items:flex-start;
}

nav{
    width:100%;
    margin-top:10px;
}

nav ul{
    width:100%;
    justify-content:space-between;
}

nav ul li{
    margin-left:0;
}

.pwa-install-button{
    padding-left:13px;
    padding-right:13px;
}

.logo img{
    width:50px;
    margin-right:12px;
}

.logo-text h2{
    font-size:14px;
    line-height:19px;
}

.logo-text span{
    font-size:12px;
}

.hero{
    padding:18px 0 24px;
}

.hero-container{
    padding:18px 0;
}

.hero-container > .login-card{
    margin-bottom:36px;
}

.left-content h1{
    font-size:clamp(32px,8vw,42px);
    line-height:1.15;
}

.left-content h3{
    font-size:22px;
}

.left-content p{
    font-size:17px;
}

.features{
    gap:24px;
}

footer{
    flex-direction:column;
    text-align:center;
    gap:15px;
    padding:18px 22px;
}

}

                            
      
                            

.alert {
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    font-weight: 500;
}

.alert i {
    margin-right: 10px;
    font-size: 18px;
}

.alert-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

                            
             
                            

                                                                                     
.register-page{
    min-height:0;
    padding:24px 0;
}

.register-container{
    width:100%;
    display:flex;
    justify-content:center;
    padding:0 20px;
    position:relative;
    z-index:2;
}

.register-card{
    width:100%;
    max-width:880px;
    padding:32px 38px;
}

.register-card h1{
    font-size:32px;
}

.register-card>p{
    margin-top:6px;
    margin-bottom:16px;
    font-size:15px;
}

.register-card hr{
    margin-bottom:18px;
}

.register-card .alert{
    padding:11px 16px;
    margin-bottom:14px;
    font-size:14px;
}

.register-card .alert .alert-copy{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
    line-height:1.45;
}

.register-card .alert .alert-copy strong{
    font-weight:700;
}

                                                                              
.form-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    column-gap:18px;
}

.form-field.col-2{
    grid-column:span 2;
}

.form-field.col-3{
    grid-column:span 3;
}

.register-card .form-field label{
    margin-top:0;
    margin-bottom:6px;
    font-size:14px;
}

.register-card .input-box input,
.register-card .input-box select{
    height:48px;
    font-size:15px;
    padding-left:48px;
    margin-bottom:12px;
}

.register-card .input-box > i:first-child{
    left:16px;
    top:15px;
}

.register-card .form-field.has-error .input-box input{
    border-color:#c62828;
    box-shadow:0 0 0 3px rgba(198,40,40,.1);
}

.password-requirements,
.form-field-error{
    margin:-5px 0 9px;
    font-size:12px;
    line-height:1.45;
}

.password-requirements{
    color:#64748b;
}

.form-field-error{
    display:flex;
    align-items:flex-start;
    gap:6px;
    color:#9f1d25;
    font-weight:600;
}

.form-field-error i{
    flex:0 0 auto;
    margin-top:2px;
}

.register-card #togglePassword{
    top:14px;
}

.register-card form > button[type="submit"]{
    height:52px;
    font-size:18px;
    margin-top:14px;
}

.register-card .forgot{
    margin-top:14px;
    font-size:15px;
}

.register-note{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:16px;
    padding:11px 14px;
    border:1px solid #bfd7ff;
    background:#f4f8ff;
    border-radius:10px;
    color:#1d3557;
    font-size:13px;
    text-align:center;
}

.register-note i{
    color:#2962ff;
    font-size:15px;
}

.registration-closed-state{
    padding:24px 16px 8px;
    text-align:center;
}

.registration-closed-icon{
    width:68px;
    height:68px;
    margin:0 auto 16px;
    display:grid;
    place-items:center;
    border-radius:18px;
    background:#edf4ff;
    color:#0d3d86;
    font-size:28px;
}

.registration-closed-state h2{
    margin:0;
    color:#0d2d63;
    font-size:24px;
}

.registration-closed-state p{
    max-width:540px;
    margin:10px auto 20px;
    color:#64748b;
    font-size:14px;
    line-height:1.65;
}

.registration-closed-state .forgot{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
}

                                                                              
@media(max-height:920px) and (hover:hover) and (pointer:fine){

.register-page{
    padding:16px 0;
}

.register-card{
    padding:22px 32px;
}

.register-card h1{
    font-size:26px;
}

.register-card>p{
    margin-top:4px;
    margin-bottom:10px;
    font-size:14px;
}

.register-card hr{
    margin-bottom:12px;
}

.register-card .form-field label{
    margin-bottom:4px;
    font-size:13px;
}

.register-card .input-box input,
.register-card .input-box select{
    height:44px;
    font-size:14px;
    margin-bottom:10px;
}

.register-card .input-box > i:first-child{
    top:13px;
}

.register-card #togglePassword{
    top:13px;
}

.register-card form > button[type="submit"]{
    height:48px;
    font-size:17px;
    margin-top:10px;
}

.register-card .forgot{
    margin-top:10px;
    font-size:14px;
}

.register-note{
    margin-top:10px;
    padding:9px 12px;
    font-size:12.5px;
}

}

                                    
@media(max-height:830px) and (hover:hover) and (pointer:fine){

.register-page{
    padding:10px 0;
}

.register-card{
    padding:14px 26px;
}

.register-card h1{
    font-size:22px;
}

.register-card>p{
    margin-bottom:6px;
    font-size:13px;
}

.register-card hr{
    margin-bottom:8px;
}

.register-card .form-field label{
    margin-bottom:2px;
    font-size:12.5px;
}

.register-card .input-box input,
.register-card .input-box select{
    height:40px;
    margin-bottom:6px;
}

.register-card .input-box > i:first-child{
    top:11px;
}

.register-card #togglePassword{
    top:11px;
}

.register-card form > button[type="submit"]{
    height:44px;
    font-size:16px;
    margin-top:6px;
}

.register-card .forgot{
    margin-top:7px;
    font-size:13px;
}

.register-note{
    margin-top:7px;
    padding:7px 12px;
    font-size:12px;
}

}

                           
@media(max-height:740px) and (hover:hover) and (pointer:fine){

.register-page{
    padding:8px 0;
}

.register-card{
    padding:12px 24px;
}

.register-card h1{
    font-size:20px;
}

.register-card>p{
    margin-bottom:5px;
    font-size:12px;
}

.register-card hr{
    margin-bottom:6px;
}

.register-card .input-box input,
.register-card .input-box select{
    height:37px;
    margin-bottom:5px;
}

.register-card .input-box > i:first-child{
    top:10px;
}

.register-card #togglePassword{
    top:10px;
}

.register-card form > button[type="submit"]{
    height:42px;
    margin-top:5px;
}

.register-note{
    margin-top:6px;
    padding:6px 12px;
    font-size:11.5px;
}

}

                                                         
@media(max-width:960px){

.form-field.col-2,
.form-field.col-3{
    grid-column:span 3;
}

.register-card .input-box input,
.register-card .input-box select{
    min-height:48px;
    font-size:16px;
}

.register-card .input-box > i:first-child{
    top:15px;
}

.register-card #togglePassword{
    top:14px;
}

.register-card form > button[type="submit"]{
    min-height:48px;
}

}

@media(max-width:640px){

.register-page{
    padding:16px 0 22px;
}

.form-field.col-2,
.form-field.col-3{
    grid-column:span 6;
}

.register-card{
    padding:26px 22px;
}

.footer-left{
    justify-content:center;
}

}

@media(max-width:420px){

header{
    padding-left:16px;
    padding-right:16px;
}

nav ul{
    gap:10px;
    flex-wrap:wrap;
}

nav ul li a{
    font-size:15px;
}

.pwa-install-nav{
    flex:1 0 100%;
    width:100%;
}

.pwa-install-button{
    width:100%;
}

.pwa-install-hint{
    position:static;
    width:100%;
}

.footer-left{
    flex-direction:column;
    gap:10px;
}

.footer-left img{
    margin-right:0;
}

}

/* ============================================================
   Landing page theme (23 Oct 2026, rev. 2): a night-sea backdrop with the
   patrol ship scene (img/landing-vessel.jpg, 27 Oct: owner's photo of 9701 tinted night blue with the map drawn in the sky), a live radar sweep over the
   Philippines, a slim top bar, and a layout that fits one screen on a
   computer. Look only. Every rule is scoped to the sign-in page (the only
   page with #vmmsHomeTitle), so Register and Forgot password keep their look.
   ============================================================ */
body:has(#vmmsHomeTitle){
    position:relative;
    background:
        radial-gradient(1100px 680px at 62% 18%, rgba(38,104,196,.30), transparent 62%),
        radial-gradient(700px 500px at 8% 92%, rgba(22,70,150,.26), transparent 70%),
        linear-gradient(180deg, #0a2347 0%, #08203f 46%, #05142b 100%);
    background-attachment:fixed;
}

/* slim top bar */
body:has(#vmmsHomeTitle) header{
    height:60px;
    padding:0 40px;
    background:linear-gradient(180deg, rgba(5,18,40,.92) 0%, rgba(5,18,40,.55) 100%);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    border-bottom:1px solid rgba(120,175,255,.08);
}
body:has(#vmmsHomeTitle) .logo img{
    width:40px;
    margin-right:11px;
    filter:drop-shadow(0 0 8px rgba(73,166,255,.35));
}
body:has(#vmmsHomeTitle) .logo-text h2{ font-size:15px; line-height:20px; font-weight:700; letter-spacing:.2px; color:#fff; }
body:has(#vmmsHomeTitle) .logo-text span{ display:block; margin-top:1px; font-size:10.5px; font-weight:600; line-height:14px; color:#8fc6ff; letter-spacing:1.4px; }
body:has(#vmmsHomeTitle) nav ul{ align-items:center; }
body:has(#vmmsHomeTitle) nav ul li{ margin-left:30px; }
body:has(#vmmsHomeTitle) nav ul li a{ min-height:36px; font-size:14px; font-weight:500; letter-spacing:.2px; color:#dbe7ff; }
body:has(#vmmsHomeTitle) nav ul li a:hover{ color:#fff; text-shadow:0 0 12px rgba(120,190,255,.55); }
body:has(#vmmsHomeTitle) nav ul li a.active{ color:#5bb0ff; font-weight:600; }
body:has(#vmmsHomeTitle) nav ul li a.active::after{
    bottom:-4px;
    height:2px;
    border-radius:2px;
    background:linear-gradient(90deg, #49a6ff, #8fd0ff);
    box-shadow:0 0 10px rgba(73,166,255,.7);
}
/* Install VMMS: same button and behaviour (js/pwa.js), sized for the slim bar */
body:has(#vmmsHomeTitle) .pwa-install-button{
    min-height:34px;
    padding:6px 13px;
    gap:7px;
    border-radius:9px;
    font-size:13px;
    border-color:#5fb3ff;
    background:linear-gradient(180deg, #5fb3ff 0%, #3c97f5 100%);
    color:#06203f;
    box-shadow:0 6px 16px rgba(73,166,255,.32), inset 0 1px 0 rgba(255,255,255,.35);
}
body:has(#vmmsHomeTitle) .pwa-install-button:hover{
    background:linear-gradient(180deg, #8ccaff 0%, #5fb3ff 100%);
    box-shadow:0 8px 20px rgba(73,166,255,.42);
}
body:has(#vmmsHomeTitle) .pwa-install-hint{ top:calc(100% + 8px); }

/* the hero: ship scene between the welcome text and the card */
body:has(#vmmsHomeTitle) .hero{
    background:transparent;
    padding:14px 0;
    overflow:hidden;
    isolation:isolate;
}
.landing-scene{
    position:absolute;
    top:50%;
    right:calc(4vw + 400px);
    height:min(100%, 760px);
    aspect-ratio:410 / 362;
    transform:translateY(-50%);
    z-index:0;
    pointer-events:none;
    -webkit-mask-image:
        linear-gradient(90deg, transparent 0%, #000 16%, #000 86%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    -webkit-mask-composite:source-in;
    mask-image:
        linear-gradient(90deg, transparent 0%, #000 16%, #000 86%, transparent 100%),
        linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-composite:intersect;
}
.landing-scene-art{
    position:absolute;
    inset:0;
    background:url("../img/landing-vessel.jpg") center / 100% 100% no-repeat;
    filter:saturate(1.08) contrast(1.04);
    transform-origin:62% 62%;
    animation:landing-drift 28s ease-in-out infinite alternate;
}
@keyframes landing-drift{
    from{ transform:scale(1) translate(0, 0); }
    to{ transform:scale(1.06) translate(-1.2%, .6%); }
}
/* radar over the map, centred on the district (Batangas, Mindoro, Marinduque, Romblon, Quezon) */
.landing-radar{
    position:absolute;
    left:75.5%;
    top:33.7%;
    width:70%;
    aspect-ratio:1;
    transform:translate(-50%, -50%);
}
.landing-radar-sweep,
.landing-radar-ring{
    position:absolute;
    inset:0;
    border-radius:50%;
}
.landing-radar-sweep{
    background:conic-gradient(from 0deg,
        rgba(110,190,255,0) 0deg, rgba(110,190,255,0) 280deg,
        rgba(110,190,255,.20) 340deg, rgba(200,236,255,.55) 359deg, rgba(200,236,255,0) 360deg);
    -webkit-mask-image:radial-gradient(circle, #000 0 66%, transparent 71%);
    mask-image:radial-gradient(circle, #000 0 66%, transparent 71%);
    mix-blend-mode:screen;
    animation:landing-sweep 6s linear infinite;
}
@keyframes landing-sweep{ to{ transform:rotate(360deg); } }
.landing-radar-ring{
    border:1.5px solid rgba(150,205,255,.55);
    box-shadow:0 0 14px rgba(73,166,255,.25), inset 0 0 14px rgba(73,166,255,.15);
    opacity:0;
    animation:landing-ripple 6s ease-out infinite;
}
.landing-radar-ring:nth-child(3){ animation-delay:-2s; }
.landing-radar-ring:nth-child(4){ animation-delay:-4s; }
@keyframes landing-ripple{
    0%{ transform:scale(.12); opacity:0; }
    12%{ opacity:.9; }
    100%{ transform:scale(.72); opacity:0; }
}
/* blinking beacons on the map */
.landing-ping{
    position:absolute;
    width:8px;
    height:8px;
    margin:-4px 0 0 -4px;
    border-radius:50%;
    background:#e3f3ff;
    box-shadow:0 0 6px 2px rgba(120,195,255,.9), 0 0 16px 4px rgba(73,166,255,.45);
    animation:landing-blink 2.6s ease-in-out infinite;
}
.landing-ping::after{
    content:"";
    position:absolute;
    inset:-3px;
    border-radius:50%;
    border:1.5px solid rgba(150,210,255,.8);
    animation:landing-ping 2.6s ease-out infinite;
}
/* Batangas, Romblon, Cebu, Zamboanga, Davao on the map in img/landing-vessel.jpg */
.landing-ping-1{ left:74%; top:32.6%; }
.landing-ping-2{ left:77.3%; top:36.2%; animation-delay:-.9s; }
.landing-ping-3{ left:81.5%; top:43.1%; animation-delay:-1.7s; }
.landing-ping-4{ left:76.7%; top:53.4%; animation-delay:-.4s; }
.landing-ping-5{ left:86%; top:52.9%; animation-delay:-2.1s; }
.landing-ping-2::after{ animation-delay:-.9s; }
.landing-ping-3::after{ animation-delay:-1.7s; }
.landing-ping-4::after{ animation-delay:-.4s; }
.landing-ping-5::after{ animation-delay:-2.1s; }
@keyframes landing-blink{ 0%, 100%{ opacity:.55; } 50%{ opacity:1; } }
@keyframes landing-ping{
    0%{ transform:scale(.6); opacity:.9; }
    100%{ transform:scale(3.4); opacity:0; }
}
/* light moving across the water */
.landing-glint{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:22%;
    background:linear-gradient(100deg, transparent 35%, rgba(190,225,255,.10) 48%, rgba(255,210,170,.08) 52%, transparent 65%) 0 0 / 250% 100% no-repeat;
    mix-blend-mode:screen;
    animation:landing-glint 9s ease-in-out infinite;
}
@keyframes landing-glint{
    from{ background-position:120% 0; }
    to{ background-position:-20% 0; }
}

/* orange and blue accent stripes, bottom left */
body:has(#vmmsHomeTitle) .hero::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:min(40vw, 560px);
    height:120px;
    z-index:-1;   /* behind the ship scene */
    pointer-events:none;
    background:
        linear-gradient(162deg, transparent 0 46%, rgba(40,110,235,.95) 46% 58%, transparent 58%),
        linear-gradient(162deg, transparent 0 62%, #f26b21 62% 74%, transparent 74%);
    -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 40%, transparent 100%);
    mask-image:linear-gradient(90deg, #000 0%, #000 40%, transparent 100%);
    opacity:.85;
}
body:has(#vmmsHomeTitle) .hero-container{ width:92%; z-index:2; }

/* left: welcome, title, features */
body:has(#vmmsHomeTitle) .left-content{ width:auto; max-width:620px; }
body:has(#vmmsHomeTitle) .left-content h4{
    color:#ff8f3a;
    font-size:13px;
    font-weight:600;
    letter-spacing:4px;
    margin-bottom:12px;
    text-shadow:0 0 18px rgba(255,143,58,.35);
}
body:has(#vmmsHomeTitle) .left-content h1{
    font-size:52px;
    line-height:60px;
    font-weight:700;
    letter-spacing:-.8px;
    margin-bottom:16px;
    background:linear-gradient(180deg, #ffffff 45%, #bfdcff 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    filter:drop-shadow(0 4px 22px rgba(0,0,0,.55));
}
body:has(#vmmsHomeTitle) .left-content > p{
    font-size:16px;
    line-height:27px;
    font-weight:400;
    color:#c9daf5;
    max-width:440px;
    margin-bottom:30px;
    text-shadow:0 2px 14px rgba(0,0,0,.6);
}
body:has(#vmmsHomeTitle) .features{ gap:26px; }
body:has(#vmmsHomeTitle) .feature-box{ width:170px; }
body:has(#vmmsHomeTitle) .icon{
    width:52px;
    height:52px;
    font-size:22px;
    margin-bottom:12px;
    border:1.5px solid rgba(91,170,255,.65);
    border-radius:14px;
    background:linear-gradient(160deg, rgba(23,66,138,.55), rgba(8,30,66,.65));
    box-shadow:0 0 22px rgba(73,166,255,.22), inset 0 1px 0 rgba(255,255,255,.12);
    color:#fff;
}
body:has(#vmmsHomeTitle) .feature-box h5{ font-size:15.5px; font-weight:600; letter-spacing:.1px; color:#fff; margin-bottom:5px; }
body:has(#vmmsHomeTitle) .feature-box p{ font-size:13.5px; line-height:21px; color:#aec3e4; text-shadow:0 1px 10px rgba(0,0,0,.6); }

/* right: the sign-in card, light glass */
body:has(#vmmsHomeTitle) .login-card{
    width:400px;
    flex:0 0 auto;
    padding:24px 28px;
    background:linear-gradient(160deg, #ffffff 0%, #f4f8ff 52%, #e4efff 100%);
    border:1.5px solid rgba(128,185,255,.85);
    border-radius:20px;
    box-shadow:0 0 0 5px rgba(73,166,255,.10), 0 28px 60px rgba(0,0,0,.38), 0 0 40px rgba(73,166,255,.18);
}
body:has(#vmmsHomeTitle) .login-card > h1,
body:has(#vmmsHomeTitle) .login-card > h2{
    text-align:left;
    font-size:27px;
    color:#0b1f3c;
    font-weight:700;
    letter-spacing:-.3px;
}
body:has(#vmmsHomeTitle) .login-card > p{
    text-align:left;
    color:#3b6db5;
    font-size:14.5px;
    margin-bottom:12px;
}
body:has(#vmmsHomeTitle) .login-card hr{ margin-bottom:6px; background:#d7e4f6; }
body:has(#vmmsHomeTitle) .login-card label{ margin-top:10px; font-size:13.5px; font-weight:600; letter-spacing:.2px; color:#23395d; }
body:has(#vmmsHomeTitle) .input-box input,
body:has(#vmmsHomeTitle) .input-box select{
    height:44px;
    margin-bottom:2px;
    font-size:14.5px;
    background:#e9f1fc;
    border:1px solid #c9dbf2;
    border-radius:10px;
    color:#0b1f3c;
}
body:has(#vmmsHomeTitle) .input-box > i:first-child{ top:14px; color:#4c6b98; }
body:has(#vmmsHomeTitle) .input-box input::placeholder{ color:#7d8ea8; }
body:has(#vmmsHomeTitle) .input-box input:focus,
body:has(#vmmsHomeTitle) .input-box select:focus{
    background:#fff;
    border-color:#2f7de1;
    box-shadow:0 0 0 3px rgba(47,125,225,.18);
}
body:has(#vmmsHomeTitle) .login-card form > button[type="submit"]{
    height:46px;
    margin-top:14px;
    font-size:16.5px;
    border-radius:10px;
    background:linear-gradient(180deg, #13397a 0%, #0d2d63 100%);
    font-weight:500;
    box-shadow:0 8px 18px rgba(13,45,99,.28);
}
body:has(#vmmsHomeTitle) .login-card form > button[type="submit"]:hover{
    background:linear-gradient(180deg, #1c4f9f 0%, #174892 100%);
}
body:has(#vmmsHomeTitle) .forgot{ margin-top:10px; font-size:14px; color:#1d64c8; font-weight:500; }
body:has(#vmmsHomeTitle) .forgot:hover{ text-decoration:underline; }
body:has(#vmmsHomeTitle) .register-divider{ margin:10px 0; font-size:13px; color:#6c7f9c; }
body:has(#vmmsHomeTitle) .register-divider::before,
body:has(#vmmsHomeTitle) .register-divider::after{ border-bottom-color:#cfdcee; }
body:has(#vmmsHomeTitle) .btn-access-request{
    min-height:44px;
    padding:8px 14px;
    font-size:14.5px;
    border-width:1.5px;
    border-radius:10px;
    background:#fff;
    font-weight:600;
}
body:has(#vmmsHomeTitle) .btn-access-request:not(:disabled):hover{ background:#0d2d63; color:#fff; }
body:has(#vmmsHomeTitle) .login-card > p.registration-approval-note,
body:has(#vmmsHomeTitle) .login-card > p.registration-availability-note{ margin-top:8px; margin-bottom:0; font-size:12px; text-align:center; }
body:has(#vmmsHomeTitle) .login-card > p.registration-approval-note,
body:has(#vmmsHomeTitle) .login-card > p.registration-availability-note{ color:#5a6f8f; }
body:has(#vmmsHomeTitle) .notice{
    margin-top:12px;
    padding:9px 12px;
    font-size:12.5px;
    border:1px solid #cfe0f7;
    background:#eaf2ff;
    color:#1b3a6b;
}
body:has(#vmmsHomeTitle) .notice i{ font-size:19px; margin-right:12px; color:#2f6fd6; }
body:has(#vmmsHomeTitle) .login-card .alert{ padding:10px 14px; margin-bottom:8px; font-size:14px; }

/* owner's request: no "authorized personnel" notice and no footer on the sign-in page */
body:has(#vmmsHomeTitle) .login-card .notice,
body:has(#vmmsHomeTitle) footer,
body:has(#vmmsHomeTitle) .hero::after{ display:none; }

/* slim footer on the backdrop */
body:has(#vmmsHomeTitle) footer{
    position:relative;
    z-index:1;
    padding:8px 40px;
    font-size:13px;
    background:linear-gradient(0deg, rgba(4,14,32,.92), rgba(4,14,32,.55));
    border-top:1px solid rgba(120,175,255,.08);
    color:#d7e3fb;
}
body:has(#vmmsHomeTitle) .footer-left img{ width:26px; margin-right:12px; }
body:has(#vmmsHomeTitle) .footer-right{ color:#aebfdc; }

/* short computer screens: tighten so the page still fits without scrolling */
@media(max-height:760px) and (min-width:1201px){
    body:has(#vmmsHomeTitle) header{ height:54px; }
    body:has(#vmmsHomeTitle) .hero{ padding:8px 0; }
    body:has(#vmmsHomeTitle) .left-content h1{ font-size:44px; line-height:50px; }
    body:has(#vmmsHomeTitle) .left-content > p{ font-size:16px; line-height:25px; margin-bottom:22px; }
    body:has(#vmmsHomeTitle) .login-card{ padding:16px 26px; }
    body:has(#vmmsHomeTitle) .login-card > h1,
    body:has(#vmmsHomeTitle) .login-card > h2{ font-size:24px; }
    body:has(#vmmsHomeTitle) .login-card > p{ margin-bottom:8px; }
    body:has(#vmmsHomeTitle) .login-card label{ margin-top:6px; }
    body:has(#vmmsHomeTitle) .input-box input{ height:40px; }
    body:has(#vmmsHomeTitle) .input-box > i:first-child{ top:12px; }
    body:has(#vmmsHomeTitle) button.password-toggle#togglePassword{ height:40px; min-height:40px; }
    body:has(#vmmsHomeTitle) .login-card form > button[type="submit"]{ height:42px; margin-top:10px; }
    body:has(#vmmsHomeTitle) .forgot{ margin-top:7px; }
    body:has(#vmmsHomeTitle) .register-divider{ margin:6px 0; }
    body:has(#vmmsHomeTitle) .btn-access-request{ min-height:40px; }
    body:has(#vmmsHomeTitle) .notice{ margin-top:8px; padding:7px 12px; }
    body:has(#vmmsHomeTitle) footer{ padding:6px 40px; }
}

/* narrower screens: the existing stacked layout (card first); the scene sits behind, softer, no stripes */
@media(max-width:1200px){
    body:has(#vmmsHomeTitle) header{ height:auto; padding:10px 20px; }
    body:has(#vmmsHomeTitle) nav ul li{ margin-left:0; }
    .landing-scene{
        top:0;
        right:auto;
        left:50%;
        height:min(78vw, 620px);
        transform:translateX(-50%);
        opacity:.5;
    }
    body:has(#vmmsHomeTitle) .hero::after{ display:none; }
    body:has(#vmmsHomeTitle) .left-content{ max-width:none; }
    body:has(#vmmsHomeTitle) .left-content > p{ max-width:520px; }
    body:has(#vmmsHomeTitle) .login-card{ width:100%; max-width:440px; }
    body:has(#vmmsHomeTitle) .login-card > h1,
    body:has(#vmmsHomeTitle) .login-card > h2,
    body:has(#vmmsHomeTitle) .login-card > p{ text-align:center; }
    body:has(#vmmsHomeTitle) footer{ padding:12px 20px; }
}
@media(prefers-reduced-motion:reduce){
    .landing-scene-art,
    .landing-radar-sweep,
    .landing-radar-ring,
    .landing-ping,
    .landing-ping::after,
    .landing-glint{ animation:none; }
    .landing-radar-ring{ opacity:0; }
}

/* Phones and tablets (owner, 29 Oct 2026). The ship scene is a positioned layer, so it painted over the sign-in card
   once the card stacked on top of it; the card and text now sit above the scene. On phones the title, text and
   features are tightened so the page reads in one short scroll. */
@media(max-width:1200px){
    body:has(#vmmsHomeTitle) .hero-container{ position:relative; z-index:1; }
}
@media(max-width:700px){
    body:has(#vmmsHomeTitle) header{ padding:10px 16px; }
    body:has(#vmmsHomeTitle) nav{ margin-top:6px; }
    body:has(#vmmsHomeTitle) .hero{ padding:6px 0 18px; }
    body:has(#vmmsHomeTitle) .hero-container{ width:auto; padding:10px 16px 6px; }
    body:has(#vmmsHomeTitle) .hero-container > .login-card{ max-width:none; margin-bottom:26px; padding:20px 18px; }
    body:has(#vmmsHomeTitle) .login-card > h1,
    body:has(#vmmsHomeTitle) .login-card > h2{ font-size:24px; }
    body:has(#vmmsHomeTitle) .input-box input,
    body:has(#vmmsHomeTitle) .input-box select{ font-size:16px; }
    body:has(#vmmsHomeTitle) .left-content h4{ margin-bottom:8px; }
    body:has(#vmmsHomeTitle) .left-content h1{ font-size:clamp(28px, 8.4vw, 36px); line-height:1.14; margin-bottom:12px; }
    body:has(#vmmsHomeTitle) .left-content > p{ font-size:15px; line-height:23px; margin-bottom:20px; }
    body:has(#vmmsHomeTitle) .features{ display:grid; gap:12px; text-align:left; }
    body:has(#vmmsHomeTitle) .feature-box{
        width:auto; display:grid; grid-template-columns:46px 1fr; column-gap:14px; align-items:center;
        padding:12px 14px; border:1px solid rgba(120,175,255,.16); border-radius:14px; background:rgba(8,26,58,.55);
    }
    body:has(#vmmsHomeTitle) .feature-box .icon{ grid-row:span 2; width:46px; height:46px; margin:0; font-size:19px; }
    body:has(#vmmsHomeTitle) .feature-box h5{ margin:0; align-self:end; }
    body:has(#vmmsHomeTitle) .feature-box p{ margin:0; align-self:start; }
}