@import url('https://fonts.googleapis.com/css2?family=VT323&family=Space+Grotesk:wght@500;700;800&family=JetBrains+Mono:wght@400;500;700&family=Zen+Kurenaido&display=swap');

* { box-sizing: border-box; }

:root {
  --bg: #02010a;
  --bg-2: #0e0420;
  --ink: #f2e6ff;
  --ink-soft: #c4a8e8;
  --muted: #7e5fa6;
  --line: rgba(180, 120, 240, .18);

  --purple: #8b5fbf;
  --purple-deep: #5a2a9e;
  --magenta: #ff2e8a;
  --cyan: #5dfff0;
  --red: #ff1e3c;
  --pink: #ff6bb5;
  --amber: #ffb347;
  --lime: #b6ff3d;

  --panel: rgba(14, 4, 32, .52);
  --panel-edge: rgba(180, 120, 240, .32);

  --radius: 4px;
  --radius-md: 8px;
}

html {
  background: var(--bg);
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: "JetBrains Mono", "Space Grotesk", ui-monospace, monospace;
  font-size: 14px;
  line-height: 1.5;
  overflow-x: hidden;
  background: transparent;
}

/* Background stack — sits BEHIND content (z-index < 0) so hover repaints
   on cards never recomposite through fullscreen overlays. Each layer is
   its own GPU compositor layer (translateZ + will-change). Animation is
   pure transform → no paint cost. */

.bg-stack {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.bg-stack > div {
  position: absolute;
  inset: -10%;
  transform: translateZ(0);
  will-change: transform;
}

/* Deep void — purple breathing far in the distance, mostly emptiness */
.bg-tint {
  background:
    radial-gradient(ellipse 58% 36% at 50% 122%, rgba(96, 46, 210, .58) 0%, rgba(54, 24, 138, .24) 42%, transparent 76%),
    radial-gradient(ellipse 42% 30% at 13% 55%, rgba(74, 34, 168, .24), transparent 80%),
    radial-gradient(ellipse 44% 31% at 88% 48%, rgba(90, 40, 190, .26), transparent 80%),
    radial-gradient(ellipse 78% 60% at 50% 44%, rgba(34, 32, 48, .38) 0%, rgba(22, 20, 38, .3) 42%, transparent 78%),
    radial-gradient(ellipse 118% 92% at 50% 50%, transparent 34%, rgba(14, 12, 30, .24) 78%, rgba(5, 5, 14, .34) 100%),
    linear-gradient(180deg, #0a0a16 0%, #100d20 26%, #17112f 55%, #1e1642 78%, #271b58 100%);
  animation: bgDrift 54s ease-in-out infinite alternate;
}

/* Sparkle stars — diagonal drift (restored, this is the look you liked) */
.bg-grid {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='1' seed='9'/><feColorMatrix values='0 0 0 0 0.9  0 0 0 0 0.9  0 0 0 0 1  0 0 0 8 -6'/></filter><rect width='100%25' height='100%25' filter='url(%23s)'/></svg>");
  background-size: 280px 280px;
  opacity: .96;
  mix-blend-mode: screen;
  animation: starDrift 26s linear infinite;
}

/* Soft central glow — gentle radial breathing, NO horizontal streaks */
.bg-glitch {
  background:
    radial-gradient(circle 48% at 50% 62%, rgba(238, 234, 255, .4), transparent 78%);
  opacity: .78;
  mix-blend-mode: screen;
  animation: causticPulse 15s ease-in-out infinite alternate;
}

@keyframes bgDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-3%, 2%, 0) scale(1.06); }
}

/* Sparkle stars crawl diagonally */
@keyframes starDrift {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-280px, -280px, 0); }
}

/* Central glow breathes in/out, no horizontal movement */
@keyframes causticPulse {
  0%   { opacity: .56; transform: scale(1); }
  100% { opacity: .82; transform: scale(1.1); }
}

/* Thin VHS scanlines — also behind content, GPU layer */
.vhs-lines {
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  opacity: .12;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(0, 0, 0, .24) 3px,
    transparent 4px
  );
  transform: translateZ(0);
  will-change: transform;
  animation: scanlineShift 8s linear infinite;
}

/* Subtle dithered overlay — kept above content but GPU-layered so card
   hover repaints don't trigger overlay paint */
.dither {
  position: fixed;
  inset: 0;
  z-index: 198;
  pointer-events: none;
  opacity: .2;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0.6  0 0 0 0 0.3  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 80px 80px;
  transform: translateZ(0);
  will-change: transform;
}

@keyframes scanlineShift {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(0, 4px, 0); }
}

/* Subtle vignette — much lighter so animated bg shows through */
.vignette {
  position: fixed;
  inset: 0;
  z-index: 197;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 50%, rgba(10, 9, 24, .18) 78%, rgba(2, 2, 10, .32) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, .04), transparent 34%, rgba(20, 16, 42, .14) 100%);
  transform: translateZ(0);
}

/* Skip link */
.skip-link {
  position: fixed;
  top: -100px;
  left: 12px;
  z-index: 999;
  padding: 8px 14px;
  background: var(--magenta);
  color: white;
  border-radius: 2px;
  text-decoration: none;
  font-family: "VT323", monospace;
  font-size: 1.1rem;
  transition: top .15s;
}
.skip-link:focus { top: 12px; }

/* Glass — NO backdrop-filter (was killing perf) */
.glass {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  box-shadow:
    inset 0 0 0 1px rgba(255, 46, 138, .06),
    0 12px 28px rgba(0, 0, 0, .55);
}

/* Admin button */
#adminLock {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 60;
  width: 50px;
  height: 50px;
  border-radius: 4px;
  border: 1px solid var(--magenta);
  background: rgba(255, 46, 138, .12);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  box-shadow: 0 0 14px rgba(255, 46, 138, .35), inset 0 0 12px rgba(255, 46, 138, .14);
  transition: background .15s, box-shadow .15s, transform .15s;
}
#adminLock:hover {
  background: rgba(255, 46, 138, .22);
  box-shadow: 0 0 20px rgba(255, 46, 138, .55), inset 0 0 16px rgba(255, 46, 138, .2);
  transform: translateY(-1px);
}
.sonic-icon {
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 0 8px rgba(255, 46, 138, .65));
}

/* Hero */
.hero {
  width: min(1280px, calc(100vw - 24px));
  margin: 36px auto 18px;
  padding: 32px 26px;
  text-align: center;
  border-left: 2px solid var(--magenta);
  border-right: 2px solid var(--cyan);
  position: relative;
}

.hero::before {
  content: "死";
  position: absolute;
  top: 8px;
  right: 14px;
  font-family: "Zen Kurenaido", "Yu Mincho", serif;
  font-size: 3.8rem;
  color: var(--red);
  opacity: .14;
  line-height: 1;
  pointer-events: none;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-family: "VT323", monospace;
  font-size: 1.25rem;
  letter-spacing: .08em;
}

.kanji {
  color: var(--red);
  font-family: "Zen Kurenaido", "Yu Mincho", serif;
  text-shadow: 0 0 8px rgba(255, 30, 60, .5);
}

h1 {
  position: relative;
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 800;
  font-size: clamp(2.8rem, 9vw, 7rem);
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--ink);
  /* Chromatic aberration via text-shadow (cheap, no pseudos animating) */
  text-shadow:
    -2px 0 0 var(--magenta),
    2px 0 0 var(--cyan),
    0 0 22px rgba(139, 95, 191, .35);
}

/* Static rgb split using pseudo (no animation) */
h1::before,
h1::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .55;
  mix-blend-mode: screen;
}
h1::before {
  color: var(--magenta);
  transform: translate(-3px, 0);
}
h1::after {
  color: var(--cyan);
  transform: translate(3px, 0);
}

.subtitle {
  margin: 16px 0 0;
  color: var(--purple);
  font-family: "VT323", monospace;
  font-size: 1.15rem;
  letter-spacing: .04em;
}

.handle {
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(93, 255, 240, .45);
  font-weight: 700;
  letter-spacing: .12em;
}

#liveClock {
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* Toolbar */
.toolbar {
  width: min(1480px, calc(100vw - 24px));
  margin: 0 auto 18px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  border-left: 2px solid var(--purple);
}

@media (max-width: 1100px) { .toolbar { grid-template-columns: 1fr; } }

input,
select,
textarea {
  width: 100%;
  padding: 10px 14px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  outline: none;
  background: rgba(0, 0, 0, .42);
  font: inherit;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .88rem;
  transition: border-color .12s, box-shadow .12s;
}

textarea {
  border-radius: var(--radius-md);
  font-size: .84rem;
  line-height: 1.5;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--magenta);
  box-shadow: 0 0 0 1px var(--magenta), 0 0 14px rgba(255, 46, 138, .25);
}

input::placeholder,
textarea::placeholder { color: var(--muted); }

select option { color: var(--ink); background: var(--bg-2); }

button {
  border: 1px solid var(--line);
  color: var(--ink-soft);
  background: rgba(139, 95, 191, .08);
  border-radius: var(--radius);
  padding: 9px 14px;
  cursor: pointer;
  font: inherit;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .8rem;
  letter-spacing: .04em;
  transition: background .12s, color .12s, border-color .12s, box-shadow .12s;
}

button:hover {
  background: rgba(255, 46, 138, .16);
  border-color: var(--magenta);
  color: var(--magenta);
  box-shadow: 0 0 12px rgba(255, 46, 138, .28);
}

button:active { transform: translateY(1px); }

.toolbar-search {
  position: relative;
  min-width: 0;
}
.toolbar-search input { padding-right: 36px; }

.clear-search {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  background: rgba(255, 46, 138, .15);
  border-color: var(--magenta);
  color: var(--magenta);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.filter {
  color: var(--muted);
  background: rgba(0, 0, 0, .3);
  border-color: rgba(180, 120, 240, .14);
  padding: 7px 12px;
  font-size: .76rem;
}

.filter.active {
  color: var(--cyan);
  border-color: var(--cyan);
  background: rgba(93, 255, 240, .08);
  box-shadow: 0 0 10px rgba(93, 255, 240, .22);
}

.toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: flex-start;
}

.view-modes {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--radius);
  background: rgba(0, 0, 0, .42);
  border: 1px solid var(--line);
}

.view-mode {
  padding: 5px 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-size: .95rem;
  min-width: 32px;
}

.view-mode.active {
  background: rgba(255, 46, 138, .14);
  color: var(--magenta);
  border-color: var(--magenta);
}

.add {
  color: var(--magenta);
  border-color: rgba(255, 46, 138, .35);
  background: rgba(255, 46, 138, .08);
}
.add:hover {
  background: rgba(255, 46, 138, .2);
  color: var(--ink);
}

/* Repo — CSS grid (NOT multi-column) to avoid layout recalc on hover */
.repo {
  width: min(1760px, calc(100vw - 24px));
  margin: 0 auto 170px;
  contain: layout style;
}

.repo.view-grid,
.repo.view-compact {
  display: block;
}

.repo.view-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.repo-columns {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.repo-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 20px;
}

.repo-col:first-child { padding-left: 0; }
.repo-col:last-child  { padding-right: 0; }

.repo-col + .repo-col {
  position: relative;
}

.repo-col + .repo-col::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6%;
  bottom: 6%;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 46, 138, .55) 22%,
    rgba(93, 255, 240, .4) 55%,
    rgba(139, 95, 191, .45) 80%,
    transparent 100%
  );
  box-shadow: 0 0 8px rgba(255, 46, 138, .28), 0 0 14px rgba(93, 255, 240, .16);
  pointer-events: none;
}

.category {
  padding: 18px 20px;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 10px;
  margin: 0;
  border-left: 2px solid var(--category-border-color, var(--purple));
  background: var(--panel);
  border-top: 1px solid var(--panel-edge);
  border-right: 1px solid var(--panel-edge);
  border-bottom: 1px solid var(--panel-edge);
  contain: layout paint;
  position: relative;
}

.category::before {
  content: "";
  position: absolute;
  top: -1px;
  right: -1px;
  width: 32px;
  height: 4px;
  background: var(--category-border-color, var(--magenta));
  opacity: .65;
}

.category h2 {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  font-family: "VT323", monospace;
  font-size: 1.45rem;
  font-weight: 400;
  color: var(--category-title-color, var(--ink));
  letter-spacing: .04em;
  text-transform: lowercase;
}
.category h2::before { content: "▓ "; color: var(--category-title-color, var(--magenta)); }

/* Link cards */
.link-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 10px 11px;
  color: var(--ink);
  border-radius: var(--radius);
  background: rgba(6, 2, 15, .55);
  border: 1px solid rgba(180, 120, 240, .14);
  outline: 1px solid transparent;
  outline-offset: -1px;
  position: relative;
  /* Outline color is the only animated property — cheapest possible hover. */
  transition: outline-color .12s;
  contain: layout paint;
}

.link-card:hover {
  outline-color: var(--magenta);
}

.link-card.pinned {
  border-color: var(--red);
  background: rgba(40, 4, 16, .6);
}
.link-card.pinned::after {
  content: "★";
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: .9rem;
  color: var(--red);
  text-shadow: 0 0 6px rgba(255, 30, 60, .6);
}

.link-main {
  width: 100%;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  min-width: 0;
}

.link-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 2px;
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(180, 120, 240, .2);
  overflow: hidden;
}

.link-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  image-rendering: pixelated;
}

.link-text { min-width: 0; display: grid; gap: 2px; }

.link-text b {
  color: var(--ink);
  font-family: "Space Grotesk", sans-serif;
  font-size: .94rem;
  font-weight: 600;
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.link-text small {
  color: var(--muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .7rem;
  overflow-wrap: anywhere;
}

.link-meta {
  display: inline-block;
  padding: 0 6px;
  margin-left: 4px;
  border-radius: 2px;
  background: rgba(93, 255, 240, .14);
  color: var(--cyan);
}

.actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
  width: 100%;
}

.actions button {
  padding: 4px 9px;
  border-radius: 2px;
  font-size: .7rem;
  min-width: 0;
  background: rgba(0, 0, 0, .42);
}

.actions .pin-btn { color: var(--muted); }
.actions .pin-btn.active {
  color: var(--red);
  border-color: var(--red);
  background: rgba(255, 30, 60, .12);
  box-shadow: 0 0 8px rgba(255, 30, 60, .3);
}
.actions .copy-btn:hover { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 8px rgba(93, 255, 240, .28); }

.actions .delete { color: var(--red); border-color: rgba(255, 30, 60, .3); }
.actions .delete:hover {
  background: rgba(255, 30, 60, .2);
  border-color: var(--red);
  color: var(--ink);
  box-shadow: 0 0 10px rgba(255, 30, 60, .4);
}

/* View modes */
.repo.view-list .category,
.repo.view-compact .category { grid-template-columns: 1fr; }

.repo.single-cat .category {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.repo.view-list .link-card,
.repo.view-compact .link-card {
  flex-direction: row;
  align-items: center;
}
.repo.view-list .link-card .link-main,
.repo.view-compact .link-card .link-main { flex: 1; }
.repo.view-list .actions,
.repo.view-compact .actions { width: auto; flex: 0 0 auto; }

.repo.view-compact .category { padding: 12px 13px; }
.repo.view-compact .link-card { padding: 5px 8px; gap: 4px; }
.repo.view-compact .link-icon { width: 22px; height: 22px; }
.repo.view-compact .link-icon img { width: 16px; height: 16px; }
.repo.view-compact .link-text small { display: none; }
.repo.view-compact .link-text b { font-size: .82rem; }

/* Modals */
.modal {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(440px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);
  transform: translate(-50%, -50%);
  border-radius: var(--radius);
  z-index: 90;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-left: 2px solid var(--magenta);
  border-right: 2px solid var(--cyan);
  background: var(--panel);
}

.modal-head,
.notes-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 15px;
  color: var(--magenta);
  font-family: "VT323", monospace;
  font-size: 1.15rem;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--panel-edge);
  background: rgba(0, 0, 0, .35);
  cursor: grab;
  user-select: none;
}

.modal-head button,
.notes-head button {
  padding: 3px 10px;
  font-size: .95rem;
  line-height: 1;
  color: var(--red);
  border-color: rgba(255, 30, 60, .3);
  background: rgba(255, 30, 60, .08);
  font-family: "JetBrains Mono", monospace;
}
.modal-head button:hover,
.notes-head button:hover {
  background: rgba(255, 30, 60, .25);
  color: var(--ink);
  box-shadow: 0 0 10px rgba(255, 30, 60, .35);
}

.modal-body {
  padding: 16px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.modal-body input,
.modal-body select,
.modal-body textarea,
.modal-body > button { margin-top: 9px; }

.modal-body > button { width: 100%; }

.modal-body small {
  display: block;
  min-height: 16px;
  margin-top: 10px;
  color: var(--muted);
  font-family: "VT323", monospace;
  font-size: .95rem;
}

#loginMsg.error,
#categoryMsg.error,
#categoryManagerMsg.error,
#bulkMsg.error,
#importMsg.error { color: var(--red); }

/* Category list inside modal */
.category-list {
  display: grid;
  gap: 6px;
  max-height: 260px;
  overflow: auto;
  padding-right: 2px;
}

.category-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .35);
}

.category-row b {
  min-width: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
  font-size: .85rem;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
}

.category-row-actions { display: flex; gap: 4px; }
.category-row-actions button { padding: 4px 9px; font-size: .72rem; }

.category-rename {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.category-rename button { width: 100%; margin-top: 9px; }

.import-merge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  color: var(--ink-soft);
  font-size: .82rem;
}

.import-merge input { width: auto; margin: 0; }

/* Toast */
.session-toast {
  position: fixed;
  right: 14px;
  top: 78px;
  z-index: 95;
  max-width: min(320px, calc(100vw - 28px));
  padding: 10px 14px;
  border: 1px solid var(--cyan);
  border-left: 3px solid var(--cyan);
  border-radius: var(--radius);
  color: var(--ink);
  background: rgba(6, 2, 15, .94);
  box-shadow: 0 0 18px rgba(93, 255, 240, .2), 0 14px 28px rgba(0, 0, 0, .55);
  font-family: "VT323", monospace;
  font-size: 1.05rem;
}

.session-toast button {
  margin-left: 8px;
  padding: 3px 10px;
  font-size: .78rem;
  color: var(--cyan);
  border-color: var(--cyan);
  background: rgba(93, 255, 240, .08);
  font-family: "JetBrains Mono", monospace;
}

/* =========================================
   MUSIC PLAYER — UNTOUCHED CYBERCORE BLOCK
   ========================================= */

.music {
  position: fixed;
  left: 14px;
  bottom: 14px;
  width: 320px;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border-radius: 4px;
  z-index: 45;
  border-left: 2px solid #ff2ec8;
  border-right: 2px solid #00fff0;
  background: rgba(8, 4, 24, .82);
  border-top: 1px solid rgba(0, 255, 240, .25);
  border-bottom: 1px solid rgba(0, 255, 240, .25);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .4),
    0 18px 38px rgba(0, 0, 0, .42),
    0 0 60px rgba(0, 255, 240, .12),
    0 0 40px rgba(255, 46, 200, .14);
  color: #f0fffe;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.music-head { display: none !important; }

.music-screen {
  position: relative;
  height: 84px;
  width: 84px;
  margin: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 3px;
  border: 1px solid rgba(255, 46, 200, .3);
  background: rgba(0, 0, 0, .5);
}

.music-screen p,
.thumb-overlay { display: none !important; }

#ytThumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: hue-rotate(280deg) saturate(1.4) contrast(1.1);
}

.music-controls {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  align-content: start;
}

.music-controls button {
  min-height: 30px;
  padding: 4px 2px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .4);
  border: 1px solid rgba(0, 255, 240, .26);
  color: #f0fffe;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: .9rem;
  line-height: 1;
  letter-spacing: .04em;
  text-transform: lowercase;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
}

.music-controls button:hover {
  background: rgba(0, 255, 240, .12);
  border-color: #00fff0;
  color: #00fff0;
  box-shadow: 0 0 12px rgba(0, 255, 240, .28);
  transform: none;
}

.track-info {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  color: #00fff0;
  font-size: .66rem;
  letter-spacing: .04em;
  min-width: 0;
}

.track-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: uppercase;
}

.track-time {
  flex: 0 0 auto;
  color: #b6ff3d;
  font-variant-numeric: tabular-nums;
}

.music .seek,
.music .volume {
  grid-column: 1 / -1;
  display: block;
  margin: 0;
}

.music .volume {
  position: relative;
  color: rgba(180, 220, 255, .55);
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}

.music .volume span { display: none; }

.music .volume::after {
  content: attr(data-value);
  position: absolute;
  right: 0;
  top: -14px;
  color: #00fff0;
  font-size: .64rem;
}

.music .seek input,
.music .volume input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 16px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  outline: none;
  border: none;
  border-radius: 0;
  padding: 0;
}

.music .seek input { --seek-fill: 0%; }
.music .volume input { --volume-fill: 45%; }

.music .seek input::-webkit-slider-runnable-track {
  height: 3px;
  background: linear-gradient(90deg, #00fff0 0 var(--seek-fill), rgba(255,255,255,.10) var(--seek-fill) 100%);
}
.music .volume input::-webkit-slider-runnable-track {
  height: 3px;
  background: linear-gradient(90deg, #ff2ec8 0 var(--volume-fill), rgba(255,255,255,.10) var(--volume-fill) 100%);
}
.music .seek input::-moz-range-track {
  height: 3px;
  background: linear-gradient(90deg, #00fff0 0 var(--seek-fill), rgba(255,255,255,.10) var(--seek-fill) 100%);
}
.music .volume input::-moz-range-track {
  height: 3px;
  background: linear-gradient(90deg, #ff2ec8 0 var(--volume-fill), rgba(255,255,255,.10) var(--volume-fill) 100%);
}
.music .seek input::-webkit-slider-thumb,
.music .volume input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 10px;
  margin-top: -4px;
  border-radius: 0;
  border: 1px solid #f0fffe;
  background: #b6ff3d;
  box-shadow: 0 0 10px #b6ff3d;
}
.music .seek input::-moz-range-thumb,
.music .volume input::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border-radius: 0;
  border: 1px solid #f0fffe;
  background: #b6ff3d;
  box-shadow: 0 0 10px #b6ff3d;
}

/* Tracks panel — matches music cyber */
.tracks-panel {
  position: fixed;
  left: 14px;
  bottom: 230px;
  width: 320px;
  max-height: 50vh;
  border-radius: 4px;
  z-index: 55;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-left: 2px solid #00fff0;
  background: rgba(8, 4, 24, .85);
  color: #f0fffe;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  box-shadow: 0 18px 38px rgba(0, 0, 0, .55), 0 0 40px rgba(0, 255, 240, .12);
}

.tracks-panel .modal-head {
  color: #00fff0;
  font-family: "JetBrains Mono", monospace;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, .35);
  border-bottom: 1px solid rgba(0, 255, 240, .2);
}
.tracks-panel .modal-head button {
  color: #ff3d6e;
  background: transparent;
  border-color: rgba(255, 61, 110, .3);
}
.tracks-panel .modal-body { padding: 12px; }

.tracks-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 240px;
  overflow-y: auto;
  margin-bottom: 8px;
}

.track-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  border-radius: 3px;
  border: 1px solid rgba(0, 255, 240, .14);
  background: rgba(0, 0, 0, .35);
  cursor: pointer;
  font-size: .8rem;
  color: #f0fffe;
}
.track-row:hover { background: rgba(0, 255, 240, .08); border-color: #00fff0; }
.track-row.active {
  border-color: #b6ff3d;
  background: rgba(182, 255, 61, .08);
  color: #b6ff3d;
}
.track-row b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track-row .delete {
  padding: 3px 7px;
  font-size: .7rem;
  background: transparent;
  border: 1px solid rgba(255, 61, 110, .35);
  color: #ff3d6e;
}

.track-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 255, 240, .14);
}
.track-form input {
  padding: 8px 11px;
  border-radius: 3px;
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(0, 255, 240, .25);
  color: #f0fffe;
  font-size: .78rem;
}
.track-form input::placeholder { color: rgba(180, 220, 255, .35); }
.track-form button {
  background: rgba(255, 46, 200, .06);
  border: 1px solid rgba(255, 46, 200, .35);
  color: #ff2ec8;
  border-radius: 3px;
}

/* =========================================
   END MUSIC PLAYER BLOCK
   ========================================= */

/* Notes panel */
.notes-panel {
  position: fixed;
  right: 14px;
  bottom: 14px;
  width: 320px;
  max-height: 62vh;
  border-radius: var(--radius);
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-left: 2px solid var(--red);
  background: var(--panel);
}

.notes-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  flex: 1;
}

.notes-help {
  margin: 0;
  color: var(--ink-soft);
  font-family: "VT323", monospace;
  font-size: 1rem;
  line-height: 1.4;
}

.notes-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding-right: 2px;
}

.note-item {
  background: rgba(6, 2, 15, .55);
  border: 1px solid rgba(180, 120, 240, .14);
  border-left: 2px solid var(--magenta);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.note-item:nth-child(even) { border-left-color: var(--cyan); }
.note-item:nth-child(3n) { border-left-color: var(--red); }

.note-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px;
  gap: 6px;
}

.note-header b {
  font-family: "VT323", monospace;
  font-size: 1.1rem;
  color: var(--magenta);
  font-weight: 400;
  line-height: 1.1;
  word-break: break-word;
  letter-spacing: .04em;
}

.note-actions {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.note-actions button {
  padding: 3px 8px;
  font-size: .68rem;
  border-radius: 2px;
}

.note-actions .copy { color: var(--cyan); border-color: rgba(93, 255, 240, .3); }
.note-actions .delete { color: var(--red); border-color: rgba(255, 30, 60, .3); }

.note-item pre {
  margin: 0;
  padding: 8px 10px;
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(93, 255, 240, .12);
  border-radius: 2px;
  font-size: .76rem;
  color: var(--cyan);
  overflow-x: auto;
  white-space: pre-wrap;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  user-select: text;
  line-height: 1.5;
}

.note-form {
  border-top: 1px dashed var(--line);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}

.note-form input,
.note-form textarea {
  font-size: .82rem;
  padding: 8px 11px;
}
.note-form textarea { min-height: 90px; }

.note-form-actions { display: flex; gap: 6px; }
.note-form-actions button { flex: 1; }

/* Misc */
.hidden { display: none !important; }

footer {
  position: fixed;
  left: 14px;
  bottom: 6px;
  z-index: 35;
  color: var(--muted);
  font-family: "VT323", monospace;
  font-size: 1rem;
  letter-spacing: .04em;
}

#firebaseStatus::before { content: "▸ "; color: var(--cyan); }

#logoutBtn {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 60;
  padding: 10px 14px;
  font-size: .78rem;
  border-radius: var(--radius);
  background: rgba(255, 30, 60, .08);
  border-color: var(--red);
  color: var(--red);
  font-family: "JetBrains Mono", monospace;
}

.empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  padding: 36px 20px;
  border-radius: var(--radius);
  border: 1px dashed var(--line);
  font-family: "VT323", monospace;
  font-size: 1.2rem;
}
.empty::before { content: "▓▒░ "; color: var(--magenta); }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .vhs-lines, .dither { display: none !important; }
  * { transition: none !important; animation: none !important; }
}

/* Responsive */
@media (max-width: 820px) {
  body { font-size: 13px; }

  .hero {
    width: calc(100vw - 16px);
    margin: 18px auto 10px;
    padding: 22px 16px;
  }
  h1 { font-size: clamp(2.2rem, 13vw, 3.8rem); }
  .subtitle { font-size: 1rem; }
  .eyebrow { font-size: 1.05rem; }

  .toolbar {
    width: calc(100vw - 16px);
    padding: 10px;
    gap: 8px;
  }
  .toolbar-actions { gap: 5px; }
  .filter { flex: 1 1 calc(50% - 6px); }

  .repo {
    width: calc(100vw - 16px);
    margin-bottom: 220px;
  }

  .repo.view-grid,
  .repo.view-compact,
  .repo.view-list {
    display: block;
  }

  .repo-columns {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .repo-col {
    display: contents;
    padding: 0;
  }

  .repo-col + .repo-col::before { display: none; }

  .category {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .modal {
    width: calc(100vw - 18px);
    max-height: 88vh;
  }

  .music {
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    grid-template-columns: 64px minmax(0, 1fr);
    padding: 8px;
  }
  .music-screen { width: 64px; height: 64px; }

  .tracks-panel {
    left: 8px;
    right: 8px;
    width: auto;
    bottom: 180px;
    max-height: 45vh;
  }

  .notes-panel {
    left: 8px;
    right: 8px;
    width: auto;
    bottom: 180px;
    max-height: 50vh;
  }

  #adminLock { top: 10px; right: 10px; width: 42px; height: 42px; }
  .sonic-icon { width: 28px; height: 28px; }
  #logoutBtn { top: 10px; right: 10px; padding: 8px 11px; font-size: .72rem; }

  footer { display: none; }
}

@media (max-width: 480px) {
  .toolbar-actions .add { flex: 1 1 calc(50% - 4px); }
  .view-modes { flex: 1; justify-content: space-between; }
  .view-mode { flex: 1; }
}