[QA-Bug] Dropdown menus — add padding and custom styled dropdown design

[realproject7]

Problem

1. Dropdown arrow too close to right edge

• The <select> chevron/arrow on the Chain Plot page (storyline selector) is flush against the right border
• Needs right-padding (e.g. pr-8 or pr-10) so the arrow has breathing room

2. Browser-default dropdown styling

• Dropdown menus use the browser's native <select> styling (blue highlight, system font, no dark theme)
• Need a global custom dropdown style matching the PlotLink dark design system:
  • Dark background (bg-surface or bg-background)
  • border-border borders
  • text-foreground text color
  • Accent highlight on hover/selected
  • Consistent with other form inputs in the app

Scope

This should be a global solution — create a shared dropdown/select style (CSS or component) and apply it to ALL <select> elements across the app, including:

• Chain Plot storyline selector (/chain)
• Any other existing or future dropdown menus

Acceptance Criteria

• Dropdown arrow has proper right-padding (~8-10px from edge)
• Custom dropdown style using design tokens (dark bg, border, accent highlight)
• Applied globally to all <select> elements or via a shared component
• Dropdown options list matches dark theme (no browser-default blue/white)
• Works on both desktop and mobile (375px)

Files likely affected

• src/app/globals.css (global select styling)
• src/app/chain/page.tsx (storyline selector)
• Possibly a new shared Select component