/* Copyright (c) 2026 TNSystem. Alle Rechte vorbehalten. */
:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#f3f7fd;background:#182b37;color-scheme:dark}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}[hidden]{display:none!important}
.natural-room{position:fixed;inset:0;overflow:hidden;background:#263b47;isolation:isolate}.natural-room>svg{display:block;width:100%;height:100%}
.natural-login{position:relative;min-height:100svh;display:grid;place-content:center;padding:28px 18px;z-index:1}
.natural-card{width:min(380px,calc(100vw - 36px));margin:0;padding:28px 27px 25px;border:1px solid #d9eaff8a;border-radius:22px;background:linear-gradient(135deg,#263f53d9,#112a3add 60%,#1d3d4bdb);box-shadow:inset 1px 1px 1px #fff8,inset -1px -1px 1px #88c9ff45,0 22px 65px #07162470;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.natural-brand{display:grid;justify-items:center;gap:15px;margin-bottom:25px}.natural-brand svg{width:50px;height:50px;fill:none;stroke:#26d6f0;stroke-width:2}.natural-brand svg path{fill:#26d6f0;stroke:none}.natural-brand strong{font-weight:450;font-size:29px;letter-spacing:-.6px}.natural-brand h1{font-weight:450;font-size:17px;margin:0;color:#d4e3ef}
.natural-field{display:flex;align-items:center;gap:11px;min-height:48px;padding:0 12px;margin-top:14px;border:1px solid #b2d3ee80;border-radius:10px;background:linear-gradient(120deg,#7791ac26,#bad8ed0d);box-shadow:inset 0 1px 4px #031c2a30}.natural-field:focus-within{border-color:#61c7ff;box-shadow:0 0 0 3px #45bdff24}.natural-field>svg,.natural-field button svg{width:19px;height:19px;flex:none;stroke:#e0ecf5;fill:none;stroke-width:1.6}.natural-field input{width:100%;min-width:0;border:0;outline:0;background:none;padding:12px 0;color:#fff;font-size:14px}.natural-field input::placeholder{color:#dae7f2;opacity:.9}.natural-field button{display:grid;place-items:center;background:none;border:0;padding:6px;color:inherit;cursor:pointer}
.natural-submit{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:23px;width:100%;min-height:47px;border:1px solid #8fe9ff;border-radius:10px;color:white;background:linear-gradient(120deg,#087fe2,#0ca7ed);box-shadow:inset 0 1px 1px #d9f8ff70,0 0 19px #079fe338;cursor:pointer;font-weight:600;font-size:15px}.natural-submit:focus-visible,.natural-enroll:focus-visible{outline:3px solid #b9f0ff;outline-offset:4px}.natural-submit:disabled{cursor:default}.natural-enroll{display:block;margin:17px auto 0;background:none;border:0;color:#e2ebf4;text-shadow:0 1px 3px #10202c;padding:3px;font-size:12px;text-underline-offset:3px;text-decoration:underline;cursor:pointer}.natural-status:empty{display:none}.natural-status{font-size:13px;line-height:1.45;color:#f1d6b5}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.natural-orb{animation:natural-float 6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}@keyframes natural-float{0%,100%{translate:0 0}50%{translate:0 -3px}}
@media(max-height:520px){.natural-login{padding:16px;min-height:100svh}.natural-card{padding:18px 24px}.natural-brand{gap:9px;margin-bottom:16px}.natural-brand svg{width:36px;height:36px}.natural-brand strong{font-size:25px}.natural-field{margin-top:10px}.natural-submit{margin-top:16px}.natural-enroll{margin-top:11px}}
@media(prefers-reduced-motion:reduce){.natural-orb{animation:none}}

/* Copyright (c) 2026 TNSystem. Alle Rechte vorbehalten. */
body>.natural-room{z-index:0}.app-shell{position:relative;z-index:1}.room-scene,.orb-wrap{visibility:hidden!important;pointer-events:none}
.app-shell:has(#login-screen:not([hidden])){display:block;padding:0;background:transparent}
.app-shell:has(#login-screen:not([hidden])) .sidebar,.app-shell:has(#login-screen:not([hidden])) .topbar{display:none}
.app-shell:has(#login-screen:not([hidden])) .main-content{display:block;min-height:100svh;background:transparent;border:0;border-radius:0;box-shadow:none}
#login-screen{display:grid;place-content:center;min-height:100svh;padding:28px 18px;background:transparent;isolation:isolate}
#login-screen[hidden]{display:none!important}#login-form{display:block;width:min(380px,calc(100vw - 36px));gap:0}
#login-form .natural-submit{min-height:47px;padding:10px 14px;opacity:1}
#login-form .natural-submit::after{content:none}
#login-screen .natural-card>#otp:not([type=hidden]),#enroll-form input{width:100%;min-height:46px;padding:10px 12px;color:#fff;background:#1a354f80;border:1px solid #a8cce080;border-radius:9px;font:inherit}
#login-screen #otp-label,#enroll-form label{display:block;margin:15px 0 7px;font-size:13px;color:#deebf3}
#login-screen #otp-hint{font-size:12px;line-height:1.4;color:#d0e0eb}
#enroll-panel .natural-card{margin-top:14px}#enroll-form h2{margin:0 0 15px;font-size:22px;font-weight:500}#enroll-form p{font-size:13px;line-height:1.5;color:#d5e4ee}
.natural-orb[data-state=active]{filter:drop-shadow(0 0 13px #ff5c52)}.natural-orb[data-state=done]{filter:drop-shadow(0 0 12px #5dffa4)}.natural-orb[data-state=error]{filter:drop-shadow(0 0 12px #ff6d55)}
@media(max-height:520px){#login-screen{padding:16px}#login-form{padding:18px 24px}}

/* Keep the integrated right plant and figure above the compact login on tall phones. */
@media(max-width: 600px) and (min-height: 700px) and (orientation: portrait){#login-screen{place-content:end center;padding-bottom:28px}}