feat(front): 前台默认浅色模式并新增居中投稿按钮与实时空闲档期

- 主题: useTheme 默认 ModernLight + variables.css SSR-safe 浅值并精修组件对比度
- 首页: 插入居中投稿 CTA + 紧邻档期概览卡片(今日排期/待播歌曲/空闲档期数)
- 数据: useSongs 新增 fetchExpectedPlayDates 接入空闲档期并走 revision 轮询实时刷新
- 视觉: 移动端优先，少圆角硬边几何 + 概览卡片 3→1 列响应式

app/components/Songs/RequestForm.vue

@@ -176,27 +176,19 @@
               :key="item.seq"
               type="button"
               :class="[
-                'seq',
-                item.taken ? 'seq-taken' : '',
-                expectedPlaySequence === String(item.seq) ? 'seq-selected' : ''
+                'sequence-pill',
+                item.taken ? 'taken' : 'free',
+                expectedPlaySequence === String(item.seq) ? 'selected' : ''
               ]"
               :disabled="item.taken"
-              :title="getTakenSequenceTitle(item.seq)"
+              :title="item.taken ? getTakenSequenceTitle(item.seq) : ''"
               @click="chooseExpectedPlaySequence(item.seq)"
             >
               {{ item.seq }}
             </button>
           </div>
 
-          <div v-if="selectedExpectedPlayDate" class="sequence-hint">🟣 可选（紫粉蓝选中） · ⚪ 已占用（灰色带删除线）</div>
-          <div
-            v-if="selectedExpectedPlayDate && expectedPlaySequence"
-            class="sequence-locked"
-            style="margin-top:14px; display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:8px; background:linear-gradient(90deg, rgba(168,85,247,.08), rgba(236,72,153,.08), rgba(59,130,246,.08)); border:1px solid rgba(168,85,247,.2); color:#7C3AED; font-size:13px; font-weight:700;"
-          >
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
-            已锁定 第 {{ expectedPlaySequence }} 首 位置
-          </div>
+          <div v-if="selectedExpectedPlayDate" class="sequence-hint">绿色可选，红色已占用</div>
         </div>
 
         <!-- 搜索结果容器 -->
@@ -3134,55 +3126,47 @@ defineExpose({
 }
 
 .sequence-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
-  gap: 8px;
-  margin-top: 12px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
 }
 
-.seq {
-  width: 40px;
-  height: 40px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 8px;
-  background: #fff;
-  border: 1.5px solid #d1d5db;
-  color: #111827;
-  font-size: 16px;
-  font-weight: 800;
-  transition: all 0.12s ease;
-  cursor: pointer;
+.sequence-pill {
+  height: 28px;
+  min-width: 28px;
+  padding: 0 10px;
+  border-radius: 10px;
+  border: 1px solid var(--border-primary);
+  background: rgba(0, 0, 0, 0.25);
+  color: rgba(255, 255, 255, 0.85);
+  font-family: 'MiSans', sans-serif;
+  font-weight: 700;
+  font-size: 12px;
+  transition: all 0.2s ease;
 }
 
-.seq:hover:not(:disabled) {
-  border-color: #4338ca;
-  color: #4338ca;
-  transform: scale(1.03);
+.sequence-pill.free {
+  border-color: rgba(16, 185, 129, 0.35);
+  background: rgba(16, 185, 129, 0.08);
+  color: rgba(16, 185, 129, 0.95);
 }
 
-.seq-taken {
-  background: #f3f4f6;
-  border-color: #e5e7eb;
-  color: #9ca3af;
-  text-decoration: line-through;
+.sequence-pill.taken {
+  border-color: rgba(239, 68, 68, 0.35);
+  background: rgba(239, 68, 68, 0.08);
+  color: rgba(239, 68, 68, 0.95);
   cursor: not-allowed;
 }
 
-.seq-selected {
-  background: linear-gradient(135deg, #a855f7 0%, #ec4899 50%, #3b82f6 100%);
-  color: #fff;
-  border-color: transparent;
-  box-shadow: 0 6px 16px rgba(168, 85, 247, 0.35);
-  transform: scale(1.05);
+.sequence-pill.selected {
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.25);
+  border-color: rgba(59, 130, 246, 0.6);
 }
 
 .sequence-hint {
   font-size: 11px;
   font-weight: 600;
   color: rgba(255, 255, 255, 0.55);
-  margin-top: 8px;
 }
 
 .search-section {