feat(web): mobile-responsive redesign with Library view and design tokens

Add mobile layout (mini player, bottom tab bar, responsive navbar), new
Library view, redesigned bot dropdown with action buttons, and centralize
colors/typography/shadows into CSS variables in variables.scss.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

web/src/styles/variables.scss

@@ -1,33 +1,95 @@
-// YesPlayMusic-inspired design tokens
+// TSMusicBot Design System — canonical tokens
 
 :root {
-  // Fonts
+  // Typography
   --font-primary: 'Barlow', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, 'Cascadia Code', monospace;
+
+  --fs-hero:  22px;
+  --fs-h1:    20px;
+  --fs-h2:    17px;
+  --fs-h3:    16px;
+  --fs-body:  14px;
+  --fs-sm:    13px;
+  --fs-xs:    12px;
+  --fs-2xs:   11px;
+  --fs-micro: 10px;
+
+  --fw-regular: 400;
+  --fw-medium:  500;
+  --fw-semi:    600;
+  --fw-bold:    700;
+  --fw-black:   800;
+
+  --lh-tight:  1.2;
+  --lh-normal: 1.4;
+  --lh-body:   1.5;
 
   // Spacing
+  --space-1:  4px;
+  --space-2:  8px;
+  --space-3:  12px;
+  --space-4:  16px;
+  --space-5:  20px;
+  --space-6:  24px;
+  --space-8:  36px;
+  --space-10: 80px;
+
+  // Layout
   --navbar-height: 56px;
   --player-height: 56px;
+  --page-gutter: 10vw;
 
   // Radius
+  --radius-xs: 3px;
   --radius-sm: 6px;
   --radius-md: 10px;
   --radius-lg: 14px;
   --radius-xl: 20px;
+  --radius-full: 9999px;
 
   // Transitions
   --transition-fast: 0.2s ease;
   --transition-normal: 0.3s ease;
+  --ease-cinematic: cubic-bezier(0.25, 0.1, 0.25, 1);
+
+  // Shadows
+  --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.2);
+  --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.35);
 
   // Accent
   --color-primary: #335eea;
   --color-primary-bg: #eaeffd;
+  --color-primary-15: rgba(51, 94, 234, 0.15);
+  --color-primary-10: rgba(51, 94, 234, 0.10);
+  --color-primary-12: rgba(51, 94, 234, 0.12);
+  --gradient-fm: linear-gradient(135deg, #335eea, #6366f1);
+
+  // Semantic (theme-invariant)
+  --color-online: #22c55e;
+  --color-online-15: rgba(34, 197, 94, 0.15);
+  --color-paused: #eab308;
+  --color-paused-15: rgba(234, 179, 8, 0.15);
+
+  // Platform brand
+  --brand-netease: #e81123;
+  --brand-netease-15: rgba(232, 17, 35, 0.15);
+  --brand-qq: #12b76a;
+  --brand-qq-15: rgba(18, 183, 106, 0.15);
+  --brand-bilibili: #00a1d6;
+  --brand-bilibili-15: rgba(0, 161, 214, 0.15);
+  --brand-youtube: #ff0000;
+  --brand-youtube-12: rgba(255, 0, 0, 0.12);
 }
 
+// Dark theme (default)
+:root,
 [data-theme='dark'] {
   --bg-primary: #222222;
   --bg-secondary: #323232;
   --bg-card: rgba(255, 255, 255, 0.04);
   --bg-navbar: rgba(34, 34, 34, 0.86);
+  --bg-modal-scrim: rgba(0, 0, 0, 0.55);
   --text-primary: #ffffff;
   --text-secondary: rgba(255, 255, 255, 0.58);
   --text-tertiary: rgba(255, 255, 255, 0.38);
@@ -40,6 +102,7 @@
   --bg-secondary: #f5f5f7;
   --bg-card: rgba(0, 0, 0, 0.02);
   --bg-navbar: rgba(255, 255, 255, 0.86);
+  --bg-modal-scrim: rgba(0, 0, 0, 0.35);
   --text-primary: #000000;
   --text-secondary: rgba(0, 0, 0, 0.58);
   --text-tertiary: rgba(0, 0, 0, 0.38);