refactor(stage-5): modularize style.css into domain stylesheets and update service worker precache

app/static/css/base.css

@@ -0,0 +1,148 @@
+/* ==========================================================================
+   1. Base Tokens, Typography, Reset & Global Safe Areas
+   ========================================================================== */
+
+/* Modern CSS Design System for Notes App */
+:root {
+    --bg-main: #0f172a;
+    --bg-surface: #1e293b;
+    --bg-surface-hover: #334155;
+    --bg-card: #1e293b;
+    --bg-input: #0f172a;
+    --border-color: #334155;
+    --border-focus: #38bdf8;
+    
+    --text-main: #f8fafc;
+    --text-muted: #94a3b8;
+    --text-dim: #64748b;
+    
+    --primary: #38bdf8;
+    --primary-hover: #0ea5e9;
+    --primary-dim: rgba(56, 189, 248, 0.15);
+    
+    --success: #10b981;
+    --success-hover: #059669;
+    --success-dim: rgba(16, 185, 129, 0.15);
+    
+    --danger: #ef4444;
+    --danger-hover: #dc2626;
+    --danger-dim: rgba(239, 68, 68, 0.15);
+    
+    --tag-bg: #293548;
+    --tag-text: #7dd3fc;
+    
+    --radius-sm: 6px;
+    --radius-md: 10px;
+    --radius-lg: 14px;
+    --radius-full: 9999px;
+    
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
+    
+    --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    --transition: all 0.18s ease-in-out;
+    
+    --sat: env(safe-area-inset-top, 0px);
+    --sar: env(safe-area-inset-right, 0px);
+    --sab: env(safe-area-inset-bottom, 0px);
+    --sal: env(safe-area-inset-left, 0px);
+    --navbar-height: 60px;
+}
+
+[data-theme="light"] {
+    --bg-main: #f1f5f9;
+    --bg-surface: #ffffff;
+    --bg-surface-hover: #f8fafc;
+    --bg-card: #ffffff;
+    --bg-input: #f8fafc;
+    --border-color: #cbd5e1;
+    --border-focus: #0284c7;
+    
+    --text-main: #0f172a;
+    --text-muted: #475569;
+    --text-dim: #94a3b8;
+    
+    --primary: #0284c7;
+    --primary-hover: #0369a1;
+    --primary-dim: rgba(2, 132, 199, 0.1);
+    
+    --success: #059669;
+    --success-hover: #047857;
+    --success-dim: rgba(5, 150, 105, 0.1);
+    
+    --tag-bg: #e2e8f0;
+    --tag-text: #0369a1;
+    
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
+    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html, body {
+    overflow-x: clip;
+    -webkit-tap-highlight-color: transparent;
+}
+
+body {
+    background-color: var(--bg-main);
+    color: var(--text-main);
+    font-family: var(--font-family);
+    line-height: 1.5;
+    -webkit-font-smoothing: antialiased;
+    min-height: 100vh;
+    min-height: 100dvh;
+}
+
+.hidden {
+    display: none !important;
+}
+
+
+/* Main Content */
+.main-content {
+    max-width: 900px;
+    width: 100%;
+    margin: 0 auto;
+    padding: 32px 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 36px;
+}
+
+
+/* --- Responsive Mobile Overrides (max-width: 768px) --- */
+@media (max-width: 768px) {
+    /* 1. iOS Safari Auto-Zoom Fix (< 16px triggers zoom) */
+    input, select, textarea,
+    .input-styled, .search-input-box input, .form-group input,
+    .search-mini-box input, .reader-select {
+        font-size: 16px !important;
+    }
+
+    /* 2. Global Mobile App Container & Safe Areas */
+    html, body {
+        overflow-x: hidden;
+        -webkit-overflow-scrolling: touch;
+        min-height: 100dvh;
+    }
+
+    .app-shell {
+        min-height: 100dvh;
+        overflow-x: hidden;
+    }
+
+    .main-content,
+    .srs-view,
+    .reader-view {
+        padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
+    }
+
+
+}