feat(ui): redesign command center layout and add championship snapshot widget

frontend/src/pages/CommandCenterPage.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from 'react'
 import { useQueries, useQuery } from '@tanstack/react-query'
 import { Link } from '@tanstack/react-router'
-import { fetchLiveState, fetchLocalMeetings, fetchSeasonMeetings, fetchSeasons, fetchSessions, fetchWeekend } from '../api'
+import { fetchLiveState, fetchLocalMeetings, fetchSeasonMeetings, fetchSeasons, fetchSessions, fetchWeekend, fetchChampionshipHub } from '../api'
 import { RACE_HUB_DATASETS, countWeekendStats, formatCoverageHint, sessionTypeAbbrev } from '../lib/coverage'
 import {
   currentAndNextSession,
@@ -17,7 +17,7 @@ import {
 import { countryAccent, countryDecal, countryFlag, formatGpDateRange } from '../lib/gpIdentity'
 import type { Meeting, Session, Weekend, WeekendSession } from '../types'
 import { PaddockBriefing } from '../components/PaddockBriefing'
-import { Play, Activity, Calendar } from 'lucide-react'
+import { Play, Activity, Calendar, Trophy } from 'lucide-react'
 
 type WeekendStatusKind = 'live' | 'current' | 'next' | 'recent' | 'fallback'
 
@@ -92,6 +92,13 @@ export function CommandCenterPage() {
     staleTime: 5_000,
   })
 
+  const championshipQuery = useQuery({
+    queryKey: ['championship-hub', latestSeason],
+    queryFn: () => fetchChampionshipHub(latestSeason!),
+    enabled: latestSeason != null,
+  })
+  const champHub = championshipQuery.data
+
   useEffect(() => {
     const timer = window.setInterval(() => setNow(Date.now()), 1000)
     return () => window.clearInterval(timer)
@@ -218,175 +225,264 @@ export function CommandCenterPage() {
       )}
 
       {focusMeeting && (
-        <section className="cc-weekend-band ui-card glass-panel" data-testid="cc-focus">
-          <div className="cc-band-accent" aria-hidden="true" />
-          <div className="cc-band-body">
-            <div className="cc-band-row">
-              <span className="cc-band-decal mono">{decal}</span>
-              <div className="cc-band-titles">
-                <div className="cc-band-eyebrow mono">
-                  <WeekendKindLabel kind={statusKind} />
+        <div className="cc-hero">
+          <section className="cc-weekend-band ui-card glass-panel" data-testid="cc-focus">
+            <div className="cc-band-accent" aria-hidden="true" />
+            <div className="cc-band-body">
+              <div className="cc-band-row">
+                <span className="cc-band-decal mono">{decal}</span>
+                <div className="cc-band-titles">
+                  <div className="cc-band-eyebrow mono">
+                    <WeekendKindLabel kind={statusKind} />
+                  </div>
+                  <h1 className="cc-band-name">{focusMeeting.meeting_name}</h1>
+                  <div className="cc-band-sub mono">
+                    {[focusMeeting.location, focusMeeting.circuit_short_name]
+                      .filter(Boolean)
+                      .join(' · ')}
+                  </div>
+                  <div className="cc-band-sub mono cc-band-dates">{formatGpDateRange(focusMeeting)}</div>
                 </div>
-                <h1 className="cc-band-name">{focusMeeting.meeting_name}</h1>
-                <div className="cc-band-sub mono">
-                  {[focusMeeting.location, focusMeeting.circuit_short_name]
-                    .filter(Boolean)
-                    .join(' · ')}
-                </div>
-                <div className="cc-band-sub mono cc-band-dates">{formatGpDateRange(focusMeeting)}</div>
+                <CountdownBlock
+                  liveActive={liveActive}
+                  currentSession={currentSession}
+                  nextSession={nextSession}
+                  meeting={focusMeeting}
+                  now={nowDate}
+                />
               </div>
-              <CountdownBlock
-                liveActive={liveActive}
-                currentSession={currentSession}
-                nextSession={nextSession}
-                meeting={focusMeeting}
-                now={nowDate}
-              />
             </div>
-          </div>
-        </section>
-      )}
+          </section>
 
-      {focusMeeting && (
-        <div className="cc-actions-row" data-testid="cc-actions">
-          <Link
-            to="/live"
-            className={`cc-pri-action ui-card interactive ${liveActive ? 'is-live ui-cta-primary' : ''}`}
-            data-testid="cc-action-live"
-          >
-            <span className="cc-pri-label" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}><Play size={16} /> Watch Live</span>
-            <span className="cc-pri-meta mono">{liveActive ? 'Feed active' : 'Standby'}</span>
-          </Link>
-          <Link
-            to="/race-hub"
-            search={analysisSessionKey ? { session_key: analysisSessionKey } : {}}
-            className="cc-pri-action ui-card interactive"
-            data-testid="cc-action-race-hub"
-          >
-            <span className="cc-pri-label" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}><Activity size={16} /> Open Analysis</span>
-            <span className="cc-pri-meta mono">
-              {actionSession
-                ? `${actionSession.session_name} · session ${actionSession.session_key}`
-                : 'Pick a session'}
-            </span>
-          </Link>
-          {nextSession && sessionStartTime(nextSession) && (
-            <a
-              href="#cc-schedule"
-              className="cc-pri-action ui-card interactive"
-              data-testid="cc-action-schedule"
-              onClick={(e) => {
-                e.preventDefault()
-                document.getElementById('cc-schedule')?.scrollIntoView({ behavior: 'smooth' })
-              }}
+          <div className="cc-actions-row" data-testid="cc-actions">
+            <Link
+              to="/live"
+              className={`cc-pri-action ui-card interactive ${liveActive ? 'is-live ui-cta-primary' : ''}`}
+              data-testid="cc-action-live"
             >
-              <span className="cc-pri-label" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}><Calendar size={16} /> Schedule</span>
+              <span className="cc-pri-label" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}><Play size={16} /> Watch Live</span>
+              <span className="cc-pri-meta mono">{liveActive ? 'Feed active' : 'Standby'}</span>
+            </Link>
+            <Link
+              to="/race-hub"
+              search={analysisSessionKey ? { session_key: analysisSessionKey } : {}}
+              className="cc-pri-action ui-card interactive"
+              data-testid="cc-action-race-hub"
+            >
+              <span className="cc-pri-label" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}><Activity size={16} /> Open Analysis</span>
               <span className="cc-pri-meta mono">
-                next: {nextSession.session_name}
+                {actionSession
+                  ? `${actionSession.session_name} · session ${actionSession.session_key}`
+                  : 'Pick a session'}
               </span>
-            </a>
-          )}
+            </Link>
+            {nextSession && sessionStartTime(nextSession) && (
+              <a
+                href="#cc-schedule"
+                className="cc-pri-action ui-card interactive"
+                data-testid="cc-action-schedule"
+                onClick={(e) => {
+                  e.preventDefault()
+                  document.getElementById('cc-schedule')?.scrollIntoView({ behavior: 'smooth' })
+                }}
+              >
+                <span className="cc-pri-label" style={{ display: 'flex', alignItems: 'center', gap: '8px' }}><Calendar size={16} /> Schedule</span>
+                <span className="cc-pri-meta mono">
+                  next: {nextSession.session_name}
+                </span>
+              </a>
+            )}
+          </div>
         </div>
       )}
 
-      {focusWeekendSessions.length > 0 && (
-        <section className="cc-schedule" id="cc-schedule">
-          <div className="sec-header">
-            <span className="sec-title">Weekend Schedule</span>
-            <span className="sec-meta mono">{focusWeekendSessions.length} sessions</span>
+      <div className="cc-dashboard-grid">
+        <div className="cc-dashboard-main">
+          <div 
+            className="cc-ambient-aura" 
+            aria-hidden="true" 
+            style={focusMeeting ? { '--aura-accent': countryAccent(focusMeeting) } as React.CSSProperties : undefined} 
+          />
+          <div className="cc-dashboard-panel">
+            {seasonMeetings.length > 0 && (
+              <section className="cc-season-calendar" data-testid="cc-season-calendar">
+              <div className="sec-header">
+                <span className="sec-title">Season Calendar</span>
+                <span className="sec-meta mono">
+                  {seasonMeetings.length} rounds · {meetingStats.full}/{meetingStats.total || 0} local
+                </span>
+              </div>
+              <div className="cc-calendar-grid" role="list">
+                {seasonMeetings.map((meeting, index) => {
+                  const weekend = weekendsByKey.get(meeting.meeting_key)
+                  const target = pickAnalysisSession(weekend)
+                  const targetKey = target?.session.session_key ?? weekend?.default_session_key
+                  const status = meetingStatus(meeting, focusMeeting?.meeting_key, nowDate)
+                  const cardAccent = countryAccent(meeting)
+                  return (
+                    <Link
+                      key={meeting.meeting_key}
+                      to="/race-hub"
+                      search={targetKey ? { session_key: targetKey } : {}}
+                      className={`cc-calendar-card cc-calendar-${status}`}
+                      data-testid={`cc-calendar-${meeting.meeting_key}`}
+                      role="listitem"
+                      style={{ '--gp-card-accent': cardAccent } as React.CSSProperties}
+                    >
+                      <div className="cc-calendar-accent" aria-hidden="true" />
+                      <div className="cc-calendar-top mono">
+                        <span className="cc-calendar-round">R{String(index + 1).padStart(2, '0')}</span>
+                        <span className={`cc-cov-dot cc-cov-${weekend?.source ?? 'none'}`} aria-hidden="true" />
+                      </div>
+                      <div className="cc-calendar-id">
+                        {countryFlag(meeting) && <span className="cc-calendar-flag">{countryFlag(meeting)}</span>}
+                      </div>
+                      <span className="cc-calendar-decal mono">{countryDecal(meeting)}</span>
+                      <div className="cc-calendar-copy">
+                        <div className="cc-calendar-name">{meeting.meeting_name}</div>
+                        <div className="cc-calendar-circuit mono">{meeting.circuit_short_name || meeting.location}</div>
+                        <div className="cc-calendar-date mono">{formatGpDateRange(meeting)}</div>
+                      </div>
+                    </Link>
+                  )
+                })}
+              </div>
+              {seasonMeetingsQuery.isError && (
+                <div className="cc-side-empty">Using local meetings because the full calendar could not load.</div>
+              )}
+            </section>
+            )}
           </div>
-          <div className="cc-session-strip" role="list">
-            {focusWeekendSessions.map(({ session, source, datasets }) => {
-              const status = classifySessionStatus(session, nowDate)
-              const isNext = nextSession?.session_key === session.session_key
-              const isCurrent = currentSession?.session_key === session.session_key
-              const isLive = isCurrent && liveActive
-              return (
-                <Link
-                  key={session.session_key}
-                  to="/race-hub"
-                  search={{ session_key: session.session_key }}
-                  className={`cc-session-card ui-card interactive cc-status-${status}${isNext ? ' is-next' : ''}${
-                    isLive ? ' is-live glass-panel' : ''
-                  }`}
-                  data-testid={`cc-session-${session.session_key}`}
-                  role="listitem"
-                >
-                  <div className="cc-session-card-head">
-                    <span className="cc-session-abbrev mono">
-                      {sessionTypeAbbrev(session.session_type, session.session_name)}
-                    </span>
-                    <span className={`cc-session-status cc-status-pill-${status}`}>
-                      {isCurrent ? 'On track' : status === 'done' ? 'Done' : isNext ? 'Next' : 'Upcoming'}
-                    </span>
-                  </div>
-                  <div className="cc-session-name">{session.session_name}</div>
-                  <div className="cc-session-time mono">{formatSessionScheduleTime(session.date_start)}</div>
-                  <div className="cc-session-cov mono">
-                    <span className={`cc-cov-dot cc-cov-${source}`} aria-hidden="true" />
-                    {formatCoverageHint(datasets)}
-                  </div>
-                </Link>
-              )
-            })}
-          </div>
-        </section>
-      )}
+        </div>
 
-      {seasonMeetings.length > 0 && (
-        <section className="cc-season-calendar" data-testid="cc-season-calendar">
-          <div className="sec-header">
-            <span className="sec-title">Season Calendar</span>
-            <span className="sec-meta mono">
-              {seasonMeetings.length} rounds · {meetingStats.full}/{meetingStats.total || 0} local
-            </span>
-          </div>
-          <div className="cc-calendar-grid" role="list">
-            {seasonMeetings.map((meeting, index) => {
-              const weekend = weekendsByKey.get(meeting.meeting_key)
-              const target = pickAnalysisSession(weekend)
-              const targetKey = target?.session.session_key ?? weekend?.default_session_key
-              const status = meetingStatus(meeting, focusMeeting?.meeting_key, nowDate)
-              const cardAccent = countryAccent(meeting)
-              return (
-                <Link
-                  key={meeting.meeting_key}
-                  to="/race-hub"
-                  search={targetKey ? { session_key: targetKey } : {}}
-                  className={`cc-calendar-card cc-calendar-${status}`}
-                  data-testid={`cc-calendar-${meeting.meeting_key}`}
-                  role="listitem"
-                  style={{ '--gp-card-accent': cardAccent } as React.CSSProperties}
-                >
-                  <div className="cc-calendar-accent" aria-hidden="true" />
-                  <div className="cc-calendar-top mono">
-                    <span className="cc-calendar-round">R{String(index + 1).padStart(2, '0')}</span>
-                    <span className={`cc-cov-dot cc-cov-${weekend?.source ?? 'none'}`} aria-hidden="true" />
+        <div className="cc-dashboard-sidebar">
+          {champHub && (
+            <section className="cc-champ-snapshot glass-panel" data-testid="cc-champ-snapshot" style={{ padding: 'var(--s5)', borderRadius: '12px' }}>
+              <div className="cc-champ-header">
+                <span>Championship Leaders</span>
+                <Link to="/championship" className="cc-champ-link">Full Standings →</Link>
+              </div>
+              <div className="cc-champ-group-label">Drivers</div>
+              <div className="cc-champ-list">
+                {champHub.drivers.slice(0, 3).map((d) => (
+                  <div key={d.driver_number} className="cc-champ-row">
+                    <div className="cc-champ-left">
+                      <div className="cc-champ-color" style={{ color: `#${d.team_colour}`, background: 'currentColor' }} />
+                      <span className="cc-champ-name">{d.name_acronym}</span>
+                    </div>
+                    <div className="cc-champ-form" title="Last 5 races">
+                      <FormSparkline form={d.form} color={`#${d.team_colour}`} />
+                    </div>
+                    <div className="cc-champ-right">
+                      <span className="cc-champ-gap">
+                        {d.position === 1 ? '—' : `-${champHub.drivers[0].points - d.points}`}
+                      </span>
+                      <span className="cc-champ-pts">{d.points}</span>
+                    </div>
                   </div>
-                  <div className="cc-calendar-id">
-                    <span className="cc-calendar-decal mono">{countryDecal(meeting)}</span>
-                    {countryFlag(meeting) && <span className="cc-calendar-flag">{countryFlag(meeting)}</span>}
+                ))}
+              </div>
+              <div className="cc-champ-group-label">Constructors</div>
+              <div className="cc-champ-list">
+                {champHub.teams.slice(0, 3).map((t, i) => (
+                  <div key={t.team_name} className="cc-champ-row">
+                    <div className="cc-champ-left">
+                      <div className="cc-champ-color" style={{ color: `#${t.team_colour}`, background: 'currentColor' }} />
+                      <span className="cc-champ-name">{t.team_name}</span>
+                    </div>
+                    <div className="cc-champ-form" style={{ opacity: 0.4, fontSize: '11px', display: 'flex', gap: '4px', alignItems: 'center' }} title={`${t.wins} Wins`}>
+                      <Trophy size={12} /> {t.wins}
+                    </div>
+                    <div className="cc-champ-right">
+                      <span className="cc-champ-gap">
+                        {i === 0 ? '—' : `-${champHub.teams[0].points - t.points}`}
+                      </span>
+                      <span className="cc-champ-pts">{t.points}</span>
+                    </div>
                   </div>
-                  <div className="cc-calendar-copy">
-                    <div className="cc-calendar-name">{meeting.meeting_name}</div>
-                    <div className="cc-calendar-circuit mono">{meeting.circuit_short_name || meeting.location}</div>
-                    <div className="cc-calendar-date mono">{formatGpDateRange(meeting)}</div>
-                  </div>
-                </Link>
-              )
-            })}
-          </div>
-          {seasonMeetingsQuery.isError && (
-            <div className="cc-side-empty">Using local meetings because the full calendar could not load.</div>
+                ))}
+              </div>
+            </section>
           )}
-        </section>
-      )}
 
-      <PaddockBriefing />
+          {focusWeekendSessions.length > 0 && (
+            <section className="cc-schedule" data-testid="cc-schedule">
+              <div className="sec-header">
+                <span className="sec-title">Weekend Schedule</span>
+                <span className="sec-meta mono">{focusWeekendSessions.length} sessions</span>
+              </div>
+              <div className="cc-session-strip" role="list">
+                {focusWeekendSessions.map(({ session, source, datasets }) => {
+                  const status = classifySessionStatus(session, nowDate)
+                  const isNext = nextSession?.session_key === session.session_key
+                  const isCurrent = currentSession?.session_key === session.session_key
+                  const isLive = isCurrent && liveActive
+                  return (
+                    <Link
+                      key={session.session_key}
+                      to="/race-hub"
+                      search={{ session_key: session.session_key }}
+                      className={`cc-session-card ui-card interactive cc-status-${status}${isNext ? ' is-next' : ''}${
+                        isLive ? ' is-live glass-panel' : ''
+                      }`}
+                      data-testid={`cc-session-${session.session_key}`}
+                      role="listitem"
+                    >
+                      <div className="cc-session-card-head">
+                        <span className="cc-session-abbrev mono">
+                          {sessionTypeAbbrev(session.session_type, session.session_name)}
+                        </span>
+                        <span className={`cc-session-status cc-status-pill-${status}`}>
+                          {isCurrent ? 'On track' : status === 'done' ? 'Done' : isNext ? 'Next' : 'Upcoming'}
+                        </span>
+                      </div>
+                      <div className="cc-session-name">{session.session_name}</div>
+                      <div className="cc-session-time mono">{formatSessionScheduleTime(session.date_start)}</div>
+                      <div className="cc-session-cov mono">
+                        <span className={`cc-cov-dot cc-cov-${source}`} aria-hidden="true" />
+                        {formatCoverageHint(datasets)}
+                      </div>
+                    </Link>
+                  )
+                })}
+              </div>
+            </section>
+          )}
+
+          <PaddockBriefing />
+        </div>
+      </div>
     </div>
   )
 }
 
+function FormSparkline({ form, color }: { form: number[], color: string }) {
+  if (!form || form.length === 0) return null
+  const max = Math.max(...form, 26) // 26 is standard max for a race win
+  const width = 45
+  const height = 14
+  const step = width / Math.max(form.length - 1, 1)
+
+  const points = form.map((val, i) => {
+    const x = i * step
+    const y = height - (val / max) * height
+    return `${x},${y}`
+  }).join(' ')
+
+  return (
+    <svg width={width} height={height} style={{ overflow: 'visible' }}>
+      <polyline
+        fill="none"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        points={points}
+      />
+    </svg>
+  )
+}
+
 function WeekendKindLabel({ kind }: { kind: WeekendStatusKind }) {
   switch (kind) {
     case 'live':

frontend/src/styles/app.css

@@ -1427,10 +1427,150 @@ a { color: inherit; text-decoration: none; }
   min-height: calc(100vh - var(--nav-h));
   display: flex;
   flex-direction: column;
-  gap: var(--s5);
+  gap: var(--s6); /* slightly more gap for the main sections */
   --gp-accent: var(--red);
 }
 
+.cc-hero {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s4);
+}
+
+.cc-dashboard-grid {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s6);
+}
+
+@media (min-width: 900px) {
+  .cc-dashboard-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 65fr) minmax(0, 35fr);
+    gap: var(--s6);
+    align-items: start;
+  }
+}
+
+.cc-dashboard-main {
+  position: relative;
+  z-index: 1;
+}
+
+.cc-dashboard-panel {
+  background: rgba(18, 18, 18, 0.4);
+  border: 1px solid rgba(255, 255, 255, 0.04);
+  border-radius: 12px;
+  padding: var(--s6);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02), 0 8px 32px rgba(0,0,0,0.4);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  display: flex;
+  flex-direction: column;
+  gap: var(--s6);
+}
+
+.cc-ambient-aura {
+  position: absolute;
+  top: 0;
+  left: -5%;
+  width: 110%;
+  height: 100%;
+  background: radial-gradient(ellipse at center, var(--aura-accent, var(--red)) 0%, transparent 70%);
+  filter: blur(120px);
+  opacity: 0.45;
+  z-index: -1;
+  pointer-events: none;
+}
+
+.cc-dashboard-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s6);
+}
+
+/* Championship Snapshot Widget */
+.cc-champ-snapshot {
+  display: flex;
+  flex-direction: column;
+}
+.cc-champ-header {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--text-3);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  padding-bottom: var(--s4);
+  margin-bottom: var(--s3);
+}
+.cc-champ-link {
+  color: var(--text-3);
+  text-decoration: none;
+  font-weight: 600;
+  transition: color 0.1s;
+}
+.cc-champ-link:hover { color: var(--text); }
+
+.cc-champ-group-label {
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--text-3);
+  margin: var(--s3) 0 var(--s2);
+  padding-left: var(--s2);
+}
+
+.cc-champ-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.cc-champ-row {
+  display: grid;
+  grid-template-columns: 105px 1fr auto;
+  align-items: center;
+  padding: var(--s3) var(--s4);
+  background: rgba(255, 255, 255, 0.02);
+  border-radius: 6px;
+  font-size: 13px;
+  transition: background 0.1s;
+}
+.cc-champ-row:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+.cc-champ-left {
+  display: flex;
+  align-items: center;
+  gap: var(--s4);
+}
+.cc-champ-form {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.cc-champ-color {
+  width: 3px;
+  height: 16px;
+  border-radius: 2px;
+  box-shadow: 0 0 4px currentColor;
+}
+.cc-champ-name { font-weight: 600; color: var(--text); }
+
+.cc-champ-right {
+  display: grid;
+  grid-template-columns: 45px 35px;
+  align-items: center;
+  gap: var(--s2);
+  text-align: right;
+}
+.cc-champ-pts { font-weight: 700; color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums; }
+.cc-champ-gap { color: var(--text-3); font-size: 11px; font-variant-numeric: tabular-nums; }
+
 .cc-topbar {
   display: flex;
   align-items: center;
@@ -1486,15 +1626,16 @@ a { color: inherit; text-decoration: none; }
 .cc-weekend-band {
   display: flex;
   background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 8px;
   overflow: hidden;
   min-height: 124px;
 }
 
 .cc-band-accent {
-  width: 6px;
-  background: linear-gradient(180deg, var(--gp-accent), rgba(255,255,255,0.28), var(--gp-accent));
+  width: 4px;
+  background: var(--gp-accent);
+  box-shadow: 0 0 12px var(--gp-accent);
   flex-shrink: 0;
 }
 
@@ -1505,16 +1646,18 @@ a { color: inherit; text-decoration: none; }
   position: relative;
   overflow: hidden;
   background:
-    linear-gradient(135deg, color-mix(in srgb, var(--gp-accent) 18%, transparent), transparent 54%),
+    radial-gradient(ellipse at top right, color-mix(in srgb, var(--gp-accent) 15%, transparent), transparent 60%),
+    linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px),
     var(--surface);
+  background-size: 100% 100%, 20px 20px, 20px 20px, 100% 100%;
 }
 
 .cc-band-body::after {
   content: "";
   position: absolute;
   inset: 0;
-  background:
-    repeating-linear-gradient(110deg, transparent 0 22px, rgba(255,255,255,0.025) 22px 23px);
+  background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.3) 100%);
   pointer-events: none;
 }
 
@@ -1565,10 +1708,13 @@ a { color: inherit; text-decoration: none; }
 .cc-kind-recent { color: var(--text-3); }
 
 .cc-band-name {
-  font-size: 22px;
-  font-weight: 700;
-  line-height: 1.15;
-  margin-top: 2px;
+  font-size: 26px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+  margin-top: 4px;
+  color: #fff;
+  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
 }
 
 .cc-band-sub {
@@ -1582,7 +1728,7 @@ a { color: inherit; text-decoration: none; }
 
 .cc-countdown-block {
   flex-shrink: 0;
-  border-left: 1px solid var(--border);
+  border-left: 1px solid rgba(255, 255, 255, 0.08);
   padding-left: var(--s6);
   display: flex;
   flex-direction: column;
@@ -1620,31 +1766,38 @@ a { color: inherit; text-decoration: none; }
 /* Primary actions */
 .cc-actions-row {
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: var(--s3);
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: var(--s4);
 }
 
 .cc-pri-action {
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  padding: var(--s4) var(--s5);
+  gap: 4px;
+  padding: var(--s5) var(--s5);
   background: var(--surface);
   border: 1px solid var(--border);
-  border-radius: 4px;
+  border-radius: 6px;
   border-left: 3px solid var(--gp-accent);
-  transition: background 0.1s, border-color 0.1s;
+  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s, background 0.2s, border-color 0.2s;
   min-width: 0;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
 }
 .cc-pri-action:hover {
+  transform: translateY(-2px) scale(1.01);
   background: var(--surface-h);
-  border-color: var(--border-2);
+  border-color: rgba(255, 255, 255, 0.15);
   border-left-color: var(--gp-accent);
+  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
 }
 
 .cc-pri-action.is-live {
   border-left-color: var(--red);
-  background: rgba(225, 6, 0, 0.05);
+  background: rgba(225, 6, 0, 0.08);
+}
+.cc-pri-action.is-live:hover {
+  background: rgba(225, 6, 0, 0.12);
+  box-shadow: 0 8px 24px rgba(225, 6, 0, 0.25);
 }
 
 .cc-pri-label {
@@ -1673,25 +1826,28 @@ a { color: inherit; text-decoration: none; }
 .cc-session-card {
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  padding: var(--s3) var(--s4);
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 4px;
+  gap: 6px;
+  padding: var(--s4);
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 6px;
   min-width: 0;
-  transition: background 0.1s, border-color 0.1s;
+  transition: transform 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
 }
 .cc-session-card:hover {
-  background: var(--surface-h);
-  border-color: var(--border-2);
+  transform: translateY(-2px);
+  background: rgba(255, 255, 255, 0.04);
+  border-color: rgba(255, 255, 255, 0.12);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 .cc-session-card.is-current {
-  border-color: rgba(225, 6, 0, 0.4);
-  background: rgba(225, 6, 0, 0.06);
+  border-color: rgba(225, 6, 0, 0.6);
+  background: linear-gradient(135deg, rgba(225, 6, 0, 0.12), rgba(225, 6, 0, 0.02));
+  box-shadow: 0 0 16px rgba(225, 6, 0, 0.15);
 }
 .cc-session-card.is-next {
-  border-color: rgba(255, 214, 0, 0.35);
-  background: rgba(255, 214, 0, 0.04);
+  border-color: rgba(255, 214, 0, 0.4);
+  background: linear-gradient(135deg, rgba(255, 214, 0, 0.08), rgba(255, 214, 0, 0.01));
 }
 .cc-status-done { opacity: 0.78; }
 
@@ -1707,25 +1863,45 @@ a { color: inherit; text-decoration: none; }
   font-weight: 800;
   letter-spacing: 0.05em;
   color: var(--text-2);
-  background: var(--surface-2);
-  border: 1px solid var(--border);
-  border-radius: 2px;
-  padding: 1px 6px;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 4px;
+  padding: 2px 8px;
   min-width: 28px;
   text-align: center;
 }
 
 .cc-session-status {
   font-size: 9px;
-  font-weight: 700;
+  font-weight: 800;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: var(--text-3);
   white-space: nowrap;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+.cc-status-pill-live { 
+  background: rgba(225, 6, 0, 0.15);
+  color: var(--red); 
+  border: 1px solid rgba(225, 6, 0, 0.3);
+  animation: pulse-live 2s infinite;
+}
+@keyframes pulse-live {
+  0% { box-shadow: 0 0 0 0 rgba(225, 6, 0, 0.4); }
+  70% { box-shadow: 0 0 0 4px rgba(225, 6, 0, 0); }
+  100% { box-shadow: 0 0 0 0 rgba(225, 6, 0, 0); }
+}
+.cc-status-pill-upcoming { 
+  background: rgba(255, 214, 0, 0.15);
+  color: var(--yellow); 
+  border: 1px solid rgba(255, 214, 0, 0.3);
+}
+.cc-status-pill-done { 
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--text-3); 
+  border: 1px solid rgba(255, 255, 255, 0.05);
 }
-.cc-status-pill-live { color: var(--red); }
-.cc-status-pill-upcoming { color: var(--yellow); }
-.cc-status-pill-done { color: var(--text-3); }
 
 .cc-session-name {
   font-size: 12px;
@@ -1769,8 +1945,8 @@ a { color: inherit; text-decoration: none; }
 
 .cc-calendar-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
-  gap: var(--s3);
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: var(--s4);
 }
 
 .cc-calendar-card {
@@ -1783,30 +1959,35 @@ a { color: inherit; text-decoration: none; }
   gap: var(--s4);
   padding: var(--s4);
   overflow: hidden;
-  background:
-    linear-gradient(145deg, color-mix(in srgb, var(--gp-card-accent) 22%, transparent), transparent 58%),
-    var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  transition: transform 0.12s, border-color 0.12s, background 0.12s;
+  background: rgba(18, 18, 18, 0.45);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 6px;
+  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s, box-shadow 0.2s, background 0.2s;
 }
 
 .cc-calendar-card::before {
   content: "";
   position: absolute;
   inset: 0;
-  background:
-    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--gp-card-accent) 26%, transparent), transparent 32%),
-    repeating-linear-gradient(115deg, transparent 0 18px, rgba(255,255,255,0.025) 18px 19px);
+  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, transparent 100%);
+  opacity: 0;
+  transition: opacity 0.2s;
   pointer-events: none;
 }
 
 .cc-calendar-card:hover {
-  transform: translateY(-2px);
-  border-color: color-mix(in srgb, var(--gp-card-accent) 58%, var(--border));
-  background:
-    linear-gradient(145deg, color-mix(in srgb, var(--gp-card-accent) 28%, transparent), transparent 60%),
-    var(--surface-h);
+  transform: translateY(-4px) scale(1.01);
+  border-color: color-mix(in srgb, var(--gp-card-accent) 50%, rgba(255, 255, 255, 0.15));
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 2px 12px color-mix(in srgb, var(--gp-card-accent) 20%, transparent);
+  background: 
+    radial-gradient(ellipse at top left, color-mix(in srgb, var(--gp-card-accent) 15%, transparent), transparent 70%),
+    rgba(255, 255, 255, 0.05);
+}
+
+.cc-calendar-card:hover::before {
+  opacity: 1;
 }
 
 .cc-calendar-card > * {
@@ -1829,7 +2010,13 @@ a { color: inherit; text-decoration: none; }
 }
 
 .cc-calendar-past {
-  opacity: 0.58;
+  filter: grayscale(0.85);
+  opacity: 0.75;
+}
+
+.cc-calendar-past:hover {
+  filter: grayscale(0.1);
+  opacity: 1;
 }
 
 .cc-calendar-top,
@@ -1848,12 +2035,23 @@ a { color: inherit; text-decoration: none; }
 }
 
 .cc-calendar-decal {
-  font-size: 28px;
+  position: absolute;
+  bottom: -10px;
+  right: -5px;
+  font-size: 80px;
   font-weight: 900;
-  letter-spacing: -0.04em;
-  line-height: 0.95;
+  letter-spacing: -0.05em;
+  line-height: 1;
   color: var(--gp-card-accent);
-  filter: brightness(1.25);
+  opacity: 0.04;
+  z-index: 0;
+  pointer-events: none;
+  transition: opacity 0.2s, transform 0.2s;
+}
+
+.cc-calendar-card:hover .cc-calendar-decal {
+  opacity: 0.1;
+  transform: scale(1.05) translate(-2px, -2px);
 }
 
 .cc-calendar-flag {
@@ -4097,10 +4295,10 @@ a { color: inherit; text-decoration: none; }
 
 /* Glassmorphism */
 .glass-panel {
-  background: rgba(18, 18, 18, 0.65);
-  backdrop-filter: blur(12px);
-  -webkit-backdrop-filter: blur(12px);
-  border: 1px solid var(--border-glow);
+  background: rgba(18, 18, 18, 0.45);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 /* Base Card Enhancements (Soft borders, inner shadow, hover) */