:root{
  --bg:#eef2f5; --fg:#333; --muted:#666; --line:#e1e4e8; --card:#fff;
  --accent:#0099ff; --accent-h:#0082de; --input:#fff; --ring:#d1d5db;
}
@media(prefers-color-scheme:dark){
  :root{ --bg:#14181c; --fg:#dfe4e8; --muted:#8b949e; --line:#2a3138;
         --card:#1b2026; --input:#12171b; --ring:#3a424a; }
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--fg);position:relative;overflow-x:hidden}
body::after{content:"";position:absolute;width:700px;height:700px;border:1px solid var(--line);
  border-radius:50%;right:-150px;top:50%;transform:translateY(-50%);pointer-events:none;z-index:0}
.navbar{display:flex;justify-content:space-between;align-items:center;
  padding:18px 40px;font-size:13px;color:var(--muted);z-index:1;border-bottom:1px solid var(--line)}
.navbar img{height:14px;display:block}
.navbar-text{margin:0;font-size:13px}
.navbar-text span{color:var(--fg);font-weight:500}
.container{display:flex;align-items:center;justify-content:center;flex:1;
  padding:40px;gap:80px;max-width:1000px;margin:0 auto;width:100%;z-index:1}
.intro{flex:1;max-width:400px}
.intro h1{font-size:42px;font-weight:700;color:var(--fg);margin:0 0 15px;line-height:1.2;
  border-left:3px solid var(--accent);padding-left:15px}
.intro p{font-size:15px;color:var(--muted);margin:0;line-height:1.5;padding-left:18px}
.console{width:100%;max-width:380px}
.card{background:var(--card);padding:30px;border-radius:6px;
  border:1px solid var(--line);box-shadow:0 4px 12px rgba(0,0,0,.05)}
.card label{display:block;font-size:11px;font-weight:700;color:var(--muted);
  margin:0 0 8px;letter-spacing:.5px;text-transform:uppercase}
.card input[type=text],.card input[type=password]{width:100%;padding:10px 12px;font-size:14px;
  border:1px solid var(--ring);border-radius:4px;outline:none;
  background:var(--input);color:var(--fg);margin-bottom:20px;font-family:inherit}
.card input:focus{border-color:var(--accent)}
.btn{width:100%;background:var(--accent);color:#fff;padding:11px 16px;font-size:14px;
  font-weight:600;border:0;border-radius:4px;cursor:pointer;font-family:inherit}
.btn:hover{background:var(--accent-h)}
.alert{background:#fdecec;color:#a12622;border:1px solid #f5c6c4;border-radius:4px;
  padding:10px 12px;font-size:13px;margin-bottom:18px}
@media(prefers-color-scheme:dark){.alert{background:#2a1a1a;border-color:#5c2b2b;color:#f0a9a6}}
.small{text-align:center;margin:15px 0 0;font-size:13px}
.small a{color:var(--accent);text-decoration:none}
.rail{display:flex;justify-content:space-between;margin-top:25px;font-size:12px;color:var(--muted)}
.rail a{flex:1;text-decoration:none;color:var(--accent)}
.rail a:first-child{border-right:1px solid var(--line);padding-right:15px}
.rail a:last-child{padding-left:15px}
.rail span{display:block;color:var(--muted);margin-bottom:2px}
.rail strong{font-weight:500}
@media(max-width:768px){
  .container{flex-direction:column;gap:30px;padding:20px}
  .intro{text-align:center}
  .intro h1{border-left:0;padding-left:0}
  .intro p{padding-left:0}
  body::after{display:none}
}