:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: radial-gradient(1200px 700px at 50% -10%, #171B26 0%, #0B0D12 60%);
  color: #E6E8EE;
  font: 15px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.login { min-height: 100%; display: grid; place-items: center; padding: 24px calc(24px + env(safe-area-inset-right)) 24px calc(24px + env(safe-area-inset-left)); }
.card {
  width: 100%; max-width: 400px; text-align: center;
  background: #12151C; border: 1px solid #232838; border-radius: 18px;
  padding: 34px 30px calc(30px + env(safe-area-inset-bottom));
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.7);
}
.brand { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px; color: #E6E8EE; }
.brand .mark { width: 30px; height: 30px; color: #E6E8EE; display: inline-flex; }
.brand .mark svg { width: 100%; height: 100%; }
.brand .name { font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.brand .tag { color: #7C84F8; font-weight: 600; }
h1 { font-size: 21px; margin: 0 0 8px; letter-spacing: -.015em; }
.sub { color: #9AA1B2; margin: 0 0 24px; }
.gbtn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px 18px; border-radius: 12px;
  background: #fff; color: #1F2430; text-decoration: none; font-weight: 600; font-size: 15px;
  transition: transform .08s ease, box-shadow .15s ease;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,.6);
}
.gbtn:active { transform: translateY(1px); }
.note { margin: 20px 0 0; font-size: 12px; color: #5C6478; }