fix(admin/settings): make tab shell readable in dark mode

[yetone]

Problem

On the /admin/settings page in dark mode, the tab strip (登录条款 / 功能开关 / 安全与... etc.) keeps a light/white background while the inactive tab labels render in text-gray-300 (#d1d5db), giving roughly a 1.6:1 contrast ratio — effectively unreadable.

Repro: visit /admin/settings, toggle dark mode, look at any tab that isn't the active one.

Root cause

In SettingsView.vue's scoped <style> block we have rules like:

:global(.dark) .settings-tabs-shell {
  background: rgb(15 23 42 / 0.86);
  ...
}

Vue's scoped-CSS compiler is dropping these three :global(.dark) … rules from the production build — they don't appear in the compiled stylesheet at all. As a result, the dark-mode overrides for .settings-tabs-shell, .settings-tab::before, and .settings-tab-active never apply, and the shell stays on its light-mode white background.

(Other dark: Tailwind variants applied inline via @apply on the same elements survive — only the standalone :global(.dark) selectors are affected.)

Fix

Hoist the three dark-mode overrides into a second, unscoped <style> block at the bottom of the file. The selectors (.settings-tabs-shell, .settings-tab::before, .settings-tab-active) are component-specific enough that going unscoped is safe.

After the fix:

• .settings-tabs-shell shows the intended rgb(15 23 42 / 0.86) slate background in dark mode
• Inactive tab text on that background hits ~10:1 contrast (WCAG AAA)
• No change to light-mode appearance

Test plan

• Built frontend + verified dark-mode tab strip renders the slate background in production build
• Verified light mode is unchanged
• No new lint or build warnings

[github-actions]

All contributors have signed the CLA. ✅
_{Posted by the CLA Assistant Lite bot.}

[yetone]

I have read the CLA Document and I hereby sign the CLA