:root{
  --cl-bg:#0b1220;
  --cl-border:rgba(255,255,255,.08);
  --cl-text:#eef5ff;
  --cl-muted:rgba(238,245,255,.70);
  --cl-blue:#4aa3ff;
  --cl-blue-2:#7cc3ff;
  --cl-white:#ffffff;
}

html,body{height:100%;}
body{
  background:
    radial-gradient(900px 500px at 20% 15%, rgba(74,163,255,.18), transparent 55%),
    radial-gradient(800px 500px at 80% 5%, rgba(124,195,255,.12), transparent 55%),
    linear-gradient(180deg, var(--cl-bg), #070b13 70%);
  color:var(--cl-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial;
}

a{color:var(--cl-blue-2); text-decoration:none;}
a:hover{color:var(--cl-white);}

.navbar{
  background: rgba(11,18,32,.78) !important;
  border-bottom:1px solid var(--cl-border);
  backdrop-filter: blur(10px);
}

.card{
  background: linear-gradient(180deg, rgba(15,26,43,.95), rgba(10,18,31,.95));
  border:1px solid var(--cl-border);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
}

.badge-soft{
  background: rgba(74,163,255,.12);
  border:1px solid rgba(74,163,255,.22);
  color: var(--cl-blue-2);
}

.btn-cl{
  background: linear-gradient(180deg, var(--cl-blue), #2c7fe0);
  border:none;
  color:#07101f;
  font-weight:800;
}
.btn-cl:hover{filter:brightness(1.05);}
.btn-outline-cl{
  border:1px solid rgba(74,163,255,.55);
  color: var(--cl-blue-2);
  background: transparent;
  font-weight:700;
}
.btn-outline-cl:hover{
  background: rgba(74,163,255,.12);
  color: var(--cl-white);
}

.kicker{
  color: rgba(124,195,255,.92);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 800;
  font-size: .78rem;
}

.muted{color:var(--cl-muted);}
.hr-soft{border-top:1px solid var(--cl-border);}

.codeblock{
  background: rgba(0,0,0,.35);
  border:1px solid var(--cl-border);
  border-radius: .75rem;
  padding: 1rem;
  overflow:auto;
  color: #d7e3ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .9rem;
}

.form-control, .form-select{
  background: rgba(255,255,255,.04);
  border:1px solid var(--cl-border);
  color: var(--cl-text);
}
.form-control:focus, .form-select:focus{
  background: rgba(255,255,255,.06);
  color: var(--cl-text);
  border-color: rgba(74,163,255,.55);
  box-shadow: none;
}
.alert{
  background: rgba(74,163,255,.10);
  border:1px solid rgba(74,163,255,.22);
  color: var(--cl-text);
}

.logo{
  width:28px;height:28px;border-radius:10px;
  background: radial-gradient(circle at 35% 35%, rgba(124,195,255,.9), rgba(74,163,255,.65));
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}