:root{
  --bg:#0b0f14;
  --panel:#0f1621;
  --fg:#e6edf3;
  --muted:#9aa4b2;
  --line:#243041;
  --accent:#58a6ff;
  --accent2:#7ee787;
}

body{
  background:var(--bg);
  color:var(--fg);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
}

.pixel{ font-family:"Press Start 2P", monospace; letter-spacing:.03em; }
.hero-title{ font-size:1.1rem; }
.menu-label{ font-size:0.7rem; }

.vscode-frame{
  border:1px solid var(--line);
  background:linear-gradient(0deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  box-shadow:0 0 0 1px rgba(0,0,0,.35) inset;
}

.rule{ border-top:1px solid var(--line); }

.navbar-cyber{
  background:rgba(11,15,20,0.92);
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--line);
}

.navbar-brand.pixel {
  color: var(--accent);
  text-shadow:
    0 0 4px rgba(88,166,255,0.4),
    0 0 12px rgba(88,166,255,0.15);
}

.nav-link{ color:var(--muted)!important; }
.nav-link:hover,.nav-link:focus{ color:var(--fg)!important; }

.btn-cyber{
  border:1px solid var(--line);
  color:var(--fg);
  background:transparent;
}
.btn-cyber:hover{ border-color:var(--accent); color:var(--fg); }

.badge-cyber{
  border:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  font-weight:500;
}

.cursor::after{
  content:"_";
  margin-left:.35rem;
  color:var(--accent2);
  animation:blink 1s steps(2,end) infinite;
}
@keyframes blink{ 50%{opacity:0} }

section{ scroll-margin-top: 84px; }

.section-title{
  font-size:.9rem;
  color:var(--accent);
  margin-bottom:.75rem;
}

.lead-text{ color:var(--muted); line-height:1.8; }

.thumb{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border:1px solid var(--line);
  background:#0a0d12;
}

.kv{ font-size:.95rem; color:var(--muted); }

.mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono","Courier New", monospace;
}

/* modal look */
.modal-content{
  background:var(--panel);
  border:1px solid var(--line);
  color:var(--fg);
}
.modal-header,.modal-footer{ border-color:var(--line); }
.modal-title-pixel{ font-size:.9rem; color:var(--accent); }

.form-control, .form-select{
  background:#0b0f14;
  border:1px solid var(--line);
  color:var(--fg);
}
.form-control:focus, .form-select:focus{
  border-color:var(--accent);
  box-shadow:none;
}
.form-text{ color:var(--muted)!important; }

.link-cyber{
  color:var(--accent2);
  text-decoration:none;
  cursor:pointer;
}
.link-cyber:hover{ opacity:.85; }


/* ===== Lyrics page add-on ===== */
.album-art{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--line);
  background: #0a0d12;
}

.lyric-page-title{
  font-size: 0.95rem;
  color: var(--accent);
}

.track-title{
  font-size: 0.85rem;
  color: var(--fg);
}

.lyrics-box{
  margin: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(11, 15, 20, 0.6);
  color: var(--fg);
  line-height: 1.9;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
               "Liberation Mono","Courier New", monospace;
  min-height: 260px;
  opacity: 0.0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease;
}

.lyrics-box.is-on{
  opacity: 1.0;
  transform: translateY(0);
}