:root{
  --ink:#111417;
  --paper:#ffffff;
  --accent:#1a6cf5;
  --manage:#5D6D7E;
  --access:#34495E;
  --panel-text:#F0F2F4;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'DM Mono',monospace;
  background:var(--paper);
  color:var(--ink);
  display:flex;flex-direction:column;min-height:100vh;
}

/* ---------- Navbar ---------- */
.nav{
  display:flex;align-items:center;gap:1.25rem;
  padding:.9rem 2rem;border-bottom:1px solid #e4e7ea;background:var(--paper);
  font-variant-caps:small-caps;
}
.nav__logo img{height:34px;display:block}
.nav__brand{
  font-family:'Bebas Neue',sans-serif;font-size:1.55rem;letter-spacing:.06em;
  color:var(--ink);text-decoration:none;line-height:1;
}
.nav__links{margin-left:auto;display:flex;gap:1.75rem}
.nav__links a{
  color:var(--ink);text-decoration:none;font-size:.9rem;
  font-variant-caps:small-caps;letter-spacing:.03em;
  border-bottom:1px solid transparent;padding-bottom:2px;
}
.nav__links a:hover,.nav__links a:focus-visible{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- Split panels ---------- */
.split{flex:1;display:grid;grid-template-columns:1fr 1fr;min-height:0}
.panel{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:4rem 2rem;color:var(--panel-text);
}
.panel--manage{background:var(--manage)}
.panel--access{background:var(--access)}
.panel h1{
  font-family:'Bebas Neue',sans-serif;font-size:clamp(2.2rem,4.5vw,3.4rem);
  letter-spacing:.05em;font-weight:400;margin-bottom:2.5rem;color:var(--panel-text);
}
.panel form{display:flex;flex-direction:column;align-items:center}
.code{display:flex;align-items:center;gap:.55rem}
.code input{
  width:3.4rem;height:3.6rem;text-align:center;
  font-family:'DM Mono',monospace;font-size:1.35rem;color:var(--panel-text);
  background:rgba(240,242,244,.08);
  border:1px solid rgba(240,242,244,.45);border-radius:4px;
  outline:none;caret-color:var(--panel-text);
}
.code input:focus{border-color:var(--panel-text);background:rgba(240,242,244,.14)}
.code .sep{font-size:1.3rem;opacity:.6;user-select:none}
.panel .actions{margin-top:2rem;min-height:3rem;display:flex;align-items:center;justify-content:center;width:100%}
.btn{
  font-family:'Open Sans',sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.08em;
  padding:.55rem 1.8rem;border:1px solid var(--panel-text);border-radius:999px;
  background:transparent;color:var(--panel-text);cursor:pointer;
  text-decoration:none;display:inline-block;
  transition:background .15s ease,color .15s ease;
}
.btn:hover,.btn:focus-visible{background:var(--panel-text)}
.panel--manage .btn:hover,.panel--manage .btn:focus-visible{color:var(--manage)}
.panel--access .btn:hover,.panel--access .btn:focus-visible{color:var(--access)}
.btn--next{background:var(--panel-text)}
.panel--manage .btn--next{color:var(--manage)}
.panel--access .btn--next{color:var(--access)}
.msg{margin-top:1rem;font-size:.8rem;opacity:.85;min-height:1.1rem;text-align:center}

/* ---------- Denied ---------- */
.denied{
  flex:1;display:flex;align-items:center;justify-content:center;
  background:var(--access);color:var(--panel-text);
}
.denied p{
  font-family:'Bebas Neue',sans-serif;font-size:clamp(2rem,5vw,3.5rem);letter-spacing:.06em;
}

/* ---------- Footer ---------- */
.footer{
  border-top:1px solid #e4e7ea;background:var(--paper);
  padding:1.4rem 2rem;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;
  font-size:.72rem;color:#5a6270;
}
.footer a{color:#5a6270;text-decoration:none}
.footer a:hover{color:var(--accent)}
.footer .foot-right{margin-left:auto;display:flex;gap:1.25rem}

@media (max-width:760px){
  .split{grid-template-columns:1fr}
  .nav{flex-wrap:wrap;gap:.75rem;justify-content:center}
  .nav__links{margin-left:0;width:100%;gap:1.1rem;justify-content:center}
  .code input{width:2.9rem;height:3.2rem;font-size:1.15rem}
  .footer{flex-direction:column;gap:.9rem;text-align:center}
  .footer .foot-right{margin-left:0;justify-content:center}
}