:root{
--bg: #000000;
--panel: #70ff77;
--panel-hover:#ffffff;
--text:#e6e9f5;
--muted:#b7c0e0;
--brand:#000000;
}


*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
body{
background: radial-gradient(1200px 1200px at 10% -10%, #1f2022 0%, rgba(26,37,80,0) 60%), var(--bg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
color:var(--text);
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}


/* Navbar */
.navbar{display:flex;align-items:center;padding:.75rem 1rem;border-bottom:1px solid #000000;background:linear-gradient(180deg, rgba(16, 17, 22, 0.85), rgba(8,12,30,.6));position:sticky;top:0;z-index:10}
.brand{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--text);font-weight:600}
.brand .icon{width:36px;height:36px;display:inline-grid;place-items:center;border-radius:10px;background:#0f1533;border:1px solid #2b3566}


.container{max-width:1100px;margin:0 auto;padding:2rem 1rem 3rem}
.page-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:1rem 0 1.25rem}
.page-head h1{font-size:clamp(1.25rem,2.5vw,1.75rem);margin:0}
.muted{color:var(--muted)}


.page-head-2{display:flex;flex-direction: column;align-items:baseline;justify-content:space-between;gap:1rem;margin:1rem 0 1.25rem}
.page-head-2 h1{font-size:clamp(1.25rem,2.5vw,1.75rem);margin:0}



.nav-logo {
  height: 30px; /* reduced size */
  width: auto;
}

/* Grid */
.cards-grid{display:grid;gap:1rem;grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.cards-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.cards-grid{grid-template-columns:1fr}}


.choice{position:relative}
.choice input[type="radio"]{
position:absolute;inset:0;margin:0;padding:0;opacity:0;cursor:pointer;width:100%;height:100%;z-index:2
}


.card{
display:grid;gap:.5rem;padding:1rem;border-radius:1rem;background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));border:1px solid #2b3566;min-height:130px;cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .2s ease,box-shadow .2s ease;position:relative;overflow:hidden
}
.card:hover{transform:translateY(-3px);background:var(--panel-hover)}

/* Cardactive as a button, visually similar to .card but semantic button */
.cardactive {
  display: grid;
  gap: .5rem;
  padding: 1rem;
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border: 1px solid #2b3566;
  min-height: 80px;
  min-width: 320px;
  width: 100%;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .2s ease, box-shadow .2s ease;
  position: relative;
  overflow: hidden;
  font: inherit;
  color: inherit;
  outline: none;
  box-shadow: none;
}
.cardactive:hover, .cardactive:focus {
  transform: translateY(-3px);
  background: var(--panel-hover);
  border-color: var(--brand, #4b8fff);
  box-shadow: 0 0 0 4px rgba(122,162,255,.12),0 10px 30px rgba(10,25,60,.15);
}
.cardactive:active {
  transform: translateY(0);
  background: var(--panel-hover);
  border-color: var(--brand, #4b8fff);
}
.cardactive::-moz-focus-inner {
  border: 0;
}

.tac {
  display: grid;
  gap: .5rem;
  padding: 1rem;
  border-radius: 1rem;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border: 1px solid #2b3566;
  min-height: 80px;
  min-width: 320px;
  width: 100%;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, background .2s ease, box-shadow .2s ease;
  position: relative;
  overflow: hidden;
  font: inherit;
  color: inherit;
  outline: none;
  box-shadow: none;
}


/* Checked state using adjacent sibling selector */
.choice input[type="radio"]:checked + .card{
border-color:var(--brand);box-shadow:0 0 0 4px rgba(122,162,255,.12),0 10px 30px rgba(10,25,60,.35);background:linear-gradient(180deg, rgba(122,162,255,.06), rgba(255,255,255,0));
}


/* show an accent bar on the left when selected */
.choice input[type="radio"]:checked + .card::before{
content:'';position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,var(--brand),#4b8fff);border-top-left-radius:1rem;border-bottom-left-radius:1rem;}


.card h3{margin:.25rem 0 .25rem;font-size:1.05rem;font-weight:700}
.pill{justify-self:start;padding:.25rem .5rem;border-radius:999px;font-size:.75rem;color:var(--muted);background:#0f1633;border:1px solid #2b3566}


/* checkmark */
.check{position:absolute;right:.75rem;top:.75rem;font-weight:700;opacity:0;transform:scale(.9);transition:opacity .15s ease,transform .15s ease}
.choice input[type="radio"]:checked + .card .check{opacity:1;transform:scale(1)}


.actions{margin-top:1.25rem;display:flex;gap:.5rem}
.btn{appearance:none;border:1px solid #2b3566;background:#0f1633;color:var(--text);padding:.6rem 1rem;border-radius:.9rem;font-weight:600;cursor:pointer}
.btn.primary{background:linear-gradient(180deg,#1a2f6b,#162654);border-color:#3a4992}
.btn:hover{transform:translateY(-1px)}


/* small helpers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.login-form {
max-width: 400px;
margin: 2rem auto;
display: grid;
gap: 1.25rem;
background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
border: 1px solid #2b3566;
border-radius: 1rem;
padding: 2rem;
box-shadow: 0 8px 20px rgba(5,10,30,.2);
}


.form-group {
display: grid;
gap: 0.5rem;
}


.input {
padding: 0.75rem 1rem;
border-radius: 0.75rem;
border: 1px solid #2b3566;
background: #0f1633;
color: var(--text);
font-size: 1rem;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}


.input::placeholder {
color: var(--muted);
}


.input:focus {
border-color: var(--brand);
box-shadow: 0 0 0 3px rgba(122,162,255,.2);
}