:root{
  --blue:#0A5CFF; --cyan:#00D4FF; --ink:#0F1B2D; --body:#3A4A63; --mute:#7A8AA3;
  --line:#E3EAF5; --tint:#EEF5FF; --bg:#fff; --good:#0E9F6E; --bad:#D93025;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:Manrope,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; flex-direction:column;
}
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(105deg,transparent 38%,rgba(10,92,255,.05) 38.1%,transparent 38.6%),
    linear-gradient(75deg,transparent 62%,rgba(0,212,255,.06) 62.1%,transparent 62.7%);
}
a{color:var(--blue)}
header.bar{
  display:flex; align-items:center; gap:12px;
  padding:18px 24px; max-width:1100px; width:100%; margin:0 auto;
}
header.bar .mark{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
header.bar .mark b{font-size:19px; font-weight:800; letter-spacing:-.02em}
header.bar .spacer{flex:1}
header.bar a.quiet{color:var(--body); text-decoration:none; font-weight:600; font-size:15px}
header.bar a.quiet:hover{color:var(--blue)}

main{flex:1; display:flex; align-items:flex-start; justify-content:center; padding:14px 20px 60px}
.card{
  width:100%; max-width:430px; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 30px 26px; box-shadow:0 18px 40px -28px rgba(10,35,80,.5);
}
.card.wide{max-width:620px}
body.plain main{align-items:center}
.card.centred{text-align:center; margin:auto; padding:38px 30px 32px}
.card.centred .crest{display:block; margin:0 auto 16px}
.card.centred h1{margin-bottom:10px}
.card.centred .sub{margin:0 auto 24px; max-width:34ch}

h1{font-size:27px; margin:0 0 6px; letter-spacing:-.03em; font-weight:800}
.sub{color:var(--mute); font-size:15px; margin:0 0 22px}
label{display:block; font-size:13px; font-weight:700; color:var(--body); margin:0 0 6px}
input[type=text],input[type=email],input[type=password]{
  width:100%; padding:13px 14px; font:inherit; font-size:15px;
  border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
input:focus{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(10,92,255,.15)}
input:disabled{background:#F6F9FE; color:var(--mute)}
.field{margin:0 0 16px}
.row{display:flex; align-items:center; gap:9px; margin:0 0 18px; font-size:14px; color:var(--body)}
.btn{
  display:block; width:100%; padding:14px; font:inherit; font-size:16px; font-weight:700;
  background:var(--blue); color:#fff; border:0; border-radius:10px; cursor:pointer;
  text-align:center; text-decoration:none; transition:background .15s, transform .05s;
}
.btn:hover{background:#0848CC}
.btn:active{transform:translateY(1px)}
.btn[disabled]{background:#9FBEF8; cursor:default}
.btn.ghost{background:#fff; color:var(--blue); border:1px solid var(--line)}
.btn.ghost:hover{background:var(--tint)}
.note{
  margin:16px 0 0; padding:12px 14px; border-radius:10px; font-size:14px; line-height:1.5;
  display:none;
}
.note.show{display:block}
.note.err{background:#FDECEA; color:#8B1A12}
.note.ok{background:#E8F7F1; color:#0B6B4A}
.foot{margin:20px 0 0; font-size:14px; color:var(--body); text-align:center}
.foot a{font-weight:600}
.hint{font-size:13px; color:var(--mute); margin:6px 0 0}
.badge{
  display:inline-block; padding:4px 10px; border-radius:999px; background:var(--tint);
  color:var(--blue); font-size:12px; font-weight:700; vertical-align:middle;
}
.apps{list-style:none; margin:18px 0 0; padding:0; border-top:1px solid var(--line)}
.apps li{
  display:flex; align-items:center; gap:12px; padding:15px 2px;
  border-bottom:1px solid var(--line);
}
.apps .nm{flex:1; font-weight:700; font-size:15px}
.apps .st{font-size:13px; color:var(--mute); font-weight:600}
.apps .st.on{color:var(--good)}
.apps .st.soon{color:#B26A00}
.apps a.go{font-size:14px; font-weight:700; text-decoration:none}
@media (max-width:480px){
  .card{padding:24px 20px; border-radius:12px}
  h1{font-size:24px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}