.code-page{
  padding:80px 0 72px;
}

.code-page main{
  display:grid;
  gap:32px;
  align-items:flex-start;
}

@media (min-width:960px){
  .code-page main{
    grid-template-columns:1.1fr 1fr;
  }
}

.code-page__intro h1{
  margin:0 0 16px;
  font-size:2.6rem;
  font-weight:800;
  color:var(--phosphor);
  text-shadow:0 0 .35em var(--glow1),0 0 .15em var(--glow2);
}

.code-page__intro p{
  margin:0 0 12px;
  font-size:1.05rem;
  line-height:1.7;
  color:var(--text);
}

.code-viewer{
  background:linear-gradient(180deg,rgba(6,26,48,0.92) 0%,rgba(2,12,24,0.9) 100%);
  border:1px solid rgba(136,170,204,0.28);
  border-radius:12px;
  box-shadow:0 35px 65px rgba(1,10,19,0.68);
  overflow:hidden;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

.code-viewer__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 18px;
  background:linear-gradient(135deg,rgba(28,57,91,0.72),rgba(9,26,49,0.82));
  border-bottom:1px solid rgba(136,170,204,0.28);
  color:var(--muted);
  font-size:.9rem;
}

.code-viewer__filename{
  font-weight:600;
  color:rgba(225,236,255,0.88);
}

.code-viewer__copy{
  background:rgba(0,178,226,0.12);
  border:1px solid rgba(0,178,226,0.38);
  color:rgba(225,236,255,0.92);
  font-size:.85rem;
  padding:6px 12px;
  border-radius:999px;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}

.code-viewer__copy:hover{
  background:rgba(0,178,226,0.22);
  border-color:rgba(0,178,226,0.5);
  transform:translateY(-1px);
}

.code-viewer__copy[data-state="copied"]{
  background:rgba(118,188,67,0.28);
  border-color:rgba(118,188,67,0.55);
  color:rgba(236,247,233,0.95);
}

.code-viewer pre{
  margin:0;
  padding:20px 22px;
  overflow:auto;
  font-size:.95rem;
  background:rgba(3,15,28,0.88);
  color:rgba(226,238,255,0.9);
  border-top:1px solid rgba(136,170,204,0.18);
}

.code-viewer pre code{
  display:block;
}

.code-viewer__footer{
  padding:12px 18px 16px;
  background:linear-gradient(135deg,rgba(15,31,54,0.72),rgba(6,16,32,0.8));
  border-top:1px solid rgba(136,170,204,0.24);
  font-size:.82rem;
  color:var(--muted);
}

.code-viewer__footer a{
  color:var(--accent);
  text-decoration:none;
}

.code-viewer__footer a:hover{
  text-decoration:underline;
}