/* CSS Custom Properties for theming */
:root {
  /* Light theme (default) */
  --accent-color: #10b981;
  --panel-border: #e5e7eb;
  --control-bg: #ffffff;
  --hover-bg: #f8fafc;
  --selected-bg: #ecfdf5;
  --selected-fg: #065f46;
  --border-color: #9ca3af;
  --section-bg: rgba(0,0,0,0.02);
  --section-border: rgba(0,0,0,0.05);
}

/* Dark theme overrides */
body.theo-theme-dark {
  --accent-color: #10b981;
  --panel-border: #374151;
  --control-bg: #1f2937;
  --hover-bg: #374151;
  --selected-bg: #064e3b;
  --selected-fg: #d1fae5;
  --border-color: #6b7280;
  --section-bg: rgba(255,255,255,0.05);
  --section-border: rgba(255,255,255,0.1);
}

.theo-overlay-player-root{position:relative;z-index:9999}
.top-wrapper{position:fixed;display:flex;gap:8px;z-index:2147483647;align-items:stretch}
.top-wrapper.pos-custom{top:auto;left:auto;right:auto;bottom:auto;transform:none}
.top-header{user-select:none;-webkit-user-select:none}
.top-wrapper.pos-top-left{top:1rem;left:1rem;right:auto;bottom:auto}
.top-wrapper.pos-top-center{top:1rem;left:50%;transform:translateX(-50%)}
.top-wrapper.pos-top-right{top:1rem;right:1rem}
.top-wrapper.pos-middle-left{top:50%;left:1rem;transform:translateY(-50%)}
.top-wrapper.pos-middle-center{top:50%;left:50%;transform:translate(-50%,-50%)}
.top-wrapper.pos-middle-right{top:50%;right:1rem;transform:translateY(-50%)}
.top-wrapper.pos-bottom-left{bottom:1rem;left:1rem}
.top-wrapper.pos-bottom-center{bottom:1rem;left:50%;transform:translateX(-50%)}
.top-wrapper.pos-bottom-right{bottom:1rem;right:1rem}
.top-vstack{display:flex;flex-direction:column;gap:8px;align-items:stretch}

.top-shell{position:relative;width:480px;max-width:480px;min-width:320px;color:var(--top-fg,#111);background:var(--top-bg,#fff);border:1px solid rgba(0,0,0,.1);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.2);overflow:hidden;padding-top:0;min-height:44px}
.top-shell.collapsed{background:transparent;border:none;box-shadow:none;padding:0;width:44px;min-width:44px;height:44px;min-height:44px}
/* 3x3 grid positions are now applied to wrapper */
.top-toggle{position:absolute;top:10px;right:10px;height:28px;width:28px;border-radius:14px;border:1px solid #e5e7eb;background:#fff;display:flex;align-items:center;justify-content:center;line-height:1;color:#111;box-shadow:0 2px 6px rgba(0,0,0,.12);z-index:2;cursor:pointer;padding:0;box-sizing:border-box}
.top-shell.collapsed .top-toggle{display:none}
/* 3x3 grid positions for FAB */
.top-fab{position:fixed;height:44px;width:44px;border-radius:22px;border:1px solid #e5e7eb;background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.2);z-index:2147483647;cursor:pointer;color:#111;transition:transform 0.2s ease,box-shadow 0.2s ease}
.top-fab:hover{box-shadow:0 8px 20px rgba(0,0,0,.25)}
.top-fab.fab-top-left{top:16px;left:16px}
.top-fab.fab-top-left:hover{transform:scale(1.05)}
.top-fab.fab-top-center{top:16px;left:50%;transform:translateX(-50%)}
.top-fab.fab-top-center:hover{transform:translateX(-50%) scale(1.05)}
.top-fab.fab-top-right{top:16px;right:16px}
.top-fab.fab-top-right:hover{transform:scale(1.05)}
.top-fab.fab-middle-left{top:50%;left:16px;transform:translateY(-50%)}
.top-fab.fab-middle-left:hover{transform:translateY(-50%) scale(1.05)}
.top-fab.fab-middle-center{top:50%;left:50%;transform:translate(-50%,-50%)}
.top-fab.fab-middle-center:hover{transform:translate(-50%,-50%) scale(1.05)}
.top-fab.fab-middle-right{top:50%;right:16px;transform:translateY(-50%)}
.top-fab.fab-middle-right:hover{transform:translateY(-50%) scale(1.05)}
.top-fab.fab-bottom-left{bottom:16px;left:16px}
.top-fab.fab-bottom-left:hover{transform:scale(1.05)}
.top-fab.fab-bottom-center{bottom:16px;left:50%;transform:translateX(-50%)}
.top-fab.fab-bottom-center:hover{transform:translateX(-50%) scale(1.05)}
.top-fab.fab-bottom-right{bottom:16px;right:16px}
.top-fab.fab-bottom-right:hover{transform:scale(1.05)}
.top-fab.fab-custom{top:auto;left:auto;right:auto;bottom:auto;transform:none}
.top-fab.fab-custom:hover{transform:scale(1.05)}
.top-fab::before{content:"♪";font-size:18px;line-height:1;color:currentColor}

/* FAB Playing State (independent of ticker) */
.top-fab.playing {
  background: #10b981; /* Light green when playing */
  color: white;
}

/* FAB Paused State */
.top-fab.paused {
  background: #f59e0b; /* Yellow when paused */
  color: white;
}

/* FAB Muted State */
.top-fab.muted {
  background: #ef4444; /* Red when muted */
  color: white;
}

/* FAB Ticker Animation */
.top-fab.fab-ticker {
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  width: 200px; /* Expanded width for ticker */
  justify-content: flex-start;
  padding: 0;
  /* Keep position: fixed for proper positioning, not relative */
}

/* Animate the existing musical note to slide left */
.top-fab.fab-ticker::before {
  position: absolute;
  left: 22px; /* Centered in 44px icon area (22px from left) */
  top: 50%;
  transform: translateY(-50%);
  transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}

/* Ensure ticker respects original FAB positioning */
.top-fab.fab-ticker.fab-top-left { top: 16px; left: 16px; }
.top-fab.fab-ticker.fab-top-center { top: 16px; left: 50%; transform: translateX(-50%); }
.top-fab.fab-ticker.fab-top-right { top: 16px; right: 16px; }
.top-fab.fab-ticker.fab-middle-left { top: 50%; left: 16px; transform: translateY(-50%); }
.top-fab.fab-ticker.fab-middle-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.top-fab.fab-ticker.fab-middle-right { top: 50%; right: 16px; transform: translateY(-50%); }
.top-fab.fab-ticker.fab-bottom-left { bottom: 16px; left: 16px; }
.top-fab.fab-ticker.fab-bottom-center { bottom: 16px; left: 50%; transform: translateX(-50%); }
.top-fab.fab-ticker.fab-bottom-right { bottom: 16px; right: 16px; }
.top-fab.fab-ticker.fab-custom { /* Custom position preserved by inline styles */ }

.top-fab.fab-ticker .fab-ticker-container {
  position: absolute;
  left: 44px;
  right: 8px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.top-fab.fab-ticker .fab-ticker-text {
  display: block;
  font-size: 13px;
  font-weight: 500;
  animation: ticker-scroll 4s linear infinite;
  white-space: nowrap;
}

@keyframes ticker-scroll {
  0% { transform: translateX(0); }
  20% { transform: translateX(0); }
  80% { transform: translateX(-100%); }
  100% { transform: translateX(-100%); }
}

/* Collapsing animation */
.top-fab.fab-ticker.collapsing {
  animation: fab-collapse 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* During collapse, animate icon back to center */
.top-fab.fab-ticker.collapsing::before {
  left: 22px; /* Stay centered during collapse */
}

@keyframes fab-collapse {
  from {
    width: 200px;
  }
  to {
    width: 44px;
  }
}

/* Multi-state ticker styles for mute/pause states */
.top-fab.fab-multi-state {
  width: 120px; /* Smaller width for state text (Muted/Paused) */
  justify-content: center;
}

.top-fab.fab-multi-state .fab-ticker-container {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-fab.fab-multi-state .fab-ticker-text {
  transition: opacity 0.4s ease;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

/* Show icon only state - hide the text and show icon */
.top-fab.show-icon-only::before {
  opacity: 1;
  z-index: 2;
  transition: opacity 0.4s ease;
}

.top-fab.show-icon-only .fab-ticker-text {
  opacity: 0 !important;
}

/* Hide icon when showing text */
.top-fab.fab-multi-state:not(.show-icon-only)::before {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.top-toggle::before{content:"–";font-size:20px;line-height:1;color:currentColor}
.top-controls .top-prev::before{content:"⏮"}
.top-controls .top-next::before{content:"⏭"}
.top-controls .top-play::before{content:"▶"}
.top-controls .top-play.is-playing::before{content:"⏸"}
.top-panel[hidden]{display:none}
.top-panel{padding:0 .75rem .75rem}
.top-header{position:relative;display:flex;align-items:center;justify-content:center;padding:.5rem 0 0;margin:0 0 .25rem;gap:.5rem}
.app-title{pointer-events:none;max-width:70%;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-header .top-toggle{position:absolute;top:6px;right:8px}
/* Settings gear next to minimize */
.top-settings{position:absolute;top:6px;right:40px;height:28px;width:28px;border-radius:14px;border:1px solid #e5e7eb;background:#fff;display:flex;align-items:center;justify-content:center;line-height:1;color:#111;box-shadow:0 2px 6px rgba(0,0,0,.12);z-index:2;cursor:pointer;padding:0;box-sizing:border-box}
.top-settings::before{content:"⚙";font-size:16px;line-height:1}
.top-cover{position:relative;display:flex;align-items:center;justify-content:center;height:240px}
.top-cover .cover-ph{position:absolute;inset:0;border-radius:12px;background:linear-gradient(135deg,#f3f4f6,#e5e7eb);box-shadow:inset 0 2px 8px rgba(0,0,0,.06)}
.top-cover .cover{position:relative;width:100%;height:100%;object-fit:contain;display:none;border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,.15)}
.track-title{display:flex;justify-content:center;margin:.5rem 0 .25rem}
.track-title .top-title{font-weight:700;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-controls{display:flex;gap:.5rem;align-items:center;justify-content:center;margin-top:.25rem}
.top-controls .btn{height:44px;width:44px;border-radius:22px;border:1px solid #e5e7eb;background:#f5f5f5;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease}

/* Play button states */
.top-controls .top-play.is-paused{background:#f5f5f5;color:#6b7280;border-color:#e5e7eb}
.top-controls .top-play.is-playing{background:#10b981;color:#ffffff;border-color:#10b981}

/* Dark theme play button states */
.theme-dark .top-controls .top-play.is-paused{background:#374151;color:#9ca3af;border-color:#4b5563}
.theme-dark .top-controls .top-play.is-playing{background:#10b981;color:#ffffff;border-color:#10b981}

/* Toast notification system */
.theo-toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2147483648;
  pointer-events: none;
}

.theo-toast {
  background: #1f2937;
  color: #ffffff;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  font-size: 14px;
  font-weight: 500;
  max-width: 300px;
  word-wrap: break-word;
  transform: translateX(100%);
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: auto;
}

.theo-toast.show {
  transform: translateX(0);
  opacity: 1;
}

/* HTML Dialog Overlay Styles */
.theo-html-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  z-index: 2147483649;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.theo-html-dialog-overlay.show {
  opacity: 1;
  visibility: visible;
}

.theo-html-dialog {
  position: relative;
  width: 90%;
  max-width: 800px;
  height: 80%;
  max-height: 600px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  transform: scale(0.8);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.theo-html-dialog-overlay.show .theo-html-dialog {
  transform: scale(1);
}

/* Direction-based animations */
.theo-html-dialog-overlay.fly-top .theo-html-dialog {
  transform: translateY(-100vh) scale(0.8);
}

.theo-html-dialog-overlay.fly-bottom .theo-html-dialog {
  transform: translateY(100vh) scale(0.8);
}

.theo-html-dialog-overlay.fly-left .theo-html-dialog {
  transform: translateX(-100vw) scale(0.8);
}

.theo-html-dialog-overlay.fly-right .theo-html-dialog {
  transform: translateX(100vw) scale(0.8);
}

.theo-html-dialog-overlay.show .theo-html-dialog {
  transform: translate(0, 0) scale(1);
}

/* Fly-out animations */
.theo-html-dialog-overlay.fly-out-top .theo-html-dialog {
  transform: translateY(-100vh) scale(0.8);
}

.theo-html-dialog-overlay.fly-out-bottom .theo-html-dialog {
  transform: translateY(100vh) scale(0.8);
}

.theo-html-dialog-overlay.fly-out-left .theo-html-dialog {
  transform: translateX(-100vw) scale(0.8);
}

.theo-html-dialog-overlay.fly-out-right .theo-html-dialog {
  transform: translateX(100vw) scale(0.8);
}

.theo-html-dialog-header {
  position: relative;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #e5e7eb;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
}

.theo-html-dialog-close {
  position: absolute;
  top: 16px;
  right: 20px;
  width: 32px;
  height: 32px;
  border: none;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #6b7280;
  transition: all 0.2s ease;
  z-index: 10;
}

.theo-html-dialog-close:hover {
  background: #f3f4f6;
  color: #374151;
  transform: scale(1.1);
}

.theo-html-dialog-close::before {
  content: "×";
  font-weight: bold;
  line-height: 1;
}

.theo-html-dialog-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  padding-right: 40px;
}

.theo-html-dialog-content {
  position: relative;
  height: calc(100% - 80px);
  overflow: hidden;
}

.theo-html-dialog-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: #ffffff;
}

.theo-html-dialog-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  color: #6b7280;
}

.theo-html-dialog-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #e5e7eb;
  border-top: 3px solid #3b82f6;
  border-radius: 50%;
  animation: theo-spin 1s linear infinite;
}

@keyframes theo-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.theo-html-dialog-loading-text {
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}

.theo-html-dialog-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 24px;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border-top: 1px solid #e5e7eb;
  text-align: center;
}

.theo-html-dialog-footer-text {
  font-size: 12px;
  color: #6b7280;
  margin: 0;
}

/* Dark theme support */
.theme-dark .theo-html-dialog {
  background: #1f2937;
  color: #f9fafb;
}

.theme-dark .theo-html-dialog-header {
  background: linear-gradient(135deg, #374151, #4b5563);
  border-bottom-color: #4b5563;
}

.theme-dark .theo-html-dialog-title {
  color: #f9fafb;
}

.theme-dark .theo-html-dialog-close {
  background: #374151;
  color: #9ca3af;
}

.theme-dark .theo-html-dialog-close:hover {
  background: #4b5563;
  color: #d1d5db;
}

.theme-dark .theo-html-dialog-footer {
  background: linear-gradient(135deg, #374151, #4b5563);
  border-top-color: #4b5563;
}

.theme-dark .theo-html-dialog-footer-text {
  color: #9ca3af;
}

.theme-dark .theo-html-dialog-loading-text {
  color: #9ca3af;
}

.theme-dark .theo-html-dialog-spinner {
  border-color: #4b5563;
  border-top-color: #60a5fa;
}
  transform: translateX(0);
  opacity: 1;
}

/* Dark theme toast */
.theme-dark .theo-toast {
  background: #374151;
  color: #e5e7eb;
  border: 1px solid #4b5563;
}

/* Light theme toast */
.theme-light .theo-toast {
  background: #ffffff;
  color: #111827;
  border: 1px solid #e5e7eb;
}
.top-controls .eq-toggle{display:none}
.top-controls .btn-mini{height:30px;width:38px;border-radius:8px;border:1px solid #e5e7eb;background:#fafafa;font-weight:700}
/* Modern Volume Control */
.volume-control{position:relative;display:flex;align-items:center}
.volume-btn{height:44px;width:44px;border-radius:22px;border:1px solid #e5e7eb;background:#f5f5f5;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s ease;font-size:18px;line-height:1}
.volume-btn:hover{background:#e5e7eb;transform:scale(1.05)}

/* Volume icon states using pseudo-elements */
.volume-btn.volume-high::before{content:"🔊"}
.volume-btn.volume-low::before{content:"🔉"}
.volume-btn.volume-muted::before{content:"🔇"}

/* Muted visual indicator - red slash/cross over the icon */
.volume-btn.volume-muted-visual {
  position: relative;
}

.volume-btn.volume-muted-visual::after {
  content: "❌";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: #ef4444;
  text-shadow: 0 0 4px rgba(239, 68, 68, 0.5);
  z-index: 1;
  pointer-events: none;
}

.volume-popup{position:fixed;top:auto;left:auto;background:#ffffff;border:1px solid #e5e7eb;border-radius:12px;padding:12px 16px;box-shadow:0 8px 24px rgba(0,0,0,0.12);opacity:0;visibility:hidden;transition:all 0.2s ease;z-index:2147483645;pointer-events:none;min-width:200px}
.volume-popup.visible{opacity:1;visibility:visible;pointer-events:auto}

/* Tooltip arrow pointing down (when popup is above button) */
.volume-popup::after{content:'';position:absolute;top:100%;left:var(--arrow-left, 50%);transform:translateX(-50%);width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid #ffffff}
.volume-popup::before{content:'';position:absolute;top:calc(100% + 1px);left:var(--arrow-left, 50%);transform:translateX(-50%);width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:9px solid #e5e7eb}

/* Tooltip arrow pointing up (when popup is below button) */
.volume-popup.below::after{top:auto;bottom:100%;left:var(--arrow-left, 50%);border-top:none;border-bottom:8px solid #ffffff}
.volume-popup.below::before{top:auto;bottom:calc(100% + 1px);left:var(--arrow-left, 50%);border-top:none;border-bottom:9px solid #e5e7eb}

.volume-slider-container{position:relative;height:32px;display:flex;align-items:center;margin-bottom:8px}
.volume-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;background:#f1f5f9;border-radius:3px;outline:none;border:none;cursor:pointer}
.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#3b82f6;cursor:pointer;transition:all 0.2s ease;box-shadow:0 2px 6px rgba(59,130,246,0.3)}
.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 4px 12px rgba(59,130,246,0.4)}
.volume-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#3b82f6;cursor:pointer;border:none;transition:all 0.2s ease;box-shadow:0 2px 6px rgba(59,130,246,0.3)}
.volume-slider::-moz-range-thumb:hover{transform:scale(1.1);box-shadow:0 4px 12px rgba(59,130,246,0.4)}

.volume-fill{position:absolute;left:0;top:50%;transform:translateY(-50%);height:6px;background:linear-gradient(90deg,#10b981,#3b82f6);border-radius:3px;pointer-events:none;transition:width 0.1s ease;z-index:1}

.volume-value{text-align:center;font-size:12px;font-weight:600;color:#64748b;min-height:16px}

/* Dark theme volume control */
.theme-dark .volume-btn{background:#374151;border-color:#4b5563;color:#e5e7eb}
.theme-dark .volume-btn:hover{background:#4b5563}
.theme-dark .volume-popup{background:#1f2937;border-color:#374151;color:#e5e7eb}
.theme-dark .volume-popup::after{border-top-color:#1f2937}
.theme-dark .volume-popup::before{border-top-color:#374151}
.theme-dark .volume-slider{background:#374151}
.theme-dark .volume-value{color:#9ca3af}

/* Dark theme muted visual indicator */
.theme-dark .volume-btn.volume-muted-visual::after {
  color: #f87171;
  text-shadow: 0 0 4px rgba(248, 113, 113, 0.5);
}

.eq-panel{display:none}

/* Inline EQ dock */
.eq-dock{position:relative;display:grid;grid-template-rows:28px auto 8px auto;gap:8px;margin:.5rem 0;padding:.75rem;border:1px solid #e5e7eb;border-radius:10px;background:#fff}
.eq-header{height:28px;display:flex;align-items:center;justify-content:center;font-weight:700;border-bottom:1px solid #e5e7eb;margin:-.5rem -.5rem .25rem;cursor:move;user-select:none}
.eq-shell .eq-header{margin:-.75rem -.75rem .25rem}
.eq-dock.inline .eq-header{display:none}
.eq-shell .eq-dock{margin:0;border:none;box-shadow:none}
.eq-canvas-wrap{position:relative;height:220px;display:flex;align-items:center;justify-content:center}
.eq-curve{display:block}
.eq-sliders{display:none}

/* EQ toolbar */
.eq-toolbar{display:flex;gap:.5rem;align-items:center;justify-content:center;margin:.25rem 0 .1rem}
.eq-toolbar .eq-power,.eq-toolbar .eq-reset{height:26px;padding:2px 10px 0;border-radius:6px;border:1px solid #e5e7eb;background:#fff;cursor:pointer;font-weight:700;line-height:20px}
.eq-toolbar .eq-power.state-on{color:#065f46;border-color:#10b981;background:#ecfdf5}
.eq-toolbar .eq-power.state-off{color:#991b1b;border-color:#ef4444;background:#fee2e2}
.eq-toolbar .eq-presets{height:28px;min-width:140px;border:1px solid #e5e7eb;border-radius:6px;padding:0 8px;background:var(--control-bg,#fff);color:var(--top-fg,#111827)}
.eq-toolbar .eq-presets:focus{outline:2px solid #60a5fa;outline-offset:1px}

/* Gradient divider */
.eq-divider{height:10px;background:linear-gradient(to bottom, rgba(0,0,0,.08), rgba(0,0,0,0));opacity:.25;border-radius:6px}

/* Side EQ shell */
.eq-shell{display:flex;align-items:center;justify-content:center;background:#fff;color:#111;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.2);width:420px;max-width:420px;overflow:hidden;height:auto}
.theme-dark .eq-shell{box-shadow:0 10px 30px rgba(0,0,0,.6)}
.eq-shell.left,.eq-shell.right{align-self:center}
.eq-btn,.viz-btn{height:28px;min-width:28px;padding:0 6px;border-radius:6px;border:1px solid #e5e7eb;display:flex;align-items:center;justify-content:center;background:#fff;cursor:pointer;font-weight:700;letter-spacing:.5px}
.eq-btn.state-open{background:#ecfdf5;color:#065f46;border-color:#10b981}
.eq-btn.state-closed{background:#fff;color:#a16207;border-color:#f59e0b}
.viz-btn.state-open{background:#ede9fe;color:#6b21a8;border-color:#8b5cf6}
.viz-btn.state-closed{background:#fff;color:#7c2d12;border-color:#ea580c}
.op-icon{width:20px;height:20px;display:block;fill:currentColor}
.top-fab svg,.top-toggle svg,.top-controls .btn svg{width:20px;height:20px}
.top-controls .btn:focus{outline:2px solid #2563eb;outline-offset:2px}
.top-seek{width:100%;margin-top:.5rem}
.top-waveform{width:100%;height:64px;cursor:pointer;display:block;touch-action:none;margin-top:.25rem;min-height:64px}
.theme-dark .top-waveform{background:#1f2937}
.theme-light .top-waveform{background:#f3f4f6}

/* Waveform progress colors - orangey-yellow overlay with contrasty waveform behind */
.theme-light .top-waveform .progress-overlay{background:rgba(255,165,0,0.5)}
.theme-dark .top-waveform .progress-overlay{background:rgba(255,165,0,0.6)}

/* Hide unused visualization canvas to prevent gaps */
.top-viz{display:none}

/* Player info styling */
.player-info {
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e9ecef;
}

.theme-dark .player-info {
  background: #2d3748;
  border-color: #4a5568;
}
.top-playlist{max-height:160px;overflow:auto;overflow-x:hidden;margin-top:.25rem;display:grid;grid-template-columns:1fr;gap:.25rem;padding-right:8px;scrollbar-gutter:stable;align-content:start;justify-content:start}
.top-track-row{display:grid;grid-template-columns:minmax(0,calc(100% - 36px)) 28px;align-items:center;gap:.35rem;width:100%}
.top-track-row.is-directory{grid-template-columns:1fr !important}
.top-track-row.is-directory > :not(.top-track){display:none}
.top-track{width:100%}
.top-track-row.is-directory .top-track{width:100%}
.icon-btn{height:28px;width:24px;border-radius:12px;border:1px solid #e5e7eb;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;box-sizing:border-box}
.top-track{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.25;min-height:48px;padding:.55rem .7rem;box-sizing:border-box}
.playlist-item{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.2;min-height:56px}
.top-track-row .icon-btn,.playlist-item-row .icon-btn{height:48px;width:24px;border-radius:8px;justify-self:end}
.icon-btn.add-btn::before{content:"+"}
.icon-btn.remove-btn::before{content:"–"}
.top-track{text-align:left;border:1px solid #e5e7eb;border-radius:8px;padding:.6rem .8rem;background:#fff;font-weight:600}
.top-track-row.is-current .top-track{border-color:#10b981;background:#ecfdf5}
.top-track-row.is-current.is-paused .top-track{border-color:#f59e0b;background:#fffbe6}
.top-track-row.is-current.is-playing .top-track{border-color:#10b981;background:#ecfdf5}
.top-track-row.dragging{opacity:.6}
.top-track-row.drag-over-before .top-track{box-shadow:inset 0 2px 0 #60a5fa}
.top-track-row.drag-over-after .top-track{box-shadow:inset 0 -2px 0 #60a5fa}

/* Click flash effect */
.top-track.clicked{animation:flash-in .35s ease}
.top-track:focus{opacity:1}
@keyframes flash-in{0%{opacity:.4}100%{opacity:1}}
.top-lyrics{max-height:160px;overflow:auto;margin-top:.5rem;font-size:.9rem}
.top-time-row{display:flex;justify-content:center;align-items:center;gap:.5rem;margin-top:.25rem}
.top-time-row .playlist-btn{margin-left:.25rem}
.lyrics-btn{height:28px;min-width:28px;padding:0 6px;border-radius:6px;border:1px solid #e5e7eb;display:flex;align-items:center;justify-content:center;background:#fff;cursor:pointer;font-weight:700;letter-spacing:.5px}
.lyrics-btn.state-available{background:#eef2ff;color:#3730a3;border-color:#6366f1}
.lyrics-btn.state-unavailable{background:#fff;color:#9ca3af;border-color:#e5e7eb;opacity:.7}
.lyrics-overlay{position:fixed;inset:0;background:transparent;z-index:2147483648;display:none;align-items:center;justify-content:center;pointer-events:none}
.lyrics-modal{position:absolute;background:var(--panel-bg,#fff);color:var(--top-fg,#111);border:1px solid rgba(0,0,0,.1);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.3);width:min(640px,90vw);max-height:70vh;display:grid;grid-template-rows:36px 1fr;resize:both;overflow:auto;min-width:280px;min-height:160px;pointer-events:auto}
.lyrics-modal .modal-header{position:relative;display:flex;align-items:center;justify-content:center;padding:.25rem .5rem;border-bottom:1px solid rgba(0,0,0,.08)}
.lyrics-modal .modal-header{cursor:move}
.lyrics-modal .modal-header .title{font-weight:800}
.lyrics-modal .modal-header .close{position:absolute;top:4px;right:6px;height:28px;width:28px;border-radius:14px;border:1px solid var(--panel-border,#e5e7eb);background:var(--control-bg,#fff);display:flex;align-items:center;justify-content:center;line-height:1;cursor:pointer;color:var(--top-fg,#111);box-shadow:0 2px 6px rgba(0,0,0,.12)}
.lyrics-modal .modal-header .close::before{content:"×"}
.lyrics-modal .modal-body{overflow:auto;padding:.5rem .75rem}
.lyrics-modal .modal-body.empty{display:flex;align-items:center;justify-content:center;color:#9ca3af;font-style:italic}
.lyrics-lines{display:grid;gap:.25rem;font-size:.95rem;line-height:1.35}
.lyrics-line{padding:.25rem .5rem;border-radius:6px}
.lyrics-line.active{background:#eef2ff;color:#111;border:1px solid #6366f1}
.autoplay-btn{height:28px;min-width:28px;padding:0 6px;border-radius:6px;border:1px solid #e5e7eb;display:flex;align-items:center;justify-content:center;background:#fff;cursor:pointer;font-weight:700;letter-spacing:.5px}
.autoplay-btn.state-closed{background:#fff;color:#a16207;border-color:#f59e0b}
.autoplay-btn.state-open{background:#ecfdf5;color:#065f46;border-color:#10b981}
.shuffle-btn{height:28px;min-width:28px;padding:0 6px;border-radius:6px;border:1px solid #e5e7eb;display:flex;align-items:center;justify-content:center;background:#fff;cursor:pointer;font-weight:700;letter-spacing:.5px}
.shuffle-btn.state-closed{background:#fff;color:#a16207;border-color:#f59e0b}
.shuffle-btn.state-open{background:#ecfdf5;color:#065f46;border-color:#10b981}
/* Search */
.search-btn{height:28px;min-width:28px;padding:0 6px;border-radius:6px;border:1px solid #e5e7eb;display:flex;align-items:center;justify-content:center;background:#fff;cursor:pointer;font-weight:700}
.search-btn::before{content:"🔎"}
.search-wrap{display:flex;gap:.5rem;align-items:center;justify-content:center;width:100%}
.search-input{flex:1 1 auto;min-width:120px;height:28px;border:1px solid #e5e7eb;border-radius:6px;padding:0 .5rem;background:#fff;color:inherit}
.search-close{height:32px;min-width:32px;padding:0 12px;border-radius:8px;border:2px solid var(--panel-border, #e5e7eb);background:var(--control-bg, #fff);cursor:pointer;font-weight:600;color:var(--top-fg, #111);transition:all 0.2s ease;transform:scale(1)}
.search-close:active{transform:scale(0.95)}
.search-close:hover{border-color:var(--accent-color, #10b981);background:var(--hover-bg, #f8fafc);transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.search-close:focus{border-color:var(--accent-color, #10b981);background:var(--hover-bg, #f8fafc);outline:2px solid var(--accent-color, #10b981);outline-offset:2px}
@media (max-width:480px){.top-shell{inset:auto 0 0 0;max-width:none;border-radius:12px 12px 0 0}}
@media (max-width:480px){.top-shell{width:auto;}}
@media (max-width:480px){:root{--cover-height:clamp(160px,50vw,240px)}}

/* Theming */
.theme-light{--top-bg:#ffffff;--top-fg:#111827;--panel-bg:#ffffff;--panel-border:rgba(0,0,0,.1);--control-bg:#ffffff}
.theme-dark{--top-bg:#111827;--top-fg:#e5e7eb;--panel-bg:#1f2937;--panel-border:rgba(255,255,255,.12);--control-bg:#111827}
.theme-system{color-scheme:light dark}

.theme-dark .top-shell,.theme-dark .eq-shell{background:var(--panel-bg);color:var(--top-fg);border-color:var(--panel-border)}
.theme-dark .eq-toolbar .eq-power,.theme-dark .eq-toolbar .eq-reset{background:var(--control-bg);color:var(--top-fg);border-color:var(--panel-border)}
.theme-dark .eq-toolbar .eq-presets{background:var(--control-bg);color:var(--top-fg);border-color:var(--panel-border)}
.theme-dark select option{background:var(--control-bg);color:var(--top-fg)}

/* Dark theme EQ styling */
.theme-dark .eq-dock{background:var(--panel-bg);color:var(--top-fg);border-color:var(--panel-border)}
.theme-dark .eq-header{border-bottom-color:var(--panel-border);color:var(--top-fg)}
.theme-dark .eq-btn,.theme-dark .viz-btn{background:var(--control-bg);color:var(--top-fg);border-color:var(--panel-border)}
.theme-dark .eq-btn.state-open{background:#065f46;color:#ffffff;border-color:#10b981}
.theme-dark .eq-btn.state-closed{background:var(--control-bg);color:#f59e0b;border-color:#f59e0b}
.theme-dark .viz-btn.state-open{background:#6b21a8;color:#ffffff;border-color:#8b5cf6}
.theme-dark .viz-btn.state-closed{background:var(--control-bg);color:#ea580c;border-color:#ea580c}
.theme-dark .eq-divider{background:linear-gradient(to bottom, rgba(255,255,255,.08), rgba(255,255,255,0));opacity:.4}
.theme-light select option{background:#fff;color:#111827}

/* External playlist shell (only arrow/handle for now) */
.playlist-shell{display:grid;position:relative;background:var(--top-bg,#fff);color:var(--top-fg,#111);border:1px solid rgba(0,0,0,.1);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.playlist-header{grid-row:1;grid-column:1 / -1;height:28px;border-bottom:1px solid var(--panel-border,rgba(0,0,0,.08));cursor:move;user-select:none;}
.playlist-header::before{content:"";position:absolute;inset:0}
.playlist-shell .playlist-shell-toggle{display:none}
.playlist-shell.left,.playlist-shell.right{grid-template-columns:20px 1fr;grid-template-rows:28px 1fr;height:100%;overflow:hidden;max-width:380px;align-items:stretch}
.playlist-shell.left .playlist-shell-toggle,.playlist-shell.right .playlist-shell-toggle{width:20px;min-width:20px;height:100%;grid-column:1;grid-row:2}
.playlist-shell.left .playlist-content,.playlist-shell.right .playlist-content{grid-column:2;grid-row:2}
.playlist-shell.open.left,.playlist-shell.open.right{max-width:380px}
.playlist-shell.above,.playlist-shell.below{grid-template-rows:36px 1fr;align-items:stretch}
.playlist-shell.above .playlist-shell-toggle,.playlist-shell.below .playlist-shell-toggle{height:36px;min-height:36px;width:100%;grid-row:1}
.playlist-shell.above .playlist-content,.playlist-shell.below .playlist-content{grid-row:2}
.playlist-shell .playlist-shell-toggle::before{content:""}
.playlist-shell.below .playlist-shell-toggle::before{content:"▴"}
.playlist-shell.above .playlist-shell-toggle::before{content:"▾"}
.playlist-shell.left .playlist-shell-toggle::before{content:"▸"}
.playlist-shell.right .playlist-shell-toggle::before{content:"◂"}
/* flip arrows when open */
.playlist-shell.below.open .playlist-shell-toggle::before{content:"▾"}
.playlist-shell.above.open .playlist-shell-toggle::before{content:"▴"}
.playlist-shell.left.open .playlist-shell-toggle::before{content:"◂"}
.playlist-shell.right.open .playlist-shell-toggle::before{content:"▸"}


/* Stub content styling */
.playlist-content-stub{padding:12px;font-size:.9rem;color:#555}
.playlist-content{padding:8px;overflow:auto;height:100%;max-width:0;max-height:0;transition:max-width .25s ease,max-height .25s ease; width:0; display:block; align-self:stretch;}
.playlist-tabs{display:flex;gap:.25rem;margin-bottom:.5rem;justify-content:center;align-items:center; z-index: 3; position: relative;}
.playlist-tabs .tab-btn{height:26px;line-height:24px;padding:0 10px;border:1px solid #e5e7eb;border-radius:6px;background:#fff;cursor:pointer;font-weight:700}
.playlist-tabs .tab-btn.active{background:#ecfdf5;color:#065f46;border-color:#10b981}
/* Keep tabs fixed and only list scrolls */
.playlist-content{display:flex;flex-direction:column;overflow:hidden;position:relative}
.playlist-content .top-playlist{flex:1 1 auto;overflow:auto;display:grid;grid-template-columns:1fr;gap:.25rem;padding-right:8px;align-content:start;justify-content:start}
.settings-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);z-index:2147483649;display:none;align-items:center;justify-content:center}
.settings-modal{background:var(--panel-bg,#fff);color:var(--top-fg,#111);border:1px solid var(--panel-border,rgba(0,0,0,.1));border-radius:16px;box-shadow:0 20px 40px rgba(0,0,0,.3), 0 0 0 1px var(--panel-border, #e5e7eb);width:min(520px,92vw);display:grid;grid-template-rows:36px 1fr;backdrop-filter:blur(10px)}
.settings-modal .modal-header{position:relative;display:flex;align-items:center;justify-content:center;padding:.25rem .5rem;border-bottom:1px solid rgba(0,0,0,.08)}
.settings-modal .modal-header .title{font-weight:800}
.settings-modal .modal-header .close{position:absolute;top:4px;right:6px;height:32px;width:32px;border-radius:16px;border:2px solid var(--panel-border, #e5e7eb);background:var(--control-bg,#fff);display:flex;align-items:center;justify-content:center;line-height:1;cursor:pointer;color:var(--top-fg,#111);box-shadow:0 2px 6px rgba(0,0,0,.12);transition:all 0.2s ease;font-weight:bold;font-size:1.2rem;transform:scale(1)}
.settings-modal .modal-header .close:active{transform:scale(0.95)}
.settings-modal .modal-header .close:hover{border-color:var(--accent-color, #10b981);background:var(--hover-bg, #f8fafc);transform:scale(1.05)}
.settings-modal .modal-header .close:focus{border-color:var(--accent-color, #10b981);background:var(--hover-bg, #f8fafc);outline:2px solid var(--accent-color, #10b981);outline-offset:2px}
.settings-modal .modal-header .close::before{content:"×"}
.settings-modal .modal-body{padding:1rem;display:grid;gap:1rem}

/* Tabbed interface */
.settings-tabs {
    display: flex;
    background: var(--section-bg, rgba(0,0,0,0.02));
    border-bottom: 1px solid var(--section-border, rgba(0,0,0,0.05));
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

.tab-button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 12px;
    background: transparent;
    border: none;
    color: var(--top-fg, #111);
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 80px;
    gap: 8px;
}

.tab-button:hover {
    background: var(--hover-bg, #f8fafc);
}

.tab-button.active {
    background: var(--accent-color, #10b981);
    color: white;
}

.tab-icon {
    font-size: 24px;
    line-height: 1;
}

.tab-label {
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
}

/* Tab content */
.tab-content {
    padding: 24px;
    max-height: calc(80vh - 120px);
    overflow-y: auto;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

.tab-pane h4 {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--top-fg, #111);
    border-bottom: 2px solid var(--accent-color, #10b981);
    padding-bottom: 8px;
}
.settings-section{display:grid;gap:.4rem;padding:0.75rem;border-radius:8px;background:var(--section-bg, rgba(0,0,0,0.02));border:1px solid var(--section-border, rgba(0,0,0,0.05))}
.settings-section h4{margin:0;font-size:1.1rem;font-weight:700;color:var(--top-fg, #111);padding:0.5rem 0;border-bottom:2px solid var(--panel-border, #e5e7eb);margin-bottom:0.5rem}
.radio-group{display:flex;gap:.75rem;flex-wrap:wrap;margin:0.5rem 0}
.radio-pill{display:inline-flex;align-items:center;gap:.5rem;border:2px solid var(--panel-border, #e5e7eb);border-radius:8px;padding:8px 12px;background:var(--control-bg, #fff);cursor:pointer;transition:all 0.2s ease;font-weight:500;min-width:fit-content;position:relative;overflow:hidden;user-select:none;transform:scale(1)}
.radio-pill:active{transform:scale(0.98)}
.radio-pill:hover{border-color:var(--accent-color, #10b981);background:var(--hover-bg, #f8fafc);transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.radio-pill:focus-within{border-color:var(--accent-color, #10b981);background:var(--hover-bg, #f8fafc);outline:2px solid var(--accent-color, #10b981);outline-offset:2px}
.radio-pill input{appearance:none;width:16px;height:16px;border-radius:8px;border:2px solid var(--border-color, #9ca3af);display:inline-block;position:relative;background:var(--control-bg, #fff);transition:all 0.2s ease}
.radio-pill input::after{content:'';position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:3px;background:var(--control-bg, #fff);transform:translate(-50%, -50%) scale(0);transition:transform 0.2s ease}
.radio-pill input:checked::after{transform:translate(-50%, -50%) scale(1)}
.radio-pill input:checked{background:var(--accent-color, #10b981);border-color:var(--accent-color, #10b981);box-shadow:0 0 0 2px var(--control-bg, #fff), 0 0 0 4px var(--accent-color, #10b981)}
.radio-pill:has(input:checked){border-color:var(--accent-color, #10b981);background:var(--selected-bg, #ecfdf5);color:var(--selected-fg, #065f46);box-shadow:0 0 0 1px var(--accent-color, #10b981), 0 4px 12px rgba(16, 185, 129, 0.2)}
.radio-pill span{color:inherit;font-weight:inherit}

/* Special styling for visualizer section */
.settings-section.visualizer-section {
  border-left: 4px solid var(--accent-color, #10b981);
  background: var(--section-bg, rgba(0,0,0,0.02)), linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, transparent 100%);
  position: relative;
  animation: visualizerGlow 3s ease-in-out infinite alternate;
}

.settings-section.visualizer-section::before {
  content: "🎵";
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 1.2rem;
  opacity: 0.6;
  animation: visualizerIconFloat 2s ease-in-out infinite;
}

@keyframes visualizerGlow {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.1); }
  100% { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1); }
}

@keyframes visualizerIconFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-2px); }
}

/* Special styling for theme section */
.settings-section.theme-section {
  border-left: 4px solid #8b5cf6;
  background: var(--section-bg, rgba(0,0,0,0.02)), linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, transparent 100%);
  position: relative;
}

.settings-section.theme-section::before {
  content: "🎨";
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 1.2rem;
  opacity: 0.6;
}

/* Special styling for language section */
.settings-section.language-section {
  border-left: 4px solid #f59e0b;
  background: var(--section-bg, rgba(0,0,0,0.02)), linear-gradient(135deg, rgba(245, 158, 11, 0.05) 0%, transparent 100%);
  position: relative;
}

.settings-section.language-section::before {
  content: "🌍";
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 1.2rem;
  opacity: 0.6;
}
.flag-group{display:flex;gap:.5rem}
.flag-btn{height:32px;min-width:40px;border:2px solid var(--panel-border, #e5e7eb);border-radius:8px;background:var(--control-bg, #fff);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:18px;line-height:1;padding:0;transition:all 0.2s ease;color:var(--top-fg, #111);transform:scale(1)}
.flag-btn:active{transform:scale(0.95)}
.flag-btn:hover{border-color:var(--accent-color, #10b981);background:var(--hover-bg, #f8fafc);transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.flag-btn:focus{border-color:var(--accent-color, #10b981);background:var(--hover-bg, #f8fafc);outline:2px solid var(--accent-color, #10b981);outline-offset:2px}
.flag-btn.active{background:var(--selected-bg, #ecfdf5);color:var(--selected-fg, #065f46);border-color:var(--accent-color, #10b981);box-shadow:0 0 0 2px var(--control-bg, #fff), 0 0 0 4px var(--accent-color, #10b981), 0 4px 12px rgba(16, 185, 129, 0.2)}
.playlist-shell.open.left .playlist-content,.playlist-shell.open.right .playlist-content{max-width:340px;width:340px;max-height:100%;height:100%}
.playlist-shell.open.above .playlist-content,.playlist-shell.open.below .playlist-content{max-height:100%;width:100%}
.playlist-shell.open.above .playlist-content,.playlist-shell.open .playlist-content .top-playlist{max-height:100%;width:100%}



.playlist-items{display:grid;gap:.25rem}
.playlist-item-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.4rem}
.playlist-item{width:100%;text-align:left;border:1px solid #e5e7eb;border-radius:8px;padding:.6rem .8rem;background:#fff;font-weight:600}

/* Hide any inner content when the shell is hidden/collapsed to prevent visible slivers */
.playlist-shell:not(.open) .playlist-content{display:none}

/* Edge toggle removed */

/* Header playlist button */
.playlist-btn{height:28px;min-width:28px;padding:0 6px;border-radius:6px;border:1px solid #e5e7eb;display:flex;align-items:center;justify-content:center;background:#fff;cursor:pointer;font-weight:700;letter-spacing:.5px}
.playlist-btn.state-closed{background:#fff;color:#a16207;border-color:#f59e0b} /* amber/yellow */
.playlist-btn.state-open{background:#ecfdf5;color:#065f46;border-color:#10b981} /* emerald/green */

.dock-highlight{position:fixed;width:6px;background:rgba(99,102,241,.35);border-radius:3px;box-shadow:0 0 10px rgba(99,102,241,.5);z-index:2147483646;display:none;pointer-events:none;transition:opacity .12s ease}
.dock-highlight.show{display:block;opacity:1}
.dock-highlight.left{left:0}
.dock-highlight.right{right:0}


/* Playlist drawer */
.playlist-drawer{position:relative;overflow:hidden}
.playlist-drawer .playlist-handle{cursor:pointer;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.04);border:1px solid #e5e7eb;color:#111}
.playlist-drawer .playlist-content{overflow:auto;background:#fff}
.playlist-drawer.pos-left .playlist-content,
.playlist-drawer.pos-right .playlist-content{height:100%}
.playlist-drawer.pos-above .playlist-handle{width:100%;height:28px;border-radius:8px;margin:6px 0}
.playlist-drawer.pos-below .playlist-handle{width:100%;height:28px;border-radius:8px;margin:6px 0}
.playlist-drawer.pos-left .playlist-handle{height:100%;width:28px;border-radius:8px;margin:0 6px}
.playlist-drawer.pos-right .playlist-handle{height:100%;width:28px;border-radius:8px;margin:0 6px}

/* Handle arrow glyphs via pseudo-elements */
.playlist-drawer .playlist-handle::before{content:"";display:inline-block}
.playlist-drawer.pos-above .playlist-handle::before{content:"▾"}
.playlist-drawer.pos-below .playlist-handle::before{content:"▴"}
.playlist-drawer.pos-left .playlist-handle::before{content:"▸"}
.playlist-drawer.pos-right .playlist-handle::before{content:"◂"}

/* Open state flips arrows */
.playlist-drawer.open.pos-above .playlist-handle::before{content:"▴"}
.playlist-drawer.open.pos-below .playlist-handle::before{content:"▾"}
.playlist-drawer.open.pos-left .playlist-handle::before{content:"◂"}
.playlist-drawer.open.pos-right .playlist-handle::before{content:"▸"}

/* Layout for split mode (left/right) */
.top-split{display:flex;gap:.5rem;align-items:stretch}
.top-split .top-body{flex:1 1 auto}
.playlist-drawer.pos-left,.playlist-drawer.pos-right{flex:0 0 auto}
.playlist-drawer.pos-left .top-playlist,
.playlist-drawer.pos-right .top-playlist{max-height:none;height:100%}

/* Transitions */
.playlist-drawer.pos-above .playlist-content,
.playlist-drawer.pos-below .playlist-content{max-height:0;transition:max-height .25s ease;}
.playlist-drawer.open.pos-above .playlist-content,
.playlist-drawer.open.pos-below .playlist-content{max-height:220px}
.playlist-drawer.pos-left .playlist-content,
.playlist-drawer.pos-right .playlist-content{max-width:0;transition:max-width .25s ease}
.playlist-drawer.open.pos-left .playlist-content,
.playlist-drawer.open.pos-right .playlist-content{max-width:220px}


/* Theme fixes – enabled when body has .theo-theme-fixes */
body.theo-theme-fixes #content{ padding-top: 0; }
body.theo-theme-fixes:not(.home) .site-content .wrapper,
body.theo-theme-fixes:not(.home) .site-content .archive-content-wrap{ padding-top: 0; }

/* Latest Songs virtual folder styling */
.top-track[data-latest-songs="true"] {
  font-weight: bold !important;
  color: #0ea5e9 !important;
}

/* NEW badge styling for latest songs */
.top-track .new-badge {
  background: #f97316;
  color: white;
  font-size: 0.7em;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 8px;
  font-weight: bold;
  display: inline-block;
  vertical-align: middle;
}

/* Tutorial System */
.theo-tutorial-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.8);z-index:2147483651;display:flex;align-items:flex-start;justify-content:flex-start;opacity:0;visibility:hidden;transition:all 0.5s ease}
.theo-tutorial-overlay.visible{opacity:1;visibility:visible}

.tutorial-content{position:relative;width:100%;height:100%;display:flex;align-items:flex-start;justify-content:flex-start;padding:120px 0 0 180px}

.tutorial-bubble{position:relative;background:#ffffff;border:2px solid #3b82f6;border-radius:16px;padding:24px;max-width:350px;box-shadow:0 20px 40px rgba(0,0,0,0.2);transform:translateY(20px);transition:all 0.5s ease}
.theo-tutorial-overlay.visible .tutorial-bubble{transform:translateY(0)}

.tutorial-text{font-size:18px;font-weight:600;color:#1f2937;margin-bottom:20px;line-height:1.4}

.tutorial-actions{display:flex;gap:12px}
.tutorial-btn{padding:12px 20px;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all 0.2s ease;font-size:14px}
.tutorial-view{background:#3b82f6;color:#ffffff}
.tutorial-view:hover{background:#2563eb;transform:translateY(-1px)}
.tutorial-close{background:#f3f4f6;color:#6b7280}
.tutorial-close:hover{background:#e5e7eb;color:#374151}



/* FAB-attached arrow - pointing down */
.tutorial-fab-arrow{position:fixed;width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-top:15px solid #ff6b35;animation:tutorialFabFly 1.4s ease-in-out infinite,tutorialFabPulse 1.8s ease-in-out infinite,tutorialFabGlow 2.2s ease-in-out infinite;z-index:2147483655;pointer-events:none}
.tutorial-fab-arrow::after{content:'';position:absolute;bottom:3px;left:-12px;width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:12px solid #ffffff}





/* FAB pulsing animation during tutorial */
.theo-tutorial-overlay.visible .top-fab {
  animation: fabPulse 1.5s ease-in-out infinite, fabGlow 2s ease-in-out infinite;
}

@keyframes fabPulse {
  0%, 100% {
    transform: scale(1.1);
  }
  50% {
    transform: scale(1.3);
  }
}

@keyframes fabGlow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.6), 0 0 30px rgba(59, 130, 246, 0.3);
  }
}

/* FAB-attached arrow animations */
@keyframes tutorialFabFly {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(10px);
  }
  40% {
    transform: translateY(25px);
  }
  60% {
    transform: translateY(35px);
  }
  80% {
    transform: translateY(25px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes tutorialFabPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
}

@keyframes tutorialFabGlow {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(255, 107, 53, 0.6));
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(255, 107, 53, 0.9)) drop-shadow(0 0 30px rgba(255, 107, 53, 0.5));
  }
}



/* Tutorial bubble fly-in animation toward musical note */
.tutorial-content {
  animation: tutorialFlyTowardsNote 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes tutorialFlyTowardsNote {
  0% {
    opacity: 0;
    left: var(--start-x);
    top: var(--start-y);
    transform: scale(0.8);
  }
  20% {
    opacity: 1;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    left: var(--end-x);
    top: var(--end-y);
    transform: scale(1);
  }
}

/* Tutorial step bubbles */
.tutorial-step-bubble{background:#ffffff;border:2px solid #3b82f6;border-radius:12px;padding:16px;max-width:280px;box-shadow:0 10px 25px rgba(0,0,0,0.15);animation:tutorialStepIn 0.3s ease}
.tutorial-step-bubble.bottom{margin-top:8px}
.tutorial-step-bubble.top{margin-bottom:8px}
.tutorial-step-bubble.left{margin-right:8px}

@keyframes tutorialStepIn{from{opacity:0;transform:translateY(-10px) translateX(-50%)}to{opacity:1;transform:translateY(0) translateX(-50%)}}
@keyframes tutorialStepInLeft{from{opacity:0;transform:translateX(10px) translateY(-50%)}to{opacity:1;transform:translateX(0) translateY(-50%)}}

.tutorial-step-bubble.left{animation:tutorialStepInLeft 0.3s ease}

.step-text{font-size:16px;font-weight:500;color:#1f2937;margin-bottom:12px;line-height:1.4}
.step-next{padding:8px 16px;background:#3b82f6;color:#ffffff;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:all 0.2s ease;font-size:13px}
.step-next:hover{background:#2563eb;transform:translateY(-1px)}

/* Dark theme support */
.theme-dark .tutorial-bubble,.theme-dark .tutorial-step-bubble{background:#1f2937;border-color:#3b82f6;color:#e5e7eb}
.theme-dark .tutorial-text,.theme-dark .step-text{color:#e5e7eb}
.theme-dark .tutorial-close{background:#374151;color:#9ca3af}
.theme-dark .tutorial-close:hover{background:#4b5563;color:#e5e7eb}
.theme-dark .tutorial-arrow::after{border-bottom-color:#1f2937}