:root { color-scheme: dark; --bg:#031827; --panel:#fff; --ink:#172033; --muted:#667085; --line:#d8dee8; --primary:#145da0; --primary-dark:#062942; --cyan:#00a6d6; --green:#18815f; --danger:#b42318; }
* { box-sizing:border-box; }
body {
    margin:0;
    min-height:100vh;
    display:grid;
    place-items:center;
    overflow:hidden;
    font-family:Arial, sans-serif;
    background:
        linear-gradient(90deg, rgba(0,166,214,.12) 1px, transparent 1px),
        linear-gradient(0deg, rgba(0,166,214,.1) 1px, transparent 1px),
        linear-gradient(120deg, rgba(24,129,95,.18), transparent 34%),
        linear-gradient(245deg, rgba(0,110,200,.22), transparent 38%),
        #031827;
    background-size:48px 48px,48px 48px,100% 100%,100% 100%,100% 100%;
    color:var(--ink);
    padding:24px;
}
body::before,
body::after {
    content:"";
    position:fixed;
    inset:auto -8vw 12vh -8vw;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(174,229,242,.8), transparent);
    box-shadow:0 0 28px rgba(0,166,214,.45);
    transform:perspective(500px) rotateX(62deg);
}
body::after {
    inset:18vh -10vw auto -10vw;
    opacity:.45;
}
.login-shell {
    width:min(100%, 860px);
    display:grid;
    justify-items:center;
    gap:18px;
}
.logo-card {
    width:100%;
    display:grid;
    justify-items:center;
    padding:36px 28px 18px;
    cursor:pointer;
}
.logo-card:focus-visible {
    outline:1px solid rgba(174,229,242,.7);
    outline-offset:18px;
}
.omino-logo {
    width:min(100%, 700px);
    height:auto;
    display:block;
    filter:drop-shadow(0 18px 40px rgba(0,166,214,.2));
    transform-origin:50% 50%;
}
.login {
    width:min(100%, 390px);
    max-height:0;
    overflow:hidden;
    opacity:0;
    transform:translateY(-24px) scale(.985);
    pointer-events:none;
    background:rgba(255,255,255,.96);
    border:1px solid rgba(216,222,232,.82);
    border-radius:8px;
    box-shadow:0 22px 54px rgba(0,0,0,.24), 0 0 30px rgba(0,166,214,.12);
    padding:0 24px;
    transition:
        max-height 1.05s cubic-bezier(.18,.72,.18,1),
        opacity .85s ease .16s,
        transform .95s cubic-bezier(.18,.72,.18,1),
        padding .75s ease;
}
.login-shell.is-open .login,
.login-shell:has(.logo-card:hover) .login,
.login-shell:has(.logo-card:focus-visible) .login,
.login:focus-within {
    max-height:520px;
    opacity:1;
    transform:translateY(0) scale(1);
    pointer-events:auto;
    padding:24px;
}
h1 { margin:0 0 4px; font-size:22px; }
p { margin:0 0 20px; color:var(--muted); }
label { display:block; font-weight:700; margin:14px 0 6px; }
input { width:100%; border:1px solid var(--line); border-radius:6px; padding:12px; font-size:16px; }
input:focus { outline:3px solid rgba(20,93,160,.16); border-color:var(--primary); }
button { width:100%; border:0; border-radius:6px; padding:12px 14px; margin-top:20px; background:var(--primary); color:#fff; font-size:16px; font-weight:700; cursor:pointer; }
button:hover { background:var(--primary-dark); }
.error { border:1px solid #f2b8b5; background:#fff3f2; color:var(--danger); padding:10px 12px; border-radius:6px; margin-bottom:16px; }
@media (max-width: 560px) {
    body { padding:18px; }
    .logo-card { padding:24px 0 14px; }
}