:root{
  --bg:#0f1724;
  --card:#0b1220;
  --accent:#06b6d4;
  --muted:#9fb0c8;
  --text:#e6eef6;
  --glass: rgba(255,255,255,0.02);
  --danger: rgba(255,0,0,0.06);
  --disabled: rgba(255,255,255,0.03);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  background:linear-gradient(180deg,#071021 0%,var(--bg) 100%);
  color:var(--text);
  padding:28px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{
  max-width:920px;
  margin:0 auto;
}

.header{
  display:flex;
  gap:16px;
  align-items:center;
}

.logoWrap{
  width:72px;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--glass);
  border-radius:12px;
  flex:0 0 72px;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
  text-decoration:none;
  border:1px solid rgba(255,255,255,0.02);
}

.logoWrap:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(6,182,212,0.06);
}

.headerText h1{
  margin:0;
  font-size:24px;
  line-height:1;
}

.tagline{
  margin:6px 0 0 0;
  color:var(--muted);
  font-size:13px;
}

.card{
  background:rgba(255,255,255,0.02);
  border-radius:12px;
  padding:18px;
  margin-top:18px;
  box-shadow:0 6px 18px rgba(2,6,23,0.6);
}

.card h2{ margin:0 0 8px 0; font-size:18px }

.actions{
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:12px;
  flex-wrap:wrap;
}

.btn{
  padding:10px 14px;
  border-radius:8px;
  border:none;
  cursor:pointer;
  font-weight:600;
  background:var(--accent);
  color:#042027;
  box-shadow:0 6px 14px rgba(6,182,212,0.08);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.btn.disabled{
  background:var(--disabled);
  color:rgba(255,255,255,0.5);
  cursor:not-allowed;
  box-shadow:none;
}

.linkWrap{
  display:flex;
  align-items:center;
  gap:8px;
}

.link{
  color:var(--muted);
  text-decoration:underline;
  font-size:14px;
}

.note{ color:var(--muted); margin-top:12px; font-size:13px }

ol{ padding-left:18px; margin:8px 0 0 0 }
li{ margin:8px 0; color:var(--muted) }

.warning{
  background:var(--danger);
  border-left:4px solid rgba(255,0,0,0.18);
  padding:10px;
  margin-top:12px;
  color:#ffd6d6;
  border-radius:6px;
}

.footer{ margin-top:18px; color:var(--muted); font-size:13px }

.small{ font-size:13px; color:var(--muted) }

@media (max-width:520px){
  .header{ flex-direction:column; align-items:flex-start; gap:8px }
  .logoWrap{ width:64px; height:64px }
  .container{ padding:18px }
}