.radio{flex:1;min-height:0;display:flex;flex-direction:column;padding:0 18px 8px}.display-card{flex:none;background:var(--card);border:1px solid var(--key-border);border-radius:18px;box-shadow:0 3px 10px #7a64461a;min-height:64px;display:flex;align-items:center;justify-content:center;padding:6px 16px}.number-display{font-family:var(--font-num);font-size:40px;font-weight:700;letter-spacing:.06em;font-variant-numeric:tabular-nums;line-height:1}.display-placeholder{color:var(--muted);text-align:center;font-size:16px;line-height:1.5;font-weight:500}.display-placeholder .en{font-size:13px;display:block;opacity:.8}.keypad{flex:none;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}.key{height:56px;border-radius:16px;background:var(--key);border:1px solid var(--key-border);box-shadow:0 3px 0 var(--key-shadow),0 4px 8px #7a644614;font-family:var(--font-num);font-size:31px;font-weight:700;font-variant-numeric:tabular-nums;display:flex;align-items:center;justify-content:center;transition:transform .08s,box-shadow .08s}.key:active{transform:translateY(3px);box-shadow:0 0 0 var(--key-shadow),inset 0 2px 4px #7a644626}.key-clear{background:var(--clear-bg);border-color:var(--clear-border);color:var(--clear-text);flex-direction:column;font-size:18px;line-height:1.15;gap:1px}.key-clear .en{font-size:11px;letter-spacing:.08em;opacity:.85}.key-back svg{width:30px;height:30px}.player-card{flex:1;min-height:0;background:var(--card);border:1px solid var(--key-border);border-radius:22px;box-shadow:0 4px 14px #7a64461f;margin-top:10px;padding:10px 20px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px}.track-label{width:100%;text-align:center;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-label.empty{font-weight:500;color:var(--muted)}.track-label-en{width:100%;text-align:center;font-size:12px;color:var(--muted);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.transport{display:flex;align-items:center;justify-content:center;gap:30px}.skip-btn{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text);transition:transform .1s,background .15s}.skip-btn:active{transform:scale(.9);background:#7a64461a}.skip-btn svg{width:38px;height:38px}.play-btn{width:78px;height:78px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 5px 0 var(--accent-deep),0 8px 16px #2f6b4f59;transition:transform .1s,box-shadow .1s,background .2s}.play-btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--accent-deep),0 3px 6px #2f6b4f4d}.play-btn.playing{background:var(--playing);box-shadow:0 5px 0 var(--playing-deep),0 8px 16px #b05a3359}.play-btn.playing:active{box-shadow:0 1px 0 var(--playing-deep),0 3px 6px #b05a334d}.play-btn svg{width:44px;height:44px}.progress-wrap{width:100%;padding:2px 2px 0}.progress-wrap input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:transparent;cursor:pointer}.progress-wrap input[type=range]::-webkit-slider-runnable-track{height:10px;background:var(--track);border-radius:5px}.progress-wrap input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:var(--accent);border:3px solid var(--card);box-shadow:0 2px 5px #00000040;margin-top:-10px}.progress-wrap input[type=range]::-moz-range-track{height:10px;background:var(--track);border-radius:5px}.progress-wrap input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--accent);border:3px solid var(--card);box-shadow:0 2px 5px #00000040}.times{width:100%;display:flex;justify-content:space-between;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted);padding:0 4px}.browse-bar{flex:none;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 2px 8px}.back-btn{flex:none;display:flex;align-items:center;gap:4px;height:40px;padding:0 14px 0 8px;border-radius:20px;background:var(--clear-bg);border:1px solid var(--clear-border);color:var(--clear-text);font-size:15px;font-weight:700;transition:transform .08s}.back-btn:active{transform:scale(.95)}.back-btn svg{width:21px;height:21px}.browse-heading{min-width:0;flex:1;text-align:right}.browse-heading .zh{font-size:18px;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.browse-heading .en{font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.browse-scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:2px 2px 10px;display:flex;flex-direction:column;gap:8px}.cat-btn{flex:none;width:100%;display:flex;align-items:center;gap:12px;min-height:62px;padding:10px 14px;border-radius:16px;background:var(--key);border:1px solid var(--key-border);box-shadow:0 2px 0 var(--key-shadow),0 3px 7px #7a644612;text-align:left;transition:transform .08s,box-shadow .08s;content-visibility:auto;contain-intrinsic-size:auto 62px}.cat-btn:active{transform:translateY(2px);box-shadow:0 0 0 var(--key-shadow),inset 0 2px 4px #7a644626}.cat-btn .labels{flex:1;min-width:0}.cat-btn .zh{font-size:18px;font-weight:700;line-height:1.3}.cat-btn .en{font-size:11px;font-weight:500;color:var(--muted);line-height:1.3;margin-top:1px}.cat-btn .count{flex:none;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted);background:var(--bg);border-radius:11px;padding:3px 9px}.cat-btn .chev{flex:none;width:18px;height:18px;color:var(--muted)}.track-row{flex:none;width:100%;display:flex;align-items:center;gap:12px;min-height:58px;padding:8px 14px;border-radius:14px;background:var(--card);border:1px solid var(--key-border);text-align:left;transition:background .15s,border-color .15s,transform .08s;content-visibility:auto;contain-intrinsic-size:auto 58px}.track-row:active{transform:scale(.985)}.track-row .num{flex:none;min-width:46px;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted);text-align:right}.track-row .labels{flex:1;min-width:0}.track-row .name{display:block;font-size:16px;font-weight:500;line-height:1.3}.track-row .name-en{display:block;font-size:12px;font-weight:400;line-height:1.3;color:var(--muted);margin-top:1px}.track-row .name-en:empty{display:none}.track-row .state{flex:none;width:22px;height:22px;color:var(--playing);display:none}.track-row.current{background:var(--clear-bg);border-color:var(--playing);box-shadow:inset 3px 0 0 var(--playing)}.track-row.current .num{color:var(--playing-deep)}.track-row.current .name{font-weight:700;color:var(--playing-deep)}.track-row.current .name-en{color:var(--playing)}.track-row.current .state{display:block}.track-row.dead{opacity:.5}.track-row.dead .name{text-decoration:line-through}.mini-player{flex:none;background:var(--card);border:1px solid var(--key-border);border-radius:18px;box-shadow:0 4px 14px #7a64461f;margin-top:8px;padding:8px 16px 2px}.browse-now{text-align:center;font-size:14px;font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}.browse-now.empty{font-weight:500;color:var(--muted)}.browse-now-en{text-align:center;font-size:12px;color:var(--muted);line-height:1.3;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-player .times{font-size:14px;padding-bottom:2px}@media(min-height:780px)and (orientation:portrait){.key{height:64px;font-size:33px}.number-display{font-size:48px}.display-card{min-height:80px}.play-btn{width:86px;height:86px}.skip-btn{width:60px;height:60px}}@media(max-height:620px)and (orientation:portrait){.key{height:46px;font-size:25px}.number-display{font-size:34px}.display-card{min-height:56px}.play-btn{width:62px;height:62px}.play-btn svg{width:34px;height:34px}.skip-btn{width:46px;height:46px}.skip-btn svg{width:30px;height:30px}.track-row{min-height:52px}}@media(orientation:landscape)and (max-height:560px){.radio{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:start}.display-card{grid-column:1 / -1;min-height:52px}.number-display{font-size:32px}.keypad{margin-top:0}.key{height:40px;font-size:22px}.player-card{margin-top:0}.browse-bar{grid-column:1 / -1}.browse-scroll{grid-column:1}.mini-player{grid-column:2;align-self:start;margin-top:0}}.bible{flex:1;min-height:0;display:flex;flex-direction:column;padding:0 18px 8px}.bible-scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:0 2px 10px}.book-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}@media(min-width:420px){.book-grid{grid-template-columns:repeat(3,1fr)}}@media(min-width:620px){.book-grid{grid-template-columns:repeat(4,1fr)}}.book-cell{position:relative;min-height:58px;padding:9px 26px 9px 11px;border-radius:13px;background:var(--key);border:1px solid var(--key-border);box-shadow:0 2px 0 var(--key-shadow);text-align:left;transition:transform .08s,box-shadow .08s;content-visibility:auto;contain-intrinsic-size:auto 58px}.book-cell:active{transform:translateY(2px);box-shadow:0 0 0 var(--key-shadow),inset 0 2px 4px #7a644626}.book-name{display:block;font-size:16px;font-weight:700;line-height:1.25}.book-en{display:block;font-size:11px;color:var(--muted);line-height:1.25;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.book-count{position:absolute;top:8px;right:8px;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted)}.chapter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px}.chapter-cell{aspect-ratio:1;min-height:52px;border-radius:13px;background:var(--key);border:1px solid var(--key-border);box-shadow:0 2px 0 var(--key-shadow);font-family:var(--font-num);font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;display:flex;align-items:center;justify-content:center;transition:transform .08s,box-shadow .08s,background .15s;content-visibility:auto;contain-intrinsic-size:52px 52px}.chapter-cell:active{transform:translateY(2px);box-shadow:0 0 0 var(--key-shadow),inset 0 2px 4px #7a644626}.chapter-cell.current{background:var(--playing);border-color:var(--playing-deep);color:#fff;box-shadow:0 2px 0 var(--playing-deep)}.bible-transport{display:flex;align-items:center;gap:12px}.bible-timeline{flex:1;min-width:0}.play-btn.small{width:52px;height:52px;flex:none;box-shadow:0 4px 0 var(--accent-deep)}.play-btn.small:active{transform:translateY(3px);box-shadow:0 1px 0 var(--accent-deep)}.play-btn.small.playing{box-shadow:0 4px 0 var(--playing-deep)}.play-btn.small svg{width:28px;height:28px}.bible-now-en{text-align:center;font-size:12px;color:var(--muted);line-height:1.3;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media(max-height:620px){.book-cell{min-height:50px}.chapter-cell{min-height:46px;font-size:17px}.play-btn.small{width:46px;height:46px}}:root{--bg: #ece1cd;--bg-deep: #e0d2b8;--card: #fffdf8;--key: #ffffff;--key-border: #d8c9ae;--key-shadow: rgba(122, 100, 70, .28);--text: #37302a;--muted: #8c7f6f;--accent: #2f6b4f;--accent-deep: #24543e;--playing: #b05a33;--playing-deep: #8f4626;--clear-bg: #f7e4da;--clear-border: #e8c9b9;--clear-text: #8c3b25;--track: #e4d8c4;--focus: #2f6b4f;--disabled-bg: #e7ddcb;--disabled-text: #a3988a;--nav-h: 62px;--radius-card: 18px;--radius-tile: 16px;--font-ui: "Atkinson Hyperlegible Next", "Noto Sans SC", "Noto Sans Tamil", "Noto Sans Myanmar", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;--font-num: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;--font-display: "Noto Serif SC", "Atkinson Hyperlegible Next", serif}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:var(--font-ui);background:linear-gradient(180deg,var(--bg) 0%,var(--bg-deep) 100%);background-attachment:fixed;color:var(--text);overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}button{font-family:inherit;color:inherit;border:none;background:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.app{height:100%;display:flex;flex-direction:column;width:100%;max-width:560px;margin:0 auto}.screen{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:0 18px 12px}.app-header{flex:none;display:flex;align-items:center;gap:10px;padding:14px 18px 10px}.app-header .titles{flex:1;min-width:0;text-align:center}.title-zh{font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:.1em;line-height:1.2}.title-en{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:2px}.icon-btn{flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:background .15s}.icon-btn:active{background:#7a64461f}.icon-btn svg{width:23px;height:23px}.icon-spacer{flex:none;width:44px;height:44px}.bottom-nav{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px 12px calc(6px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--key-border);box-shadow:0 -2px 10px #7a644614}.nav-tab{min-height:54px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--muted);font-size:13px;font-weight:700;transition:background .15s,color .15s}.nav-tab svg{width:24px;height:24px}.nav-tab .label-en{font-size:10px;font-weight:500;letter-spacing:.04em}.nav-tab[aria-current=page]{background:var(--clear-bg);color:var(--clear-text)}.nav-tab:active{background:#7a64461a}.tile-grid{display:grid;grid-template-columns:1fr;gap:10px;padding-top:4px}@media(min-width:480px){.tile-grid{grid-template-columns:1fr 1fr}}.tile{width:100%;min-height:76px;display:flex;align-items:center;gap:13px;padding:12px 14px;border-radius:var(--radius-tile);background:var(--key);border:1px solid var(--key-border);box-shadow:0 2px 0 var(--key-shadow),0 3px 7px #7a644612;text-align:left;transition:transform .08s,box-shadow .08s}.tile:active:not(.tile-disabled){transform:translateY(2px);box-shadow:0 0 0 var(--key-shadow),inset 0 2px 4px #7a644626}.tile .tile-icon{flex:none;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--clear-bg);color:var(--clear-text)}.tile .tile-icon svg{width:24px;height:24px}.tile .tile-body{flex:1;min-width:0}.tile .tile-name{font-size:17px;font-weight:700;line-height:1.25}.tile .tile-en{font-size:12px;color:var(--muted);margin-top:1px}.tile .tile-meta{font-size:12px;font-weight:600;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums}.tile .chev{flex:none;width:18px;height:18px;color:var(--muted)}.tile-disabled{background:var(--disabled-bg);border-color:transparent;box-shadow:none;cursor:default}.tile-disabled .tile-name,.tile-disabled .tile-en,.tile-disabled .tile-meta{color:var(--disabled-text)}.tile-disabled .tile-icon{background:#fff6;color:var(--disabled-text)}.lang-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}.lang-chip{font-size:12px;font-weight:700;padding:3px 9px;border-radius:11px;background:var(--card);border:1px solid var(--key-border);color:var(--accent)}.lang-chip:active{background:var(--clear-bg)}.section-label{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:16px 2px 7px}.card{background:var(--card);border:1px solid var(--key-border);border-radius:var(--radius-card);padding:14px 16px}.row-btn{width:100%;display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 4px;text-align:left;border-bottom:1px solid var(--key-border)}.row-btn:last-child{border-bottom:none}.row-btn .row-main{flex:1;min-width:0}.row-btn .row-name{font-size:16px;font-weight:600}.row-btn .row-sub{font-size:12px;color:var(--muted);margin-top:1px}.row-btn .check{color:var(--accent);width:20px;height:20px;flex:none}.msg{text-align:center;color:var(--muted);font-size:15px;line-height:1.6;padding:40px 12px}@media(max-height:620px){.title-zh{font-size:21px}.tile{min-height:66px}.nav-tab{min-height:48px}}
