Extract inline CSS to static/style.css + add mobile responsive rules

- Move 350-line inline css_code string to static/style.css
- app.py reads the file at startup (sprint task #11)
- Add @media breakpoints for 768px and 480px (sprint task #16)
- Add ::before/::after pulse-ring pseudo-elements for recording UX

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app.py

@@ -178,156 +178,8 @@ narrative_subtitles = [
     "And that was when she realized, she was not alone in the valley."
 ]
 
-css_code = """
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap');
-/* Main layouts and colors matching VoiceBook cream and amber theme */
-body, .gradio-container {
-    background-color: #FAF7F2 !important;
-    font-family: 'Inter', system-ui, sans-serif !important;
-}
-.gradio-container {
-    max-width: 1200px !important;
-    margin: 0 auto !important;
-}
-/* Serif headers */
-.serif-header {
-    font-family: 'Playfair Display', Georgia, serif !important;
-    color: #1c1c19 !important;
-    font-weight: 700 !important;
-}
-.cream-bg {
-    background-color: #FAF7F2 !important;
-}
-.card-container {
-    background-color: #f6f3ee !important;
-    border: 1px solid #ebdccb !important;
-    border-radius: 16px !important;
-    padding: 24px !important;
-    box-shadow: 0 2px 8px rgba(148, 74, 0, 0.03) !important;
-}
-.accent-border {
-    border-color: #ddc1b0 !important;
-}
-.highlight-orange {
-    color: #f5841f !important;
-}
-.highlight-amber {
-    color: #944a00 !important;
-}
-.dark-card-container {
-    background-color: #122116 !important;
-    color: #FAF7F2 !important;
-    border: 1px solid #1e3422 !important;
-    border-radius: 16px !important;
-    padding: 24px !important;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
-}
-/* Customized HTML grids matching identical React typography */
-.hero-spotlight {
-    background: linear-gradient(135deg, #1e3422 0%, #121f15 100%) !important;
-    color: #FFFFFF !important;
-    border-radius: 24px !important;
-    padding: 32px !important;
-    position: relative;
-    overflow: hidden;
-}
-.badge-featured {
-    background: rgba(245, 132, 31, 0.2);
-    color: #f5841f;
-    border: 1px solid rgba(245, 132, 31, 0.3);
-    border-radius: 9999px;
-    padding: 4px 10px;
-    font-size: 11px;
-    font-weight: 700;
-    text-transform: uppercase;
-    display: inline-block;
-}
-.book-shelf-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-    gap: 20px;
-}
-.shelf-card {
-    background: #f6f3ee;
-    border: 1px solid #eadacc;
-    border-radius: 16px;
-    padding: 16px;
-    display: flex;
-    gap: 16px;
-    transition: all 0.3s ease;
-    cursor: pointer;
-}
-.shelf-card:hover {
-    border-color: #f5841f;
-    transform: translateY(-2px);
-    box-shadow: 0 4px 12px rgba(148, 74, 0, 0.06);
-}
-.cover-image {
-    width: 80px;
-    height: 110px;
-    object-fit: cover;
-    border-radius: 8px;
-    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
-}
-.progress-bar-bg {
-    width: 100%;
-    height: 6px;
-    background: #ebdccb;
-    border-radius: 999px;
-    overflow: hidden;
-}
-.progress-bar-fill {
-    height: 100%;
-    background: #f5841f;
-}
-/* Pulsing rings for microphone recording */
-@keyframes pulse-ring {
-  0% { transform: scale(0.85); opacity: 0.6; }
-  50% { transform: scale(1.15); opacity: 0.25; }
-  100% { transform: scale(1.4); opacity: 0; }
-}
-.pulse-circle {
-    position: relative;
-    width: 120px;
-    height: 120px;
-    border-radius: 50%;
-    background: #944a00;
-    color: white;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    margin: 0 auto;
-}
-.recording-active {
-    background: #ef4444 !important;
-}
-/* Subtitle dialog ticker */
-.dialog-synced {
-    background: rgba(0,0,0,0.15);
-    border: 1px solid rgba(255,166,0,0.1);
-    color: #ffd3a6;
-    font-family: 'Playfair Display', Georgia, serif;
-    font-size: 1.25rem;
-    font-style: italic;
-    padding: 24px;
-    border-radius: 16px;
-    text-align: center;
-    min-height: 100px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-/* Tab button custom styles */
-.tabs .tab-nav button {
-    border-bottom: 2px solid transparent !important;
-}
-.tabs .tab-nav button.selected {
-    color: #944a00 !important;
-    border-bottom-color: #944a00 !important;
-    font-weight: 700 !important;
-}
-"""
+with open(os.path.join(os.path.dirname(__file__), "static", "style.css"), encoding="utf-8") as _f:
+    css_code = _f.read()
 
 def generate_dashboard_html(books_list):
     featured = books_list[0]

static/style.css

@@ -0,0 +1,179 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap');
+
+/* ── Base ── */
+body, .gradio-container {
+    background-color: #FAF7F2 !important;
+    font-family: 'Inter', system-ui, sans-serif !important;
+}
+.gradio-container {
+    max-width: 1200px !important;
+    margin: 0 auto !important;
+}
+
+/* ── Typography ── */
+.serif-header {
+    font-family: 'Playfair Display', Georgia, serif !important;
+    color: #1c1c19 !important;
+    font-weight: 700 !important;
+}
+.cream-bg { background-color: #FAF7F2 !important; }
+.highlight-orange { color: #f5841f !important; }
+.highlight-amber  { color: #944a00 !important; }
+
+/* ── Cards ── */
+.card-container {
+    background-color: #f6f3ee !important;
+    border: 1px solid #ebdccb !important;
+    border-radius: 16px !important;
+    padding: 24px !important;
+    box-shadow: 0 2px 8px rgba(148, 74, 0, 0.03) !important;
+}
+.accent-border { border-color: #ddc1b0 !important; }
+
+.dark-card-container {
+    background-color: #122116 !important;
+    color: #FAF7F2 !important;
+    border: 1px solid #1e3422 !important;
+    border-radius: 16px !important;
+    padding: 24px !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
+}
+
+/* ── Hero ── */
+.hero-spotlight {
+    background: linear-gradient(135deg, #1e3422 0%, #121f15 100%) !important;
+    color: #FFFFFF !important;
+    border-radius: 24px !important;
+    padding: 32px !important;
+    position: relative;
+    overflow: hidden;
+}
+.badge-featured {
+    background: rgba(245, 132, 31, 0.2);
+    color: #f5841f;
+    border: 1px solid rgba(245, 132, 31, 0.3);
+    border-radius: 9999px;
+    padding: 4px 10px;
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    display: inline-block;
+}
+
+/* ── Book grid & cards ── */
+.book-shelf-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    gap: 20px;
+}
+.shelf-card {
+    background: #f6f3ee;
+    border: 1px solid #eadacc;
+    border-radius: 16px;
+    padding: 16px;
+    display: flex;
+    gap: 16px;
+    transition: all 0.3s ease;
+    cursor: pointer;
+}
+.shelf-card:hover {
+    border-color: #f5841f;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(148, 74, 0, 0.06);
+}
+.cover-image {
+    width: 80px;
+    height: 110px;
+    object-fit: cover;
+    border-radius: 8px;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+}
+
+/* ── Progress bar ── */
+.progress-bar-bg {
+    width: 100%;
+    height: 6px;
+    background: #ebdccb;
+    border-radius: 999px;
+    overflow: hidden;
+}
+.progress-bar-fill {
+    height: 100%;
+    background: #f5841f;
+}
+
+/* ── Recording UX ── */
+@keyframes pulse-ring {
+    0%   { transform: scale(0.85); opacity: 0.6; }
+    50%  { transform: scale(1.15); opacity: 0.25; }
+    100% { transform: scale(1.4);  opacity: 0; }
+}
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50%       { opacity: 0.4; }
+}
+.pulse-circle {
+    position: relative;
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    background: #944a00;
+    color: white;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+}
+.pulse-circle::before,
+.pulse-circle::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    border: 3px solid #944a00;
+    animation: pulse-ring 1.8s ease-out infinite;
+}
+.pulse-circle::after { animation-delay: 0.6s; }
+.recording-active { background: #ef4444 !important; }
+.recording-active::before,
+.recording-active::after { border-color: #ef4444; }
+
+/* ── Subtitle / dialog ticker ── */
+.dialog-synced {
+    background: rgba(0,0,0,0.15);
+    border: 1px solid rgba(255,166,0,0.1);
+    color: #ffd3a6;
+    font-family: 'Playfair Display', Georgia, serif;
+    font-size: 1.25rem;
+    font-style: italic;
+    padding: 24px;
+    border-radius: 16px;
+    text-align: center;
+    min-height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* ── Tabs ── */
+.tabs .tab-nav button {
+    border-bottom: 2px solid transparent !important;
+}
+.tabs .tab-nav button.selected {
+    color: #944a00 !important;
+    border-bottom-color: #944a00 !important;
+    font-weight: 700 !important;
+}
+
+/* ── Mobile responsive ── */
+@media (max-width: 768px) {
+    .gradio-container { max-width: 100% !important; padding: 0 12px !important; }
+    .book-shelf-grid  { grid-template-columns: 1fr !important; }
+    .hero-spotlight   { flex-direction: column !important; padding: 20px !important; }
+    .shelf-card       { flex-direction: column; }
+    .card-container, .dark-card-container { padding: 16px !important; }
+}
+@media (max-width: 480px) {
+    .book-shelf-grid { grid-template-columns: 1fr !important; gap: 12px; }
+}