:root{--color-bg: #FDFCF9;--color-surface: #FFFFFF;--color-surface-raised: #F5F4F1;--color-primary: #2D6A4F;--color-primary-dark: #1B4332;--color-primary-light: #2E7A57;--color-primary-subtle: #D8F3DC;--color-accent: #40916C;--color-text: #1C1917;--color-text-muted: #6B6560;--color-text-light: #736E6B;--color-border: #E7E5E4;--color-border-light: #F3F2F0;--color-highlight: rgba(254, 240, 138, .55);--color-highlight-border: #CA8A04;--color-danger: #DC2626;--color-danger-subtle: #FEE2E2;--color-ref-bg: #E0F2FE;--color-ref-text: #0369A1;--color-popover-bg: #1C1917;--color-popover-text: #FFFFFF;--color-toast-bg: #1C1917;--color-toast-text: #FFFFFF;--nav-height: 56px;--header-height: 52px;--font-reading: Georgia, "Times New Roman", serif;--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--text-xs: 11px;--text-sm: 13px;--text-base: 15px;--text-md: 17px;--text-lg: 19px;--text-reading: 18px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);--shadow-md: 0 4px 12px rgba(0,0,0,.1), 0 2px 4px rgba(0,0,0,.06);--shadow-lg: 0 8px 24px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.08);--shadow-modal: 0 -4px 32px rgba(0,0,0,.18);--transition: .18s ease;--transition-slow: .3s ease}[data-theme=dark]{--color-bg: #111813;--color-surface: #182019;--color-surface-raised: #1E2B20;--color-primary: #52B788;--color-primary-dark: #D8F3DC;--color-primary-light: #74C69D;--color-primary-subtle: rgba(82, 183, 136, .14);--color-accent: #74C69D;--color-text: #E9F5EC;--color-text-muted: #90AE97;--color-text-light: #5C7A63;--color-border: #263329;--color-border-light: #1B261D;--color-highlight: rgba(250, 204, 21, .14);--color-highlight-border: #CA8A04;--color-danger: #FCA5A5;--color-danger-subtle: rgba(252, 165, 165, .12);--color-ref-bg: rgba(147, 197, 253, .1);--color-ref-text: #93C5FD;--color-popover-bg: #2A3E2E;--color-popover-text: #E9F5EC;--color-toast-bg: #E9F5EC;--color-toast-text: #111813;--shadow-sm: 0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.2);--shadow-md: 0 4px 12px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.28);--shadow-lg: 0 8px 24px rgba(0,0,0,.55), 0 4px 8px rgba(0,0,0,.35);--shadow-modal: 0 -4px 32px rgba(0,0,0,.65)}*,*:before,*:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{-webkit-text-size-adjust:100%}body{margin:0;padding:0;font-family:var(--font-ui);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);overscroll-behavior:none;-webkit-font-smoothing:antialiased}#root{display:flex;flex-direction:column;height:100dvh;max-width:600px;margin:0 auto;position:relative;overflow:hidden;background:var(--color-bg)}.page-scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}.page-header{position:sticky;top:0;z-index:10;background:var(--color-surface);border-bottom:1px solid var(--color-border);height:var(--header-height);display:flex;align-items:center;padding:0 16px;gap:8px}.bottom-nav{flex-shrink:0;background:var(--color-surface);border-top:1px solid var(--color-border);box-shadow:0 -1px 0 var(--color-border)}.nav-tabs{display:flex;align-items:center;justify-content:space-around;height:var(--nav-height)}.nav-safe-area{height:env(safe-area-inset-bottom,0px)}.nav-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;flex:1;height:100%;border:none;background:none;cursor:pointer;color:var(--color-text-light);font-family:var(--font-ui);font-size:var(--text-xs);font-weight:500;transition:color var(--transition);padding:0;min-height:44px}.nav-tab.active{color:var(--color-primary)}.nav-tab svg{width:22px;height:22px}h1,h2,h3,h4{margin:0;font-weight:600}p{margin:0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 16px;height:40px;border-radius:var(--radius-md);border:none;font-family:var(--font-ui);font-size:var(--text-base);font-weight:500;cursor:pointer;transition:background var(--transition),opacity var(--transition)}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:active{opacity:.85}.btn-secondary{background:var(--color-primary-subtle);color:var(--color-primary-dark)}.btn-secondary:active{opacity:.85}.btn-ghost{background:transparent;color:var(--color-text);border:1.5px solid var(--color-border)}.btn-ghost:active{background:var(--color-border-light)}.btn-danger{background:var(--color-danger-subtle);color:var(--color-danger)}.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-md);border:none;background:transparent;color:var(--color-text);cursor:pointer;transition:background var(--transition)}.icon-btn:active{background:var(--color-surface-raised)}.tag-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:var(--radius-full);background:var(--color-primary-subtle);color:var(--color-primary-dark);font-size:var(--text-xs);font-weight:500;white-space:nowrap;cursor:pointer;border:none;font-family:var(--font-ui);transition:background var(--transition)}.tag-chip:active{opacity:.75}.tag-chip .chip-remove{display:flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;background:#0000001f;font-size:10px;line-height:1}[data-theme=dark] .tag-chip .chip-remove{background:#ffffff26}.ref-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:var(--radius-full);background:var(--color-ref-bg);color:var(--color-ref-text);font-size:var(--text-xs);font-weight:500;white-space:nowrap;cursor:pointer;border:none;font-family:var(--font-ui);transition:opacity var(--transition)}.ref-chip:active{opacity:.75}.sheet-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:200;animation:fadeIn var(--transition) ease}.sheet{position:fixed;bottom:0;left:0;right:0;max-width:600px;margin:0 auto;background:var(--color-surface);border-radius:var(--radius-xl) var(--radius-xl) 0 0;z-index:201;padding-bottom:env(safe-area-inset-bottom,0px);animation:slideUp var(--transition-slow) ease;max-height:90dvh;display:flex;flex-direction:column;box-shadow:var(--shadow-modal)}.sheet-fullscreen{top:0;border-radius:0;max-height:100dvh;animation:slideUp var(--transition-slow) ease}.sheet-handle{width:36px;height:4px;background:var(--color-border);border-radius:var(--radius-full);margin:10px auto 6px;flex-shrink:0}.sheet-header{display:flex;align-items:center;padding:8px 16px 12px;gap:8px;flex-shrink:0;border-bottom:1px solid var(--color-border)}.sheet-title{flex:1;font-size:var(--text-md);font-weight:600}.sheet-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}.input{width:100%;padding:10px 12px;border:1.5px solid var(--color-border);border-radius:var(--radius-md);font-family:var(--font-ui);font-size:var(--text-base);color:var(--color-text);background:var(--color-surface);outline:none;transition:border-color var(--transition)}.input:focus{border-color:var(--color-primary)}.input::placeholder{color:var(--color-text-light)}textarea.input{resize:none;line-height:1.6}.divider{height:1px;background:var(--color-border);margin:0}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 32px;gap:16px;text-align:center}.empty-state-icon{font-size:48px;opacity:.3}.empty-state-title{font-size:var(--text-md);font-weight:600;color:var(--color-text)}.empty-state-body{font-size:var(--text-base);color:var(--color-text-muted);line-height:1.5}.toast-container{position:fixed;bottom:calc(var(--nav-height) + env(safe-area-inset-bottom,0px) + 12px);left:16px;right:16px;max-width:568px;margin:0 auto;z-index:300;display:flex;flex-direction:column;gap:8px;pointer-events:none}.toast{background:var(--color-toast-bg);color:var(--color-toast-text);padding:10px 14px;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;box-shadow:var(--shadow-lg);animation:slideUpFade .2s ease;pointer-events:auto}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideUpFade{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.verse-block{display:flex;gap:8px;padding:10px 16px;cursor:pointer;transition:background var(--transition);border-radius:var(--radius-sm);margin:0 4px;position:relative}.verse-block:active{background:var(--color-surface-raised)}.verse-block.active{background:var(--color-highlight)}.verse-block.bookmarked:after{content:"";position:absolute;top:12px;right:12px;width:6px;height:6px;border-radius:50%;background:var(--color-primary-light)}.verse-number{font-family:var(--font-ui);font-size:var(--text-xs);font-weight:600;color:var(--color-primary-light);min-width:20px;padding-top:3px;flex-shrink:0;text-align:right}.verse-text{font-family:var(--font-reading);font-size:var(--text-reading);line-height:1.75;color:var(--color-text);flex:1}.section-header{display:flex;align-items:center;justify-content:space-between;padding:8px 16px 6px;background:var(--color-bg);position:sticky;top:0;z-index:5}.section-header-title{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted)}.section-count{font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);background:var(--color-surface-raised);padding:1px 7px;border-radius:var(--radius-full)}.list-row{display:flex;align-items:center;padding:12px 16px;gap:12px;cursor:pointer;border-bottom:1px solid var(--color-border-light);background:var(--color-surface);transition:background var(--transition)}.list-row:active{background:var(--color-surface-raised)}.color-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.spinner{width:28px;height:28px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-center{display:flex;align-items:center;justify-content:center;padding:60px 0}.study-divider{flex-shrink:0;height:20px;display:flex;align-items:center;justify-content:center;background:var(--color-surface-raised);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);cursor:default}.study-divider-handle{width:36px;height:4px;background:var(--color-border);border-radius:var(--radius-full)}::-webkit-scrollbar{width:0}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}