/* Theme tokens and global resets — per spec §2.1 / §2.2 */ * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, "San Francisco", Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-size: 14px; line-height: 1.5; color: var(--text); background: var(--bg-page); -webkit-font-smoothing: antialiased; overscroll-behavior: none; } /* Light theme (default) */ body.theme-light { --bg-page: #FAFAFA; --bg-card: #FFFFFF; --bg-elevated: #FFFFFF; --bg-muted: #F2F3F5; --text: #11181C; --text-secondary: #687076; --text-tertiary: #9BA1A6; --border: #ECEEF0; --primary: #FF3366; /* Pinkish accent (matches romance/playlet vibe) */ --primary-pressed: #E02E5A; --vip-gold: #B8860B; --vip-gold-bg: linear-gradient(135deg, #FFE7A8 0%, #F5C74D 100%); --reader-title: #11181C; --reader-content: #3C3836; --reader-bg: #FAFAFA; } /* Dark theme */ body.theme-dark { --bg-page: #0F1115; --bg-card: #1A1D24; --bg-elevated: #232730; --bg-muted: #1A1D24; --text: #ECEDEE; --text-secondary: #9BA1A6; --text-tertiary: #687076; --border: #2A2F37; --primary: #FF4F7E; --primary-pressed: #FF3366; --vip-gold: #F5C74D; --vip-gold-bg: linear-gradient(135deg, #4A3F1A 0%, #6B5524 100%); --reader-title: #ECEDEE; --reader-content: #C8C5C0; --reader-bg: #0F1115; } /* Reader theme palettes (data-reader-theme on ) */ html[data-reader-theme="2"] body { --reader-title: #5B4636; --reader-content: #5B4636; --reader-bg: #F4ECD8; } html[data-reader-theme="3"] body { --reader-title: #C8C5C0; --reader-content: #B6B3AE; --reader-bg: #1F1F22; } html[data-reader-theme="4"] body { --reader-title: #E0E0E0; --reader-content: #BFBFBF; --reader-bg: #000000; } /* Mobile-first container */ #app { position: relative; max-width: 480px; min-height: 100vh; margin: 0 auto; background: var(--bg-page); padding-bottom: 64px; /* space for footer tab */ overflow-x: hidden; } /* Buttons */ button { font: inherit; color: inherit; cursor: pointer; } .btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 16px; border-radius: 22px; border: 0; background: var(--primary); color: #fff; font-weight: 600; font-size: 15px; } .btn:active { background: var(--primary-pressed); } .btn-block { width: 100%; } .btn-ghost { background: transparent; color: var(--primary); border: 1px solid var(--primary); } .btn-secondary { background: var(--bg-muted); color: var(--text); } /* Utility */ .row { display: flex; align-items: center; } .col { display: flex; flex-direction: column; } .gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .spacer { flex: 1; } .divider { height: 1px; background: var(--border); margin: 0; } .muted { color: var(--text-secondary); } .tertiary { color: var(--text-tertiary); } .bold { font-weight: 700; } .center { text-align: center; } .hidden { display: none !important; } /* Scrollbar (mobile-style) */ ::-webkit-scrollbar { width: 0; height: 0; }