:root{
  --navy:#213C66;
  --navy-deep:#152B4D;
  --gray:#7A868C;
  --bg:#F5F7FA;
  --white:#FFFFFF;
  --teal:#2FA39A;
  --teal-soft:#E4F3F1;
  --line:#E3E8EF;
  --danger:#C0503F;
  --placeholder:#A9B3BD;
  --btn-disabled:#9AA6B5;
  --status-ok-text:#1D6D66;
  --status-err-bg:#FBEAE7;
  --state-inactive:#A9B3BD;
  --shadow-1:rgba(21,43,77,0.04);
  --shadow-2:rgba(21,43,77,0.12);
  --glow-1:rgba(33,60,102,0.05);
  --glow-2:rgba(47,163,154,0.06);
  --btn-hover:#152B4D;
  --radius:14px;
  color-scheme: light;
}

[data-theme="dark"]{
  --navy:#5B84C4;
  --navy-deep:#EEF3FA;
  --gray:#8B9AB0;
  --bg:#0D1524;
  --white:#16233A;
  --teal:#34C9B8;
  --teal-soft:rgba(52,201,184,0.14);
  --line:#263450;
  --danger:#E2786A;
  --placeholder:#5B6B82;
  --btn-disabled:#3A4A63;
  --status-ok-text:#7EE8D8;
  --status-err-bg:rgba(226,120,106,0.14);
  --state-inactive:#4B5C74;
  --shadow-1:rgba(0,0,0,0.35);
  --shadow-2:rgba(0,0,0,0.6);
  --glow-1:rgba(91,132,196,0.10);
  --glow-2:rgba(52,201,184,0.10);
  --btn-hover:#4A72B0;
  color-scheme: dark;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

body{
  background:var(--bg);
  background-image:
    radial-gradient(circle at 12% 8%, var(--glow-1) 0, transparent 45%),
    radial-gradient(circle at 88% 92%, var(--glow-2) 0, transparent 45%);
  font-family:'Inter', sans-serif;
  color:var(--navy-deep);
  min-height:100vh;
  display:flex;
  transition:background-color .2s ease, color .2s ease;
  flex-direction:column;
  align-items:center;
  padding:48px 20px 32px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:24px;
  color:var(--navy);
}
.brand .mark{
  width:26px;height:26px;
  border-radius:7px;
  background:linear-gradient(135deg,var(--navy),var(--teal));
  display:flex;align-items:center;justify-content:center;
}
.brand .mark svg{width:14px;height:14px;}
.brand span{
  font-family:'Space Grotesk',sans-serif;
  font-weight:600;
  font-size:15px;
  letter-spacing:0.02em;
}

.nav{
  display:flex;
  gap:4px;
  width:100%;
  max-width:320px;
  margin-bottom:28px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px;
}
.nav a{
  flex:1;
  text-align:center;
  font-family:'Space Grotesk',sans-serif;
  font-size:13px;
  font-weight:600;
  color:var(--gray);
  text-decoration:none;
  padding:9px 12px;
  border-radius:999px;
  transition:background .15s ease, color .15s ease;
}
.nav a:hover{color:var(--navy-deep);}
.nav a.active{background:var(--navy);color:var(--white);}

main{
  width:100%;
  max-width:460px;
}

.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:34px 32px 30px;
  box-shadow:0 1px 2px var(--shadow-1), 0 12px 32px -16px var(--shadow-2);
}

h1{
  font-family:'Space Grotesk',sans-serif;
  font-size:22px;
  font-weight:600;
  letter-spacing:-0.01em;
  margin:0 0 8px;
  color:var(--navy-deep);
}
.sub{
  font-size:14px;
  line-height:1.55;
  color:var(--gray);
  margin:0 0 28px;
}

footer{
  margin-top:30px;
  font-size:11.5px;
  color:var(--state-inactive);
  font-family:'IBM Plex Mono',monospace;
}

@media (max-width:480px){
  .card{padding:28px 22px 26px;}
  body{padding-top:32px;}
}

.theme-toggle{
  position:fixed;
  top:20px; right:20px;
  width:38px; height:38px;
  border-radius:50%;
  border:1.5px solid var(--line);
  background:var(--white);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  color:var(--navy);
  transition:border-color .15s ease, background .2s ease;
}
.theme-toggle:hover{border-color:var(--teal);}
.theme-toggle svg{width:18px;height:18px;}