/* ══════════════════════════════════════════════
   SOUNDBOARD — MW-inspired loadout UI
══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #08080a;
  --bg-2:      #0d0d10;
  --surface:   #131316;
  --surface-2: #1a1a1e;
  --surface-3: #232328;
  --border:    rgba(255, 255, 255, 0.06);
  --border-2:  rgba(255, 255, 255, 0.10);
  --text:      #ececef;
  --text-2:    #8d8d95;
  --text-3:    #54545c;

  --orange:    #ff8c1a;
  --orange-hi: #ffa648;
  --orange-lo: #c45e00;
  --red:       #ff3b30;
  --green:     #6bd425;

  --radius:    3px;
  --radius-md: 5px;
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --dur:       150ms;

  --nav-h:     58px;
  --sidebar-w: 240px;
}

html { font-size: 16px; -webkit-tap-highlight-color: transparent; }
body {
  font-family: 'Rajdhani', 'Inter', system-ui, sans-serif;
  background: var(--bg); color: var(--text);
  min-height: 100vh; overflow-x: hidden;
}

/* Subtle film grain */
.bg-noise {
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.045;mix-blend-mode:overlay;
}
.bg-grid {
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(ellipse at 18% 12%,rgba(255,140,26,.07) 0%,transparent 50%),
    radial-gradient(ellipse at 82% 90%,rgba(255,140,26,.04) 0%,transparent 55%);
}

/* ══════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════ */
.navbar {
  position:sticky;top:0;z-index:100;
  display:grid;align-items:center;
  grid-template-columns:auto 1fr auto;
  gap:18px;
  padding:0 20px;height:var(--nav-h);
  background:linear-gradient(180deg,rgba(8,8,10,.96) 0%,rgba(8,8,10,.88) 100%);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}

.navbar-left { display:flex;align-items:center;gap:14px;min-width:0; }
.nav-menu { display:none; }
@media (max-width:1023px) { .nav-menu { display:inline-flex; } }

.brand { display:flex;align-items:center;gap:10px;min-width:0; }
.brand-mark {
  position:relative;display:inline-block;
  width:18px;height:18px;
  background:var(--orange);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
  box-shadow:0 0 14px rgba(255,140,26,.65);
}
.brand-mark::after {
  content:'';position:absolute;inset:5px;
  background:var(--bg);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.brand-name {
  font-family:'Russo One','Rajdhani',sans-serif;
  font-size:17px;font-weight:400;letter-spacing:3.5px;
  color:#fff;
  white-space:nowrap;
}

.navbar-search {
  position:relative;display:flex;align-items:center;
  max-width:520px;margin:0 auto;width:100%;
}
.search-ico { position:absolute;left:14px;color:var(--text-3);pointer-events:none; }
.search-input {
  width:100%;padding:9px 90px 9px 40px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--border-2);
  border-radius:var(--radius);
  color:var(--text);
  font-family:'Inter','Rajdhani',sans-serif;
  font-size:14px;letter-spacing:.2px;
  outline:none;
  transition:border-color var(--dur),background var(--dur);
  height:40px;
}
.search-input:focus {
  border-color:var(--orange);
  background:rgba(255,140,26,.04);
}
.search-input::placeholder { color:var(--text-3); }
.search-clear {
  position:absolute;right:38px;
  width:24px;height:24px;border-radius:var(--radius);
  background:rgba(255,255,255,.06);border:none;
  color:var(--text-2);font-size:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--dur);
}
.search-clear:hover { background:rgba(255,255,255,.12);color:var(--text); }
.search-kbd {
  position:absolute;right:8px;
  font-family:'Share Tech Mono',monospace;
  font-size:11px;font-weight:600;
  padding:2px 7px;border-radius:var(--radius);
  background:rgba(255,255,255,.05);
  border:1px solid var(--border-2);
  color:var(--text-2);
  pointer-events:none;
}

.navbar-right { display:flex;align-items:center;gap:8px; }

/* ── Volume control ── */
.volume-wrap { position:relative;display:flex;align-items:center; }
.volume-btn.muted { color:var(--red);border-color:rgba(255,59,48,.35); }

.volume-popout {
  display:flex;align-items:center;gap:10px;
  padding:0 12px 0 14px;height:40px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--border-2);
  border-radius:var(--radius);
  margin-left:8px;
}

#volumeSlider {
  -webkit-appearance:none;appearance:none;
  width:120px;height:4px;
  background:rgba(255,255,255,.08);
  border-radius:99px;outline:none;cursor:pointer;
  background-image:linear-gradient(to right,var(--orange) 0,var(--orange) var(--vol,80%),rgba(255,255,255,.08) var(--vol,80%),rgba(255,255,255,.08) 100%);
}
#volumeSlider::-webkit-slider-thumb {
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;border-radius:50%;
  background:var(--orange);
  border:2px solid #0a0a08;
  box-shadow:0 0 8px rgba(255,140,26,.55);
  cursor:pointer;
}
#volumeSlider::-moz-range-thumb {
  width:14px;height:14px;border-radius:50%;
  background:var(--orange);
  border:2px solid #0a0a08;
  box-shadow:0 0 8px rgba(255,140,26,.55);
  cursor:pointer;border:none;
}
#volumeSlider::-moz-range-track {
  background:rgba(255,255,255,.08);
  height:4px;border-radius:99px;
}
.volume-num {
  font-family:'Share Tech Mono',monospace;
  font-size:11px;letter-spacing:1px;
  color:var(--orange);
  width:24px;text-align:right;
}

/* Mobile: hide slider, popout opens on tap */
@media (max-width:768px) {
  .volume-popout {
    position:absolute;top:46px;right:0;
    margin-left:0;
    opacity:0;pointer-events:none;
    transform:translateY(-4px);
    transition:opacity .15s,transform .15s;
    background:var(--surface);
    box-shadow:0 12px 32px rgba(0,0,0,.5);
    z-index:120;
  }
  .volume-wrap.open .volume-popout {
    opacity:1;pointer-events:all;transform:translateY(0);
  }
}

/* ── Icon button ── */
.icon-btn {
  width:40px;height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.025);
  border:1px solid var(--border-2);
  border-radius:var(--radius);
  color:var(--text-2);cursor:pointer;
  transition:all var(--dur);
}
.icon-btn:hover { color:var(--text);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.05); }
.icon-btn.is-admin {
  color:var(--green);
  border-color:rgba(107,212,37,.4);
  background:rgba(107,212,37,.08);
}

/* ══════════════════════════════════════════════
   GENERIC BUTTONS
══════════════════════════════════════════════ */
.btn {
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border-radius:var(--radius);
  font-family:'Rajdhani',sans-serif;
  font-size:13.5px;font-weight:600;letter-spacing:1.4px;
  text-transform:uppercase;
  cursor:pointer;border:none;outline:none;text-decoration:none;
  transition:all var(--dur);
  white-space:nowrap;user-select:none;
  min-height:40px;
}
.btn:active { transform:translateY(1px); }

.btn-primary {
  position:relative;
  background:var(--orange);
  color:#0a0a08;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.35),0 0 0 1px rgba(255,140,26,.5);
}
.btn-primary::before {
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:rgba(0,0,0,.4);
}
.btn-primary:hover {
  background:var(--orange-hi);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.35),0 0 0 1px rgba(255,166,72,.6),0 0 20px rgba(255,140,26,.4);
}

.btn-ghost {
  background:rgba(255,255,255,.025);
  color:var(--text);
  border:1px solid var(--border-2);
}
.btn-ghost:hover { background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18); }

/* ══════════════════════════════════════════════
   ADMIN DROPDOWN
══════════════════════════════════════════════ */
.admin-menu {
  position:fixed;z-index:500;
  top:64px;right:16px;
  background:var(--surface);
  border:1px solid var(--border-2);
  border-radius:var(--radius-md);
  padding:6px;min-width:220px;
  box-shadow:0 16px 48px rgba(0,0,0,.7);
  opacity:0;pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .16s,transform .16s;
}
.admin-menu.open { opacity:1;pointer-events:all;transform:translateY(0); }

.admin-menu-item {
  display:flex;align-items:center;gap:11px;
  width:100%;padding:10px 12px;border-radius:var(--radius);
  background:none;border:none;color:var(--text-2);
  font-family:'Rajdhani',sans-serif;
  font-size:13px;font-weight:600;letter-spacing:.8px;
  text-transform:uppercase;
  cursor:pointer;transition:all var(--dur);text-align:left;
}
.admin-menu-item:hover { background:rgba(255,255,255,.05);color:var(--text); }
.admin-menu-item svg { color:var(--orange);opacity:.85; }
.admin-menu-logout { color:rgba(255,59,48,.8); }
.admin-menu-logout:hover { background:rgba(255,59,48,.1);color:var(--red); }
.admin-menu-logout svg { color:rgba(255,59,48,.8); }
.admin-menu-divider { height:1px;background:var(--border);margin:4px 8px; }

/* ══════════════════════════════════════════════
   LAYOUT — sidebar + main
══════════════════════════════════════════════ */
.layout {
  position:relative;z-index:1;
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  min-height:calc(100vh - var(--nav-h));
}

/* ── Sidebar ── */
.sidebar {
  position:sticky;top:var(--nav-h);
  height:calc(100vh - var(--nav-h));
  display:flex;flex-direction:column;
  background:rgba(13,13,16,.6);
  border-right:1px solid var(--border);
  overflow-y:auto;
  padding:20px 12px 16px;
  z-index:50;
}

.sidebar-section { flex:1;min-height:0; }
.sidebar-title {
  font-family:'Share Tech Mono',monospace;
  font-size:10.5px;letter-spacing:2.5px;
  color:var(--text-3);
  text-transform:uppercase;
  padding:0 8px;margin-bottom:10px;
}

.cat-list-sidebar { display:flex;flex-direction:column;gap:2px; }
.cat-tab {
  position:relative;
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;
  background:none;border:none;
  color:var(--text-2);
  font-family:'Rajdhani',sans-serif;
  font-size:14px;font-weight:600;letter-spacing:.6px;
  text-transform:uppercase;
  cursor:pointer;
  border-radius:var(--radius);
  transition:all var(--dur);
  text-align:left;width:100%;
  min-height:38px;
}
.cat-tab:hover { background:rgba(255,255,255,.04);color:var(--text); }
.cat-tab.active {
  background:linear-gradient(90deg,rgba(255,140,26,.15) 0%,rgba(255,140,26,.04) 100%);
  color:#fff;
}
.cat-tab.active::before {
  content:'';position:absolute;left:0;top:6px;bottom:6px;
  width:3px;background:var(--orange);
  box-shadow:0 0 10px rgba(255,140,26,.7);
}
.cat-tab-icon {
  width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;
  background:rgba(255,255,255,.04);
  border-radius:var(--radius);
  flex-shrink:0;
}
.cat-tab.active .cat-tab-icon { background:rgba(255,140,26,.15); }
.cat-tab-name { flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.cat-count {
  font-family:'Share Tech Mono',monospace;
  font-size:10.5px;letter-spacing:.5px;
  color:var(--text-3);
  font-weight:400;
}
.cat-tab.active .cat-count { color:var(--orange); }

.sidebar-stats {
  margin-top:14px;padding:12px 12px 4px;
  border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:6px;
}
.stat-row {
  display:flex;justify-content:space-between;align-items:center;
  font-family:'Share Tech Mono',monospace;
  font-size:10.5px;letter-spacing:1.5px;
  text-transform:uppercase;
}
.stat-label { color:var(--text-3); }
.stat-val   { color:var(--orange);font-weight:600; }

/* Drawer (mobile) */
.drawer-backdrop {
  display:none;
  position:fixed;inset:0;z-index:40;
  background:rgba(0,0,0,.65);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;
  transition:opacity .2s;
}
.drawer-backdrop.show { opacity:1;pointer-events:all; }

/* ── Main ── */
.main {
  padding:24px 28px 140px;
  min-width:0;
}

.main-header {
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;margin-bottom:20px;
}
.main-title { display:flex;align-items:baseline;gap:10px;min-width:0; }
.main-title-text {
  font-family:'Russo One','Rajdhani',sans-serif;
  font-size:20px;letter-spacing:1.5px;
  color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.main-title-count {
  font-family:'Share Tech Mono',monospace;
  font-size:12px;letter-spacing:1.5px;
  color:var(--text-3);
}

/* Sort */
.sort-wrap { position:relative;display:inline-flex;align-items:center; }
.sort-wrap select {
  padding:8px 32px 8px 12px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--border-2);
  border-radius:var(--radius);
  color:var(--text-2);
  font-family:'Rajdhani',sans-serif;
  font-size:12.5px;letter-spacing:1px;
  text-transform:uppercase;outline:none;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  min-height:36px;
  transition:all var(--dur);
}
.sort-wrap select:hover { border-color:rgba(255,255,255,.18);color:var(--text); }
.sort-wrap .select-arrow { position:absolute;right:10px;pointer-events:none;color:var(--text-3); }

/* ══════════════════════════════════════════════
   SOUND CARDS — operator-tile feel
══════════════════════════════════════════════ */
.sounds-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:12px;
}

.sound-card {
  --c: var(--orange);
  position:relative;
  display:flex;flex-direction:column;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  overflow:hidden;
  cursor:pointer;user-select:none;-webkit-user-select:none;
  touch-action:manipulation;
  transition:transform var(--dur) var(--ease),border-color var(--dur),box-shadow var(--dur);
}
.sound-card:hover {
  transform:translateY(-2px);
  border-color:var(--border-2);
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}

/* The visual area on top — square */
.card-visual {
  position:relative;
  aspect-ratio:1;
  overflow:hidden;
  background:var(--surface-2);
}
.card-img {
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  transition:transform .35s var(--ease);
}
.sound-card:hover .card-img { transform:scale(1.06); }

.card-default {
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Russo One','Rajdhani',sans-serif;
  font-size:46px;font-weight:400;letter-spacing:1px;
  color:rgba(255,255,255,.92);
  background:
    radial-gradient(circle at 30% 25%,color-mix(in srgb,var(--c) 22%,transparent) 0%,transparent 65%),
    linear-gradient(160deg,var(--surface-2) 0%,var(--surface) 100%);
  text-shadow:0 2px 18px rgba(0,0,0,.7);
}
/* Crosshatch overlay only in default tile, very subtle */
.card-default::after {
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(45deg,rgba(255,255,255,.025) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.025) 75%),
    linear-gradient(45deg,rgba(255,255,255,.025) 25%,transparent 25%,transparent 75%,rgba(255,255,255,.025) 75%);
  background-size:14px 14px;
  background-position:0 0,7px 7px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.6) 0%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.6) 0%,transparent 100%);
  pointer-events:none;
}

/* Diagonal cut accent on top-right corner of visual */
.card-visual::after {
  content:'';position:absolute;
  top:-1px;right:-1px;
  width:22px;height:22px;
  background:var(--c);
  clip-path:polygon(100% 0,100% 100%,0 0);
  opacity:.85;
  transition:opacity var(--dur);
}
.sound-card:hover .card-visual::after { opacity:1; }


/* Card name strip — always visible, below visual */
.card-name {
  padding:9px 11px 11px;
  font-family:'Rajdhani',sans-serif;
  font-size:14px;font-weight:600;line-height:1.2;
  letter-spacing:.4px;
  color:var(--text);
  background:var(--surface);
  border-top:1px solid var(--border);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  word-break:break-word;
  min-height:42px;
}

/* Category badge inside visual area (subtle, top-left) */
.card-badge {
  position:absolute;top:7px;left:7px;z-index:3;
  display:inline-flex;align-items:center;gap:5px;
  font-family:'Share Tech Mono',monospace;
  font-size:9.5px;font-weight:600;letter-spacing:1.2px;
  text-transform:uppercase;
  padding:3px 7px;border-radius:2px;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(4px);
  color:var(--c);
}

/* Playing / holding states */
.sound-card.playing {
  border-color:var(--c);
  box-shadow:0 0 0 1px var(--c),0 0 30px color-mix(in srgb,var(--c) 30%,transparent);
}
.sound-card.playing .card-name {
  color:#fff;
  background:linear-gradient(90deg,color-mix(in srgb,var(--c) 18%,var(--surface)) 0%,var(--surface) 60%);
}
.sound-card.playing::before {
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--c);
  box-shadow:0 0 14px var(--c);
  z-index:4;
}
.sound-card.holding .card-visual {
  background:color-mix(in srgb,var(--c) 12%,var(--surface-2));
}

/* Hold-to-loop ring */
.hold-ring {
  position:absolute;inset:0;z-index:3;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .15s;pointer-events:none;
}
.sound-card.holding .hold-ring { opacity:1; }
.hold-ring svg { width:72px;height:72px;transform:rotate(-90deg); }
.hold-ring circle {
  fill:none;stroke:var(--c);stroke-width:4;
  stroke-dasharray:170;stroke-dashoffset:170;stroke-linecap:square;
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--c) 70%,transparent));
}
.sound-card.holding .hold-ring circle { animation:holdFill .35s linear forwards; }
@keyframes holdFill { to{stroke-dashoffset:0} }

/* Muzzle flash ripple */
@keyframes ripple { 0%{transform:scale(.92);opacity:.85} 100%{transform:scale(1.18);opacity:0} }
.play-ripple {
  position:absolute;inset:0;border-radius:inherit;
  border:2px solid var(--c);
  animation:ripple .5s ease-out forwards;
  pointer-events:none;z-index:5;
  filter:drop-shadow(0 0 6px var(--c));
}

/* Card action buttons */
.card-actions {
  position:absolute;top:7px;right:7px;
  display:flex;gap:5px;opacity:0;
  transition:opacity var(--dur);z-index:5;
}
.sound-card:hover .card-actions { opacity:1; }
.card-btn {
  width:30px;height:30px;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.15);
  background:rgba(0,0,0,.78);backdrop-filter:blur(4px);
  color:rgba(255,255,255,.9);
  cursor:pointer;font-size:13px;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--dur);
}
.card-btn.edit:hover { background:var(--orange);color:#0a0a08;border-color:var(--orange-hi); }
.card-btn.del:hover  { background:var(--red);color:#fff;border-color:var(--red); }

/* Skeleton */
.skeleton {
  border-radius:var(--radius-md);
  background:linear-gradient(90deg,var(--surface) 0%,var(--surface-2) 50%,var(--surface) 100%);
  background-size:200% 100%;animation:shimmer 1.6s infinite;
  border:1px solid var(--border);
  aspect-ratio:1 / 1.18; /* matches visual+name strip roughly */
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Empty state */
.empty-state {
  text-align:center;padding:80px 20px 60px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
}
.empty-icon { color:var(--text-3); }
.empty-state h3 {
  font-family:'Russo One','Rajdhani',sans-serif;
  font-size:20px;letter-spacing:2px;
  color:var(--text);
}
.empty-state p {
  color:var(--text-2);max-width:380px;line-height:1.6;
  font-size:14px;
}

/* ══════════════════════════════════════════════
   FAB
══════════════════════════════════════════════ */
.fab {
  position:fixed;z-index:80;
  right:20px;bottom:20px;
  width:58px;height:58px;
  border-radius:50%;
  background:var(--orange);
  border:none;
  color:#0a0a08;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 28px rgba(255,140,26,.4);
  transition:transform var(--dur),box-shadow var(--dur);
}
.fab:hover {
  transform:scale(1.06);
  box-shadow:0 10px 28px rgba(0,0,0,.55),0 0 38px rgba(255,140,26,.6);
}
.fab:active { transform:scale(.96); }

@media (min-width:769px) { .fab { display:none !important; } }

/* ══════════════════════════════════════════════
   NOW PLAYING — bottom bar
══════════════════════════════════════════════ */
.now-playing {
  position:fixed;z-index:90;
  left:50%;bottom:20px;
  transform:translateX(-50%) translateY(120%);
  display:flex;align-items:center;gap:14px;
  padding:9px 9px 9px 16px;
  background:var(--surface);
  border:1px solid rgba(255,140,26,.45);
  border-radius:var(--radius-md);
  min-width:320px;max-width:calc(100vw - 32px);
  box-shadow:0 16px 50px rgba(0,0,0,.75),0 0 30px rgba(255,140,26,.2);
  opacity:0;pointer-events:none;
  transition:transform .26s var(--ease),opacity .2s;
}
.now-playing.show {
  opacity:1;pointer-events:all;
  transform:translateX(-50%) translateY(0);
}

.np-bars {
  display:flex;align-items:flex-end;gap:2px;
  height:20px;width:22px;flex-shrink:0;
}
.np-bars span {
  flex:1;background:var(--orange);
  border-radius:1px;
  animation:bars 1s ease-in-out infinite;
}
.np-bars span:nth-child(1) { animation-delay:0s; }
.np-bars span:nth-child(2) { animation-delay:.15s; }
.np-bars span:nth-child(3) { animation-delay:.3s; }
.np-bars span:nth-child(4) { animation-delay:.45s; }
@keyframes bars {
  0%,100% { height:30%; }
  50%     { height:100%; }
}

.np-text { display:flex;flex-direction:column;min-width:0;flex:1; }
.np-label {
  font-family:'Share Tech Mono',monospace;
  font-size:9.5px;letter-spacing:2.5px;
  color:var(--orange);
  text-transform:uppercase;
}
.np-name {
  font-family:'Rajdhani',sans-serif;
  font-size:14.5px;font-weight:600;letter-spacing:.4px;
  color:#fff;
  max-width:260px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.np-stop {
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 14px;border-radius:var(--radius);
  background:var(--red);
  border:none;
  color:#fff;
  font-family:'Rajdhani',sans-serif;
  font-size:12.5px;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;
  cursor:pointer;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.4);
  transition:all var(--dur);
}
.np-stop:hover { background:#ff5a52;box-shadow:inset 0 -1px 0 rgba(0,0,0,.4),0 0 20px rgba(255,59,48,.5); }
.np-stop:active { transform:translateY(1px); }
.np-stop svg { width:11px;height:11px; }

/* ══════════════════════════════════════════════
   MODAL
══════════════════════════════════════════════ */
.modal-overlay {
  position:fixed;inset:0;z-index:200;
  background:rgba(0,0,0,.78);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.modal-overlay.open { opacity:1;pointer-events:all; }
.modal {
  position:relative;
  background:var(--surface);
  border:1px solid var(--border-2);
  border-radius:var(--radius-md);
  width:100%;overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.7);
  transform:scale(.96) translateY(10px);
  transition:transform .2s var(--ease);
  max-height:90vh;display:flex;flex-direction:column;
}
.modal::before {
  content:'';position:absolute;top:0;left:0;height:3px;width:80px;
  background:var(--orange);
  box-shadow:0 0 12px rgba(255,140,26,.55);
}
.modal-overlay.open .modal { transform:scale(1) translateY(0); }
.modal-upload { max-width:460px; }
.modal-cats   { max-width:520px; }
.modal-edit   { max-width:460px; }
.modal-mi     { max-width:720px; }

.modal-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px 16px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.modal-header h2 {
  font-family:'Russo One','Rajdhani',sans-serif;
  font-size:17px;font-weight:400;letter-spacing:2px;
  text-transform:uppercase;
  color:#fff;
}
.modal-close {
  width:32px;height:32px;border-radius:var(--radius);
  border:1px solid var(--border-2);
  background:rgba(255,255,255,.03);
  color:var(--text-2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--dur);
}
.modal-close:hover { color:var(--text);border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06); }
.modal-body {
  padding:20px 22px;overflow-y:auto;
  display:flex;flex-direction:column;gap:16px;flex:1;
}
.modal-footer {
  padding:14px 22px;
  border-top:1px solid var(--border);
  display:flex;gap:10px;align-items:center;flex-shrink:0;
}

/* ── Forms ── */
.form-field { display:flex;flex-direction:column;gap:6px; }
.form-field label {
  font-family:'Rajdhani',sans-serif;
  font-size:11px;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--text-2);
}
.label-opt { color:var(--text-3);font-weight:500;letter-spacing:.5px;text-transform:none; }
.form-field input,.form-field select {
  padding:10px 14px;
  background:rgba(255,255,255,.025);
  border:1px solid var(--border-2);
  border-radius:var(--radius);
  color:var(--text);
  font-family:'Inter','Rajdhani',sans-serif;
  font-size:14px;
  outline:none;
  transition:border-color var(--dur),background var(--dur);
  min-height:42px;
}
.form-field input:focus,.form-field select:focus {
  border-color:var(--orange);
  background:rgba(255,140,26,.04);
}
.form-field input::placeholder { color:var(--text-3); }
.form-hint { font-size:12.5px;color:var(--text-2);line-height:1.5; }
.select-wrap { position:relative; }
.select-wrap select { width:100%;cursor:pointer;appearance:none;-webkit-appearance:none;padding-right:36px; }
.select-wrap select option { background:#1a1a1e;color:var(--text); }
.select-arrow { position:absolute;right:13px;top:50%;transform:translateY(-50%);color:var(--text-2);pointer-events:none; }

/* ── Drop zone ── */
.dropzone {
  border:1px dashed var(--border-2);
  border-radius:var(--radius-md);
  padding:28px 20px;text-align:center;cursor:pointer;
  background:rgba(255,255,255,.015);
  transition:all var(--dur);
}
.dropzone:hover,.dropzone.drag-over {
  border-color:var(--orange);
  background:rgba(255,140,26,.04);
}
.dropzone.has-file {
  border-style:solid;
  border-color:rgba(107,212,37,.5);
  background:rgba(107,212,37,.05);
}
.dz-icon { color:var(--text-2);margin-bottom:10px; }
.dz-icon-ok { color:var(--green); }
.dz-text { font-size:14px;color:var(--text-2);margin-bottom:6px; }
.dz-link { color:var(--orange);font-weight:600;cursor:pointer; }
.dz-hint { font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--text-3);letter-spacing:.5px; }
.dz-filename { font-family:'Share Tech Mono',monospace;font-size:13px;color:var(--green);margin-bottom:4px;word-break:break-all; }

/* ── Image upload ── */
.img-drop-area {
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px;border-radius:var(--radius);
  border:1px dashed var(--border-2);
  color:var(--text-2);font-size:13px;
  cursor:pointer;transition:all var(--dur);
}
.img-drop-area:hover { border-color:var(--orange);color:var(--text);background:rgba(255,140,26,.04); }
.img-preview { position:relative; }
.img-preview img { width:100%;max-height:140px;object-fit:cover;border-radius:var(--radius); }
.img-remove {
  position:absolute;top:6px;right:6px;
  width:26px;height:26px;border-radius:var(--radius);
  background:rgba(0,0,0,.7);border:1px solid rgba(255,255,255,.15);
  color:#fff;cursor:pointer;font-size:12px;
  display:flex;align-items:center;justify-content:center;
}
.img-remove:hover { background:var(--red);border-color:var(--red); }

/* ── Edit image section ── */
.edit-img-section { display:flex;justify-content:center; }
.edit-img-wrap {
  position:relative;width:150px;height:150px;
  border-radius:var(--radius-md);overflow:hidden;
  border:1px solid var(--border-2);
  background:var(--surface-2);
  cursor:pointer;
}
.edit-img-wrap:hover .edit-img-overlay { opacity:1; }
.edit-img-default {
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Russo One','Rajdhani',sans-serif;
  font-size:36px;letter-spacing:1px;
  color:rgba(255,255,255,.85);
  background:linear-gradient(160deg,var(--surface-2) 0%,var(--surface) 100%);
}
.edit-img-wrap img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover; }
.edit-img-overlay {
  position:absolute;inset:0;
  background:rgba(0,0,0,.7);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  opacity:0;transition:opacity var(--dur);
}
.edit-img-btn {
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:var(--radius);
  border:1px solid var(--border-2);
  background:rgba(255,255,255,.08);color:#fff;
  font-family:'Rajdhani',sans-serif;
  font-size:11.5px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;cursor:pointer;
}
.edit-img-btn:hover { background:var(--orange);color:#0a0a08;border-color:var(--orange); }
.edit-img-btn-remove:hover { background:var(--red) !important;color:#fff !important; }

/* ── Categories list (modal) ── */
.cat-list { display:flex;flex-direction:column;gap:6px;margin-bottom:20px; }
.cat-item {
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:var(--radius);
  background:rgba(255,255,255,.025);
  border:1px solid var(--border);
  transition:all var(--dur);
}
.cat-item.editing { border-color:var(--orange);background:rgba(255,140,26,.05); }
.cat-item-dot { width:10px;height:10px;border-radius:50%;flex-shrink:0;box-shadow:0 0 8px currentColor; }
.cat-item-icon { font-size:18px; }
.cat-item-name { flex:1;font-weight:600;font-size:14px;letter-spacing:.5px;text-transform:uppercase; }
.cat-item-count {
  font-family:'Share Tech Mono',monospace;
  font-size:11px;color:var(--text-2);letter-spacing:1px;
  padding:2px 6px;background:rgba(0,0,0,.3);border-radius:2px;
}
.cat-item-edit-row { display:flex;gap:6px;align-items:center;flex:1; }
.cat-item-edit-row input[type="text"] {
  flex:1;padding:7px 10px;
  background:rgba(0,0,0,.4);
  border:1px solid var(--orange);
  border-radius:var(--radius);
  color:var(--text);font-size:14px;outline:none;font-family:inherit;
}
.cat-item-edit-icon { width:38px;padding:5px 4px;background:rgba(0,0,0,.4);border:1px solid var(--border-2);border-radius:var(--radius);color:var(--text);font-size:18px;text-align:center;outline:none; }
.cat-item-edit-color { width:38px;height:32px;border:1px solid var(--border-2);border-radius:var(--radius);background:none;cursor:pointer;padding:2px; }
.cat-item-edit-color::-webkit-color-swatch-wrapper { padding:2px; }
.cat-item-edit-color::-webkit-color-swatch { border-radius:2px;border:none; }
.cat-item-btn {
  width:32px;height:32px;border-radius:var(--radius);
  flex-shrink:0;font-size:13px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all var(--dur);
}
.cat-item-edit-btn { background:rgba(255,140,26,.08);border:1px solid rgba(255,140,26,.3);color:var(--orange); }
.cat-item-edit-btn:hover { background:var(--orange);color:#0a0a08; }
.cat-item-save-btn { background:rgba(107,212,37,.08);border:1px solid rgba(107,212,37,.3);color:var(--green); }
.cat-item-save-btn:hover { background:var(--green);color:#0a0a08; }
.cat-item-del-btn { background:rgba(255,59,48,.06);border:1px solid rgba(255,59,48,.25);color:rgba(255,59,48,.75); }
.cat-item-del-btn:hover { background:var(--red);color:#fff; }

.section-label {
  font-family:'Rajdhani',sans-serif;
  font-size:11px;font-weight:700;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--text-2);
  margin-bottom:10px;
}
.add-cat-row { display:flex;gap:8px;align-items:center; }
.add-cat-name { flex:1;padding:10px 12px;background:rgba(255,255,255,.025);border:1px solid var(--border-2);border-radius:var(--radius);color:var(--text);font-size:14px;outline:none;min-height:42px; }
.add-cat-name:focus { border-color:var(--orange); }
.add-cat-name::placeholder { color:var(--text-3); }
.add-cat-icon { width:48px;padding:9px 4px;background:rgba(255,255,255,.025);border:1px solid var(--border-2);border-radius:var(--radius);color:var(--text);font-size:20px;text-align:center;outline:none;min-height:42px; }
.add-cat-color { width:42px;height:42px;border:1px solid var(--border-2);border-radius:var(--radius);background:none;cursor:pointer;padding:2px; }
.add-cat-color::-webkit-color-swatch-wrapper { padding:2px; }
.add-cat-color::-webkit-color-swatch { border-radius:2px;border:none; }

/* ══════════════════════════════════════════════
   MYINSTANTS
══════════════════════════════════════════════ */
.mi-search-row { display:flex;gap:10px;align-items:center; }
.mi-cat-select { min-width:160px; }
.mi-search-input-wrap .search-input { padding-right:14px; }
.mi-results {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:8px;
  min-height:240px;
  max-height:52vh;
  overflow-y:auto;
  padding:2px;
}
.mi-empty,.mi-loading {
  grid-column:1 / -1;
  text-align:center;padding:50px 20px;
  font-family:'Share Tech Mono',monospace;
  font-size:11.5px;letter-spacing:2px;
  color:var(--text-3);
  text-transform:uppercase;
}
.mi-loading::before {
  content:'';display:inline-block;
  width:8px;height:8px;border-radius:50%;
  background:var(--orange);margin-right:10px;
  animation:pulse 1s infinite;vertical-align:middle;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

.mi-result {
  display:flex;align-items:center;gap:10px;
  padding:9px 11px;border-radius:var(--radius);
  background:rgba(255,255,255,.025);
  border:1px solid var(--border);
  transition:all var(--dur);
}
.mi-result:hover { border-color:var(--border-2);background:rgba(255,255,255,.04); }
.mi-result.imported { border-color:rgba(107,212,37,.4);background:rgba(107,212,37,.05);opacity:.75; }

.mi-play {
  flex-shrink:0;
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,140,26,.1);
  border:1px solid rgba(255,140,26,.4);
  color:var(--orange);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--dur);
}
.mi-play:hover { background:var(--orange);color:#0a0a08; }
.mi-play.playing { background:var(--orange);color:#0a0a08;animation:pulse 1.2s infinite; }
.mi-play svg { width:12px;height:12px;margin-left:2px; }
.mi-play.playing svg { margin-left:0; }

.mi-name {
  flex:1;
  font-family:'Inter','Rajdhani',sans-serif;
  font-size:14px;font-weight:500;
  color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;
}
.mi-import {
  flex-shrink:0;
  padding:6px 11px;border-radius:var(--radius);
  background:var(--orange);
  color:#0a0a08;border:none;
  font-family:'Rajdhani',sans-serif;
  font-size:11.5px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;
  cursor:pointer;transition:all var(--dur);
}
.mi-import:hover { background:var(--orange-hi); }
.mi-import:disabled { background:rgba(107,212,37,.15);color:var(--green);cursor:default; }
.mi-import.loading { opacity:.7;cursor:wait;pointer-events:none; }

/* ══════════════════════════════════════════════
   AUTO-IMAGE PROGRESS
══════════════════════════════════════════════ */
.ap-bar {
  width:100%;height:8px;border-radius:99px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border-2);
  overflow:hidden;
}
.ap-bar-fill {
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--orange) 0%,var(--orange-hi) 100%);
  transition:width .25s var(--ease);
  box-shadow:0 0 12px rgba(255,140,26,.6);
}
.ap-status {
  display:flex;justify-content:space-between;align-items:center;
  margin-top:10px;gap:10px;
}
.ap-counter {
  font-family:'Share Tech Mono',monospace;
  font-size:11px;letter-spacing:1.5px;
  color:var(--orange);
}
.ap-current {
  flex:1;text-align:right;
  font-size:13px;color:var(--text-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;
}
.ap-log {
  margin-top:14px;padding:10px 12px;
  max-height:160px;overflow-y:auto;
  background:rgba(0,0,0,.3);
  border:1px solid var(--border);
  border-radius:var(--radius);
  font-family:'Share Tech Mono',monospace;
  font-size:11px;line-height:1.7;letter-spacing:.3px;
}
.ap-log-row { display:flex;gap:8px;align-items:flex-start; }
.ap-log-row .ap-ok   { color:var(--green);flex-shrink:0; }
.ap-log-row .ap-err  { color:var(--red);flex-shrink:0; }
.ap-log-row .ap-name { color:var(--text-2);min-width:0;word-break:break-word; }

/* ══════════════════════════════════════════════
   TOASTS
══════════════════════════════════════════════ */
.toasts {
  position:fixed;bottom:90px;right:20px;z-index:9999;
  display:flex;flex-direction:column;gap:8px;pointer-events:none;
}
.toast {
  padding:11px 16px;border-radius:var(--radius);
  font-family:'Rajdhani',sans-serif;
  font-size:13px;font-weight:600;letter-spacing:.6px;
  background:var(--surface);
  border:1px solid var(--border-2);
  border-left:3px solid var(--orange);
  color:var(--text);
  max-width:340px;pointer-events:all;
  animation:toastSlide .26s var(--ease);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
}
@keyframes toastSlide { from{transform:translateX(110%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes toastOut   { from{transform:translateX(0);opacity:1} to{transform:translateX(110%);opacity:0} }
.toast.success { border-left-color:var(--green);color:var(--green); }
.toast.error   { border-left-color:var(--red);color:#ff8580; }
.toast.info    { border-left-color:var(--orange);color:var(--orange-hi); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:6px;height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.08);border-radius:2px; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.18); }

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width:1023px) {
  .layout { grid-template-columns:1fr; }
  .sidebar {
    position:fixed;top:0;left:0;
    height:100vh;width:280px;
    transform:translateX(-100%);
    transition:transform .25s var(--ease);
    background:var(--bg-2);
    border-right:1px solid var(--border-2);
    z-index:60;
    padding-top:20px;
  }
  .sidebar.open { transform:translateX(0); }
  .drawer-backdrop { display:block; }
}

@media (max-width:768px) {
  :root { --nav-h:54px; }
  .navbar { gap:8px;padding:0 12px;grid-template-columns:auto 1fr auto; }
  .brand-name { display:none; }
  .navbar-search { max-width:none; }
  .search-input { padding:8px 50px 8px 38px;font-size:14px;height:38px; }
  .search-ico { left:12px; }
  .search-clear { right:36px; }
  .search-kbd { display:none; }

  .main { padding:18px 14px 130px; }
  .main-header { margin-bottom:14px; }
  .main-title-text { font-size:18px; }

  .sounds-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px; }
  .card-name { font-size:13px;padding:8px 9px 10px;min-height:38px; }
  .card-default { font-size:38px; }
  .card-actions { opacity:1; }
  .card-btn { width:32px;height:32px;font-size:14px; }

  .admin-menu { right:12px;top:60px; }

  .now-playing { left:12px;right:12px;bottom:14px;min-width:0;max-width:none;transform:translateY(120%); }
  .now-playing.show { transform:translateY(0); }
  .np-name { max-width:160px; }

  .fab { right:16px;bottom:84px; }
  .toasts { left:12px;right:12px;bottom:auto;top:70px; }
  .toast { max-width:100%; }
}

@media (max-width:600px) {
  .modal-overlay { align-items:flex-end;padding:0; }
  .modal { border-radius:var(--radius-md) var(--radius-md) 0 0;max-height:92vh; }
  .modal-upload,.modal-cats,.modal-edit,.modal-mi { max-width:100%; }
  .mi-search-row { flex-direction:column;align-items:stretch; }
  .mi-cat-select { min-width:0; }
  .mi-results { grid-template-columns:1fr;max-height:60vh; }
  .add-cat-row { flex-wrap:wrap; }
  .add-cat-name { flex-basis:100%; }
}