*{box-sizing:border-box}body{margin:0;padding:0}#root{min-height:100vh}:root{--font-main: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;--font-serif: "Iowan Old Style", "Palatino", "Georgia", serif;--container-max-width: 1200px;--container-padding: 32px;--bg-color: #ffffff;--text-color: #000000;--text-secondary: #86868b;--accent-color: #007aff;--border-color: rgba(0, 0, 0, .1);--header-bg: rgba(255, 255, 255, .85);--input-bg: #f5f5f7;--verse-hover: rgba(0, 122, 255, .05);--toast-bg: rgba(0, 0, 0, .9);--card-bg: #ffffff}[data-theme=dark]{--bg-color: #1a1a1a;--text-color: #f5f5f7;--text-secondary: #86868b;--border-color: rgba(255, 255, 255, .15);--header-bg: rgba(28, 28, 30, .85);--input-bg: #1c1c1e;--verse-hover: rgba(255, 255, 255, .1);--card-bg: #1c1c1e}[data-theme=sepia]{--bg-color: #f5f0e0;--text-color: #433422;--text-secondary: #705d46;--border-color: rgba(67, 52, 34, .1);--header-bg: rgba(245, 240, 224, .85);--input-bg: #efe9d1;--verse-hover: rgba(67, 52, 34, .05)}@media(prefers-color-scheme:dark){[data-theme=system]{--bg-color: #1a1a1a;--text-color: #f5f5f7;--text-secondary: #86868b;--border-color: rgba(255, 255, 255, .15);--header-bg: rgba(28, 28, 30, .85);--input-bg: #1c1c1e;--verse-hover: rgba(255, 255, 255, .1);--card-bg: #1c1c1e}}*{box-sizing:border-box;-webkit-font-smoothing:antialiased}body{margin:0;padding:0;font-family:var(--font-main);background-color:var(--bg-color);color:var(--text-color);overflow-x:hidden;transition:background-color .4s ease}.app-container{display:flex;flex-direction:column;min-height:100vh;width:100vw}.top-bar{position:fixed;top:0;left:0;right:0;width:100%;background:var(--header-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--border-color);z-index:1000;display:flex;justify-content:center;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1)}.top-bar-hidden{transform:translateY(-100%);opacity:0;pointer-events:none}.header-content{width:100%;max-width:var(--container-max-width);padding:12px var(--container-padding);display:flex;align-items:center;gap:24px;flex-wrap:wrap}.top-bar-scroll-area{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:24px;overflow-x:auto;scrollbar-width:none}.actions-group{flex:0 0 auto;display:flex;align-items:center;gap:12px}.top-bar-scroll-area::-webkit-scrollbar{display:none}.control-group{display:flex;flex-direction:column;min-width:fit-content}.control-label{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--text-secondary);margin-bottom:4px;letter-spacing:.03em}select,input[type=number]{height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--border-color);background:var(--input-bg);color:var(--text-color);font-size:15px;font-family:inherit;outline:none}.divider{width:1px;height:28px;background:var(--border-color)}.btn{height:40px;padding:0 20px;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:all .2s cubic-bezier(.4,0,.2,1);border:1px solid var(--border-color);background:var(--input-bg);color:var(--text-color)}.btn:hover{background:var(--border-color);transform:translateY(-1px)}.btn-primary{background:var(--accent-color);color:#fff;border:none}.reading-area{width:100%;max-width:var(--container-max-width);margin:0 auto;padding:calc(var(--header-height, 80px) + 24px) var(--container-padding) 80px;display:flex;flex-direction:column;align-items:center;transition:padding-top .3s cubic-bezier(.4,0,.2,1)}.header-hidden .reading-area{padding-top:40px}.reference-title{font-family:var(--font-serif);font-weight:800;font-size:64px;margin-bottom:24px;cursor:pointer;text-align:center;line-height:1.1;width:100%}.verse-row{display:flex;gap:28px;margin-bottom:12px;padding:16px;border-radius:20px;transition:background-color .2s;align-items:flex-start;width:100%}.verse-row:hover{background-color:var(--verse-hover)}.verse-number{font-weight:700;font-size:14px;color:var(--accent-color);min-width:40px;margin-top:6px;opacity:.6;text-align:right}.verse-text{font-family:var(--font-serif);line-height:1.7;margin:0;cursor:pointer;flex:1;font-size:var(--reading-font-size, 22px)}.footer{width:100%;max-width:var(--container-max-width);margin:100px auto 0;padding:60px var(--container-padding) 140px;border-top:1px solid var(--border-color);text-align:center}@media(min-width:2500px){:root{--container-max-width: 1800px;--container-padding: 64px}.reference-title{font-size:120px}.verse-text{font-size:32px}.btn,select,input[type=number]{height:64px;font-size:22px}}@media(max-width:768px){:root{--container-padding: 16px}.header-content{flex-direction:column;align-items:flex-start;padding:52px 16px 16px;gap:12px;position:relative}.top-bar-scroll-area{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:10px}.control-group{min-width:0}.control-group.language-picker{grid-column:span 2}.control-group select,.control-group input[type=number]{width:100%;min-width:0}.actions-group{width:100%;justify-content:flex-start;flex-wrap:wrap;gap:6px}.actions-group .btn{padding:0 14px;font-size:13px}.divider{display:none}.header-toggle-btn{position:absolute;top:12px;right:12px;margin-left:0}.reading-area{padding:calc(var(--header-height, 240px) + 16px) 16px 60px}.header-hidden .reading-area{padding-top:24px}.reference-title{font-size:42px;margin-bottom:16px}.verse-row{gap:16px;padding:12px 4px}}.settings-overlay{position:fixed;top:84px;right:max(var(--container-padding),calc((100vw - var(--container-max-width)) / 2));background:var(--card-bg);border:1px solid var(--border-color);border-radius:24px;padding:32px;box-shadow:0 40px 80px #00000040;width:360px;z-index:3000}@media(max-width:600px){.settings-overlay{inset:auto 0 0;width:100%;border-radius:28px 28px 0 0;max-height:85vh;overflow-y:auto}}.header-toggle-btn{flex:0 0 auto;height:40px;width:40px;display:flex;align-items:center;justify-content:center;border:none;background:none;color:var(--text-secondary);cursor:pointer;border-radius:10px;transition:color .2s;margin-left:auto}.header-toggle-btn:hover{color:var(--text-color)}.header-show-btn{position:fixed;top:0;left:50%;transform:translate(-50%);height:32px;width:48px;display:flex;align-items:center;justify-content:center;border:none;background:var(--header-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);color:var(--text-secondary);cursor:pointer;border-radius:0 0 16px 16px;border:1px solid var(--border-color);border-top:none;z-index:1000;transition:color .2s,background .2s}.header-show-btn:hover{color:var(--text-color);background:var(--input-bg)}.toast{position:fixed;bottom:40px;left:50%;transform:translate(-50%);background:var(--toast-bg);color:#fff;padding:14px 32px;border-radius:16px;font-size:16px;font-weight:600;z-index:10000}