@import url('./tokens.css');
@font-face{font-family:'MX Tangerine';src:url('./wordmark.ttf') format('truetype');font-weight:700;font-display:swap}
:root{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;font-size:13px;color:var(--ink);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}h1,p{margin:0}button,input{font:inherit}button{cursor:pointer;border:0}a{color:inherit;text-decoration:none}svg{flex-shrink:0}
button,a,input{outline-offset:3px}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--focus)}
.login{--login-water-base:#f7f5ed;display:flex;position:relative;isolation:isolate;min-height:100svh;padding:130px 24px 86px;align-items:center;justify-content:center;overflow:hidden;background:var(--login-water-base)}
[data-theme='dark'] .login{--login-water-base:#06090d}
.ambient-backdrop{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;opacity:.6}
.login-water-poster,.login-water-video,.login-water-tint{position:absolute;inset:0;width:100%;height:100%}
.login-water-poster{background:center/cover no-repeat url('./light-wave-loop.webp')}
[data-theme='dark'] .login-water-poster{background-image:url('./dark-wave-loop.webp')}
.login-water-video{object-fit:cover;opacity:0;transition:opacity 1.5s ease-in-out}.login-water-video[data-playing='true']{opacity:1}
.login-water-tint{background:var(--login-water-base);opacity:.5;mix-blend-mode:color;backdrop-filter:brightness(1.2);-webkit-backdrop-filter:brightness(1.2)}
.login-header{position:absolute;inset:36px 44px auto;display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.brand{display:flex;flex-direction:column;gap:10px}.wordmark{font-family:'MX Tangerine',Baskerville,'Times New Roman',serif;font-weight:700;font-size:36px;line-height:.95;letter-spacing:-.5px;white-space:nowrap}
.brand small{font-size:10.5px;line-height:1.45;color:#444e58;text-shadow:0 1px 12px #ffffff8a}
.theme-switch{position:relative;display:flex;align-items:center;justify-content:center;width:148px;height:40px;border:1px solid #ffffffa8;border-radius:24px;background:#f6f8f9a6;color:var(--ink-secondary);font-size:9px;font-weight:650;letter-spacing:1px;padding:0 12px 0 42px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.theme-switch-thumb{position:absolute;left:5px;top:5px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface);border:1px solid var(--border);box-shadow:0 2px 6px #00000012;transition:transform .2s}
.theme-switch.is-night{padding:0 42px 0 12px}.is-night .theme-switch-thumb{transform:translateX(108px)}
.login-panel{display:block;padding:0;width:420px;max-width:100%}
.login-panel form{width:100%;padding:38px;background:#ffffffc7;border:1px solid #ffffffc9;border-radius:24px;box-shadow:0 30px 90px #20303b1f,inset 0 1px 0 #ffffffde;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);animation:enter .4s both}
.login-symbol{display:grid;place-items:center;width:48px;height:48px;margin-bottom:26px;border-radius:15px;background:#ffffff80;color:var(--ink-secondary);border:1px solid var(--border);box-shadow:inset 0 1px 0 var(--highlight),var(--shadow)}
.eyebrow{font-size:9px;font-weight:700;letter-spacing:1.7px;color:var(--ink-secondary);margin-bottom:9px}
.login-panel h1{font-size:33px;letter-spacing:-.5px;font-weight:550;color:var(--ink)}
.login-panel p{font-size:12px;color:var(--ink-secondary);line-height:1.8;margin:12px 0 28px}
.login-panel label{display:block;font-size:11px;font-weight:550;color:var(--ink-secondary);margin-bottom:10px}
.login-panel input{width:100%;height:45px;padding:0 12px;border:1px solid var(--border);border-radius:8px;background:#ffffffe0;color:var(--ink);margin-bottom:17px;min-width:0}
.password-field{position:relative;margin-bottom:17px}.password-field input{padding-right:45px;margin-bottom:0}
.password-toggle{position:absolute;right:5px;top:5px;height:35px;width:35px;display:grid;place-items:center;background:transparent;color:var(--ink-secondary);border-radius:5px}.password-toggle:hover{background:var(--surface-soft)}
.button{width:100%;height:46px;display:flex;gap:7px;align-items:center;justify-content:center;margin-top:6px;border:1px solid var(--accent);border-radius:8px;padding:10px 15px;background:var(--accent);color:var(--on-accent);font-size:12px;font-weight:600;transition:background .18s}
.button:hover{background:var(--accent-hover)}.button:disabled{cursor:wait;opacity:.65}
.login-panel small{font-size:9px;display:flex;align-items:center;justify-content:center;gap:6px;margin-top:28px;line-height:1.7;color:var(--muted)}
.error{color:var(--error-ink);background:var(--error-bg);border:1px solid var(--border);padding:12px 14px;border-radius:8px;font-size:12px;line-height:1.6;margin:0 0 20px}
.login-caption{position:absolute;bottom:30px;left:20px;right:20px;text-align:center;font-size:11px;letter-spacing:.5px;color:#465460}
[data-theme='dark'] .brand small,[data-theme='dark'] .login-caption{color:#c1cad7;text-shadow:0 1px 12px #00000040}
[data-theme='dark'] .wordmark{color:#f0f3f7}[data-theme='dark'] .theme-switch{background:#171e28a6;border-color:#ffffff26}
[data-theme='dark'] .login-panel form{background:#171d27c9;border-color:#ffffff21;box-shadow:0 30px 90px #00000036,inset 0 1px 0 #ffffff0d}
[data-theme='dark'] .login-symbol{background:#ffffff08}[data-theme='dark'] .login-panel input{background:#121a25b8}
@keyframes enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:540px){.login{padding:120px 18px 70px;overflow:visible}.login-header{inset:25px 22px auto}.wordmark{font-size:32px}.brand small{font-size:9px;max-width:135px}.theme-switch{width:112px;font-size:8px;padding-left:34px;padding-right:6px}.theme-switch.is-night{padding-left:6px;padding-right:34px}.is-night .theme-switch-thumb{transform:translateX(72px)}.login-panel form{padding:30px 25px;border-radius:22px}.login-panel h1{font-size:30px}.login-symbol{margin-bottom:22px}.login-caption{font-size:10px;bottom:22px}}
@media(max-height:800px) and (min-width:541px){.login{padding-top:110px;padding-bottom:60px}.login-header{top:24px}.login-panel form{padding:30px 34px}}
@media(max-height:620px) and (min-width:541px){.login-panel form{padding:25px 34px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.login-water-video{display:none}}