
.mel-film-menu { position: relative; }
.mel-film-menu-btn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--mel-border-default); background: var(--mel-surface-card); color: var(--mel-text-primary);
  font: 600 12.5px/1 Poppins, system-ui, sans-serif; transition: border-color .15s ease, background .15s ease; }
.mel-film-menu-btn:hover, .mel-film-menu-btn[aria-expanded="true"] { border-color: rgba(169,157,247,.6); }
.mel-film-menu-btn:focus-visible { outline: 2px solid #a99df7; outline-offset: 2px; }
.mel-film-menu-btn svg { transition: transform .2s ease; color: var(--mel-text-tertiary); }
.mel-film-menu-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.mel-film-menu-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 196px; margin: 0; padding: 6px; list-style: none;
  border-radius: 16px; border: 1px solid var(--mel-border-default); background: var(--mel-surface-card, #12141f);
  box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.03); transform-origin: top right; outline: none;
  animation: mel-film-menu-in .16s cubic-bezier(.22,.61,.36,1); }
@keyframes mel-film-menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.mel-film-menu-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px 9px 12px; border-radius: 10px; cursor: pointer;
  font: 500 13.5px/1.2 Poppins, system-ui, sans-serif; color: var(--mel-text-secondary); }
.mel-film-menu-list li small { font: 600 10.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--mel-text-tertiary); }
.mel-film-menu-list li[data-hi="1"] { background: rgba(169,157,247,.12); color: var(--mel-text-primary); }
.mel-film-menu-list li[aria-selected="true"] { color: var(--mel-text-primary); font-weight: 600; }
.mel-film-menu-list li[aria-selected="true"] small { color: #a99df7; }
html.light .mel-film-menu-list, html[data-theme="light"] .mel-film-menu-list { background: #fff; box-shadow: 0 24px 50px rgba(30,58,138,.16); }
html.light .mel-film-menu-list li[aria-selected="true"] small, html[data-theme="light"] .mel-film-menu-list li[aria-selected="true"] small { color: #6D28D9; }
@media (prefers-reduced-motion: reduce) {
  .mel-film-menu-btn svg { transition: none; }
  .mel-film-menu-list { animation: none; }
}
