:root {
    --login-primary: #153e75;
    --login-primary-dark: #1c4e94;
    --login-primary-light: #5b9bda;
    --brand-navy: #153e75;
    --brand-blue: #203d8f;
    --brand-muted: #284f86;
    --login-ink: #1e293b;
    --login-muted: #5f6f84;
    --login-line: #2f73c9;
    --login-line-strong: #b8c9db;
    --login-surface: #ffffff;
    --login-error-bg: #fff3f2;
    --login-error-border: #efb5b0;
    --login-error-text: #b42318;
    --login-radius: 16px;
    --login-shadow: 0 24px 58px rgba(28, 78, 148, 0.16);
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    margin: 0;
}

body {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    color: var(--login-ink);
    font-family: "Poppins", Arial, sans-serif;

    background:

    /* Soft Light Glow */
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.22) 0%, transparent 28%),
    radial-gradient(circle at 82% 32%, rgba(255,255,255,.14) 0%, transparent 30%),
    radial-gradient(circle at 40% 88%, rgba(255,255,255,.10) 0%, transparent 34%),

    /* Texture Dots */
    radial-gradient(circle, rgba(255,255,255,.10) 1px, transparent 1.6px),
    radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1.8px),

    /* Hexagon / Diamond Pattern */
    linear-gradient(30deg, rgba(255,255,255,.05) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.05) 87.5%, rgba(255,255,255,.05)),
    linear-gradient(150deg, rgba(255,255,255,.05) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.05) 87.5%, rgba(255,255,255,.05)),
    linear-gradient(90deg, rgba(255,255,255,.025) 2px, transparent 2px),

    /* Main Gradient (Slightly Darker) */
    linear-gradient(
        140deg,
        #c8e5fb 0%,
        #79b9ea 28%,
        #428fd8 60%,
        #236cbc 82%,
        #144d96 100%
    );

    background-size:
        auto,
        auto,
        auto,
        28px 28px,
        72px 72px,
        140px 140px,
        140px 140px,
        96px 96px,
        auto;

    text-rendering: optimizeLegibility;
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

body::before {
    opacity: 0.34;
    background:
        radial-gradient(ellipse at 16% 52%, transparent 0 42%, rgba(255, 255, 255, 0.07) 42.4% 42.8%, transparent 43.2% 100%),
        radial-gradient(ellipse at 16% 52%, transparent 0 54%, rgba(47, 115, 201, 0.04) 54.2% 54.6%, transparent 55% 100%),
        linear-gradient(150deg, transparent 0 22%, rgba(255, 255, 255, 0.13) 22% 23%, transparent 23% 100%),
        linear-gradient(150deg, transparent 0 58%, rgba(212, 175, 55, 0.045) 58% calc(58% + 1px), transparent calc(58% + 1px) 100%),
        repeating-linear-gradient(150deg, transparent 0 132px, rgba(47, 115, 201, 0.026) 132px 133px, transparent 133px 244px);
}

body::after {
    opacity: 0.26;
    background:
        radial-gradient(ellipse at 22% 48%, rgba(255, 255, 255, 0.36), transparent 46%),
        radial-gradient(ellipse at 82% 50%, rgba(255, 255, 255, 0.32), transparent 44%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 30%, rgba(95, 168, 232, 0.14));
}

a {
    color: inherit;
}

.login-page {
    display: grid;
    align-items: center;
    width: min(1360px, calc(100vw - 64px));
	grid-template-columns: 50% 50%;
	gap: 20px;
    height: min(760px, calc(100vh - 64px));
    min-height: 640px;
    margin: 50vh auto 0;
    transform: translateY(-50%);
    position: relative;
    z-index: 1;
    animation: pageFade 520ms ease-out both;
}

/* Left column: product identity and iBoss branding. */
.login-brand-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 100%;
    position: relative;
    z-index: 0;
    text-align: center;
    color: var(--brand-navy);
    padding: 40px 32px;
}

.login-brand-panel::before{

	content:"";
	position:absolute;
	width:520px;
	height:520px;
	border-radius:50%;	
	background:
	radial-gradient(circle,
	rgba(255,255,255,.40),
	rgba(255,255,255,.10) 55%,
	transparent 75%);
	filter:blur(6px);
	z-index:-1;
}

.login-banner-divider{
    width:100%;
    height:2px;
    margin:18px 0 22px;
    border-radius:999px;

    background:linear-gradient(
        90deg,
        transparent 0%,
        rgba(47,115,201,.15) 8%,
        #2f73c9 50%,
        rgba(47,115,201,.15) 92%,
        transparent 100%
    );

}

.brand-content {
    display: grid;
    justify-items: center;
    width: min(100%, 660px);
    text-align: center;
    gap: 2px;
}


.brand-logo{
    width:115px;
    height:auto;
    display:block;
    margin:0 0 18px;

    filter:
        drop-shadow(0 8px 14px rgba(0,0,0,.12))
        drop-shadow(0 0 8px rgba(255,255,255,.95))
        drop-shadow(0 0 20px rgba(173,216,255,.85))
        drop-shadow(0 0 36px rgba(102,181,255,.35));

    transition:transform .3s ease;
}

.brand-logo:hover{
    transform:scale(1.03);
}

.brand-kicker,
.login-kicker{
    margin:0;
    font-size:15px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color: var(--brand-navy);

    text-shadow:
        1px 0 #ffffff,
       -1px 0 #ffffff,
        0 1px #ffffff,
        0 -1px #ffffff,
        1px 1px #ffffff,
       -1px -1px #ffffff,
        1px -1px #ffffff,
       -1px 1px #ffffff,
        0 2px 6px rgba(31,77,136,.15);
}

.brand-content h1{
    margin:4px 0 6px;
    font-size:72px;
    font-weight:800;
    line-height:1.05;
    letter-spacing:-1px;

    color: var(--brand-navy);

    text-shadow:
        1px 0 #ffffff,
       -1px 0 #ffffff,
        0 1px #ffffff,
        0 -1px #ffffff,
        1px 1px #ffffff,
       -1px -1px #ffffff,
        1px -1px #ffffff,
       -1px 1px #ffffff,
        0 3px 8px rgba(31,77,136,.18);
}

.brand-title{
    position:relative;
    display:inline-block;
}

.brand-divider{
    position:relative;
    width:90px;
    height:2px;
    margin:14px auto 18px;
    background:linear-gradient(90deg,#1f4d88,#5b7fff,#1f4d88);
    border-radius:999px;
}

.brand-divider::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:8px;
    height:8px;
    background:#ffffff;
    border:2px solid #1f4d88;
    transform:translate(-50%,-50%) rotate(45deg);
    border-radius:2px;
}

.brand-copy{
    max-width:580px;
    margin:2px 0 22px;
    color: var(--brand-navy);
    font-size:15px;
    font-weight:700;
    line-height:1.7;
    letter-spacing:.25px;
    text-align:center;
	text-transform:uppercase;
    text-shadow:
        1px 0 #ffffff,
       -1px 0 #ffffff,
        0 1px #ffffff,
        0 -1px #ffffff,
        1px 1px #ffffff,
       -1px -1px #ffffff,
        1px -1px #ffffff,
       -1px 1px #ffffff,
        0 2px 6px rgba(31,77,136,.15);
}

.brand-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.brand-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 150px;
    min-height: 42px;
    padding: 0 20px;
    border: 1px solid rgba(47, 115, 201, 0.25);
    border-radius: 999px;
    color: var(--brand-navy);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: .2px;
    background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(240,246,255,.9));
    box-shadow:
        0 8px 18px rgba(28,78,148,.10),
        inset 0 1px 0 rgba(255,255,255,.85);
    transition: all .3s ease;
}

.brand-links img {
    width: 15px;
    height: 15px;
    object-fit: contain;
    flex: 0 0 auto;
}

.brand-links a:hover,
.brand-links a:focus {
    color: #ffffff;
    border-color: #2f73c9;
    background: linear-gradient(135deg, #2f73c9, #1d5fb5);
    box-shadow:
        0 0 12px rgba(47,115,201,.45),
        0 0 24px rgba(47,115,201,.25),
        0 10px 24px rgba(29,95,181,.30);
    transform: translateY(-3px) scale(1.03);
}

.brand-links a:active {
    transform: translateY(0) scale(.98);
    box-shadow:
        0 4px 12px rgba(29,95,181,.20);
}


.brand-company {
	display:flex;
    align-items:center;
    justify-content:center;
    margin: 20px 0 0;
    color: var(--brand-muted);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;

    text-shadow:
        0 0 1px #ffffff,
        0 1px 3px rgba(255,255,255,.85);
}

.brand-company strong {
    display: block;
    color: var(--brand-blue);
    font-weight: 700;
	font-size: 20px;

    text-shadow:
        1px 0 #ffffff,
       -1px 0 #ffffff,
        0 1px #ffffff,
        0 -1px #ffffff,
        1px 1px #ffffff,
       -1px -1px #ffffff,
        1px -1px #ffffff,
       -1px 1px #ffffff,
        0 3px 8px rgba(31,77,136,.18);
}

.brand-company-icon{
    width:44px;
    height:44px;
    object-fit:contain;
    flex-shrink:0;

    filter:
        drop-shadow(0 2px 6px rgba(0,0,0,.12))
        drop-shadow(0 0 8px rgba(47,115,201,.18));
}

/* Right column: vertically centered modern login card. */
.login-form-panel {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    transform: none;
}

.login-card {
    width: min(100%, 540px);
    padding: 40px 44px 44px;
    border: 1px solid rgba(216, 226, 238, 0.95);
    border-radius: var(--login-radius);
    background: var(--login-surface);
    box-shadow: var(--login-shadow);
    animation: cardEnter 560ms ease-out 80ms both;
}

.login-banner {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 28px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.login-header {
    margin-bottom: 30px;
}

.login-kicker{
    margin:0;
    font-size:15px;
    font-weight:700;
    letter-spacing:1.2px;
    text-transform:uppercase;
    color: var(--login-ink);

    text-shadow:
        1px 0 #ffffff,
       -1px 0 #ffffff,
        0 1px #ffffff,
        0 -1px #ffffff,
        1px 1px #ffffff,
       -1px -1px #ffffff,
        1px -1px #ffffff,
       -1px 1px #ffffff,
        0 2px 6px rgba(31,77,136,.15);
}

.login-header h2 {
    margin: 0;
    
    color: var(--brand-blue);
    font-size: 28px;
    line-height: 1.25;
    font-weight: 700;
}

.login-form {
    display: grid;
    gap: 20px;
}

.form-field {
    display: grid;
    gap: 8px;
}

.form-field span {
    color: var(--login-muted);
    font-size: 14px;
    font-weight: 600;
}

.form-field input {
    width: 100%;
    min-height: 52px;
    padding: 12px 15px;
    border: 1px solid var(--login-line);
    border-radius: var(--login-radius);
    color: var(--login-ink);
    font: inherit;
    font-size: 15px;
    background: #ffffff;
    outline: none;
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.form-field input::placeholder {
    color: #95a3b5;
}

.form-field input:hover {
    border-color: var(--login-line-strong);
}

.form-field input:focus {
    border-color: var(--login-primary);
    box-shadow: 0 0 0 4px rgba(15, 95, 173, 0.12);
}

.password-input-wrap {
    position: relative;
    display: block;
}

.password-input-wrap input {
    padding-right: 148px;
}

.password-toggle {
    position: absolute;
    top: 50%;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    width: 126px;
    height: 28px;
    padding: 0;
    border: 0;
    color: #6f829a;
    font: inherit;
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    background: transparent;
    transform: translateY(-50%);
    transition: color 0.2s ease;
}

.password-toggle:hover,
.password-toggle:focus {
    color: var(--login-primary);
    outline: none;
}

.password-toggle:focus-visible {
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(47, 115, 201, 0.18);
}

.password-toggle-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex: 0 0 auto;
}

.password-toggle-text {
    white-space: nowrap;
}

.login-btn {
    min-height: 56px;
    margin-top: 4px;
    border: 0;
    border-radius: var(--login-radius);
    color: #ffffff;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    background: linear-gradient(135deg, var(--login-primary-dark), var(--login-primary));
    box-shadow: 0 14px 28px rgba(15, 95, 173, 0.24);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.login-btn:hover,
.login-btn:focus {
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(15, 95, 173, 0.3);
}

.login-btn:active {
    transform: translateY(0);
    box-shadow: 0 10px 22px rgba(15, 95, 173, 0.22);
}

.login-error {
    padding: 12px 14px;
    border: 1px solid var(--login-error-border);
    border-radius: var(--login-radius);
    color: var(--login-error-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    background: var(--login-error-bg);
}

.login-datetime{
    position:fixed;
    left:32px;
    bottom:24px;
    z-index:2;
    max-width:min(360px, calc(100vw - 48px));
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 16px;
    border:1px solid rgba(255,255,255,.5);
    border-radius:12px;
    color: var(--brand-navy);
    font-size:12px;
    font-weight:600;
    line-height:1.5;
    text-align:left;
    background:rgba(255,255,255,.75);
    box-shadow:0 8px 20px rgba(28,78,148,.08);
    text-shadow:0 1px 0 rgba(255, 255, 255, 0.46);
    animation:pageFade 560ms ease-out 180ms both;
}

.datetime-icon{
    width:18px;
    height:18px;
    flex:0 0 auto;
    opacity:.9;
}

.input-icon-wrap,
.password-input-wrap{
    position:relative;
    display:block;
}

.input-icon{
    position:absolute;
    left:15px;
    top:50%;
    width:18px;
    height:18px;
    object-fit:contain;
    transform:translateY(-50%);
    opacity:.75;
    pointer-events:none;
}

.input-icon-wrap input{
    padding-left:46px;
}

.password-input-wrap input{
    padding-left:46px;
    padding-right:148px;
}

.input-icon-wrap:focus-within .input-icon,
.password-input-wrap:focus-within .input-icon{
    opacity:1;
    transform:translateY(-50%) scale(1.05);
}

@keyframes pageFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes cardEnter {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1100px) {
    body {
        overflow: auto;
    }

    .login-page {
        grid-template-columns: 1fr;
        width: min(720px, calc(100vw - 40px));
        height: auto;
        min-height: 100vh;
        margin: 0 auto;
        padding: 30px 0;
        transform: none;
        gap: 24px;
    }

    .login-brand-panel,
    .login-form-panel {
        height: auto;
    }

    .login-form-panel {
        transform: none;
    }

    .login-brand-panel {
        padding: 0;
    }

}

@media (max-width: 520px) {
    .login-page {
        width: min(100%, calc(100vw - 32px));
        padding: 24px 0;
        gap: 22px;
    }

    .brand-logo {
        width: 152px;
    }

    .brand-content h1 {
        font-size: 34px;
    }

    .brand-copy {
        font-size: 13px;
    }

    .login-card {
        padding: 30px 22px;
    }

    .login-header h2 {
        font-size: 23px;
    }

    .brand-links {
        width: 100%;
    }

    .brand-links a {
        justify-content: center;
        width: 100%;
    }

    .login-datetime {
        right:16px;
        bottom:14px;
        left:16px;
        max-width:none;
        text-align:center;
    }
}

/* Hide Date & Time on Mobile */
@media (max-width: 768px) {
    .login-datetime {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}