:root{
    --ink:#0C1B3A;          /* deep navy ink */
    --ink-2:#0A1426;        /* darker navy */
    --brand:#003FBB;        /* primary blue */
    --brand-lift:#1E5AE0;   /* lifted blue for hover */
    --paper:#FFFFFF;
    --mist:#F4F6FA;         /* panel background tint */
    --line:#D7DEEA;         /* hairline */
    --muted:#5A6B86;        /* muted text */
    --grid-a:#0C1B3A;
    --grid-b:#0A1426;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
    font-family:"IBM Plex Sans",system-ui,sans-serif;
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
}

/* ============ SHELL: form panel left, module field right ============ */
.entry{
    display:grid;
    grid-template-columns:minmax(380px,440px) 1fr;
    min-height:100dvh;
}

/* ---------- LEFT: sign-in panel ---------- */
.entry__panel{
    position:relative;
    background:var(--paper);
    display:flex;
    flex-direction:column;
    padding:48px 52px;
    z-index:2;
}
.brandline{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:auto;
    justify-content: center;
}
.brandline__mark{
    width:34px;height:34px;border-radius:8px;
    background:
            linear-gradient(135deg,var(--brand) 0%,#6E8FE6 100%);
    position:relative;flex:none;
    box-shadow:0 2px 8px rgba(0,63,187,.28);
}
.brandline__mark::after{
    /* modular notch — echoes the constructor idea */
    content:"";position:absolute;inset:9px;
    background:var(--paper);
    clip-path:polygon(0 0,55% 0,55% 55%,100% 55%,100% 100%,0 100%);
    border-radius:2px;
}
.brandline__name{font-weight:600;font-size:16px;letter-spacing:.2px}
.brandline__name b{color:var(--brand)}

.signin{margin-top:44px;margin-bottom:auto}
.signin__eyebrow{
    font-family:"IBM Plex Mono",monospace;
    font-size:11px;letter-spacing:2.5px;text-transform:uppercase;
    color:var(--muted);margin-bottom:14px;
}
.signin__title{
    font-size:27px;font-weight:600;line-height:1.15;
    letter-spacing:-.3px;margin-bottom:6px;
}
.signin__sub{font-size:14px;color:var(--muted);margin-bottom:30px}

.field{position:relative;margin-bottom:16px}
.field__input{
    width:100%;
    padding:15px 15px 15px 15px;
    font:inherit;font-size:15px;
    color:var(--ink);
    background:var(--mist);
    border:1.5px solid transparent;
    border-radius:11px;
    outline:none;
    transition:border-color .16s, background .16s;
}
.field__input:-webkit-autofill,
.field__input:-webkit-autofill:hover,
.field__input:-webkit-autofill:focus{
    -webkit-text-fill-color: var(--ink);
    -webkit-box-shadow: 0 0 0 1000px var(--mist) inset;
    box-shadow: 0 0 0 1000px var(--mist) inset;
    transition: background-color 9999s ease-in-out 0s;
}
.field__input::placeholder{color:transparent}
.field__label{
    position:absolute;left:15px;top:16px;
    font-size:15px;color:var(--muted);
    pointer-events:none;
    transition:transform .16s, font-size .16s, color .16s;
    transform-origin:left top;
    background:transparent;padding:0 4px;
}
.field__input:focus{
    border-color:var(--brand);
    background:var(--paper);
}
.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label{
    transform:translateY(-24px) scale(.82);
    color:var(--brand);
    background:var(--paper);
}
.field__input:not(:placeholder-shown):not(:focus) + .field__label{color:var(--muted)}

.enter{
    width:100%;
    margin-top:8px;
    padding:15px;
    font:inherit;font-weight:600;font-size:15px;
    color:#fff;
    background:var(--brand);
    border:none;border-radius:11px;
    cursor:pointer;
    transition:background .16s, transform .06s;
}
.enter:hover{background:var(--brand-lift)}
.enter:active{transform:translateY(1px)}
.enter:focus-visible{outline:3px solid rgba(0,63,187,.35);outline-offset:2px}

.panel__foot{
    display:flex;align-items:center;justify-content:space-between;
    font-size:12px;color:var(--muted);
}
.lang{display:inline-flex;gap:2px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.lang button{
    font:inherit;font-size:12px;font-weight:500;
    padding:5px 11px;border:none;background:transparent;color:var(--muted);cursor:pointer;
}
.lang button.is-on{background:var(--brand);color:#fff}

/* ---------- RIGHT: living module field ---------- */
.entry__field{
    position:relative;
    overflow:hidden;
    background:var(--ink-2);
}
.entry__field::before{
    /* base gradient wash */
    content:"";position:absolute;inset:0;
    background:
            radial-gradient(120% 90% at 78% 15%, rgba(30,90,224,.30) 0%, transparent 55%),
            linear-gradient(160deg,var(--grid-a) 0%,var(--grid-b) 100%);
}
.tiles{position:absolute;inset:0}
.tiles svg{width:100%;height:100%;display:block}
.field__cap{
    position:absolute;left:56px;bottom:52px;right:56px;z-index:3;
    color:#fff;
}
.field__cap h2{
    font-size:30px;font-weight:600;line-height:1.2;letter-spacing:-.4px;
    max-width:16ch;margin-bottom:12px;
}
.field__cap p{
    font-size:14px;line-height:1.6;color:#AFBEDC;max-width:44ch;
}
.field__meta{
    position:absolute;top:52px;right:56px;z-index:3;
    font-family:"IBM Plex Mono",monospace;
    font-size:11px;letter-spacing:2px;text-transform:uppercase;
    color:#8FA3C8;
}
.entry_logo_wrapper
{
    min-height:30px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap:10px;
}
.entry_logo_wrapper .entry_logo {
    text-align: center;
}
.entry_logo_wrapper .entry_logo span {
    display: inline-block;
    width: 60px;
    height: 60px;
    background: linear-gradient(var(--angle, 135deg), var(--from, #003FBB), var(--to, #0A2A6B));
    -webkit-mask: var(--src) no-repeat center / contain;
    mask: var(--src) no-repeat center / contain;
}
.entry_logo_wrapper .entry_logo_text
{
    font-size: 18px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.3px;
    text-wrap:nowrap;
    min-width:200px;
    display: flex;
    align-items: center;
    text-align: left;
    color:var(--ink);
    padding-top:15px;
}

.auth-error:empty {display:none;}
/* ---------- responsive ---------- */
@media (max-width:880px){
    .entry{grid-template-columns:1fr}
    .entry__field{display:none}
    .entry__panel{padding:40px 28px}
}
@media (prefers-reduced-motion:reduce){
    .tile{animation:none !important}
}