/* Buttons, icons, interactive bits, and scrollbars (extracted) */

/* buttons */
.grid-btn{ display:inline-block; margin:0 0 8px 0; color:var(--accent); background:transparent; border:none; padding:8px 18px; border-radius:10px; font-size:28px; font-weight:600; cursor:pointer; }
.btn{ background:linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.45)); border:1px solid rgba(57,255,20,0.18); color:#ffffff; padding:10px 14px; border-radius:8px; cursor:pointer; font-weight:700; transition: all 180ms ease; }
.interactive { transition: transform 160ms ease, box-shadow 200ms ease; position: relative; }
.interactive.active { animation: glow-pulse 840ms ease-out; box-shadow:0 18px 64px rgba(57,255,20,0.32); border-color:var(--green-2); color:var(--green-2); background:linear-gradient(180deg, rgba(57,255,20,0.06), rgba(0,0,0,0.45)); }
@keyframes glow-pulse { 0%{box-shadow:0 0 0 rgba(57,255,20,0);} 30%{box-shadow:0 0 28px rgba(57,255,20,0.45); transform: translateY(-2px);} 60%{box-shadow:0 0 44px rgba(57,255,20,0.32); transform: translateY(-3px);} 100%{box-shadow:0 0 0 rgba(57,255,20,0);} }

/* link icons */
.link-icon{width:18px;height:18px;object-fit:contain;margin-right:8px;vertical-align:middle;filter:none}
.icon-spotify{filter: invert(34%) sepia(78%) saturate(530%) hue-rotate(86deg) brightness(98%) contrast(95%);}
.icon-apple{filter: invert(100%) sepia(2%) saturate(0%) hue-rotate(170deg) brightness(95%) contrast(90%);}
.icon-instagram{filter: invert(46%) sepia(76%) saturate(665%) hue-rotate(330deg) brightness(95%) contrast(95%);}
.icon-facebook{filter: invert(29%) sepia(69%) saturate(400%) hue-rotate(160deg) brightness(95%) contrast(92%);}
.icon-youtubemusic{filter: invert(14%) sepia(93%) saturate(639%) hue-rotate(345deg) brightness(96%) contrast(98%);}
.icon-tiktok{filter: invert(15%) sepia(40%) saturate(2000%) hue-rotate(305deg) brightness(95%) contrast(100%);}
.icon-soundcloud{filter: invert(78%) sepia(36%) saturate(3848%) hue-rotate(320deg) brightness(97%) contrast(98%);}
.icon-twitch{filter: invert(16%) sepia(61%) saturate(1500%) hue-rotate(260deg) brightness(95%) contrast(95%);}

/* footer icons */
.footer-icons{display:flex;gap:10px;align-items:center;justify-content:center}
.footer-icons .social-icon{ display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:8px; background:transparent; border:1px solid rgba(0,255,65,0.06); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; padding:6px; }
.footer-icons .social-icon img{ width:20px; height:20px; display:block; }
.footer-icons .social-icon:hover{ transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,255,65,0.08); border-color:var(--accent); background:rgba(0,0,0,0.22); }
.footer-icons .social-icon:focus{ outline: none; box-shadow:0 0 0 6px rgba(57,255,20,0.04); }

/* cmd-box (moved here) */
.cmd-container{width:100%;display:flex;justify-content:center; position: relative;}
.cmd-box{
  width:min(520px,86%);
  max-width:100%;
  background:linear-gradient(180deg,#050505,#0b0b0b);
  border:1px solid rgba(57,255,20,0.08);
  color:var(--green-2);
  padding:10px 12px;
  border-radius:8px;
  font-family: 'Courier New', Courier, monospace;
  font-size:14px;
  text-align:left;
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.6);
  caret-color: #9aff9a;
  outline:none;
  min-height:36px;
  align-self:center;
}
.cmd-box:focus{ box-shadow:0 0 0 6px rgba(57,255,20,0.04), inset 0 2px 10px rgba(0,0,0,0.6); border-color:var(--green-2); }
.cmd-label{ position:absolute; left:12%; top:8px; transform: translateY(-50%); margin:0; padding:4px 8px; background: rgba(0,0,0,0.6); border-radius:6px; color: rgba(124,255,178,0.95); font-family:'Courier New', monospace; font-size:12px; pointer-events:none; z-index:3; display:inline-flex; align-items:center; gap:8px; animation: label-bounce 1.6s ease-in-out infinite; }
.cmd-arrow{ display:inline-block; font-size:12px; line-height:1; padding:6px 8px; border-radius:8px; background: rgba(0,0,0,0.55); border:1px solid rgba(57,255,20,0.12); color: var(--green-2); box-shadow:0 6px 18px rgba(0,0,0,0.6), 0 0 10px rgba(57,255,20,0.04) inset; transform-origin:center; animation: arrow-pulse 1.6s ease-in-out infinite; pointer-events:none; }
@keyframes label-bounce { 0%{transform:translateY(-50%) translateY(0);}25%{transform:translateY(-50%) translateY(-6px);}50%{transform:translateY(-50%) translateY(0);}75%{transform:translateY(-50%) translateY(-3px);}100%{transform:translateY(-50%) translateY(0);} }
@keyframes arrow-pulse { 0%{transform:translateY(0) scale(1);box-shadow:0 0 0 rgba(57,255,20,0);}40%{transform:translateY(4px) scale(1.02);box-shadow:0 10px 28px rgba(57,255,20,0.08);}80%{transform:translateY(0) scale(1);box-shadow:0 0 0 rgba(57,255,20,0);}100%{transform:translateY(0) scale(1);} }

/* scrollbars */
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track { background: linear-gradient(180deg, rgba(6,6,6,0.85), rgba(10,10,10,0.75)); border-radius: 10px; box-shadow: inset 0 0 8px var(--scroll-track-glow); }
*::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--scroll-thumb), var(--scroll-thumb-hover)); border-radius: 10px; border: 2px solid rgba(0,0,0,0.6); backdrop-filter: blur(2px); }
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--scroll-thumb-hover), #4cff6a33); box-shadow: 0 0 18px rgba(57,255,20,0.08); }
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-bg); }

/* split-page remains in styles/split.css (already present) */