/* GENERATED from app/templates/login.html by tools/build_css.py.
* Loaded ONLY by index.php. Nothing else may link it: it styles the
* bare `body`, which is fine on a page of its own and was not fine
* when it was concatenated into the shared sheet (2026-08-08).
*/
*{box-sizing:border-box;margin:0;padding:0}
@keyframes bgShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes cardIn{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
@keyframes rowIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(99,102,241,.45)}50%{box-shadow:0 0 0 10px rgba(99,102,241,0)}}
/* Each row holds two identical halves, so translating exactly -50% lands the
second half where the first began and the loop is seamless at any width. */
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
html,body{height:100%}
body{font-family:'Inter',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
background:linear-gradient(135deg,#070b18,#161345,#0a1030,#070b18);background-size:300% 300%;
animation:bgShift 22s ease infinite;min-height:100vh;display:flex;align-items:center;
justify-content:center;overflow:hidden;position:relative;color:#1e293b}
/* ---- drifting weeks of duty roster ---- */
.fleet{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;
mask-image:radial-gradient(ellipse at 50% 45%,transparent 20%,#000 62%);
-webkit-mask-image:radial-gradient(ellipse at 50% 45%,transparent 20%,#000 62%)}
/* Spacing is a trailing margin per item, not flex `gap`: gap is omitted after
the final child, which would leave each half a half-gap short and make the
-50% loop stutter. */
.fleet .row{position:absolute;display:flex;width:max-content;
animation:drift linear infinite}
.fleet .row.r1{top:9%;animation-duration:78s;opacity:.20}
.fleet .row.r2{top:38%;animation-duration:116s;opacity:.13}
.fleet .row.r3{top:66%;animation-duration:94s;opacity:.17}
.fleet svg{width:118px;height:auto;color:#8ab4ff;margin-right:120px;flex:none}
.fleet .row.r2 svg{width:168px;color:#a78bfa}
.fleet .row.r3 svg{width:96px;color:#38bdf8}
.grid-overlay{position:fixed;inset:0;z-index:1;pointer-events:none;
background-image:linear-gradient(rgba(99,102,241,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(99,102,241,.05) 1px,transparent 1px);
background-size:44px 44px;
mask-image:radial-gradient(circle at 50% 45%,#000,transparent 75%);
-webkit-mask-image:radial-gradient(circle at 50% 45%,#000,transparent 75%)}
.orb{position:fixed;border-radius:50%;filter:blur(70px);opacity:.45;z-index:0;pointer-events:none}
.orb1{width:340px;height:340px;background:radial-gradient(circle,#3b82f6,transparent 70%);top:-90px;left:-60px}
.orb2{width:300px;height:300px;background:radial-gradient(circle,#8b5cf6,transparent 70%);bottom:-80px;right:-40px}
.stage{position:relative;z-index:3;width:404px;max-width:92vw;
animation:cardIn .7s cubic-bezier(.22,1,.36,1) both}
.login-card{position:relative;background:rgba(255,255,255,.97);border-radius:20px;
box-shadow:0 30px 80px rgba(0,0,0,.5);padding:36px 34px;overflow:hidden}
.login-card::before{content:'';position:absolute;inset:0;border-radius:20px;padding:1.5px;
background:linear-gradient(135deg,rgba(59,130,246,.7),rgba(139,92,246,.5),rgba(6,182,212,.6));
-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.brand{display:flex;align-items:center;gap:13px}
.brand-icon{width:50px;height:50px;background:linear-gradient(135deg,#3b82f6,#8b5cf6);
background-size:180% 180%;animation:gradientShift 6s ease infinite;border-radius:14px;
display:flex;align-items:center;justify-content:center;
box-shadow:0 8px 20px rgba(59,130,246,.45);flex:none}
.brand h1{font-size:19px;font-weight:800;color:#0f172a;letter-spacing:.02em}
.brand small{font-size:11.5px;color:#94a3b8;font-weight:600}
.tagline{font-size:12.5px;color:#64748b;margin:15px 0 2px;line-height:1.55}
.tagline b{color:#4f46e5}
.fld{animation:rowIn .55s ease both}
.fld:nth-of-type(1){animation-delay:.14s}.fld:nth-of-type(2){animation-delay:.22s}
label{font-size:12.5px;font-weight:700;color:#374151;display:block;margin:16px 0 6px}
.ip{position:relative}
.ip svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#94a3b8;pointer-events:none}
input{width:100%;padding:12px 13px 12px 40px;border:1px solid #d1d5db;border-radius:11px;
font-size:14px;background:#f8fafc;transition:border-color .2s,box-shadow .2s,background .2s;
font-family:inherit;color:#0f172a}
input:focus{outline:none;border-color:#3b82f6;background:#fff;box-shadow:0 0 0 4px rgba(59,130,246,.15)}
button.signin{width:100%;margin-top:24px;padding:13px;
background:linear-gradient(135deg,#3b82f6,#4f46e5,#8b5cf6);background-size:180% 180%;
animation:gradientShift 7s ease infinite;color:#fff;border:none;border-radius:11px;
font-size:14.5px;font-weight:800;cursor:pointer;font-family:inherit;
transition:transform .16s,box-shadow .25s,filter .2s;box-shadow:0 8px 22px rgba(59,130,246,.4)}
button.signin:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(59,130,246,.5);filter:brightness(1.06)}
/* P.A.T.S. has `transform:none scale(.98)` here, which is not a valid value
and is dropped, so its button does not react to the press. Fixed. */
button.signin:active{transform:scale(.98)}
button.signin:disabled{opacity:.6;cursor:default;transform:none}
.err{background:#fee2e2;color:#991b1b;border:1px solid #fecaca;padding:10px 12px;
border-radius:9px;font-size:12.5px;margin-top:16px;animation:rowIn .4s ease both}
.note{background:#eff6ff;color:#1e40af;border:1px solid #bfdbfe;padding:10px 12px;
border-radius:9px;font-size:12.5px;margin-top:16px;line-height:1.5}
/* The row that swaps between the two sign-in panels on the WEBSITE. The
console has one door and never shows it; the rule lives here because
tools/build_css.py generates assets/login.css from this block, and the
sign-in screen loads nothing else. Without it the row rendered unstyled:
.guestrow is defined in app.css, which this page deliberately does not
load. */
.guestrow{margin-top:22px;padding-top:16px;border-top:1px solid rgba(148,163,184,.25);
display:flex;align-items:center;justify-content:space-between;gap:10px;
font-size:12.5px;color:#94a3b8}
.guestrow a{color:#93c5fd;font-weight:600;text-decoration:none;white-space:nowrap}
.guestrow a:hover{text-decoration:underline}
.guestrow a.altbtn{padding:7px 13px;border-radius:8px;font-weight:700;
border:1px solid rgba(147,197,253,.45);background:rgba(59,130,246,.12);
transition:background .18s ease,border-color .18s ease}
.guestrow a.altbtn:hover{background:rgba(59,130,246,.24);
border-color:rgba(147,197,253,.75);text-decoration:none}
.foot{margin-top:20px;font-size:11px;color:#94a3b8;text-align:center;display:flex;
align-items:center;justify-content:center;gap:7px}
.foot .lk{width:8px;height:8px;border-radius:50%;background:#22c55e;animation:pulseGlow 2.4s infinite}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}