:root{
  --bg:#0b0d12;
  --panel:#121622;
  --line:#233049;
  --line2:#1b253a;
  --text:#e9ecf1;
  --muted:#93a1b6;
  --primary:#2563eb;
  --primary2:#1d4ed8;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background: radial-gradient(1200px 600px at 20% -10%, #1a2440 0%, rgba(26,36,64,0) 55%),
              radial-gradient(1000px 600px at 80% 0%, #132457 0%, rgba(19,36,87,0) 60%),
              var(--bg);
  color:var(--text);
  min-height:100dvh;
}
.wrap{ max-width:900px; margin:auto; padding:12px; }
@media (min-width:600px){ .wrap{ padding:24px } }

.top{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}
h1{ margin:0; font-size:20px; }
@media (min-width:600px){ h1{ font-size:24px } }
.subhead{ color:var(--muted); font-size:12.5px; margin-top:6px }
.muted{ color:var(--muted); font-size:13px }

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--line2);
  border-radius:18px;
  padding:20px;
  margin:18px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  max-width:360px;
}

.loginBox{ display:flex; flex-direction:column; gap:10px; }
.loginTtl{ font-weight:800; margin-bottom:4px; }
.loginBox input{
  background: rgba(0,0,0,.22);
  color: var(--text);
  border:1px solid var(--line2);
  border-radius:12px;
  padding:10px 12px;
  outline:none;
  font-size:16px;
}
.err{ color:#fca5a5; font-size:12px; min-height:16px; }

.btn{
  border:1px solid var(--line2);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding:10px 12px;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
  min-height:44px;
  font-size:13px;
}
.btn.primary{
  background: linear-gradient(180deg, rgba(37,99,235,.95), rgba(29,78,216,.95));
  border-color: rgba(29,78,216,.9);
}

.hide{ display:none !important; }

.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:12px;
}
@media (min-width:600px){ .grid{ grid-template-columns:1fr 1fr } }

.toolCard{
  display:flex; flex-direction:column; gap:6px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--line2);
  border-radius:16px;
  padding:16px 18px;
  text-decoration:none;
  color:var(--text);
  transition: border-color .15s, transform .15s;
}
.toolCard:hover{ border-color: rgba(147,197,253,.5); transform: translateY(-2px); }
.toolCard .ttl{ font-weight:850; font-size:15px; }
.toolCard .desc{ font-size:12.5px; color:var(--muted); }