:root{
  --accent:#dc143c;
  --bg:#0a0a0a;
  --card:rgba(255,255,255,0.03);
  --border:rgba(255,255,255,0.06);
  --text:#ffffff;
  --green:#00ff6a;
}

body{
  margin:0;
  background:#000;
  color:#fff;
  font-family:system-ui, sans-serif;
}

.sidebar{
  position:fixed;
  top:0;
  left:-260px;
  width:260px;
  height:100%;
  background:#0a0a0a;
  border-right:1px solid var(--border);
  padding-top:70px;
  transition:.3s;
  z-index:1000;
}
.sidebar.open{ left:0; }

.sidebar-title{
  padding:10px 22px;
  font-family:'Press Start 2P', cursive;
  font-size:11px;
  color:#777;
}

.sidebar a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 22px;
  color:#bbb;
  text-decoration:none;
  border-left:3px solid transparent;
  transition:.2s;
}

.sidebar a:hover{
  background:rgba(220,20,60,0.08);
  border-left:3px solid var(--accent);
  padding-left:28px;
}

.sidebar a.clicked{
  background:rgba(220,20,60,0.12);
  box-shadow:inset 0 0 12px rgba(220,20,60,.7);
}

.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.5);
  opacity:0;
  pointer-events:none;
  transition:.3s;
  z-index:900;
}
.overlay.active{
  opacity:1;
  pointer-events:auto;
}

.header{
  display:flex;
  justify-content:space-between;
  padding:15px 20px;
  align-items:center;
}

.menu-btn{
  background:none;
  border:none;
  color:white;
  font-size:22px;
  cursor:pointer;
}

.header h1{
  font-family:'Press Start 2P', cursive;
  font-size:14px;
}
.header h1 span{ color:var(--accent); }

.code-box{
  width:90%;
  max-width:1000px;
  margin:40px auto;
  background:#1e1e1e;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 0 20px rgba(0,0,0,0.7);
}

.code-header{
  background:#2d2d2d;
  padding:8px 12px;
  position:relative;
  display:flex;
  justify-content:flex-end;
}

.code-header::before{
  content:"";
  position:absolute;
  left:12px;
  width:12px;height:12px;border-radius:50%;
  background:#ff5f56;
  box-shadow:18px 0 #ffbd2e,36px 0 #27c93f;
}

.copy-btn{
  background:linear-gradient(45deg,#dc143c,#ff003c);
  border:none;
  color:white;
  padding:6px 14px;
  border-radius:6px;
  font-family:'Press Start 2P', cursive;
  font-size:10px;
  cursor:pointer;
}

.copy-btn.copied{
  background:var(--green);
  color:#000;
}

.code-area{
  display:flex;
  font-family:Consolas, monospace;
}

.lines{
  padding:12px;
  color:#777;
  background:#1b1b1b;
  user-select:none;
  text-align:right;
}

.code{
  padding:12px;
  white-space:pre;
  overflow:auto;
  flex:1;
}

/* VS Code colors */
.token.keyword{color:#569cd6;}
.token.string{color:#ce9178;}
.token.comment{color:#4f6b4f;font-style:italic;}
.token.number{color:#b5cea8;}
.token.function{color:#dcdcaa;}
.token.boolean{color:#569cd6;}
/* ===== NEVE ===== */
.snow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.snow::before,
.snow::after {
  content: "";
  position: absolute;
  inset: -200%;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.5px 1.5px at 80% 40%, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 50% 70%, rgba(255,255,255,.5), transparent),
    radial-gradient(2px 2px at 10% 80%, rgba(255,255,255,.7), transparent);
  background-size: 400px 400px;
  animation: snow 60s linear infinite;
}

.snow::after {
  animation-duration: 120s;
  opacity: .6;
}

@keyframes snow {
  from { transform: translateY(0); }
  to { transform: translateY(50%); }
}
a,
button,
.card,
.verify-token button,
.btn,
.back-btn {
  -webkit-tap-highlight-color: transparent !important;
  tap-highlight-color: transparent !important;
  outline: none !important;
}

a:focus,
button:focus,
.card:focus,
.btn:focus {
  outline: none !important;
  box-shadow: none !important;
}

* {
  -webkit-user-select: none;
  user-select: none;
}
.sidebar-scroll-area {
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
}

.sidebar-scroll-area::-webkit-scrollbar {
  width: 6px;
}

.sidebar-scroll-area::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 10px;
}