@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --ink:#0d1117;
  --panel:#141b24;
  --panel-2:#1a2330;
  --line:#26313f;
  --accent:#ffb454;      /* amber signal light */
  --accent-dim:#8a6a3a;
  --cyan:#5fd1c9;        /* secondary accent - oscilloscope teal */
  --text:#dfe6ee;
  --text-dim:#8b98a8;
  --good:#5fd18d;
  --bad:#e26d6d;
  --radius:10px;
}

*{box-sizing:border-box;}

body{
  background:var(--ink);
  color:var(--text);
  font-family:'IBM Plex Mono', monospace;
  min-height:100vh;
}

h1,h2,h3,h4,.display-font{
  font-family:'Space Grotesk', sans-serif;
  letter-spacing:-0.01em;
}

a{ color:var(--accent); text-decoration:none; }
a:hover{ color:var(--cyan); }

/* ---------- Nav ---------- */
.navbar-crypto{
  background:var(--panel);
  border-bottom:1px solid var(--line);
}
.navbar-crypto .navbar-brand{
  font-family:'Space Grotesk', sans-serif;
  font-weight:700;
  color:var(--text);
  letter-spacing:-0.02em;
}
.navbar-crypto .navbar-brand span{ color:var(--accent); }
.navbar-crypto .nav-link{
  color:var(--text-dim);
  font-size:.9rem;
}
.navbar-crypto .nav-link.active, .navbar-crypto .nav-link:hover{
  color:var(--accent);
}

/* ---------- Landing hero ---------- */
.hero{
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(ellipse at top left, rgba(255,180,84,0.08), transparent 55%),
    radial-gradient(ellipse at bottom right, rgba(95,209,201,0.06), transparent 50%);
  padding:5rem 0 4rem;
}
.hero-eyebrow{
  color:var(--accent);
  font-size:.8rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}
.hero h1{
  font-size:3rem;
  font-weight:700;
  line-height:1.05;
  margin:.6rem 0 1.2rem;
}
.hero p.lead{
  color:var(--text-dim);
  max-width:640px;
  font-family:'Space Grotesk', sans-serif;
  font-size:1.1rem;
}
.bitstream{
  font-size:.72rem;
  color:var(--accent-dim);
  letter-spacing:.15em;
  word-break:break-all;
  line-height:1.9;
  opacity:.65;
}

/* ---------- Module cards ---------- */
.module-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.75rem;
  height:100%;
  transition:transform .15s ease, border-color .15s ease;
  display:block;
  position:relative;
  overflow:hidden;
}
.module-card:hover{
  transform:translateY(-3px);
  border-color:var(--accent-dim);
}
.module-card .tag{
  font-size:.68rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--cyan);
}
.module-card h3{
  color:var(--text);
  font-size:1.5rem;
  margin:.4rem 0 .5rem;
}
.module-card p{
  color:var(--text-dim);
  font-size:.88rem;
  margin-bottom:1rem;
}
.module-card .spec-row{
  display:flex;
  gap:1.2rem;
  font-size:.75rem;
  color:var(--text-dim);
  border-top:1px solid var(--line);
  padding-top:.8rem;
}
.module-card .spec-row b{ color:var(--text); }
.module-card .go{
  position:absolute; top:1.5rem; right:1.5rem;
  color:var(--accent-dim);
  font-size:1.3rem;
}
.module-card:hover .go{ color:var(--accent); }

/* ---------- Module page layout ---------- */
.module-header{
  border-bottom:1px solid var(--line);
  padding:2.2rem 0 1.6rem;
}
.module-header .tag{ color:var(--cyan); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;}
.module-header h1{ font-size:2.1rem; margin:.3rem 0 .4rem;}
.module-header p{ color:var(--text-dim); font-family:'Space Grotesk',sans-serif; max-width:680px;}

.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.5rem;
  margin-bottom:1.5rem;
}
.panel h5{
  font-family:'Space Grotesk',sans-serif;
  font-size:.95rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--accent);
  margin-bottom:1rem;
}

.form-label{ color:var(--text-dim); font-size:.8rem; letter-spacing:.03em; }
.form-control, .form-select{
  background:var(--panel-2);
  border:1px solid var(--line);
  color:var(--text);
  font-family:'IBM Plex Mono', monospace;
}
.form-control:focus, .form-select:focus{
  background:var(--panel-2);
  color:var(--text);
  border-color:var(--accent-dim);
  box-shadow:0 0 0 .2rem rgba(255,180,84,.15);
}
.form-control::placeholder{ color:#4c5a6a; }

.mode-toggle .btn-check:checked + label{
  background:var(--accent);
  color:#1a1206;
  border-color:var(--accent);
}
.mode-toggle label{
  border:1px solid var(--line);
  color:var(--text-dim);
  font-size:.85rem;
}

.btn-primary-crypto{
  background:var(--accent);
  border:none;
  color:#1a1206;
  font-weight:600;
  letter-spacing:.02em;
}
.btn-primary-crypto:hover{ background:#ffc36e; color:#1a1206;}
.btn-outline-crypto{
  background:transparent;
  border:1px solid var(--line);
  color:var(--text-dim);
}
.btn-outline-crypto:hover{ border-color:var(--text-dim); color:var(--text);}

/* result bit boxes */
.bitbox-row{ display:flex; flex-wrap:wrap; gap:.3rem; }
.bitbox{
  min-width:2.1rem;
  text-align:center;
  padding:.4rem .3rem;
  background:var(--panel-2);
  border:1px solid var(--accent-dim);
  border-radius:6px;
  color:var(--accent);
  font-size:.95rem;
  font-weight:600;
}
.result-hex{
  font-size:1.6rem;
  letter-spacing:.12em;
  color:var(--accent);
  font-weight:600;
}

/* solution steps */
.solution-toggle{ cursor:pointer; user-select:none; }
.step-section{
  border-left:2px solid var(--line);
  padding-left:1rem;
  margin-bottom:1rem;
}
.step-section-title{
  color:var(--cyan);
  font-family:'Space Grotesk',sans-serif;
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:.5rem;
}
.step-item{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  font-size:.82rem;
  padding:.5rem 0;
  border-bottom:1px dashed var(--line);
}
.step-item .step-label{ color:var(--text-dim); }
.step-item .step-value{
  color:var(--text);
  word-break:break-all;
  white-space:pre-wrap;
  line-height:1.5;
}
.step-item.highlight .step-value{ color:var(--accent); font-weight:600;}

/* state matrix (AES / S-AES column view) */
.state-matrix{
  display:inline-grid;
  gap:3px;
  margin:.4rem 0 .2rem;
  background:var(--line);
  padding:3px;
  border-radius:6px;
}
.state-matrix .cell{
  background:var(--panel-2);
  color:var(--accent);
  font-weight:600;
  font-size:.82rem;
  text-align:center;
  padding:.35rem .5rem;
  border-radius:3px;
  min-width:2.4rem;
}
.matrix-caption{
  font-size:.7rem;
  color:var(--text-dim);
  letter-spacing:.05em;
  text-transform:uppercase;
  margin-top:.3rem;
}

.footer-crypto{
  border-top:1px solid var(--line);
  color:var(--text-dim);
  font-size:.78rem;
  padding:2rem 0;
}

.error-msg{ color:var(--bad); font-size:.8rem; margin-top:.4rem; }

@media (max-width:768px){
  .hero h1{ font-size:2.1rem; }
}