:root{--bg-color:#f5f5f7;--card-bg:#fff;--text-primary:#1d1d1f;--text-secondary:#86868b;--accent-color:#0071e3;--border-radius-large:32px;--border-radius-medium:20px;--border-radius-small:12px;--nav-height:80px}@media (prefers-color-scheme:dark){:root{--bg-color:#000;--card-bg:#1c1c1e;--text-primary:#f5f5f7;--text-secondary:#86868b;--accent-color:#2997ff}}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-primary);flex-direction:column;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,Roboto,Helvetica,Arial,sans-serif;display:flex;overflow-x:hidden}.app-container{background-color:var(--bg-color);flex-direction:column;max-width:600px;height:100vh;margin:0 auto;display:flex;position:relative}.content-area{padding:24px 24px calc(var(--nav-height) + 24px) 24px;flex:1;overflow-y:auto}.bottom-nav-container{z-index:100;justify-content:center;width:calc(100% - 48px);max-width:552px;display:flex;position:fixed;bottom:32px;left:50%;transform:translate(-50%)}.capsule-nav{background-color:var(--card-bg);border-radius:100px;gap:8px;padding:8px;display:flex}.nav-item{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:100px;justify-content:center;align-items:center;padding:12px 24px;font-size:15px;font-weight:600;text-decoration:none;transition:all .3s;display:flex}.nav-item.active{background-color:var(--text-primary);color:var(--bg-color)}.nav-item svg{margin-right:8px}.card{background-color:var(--card-bg);border-radius:var(--border-radius-large);margin-bottom:24px;padding:24px}.btn-primary{background-color:var(--accent-color);color:#fff;cursor:pointer;border:none;border-radius:100px;justify-content:center;align-items:center;width:100%;padding:16px 32px;font-size:17px;font-weight:600;transition:opacity .2s;display:inline-flex}.btn-primary:active{opacity:.8}.btn-secondary{background-color:var(--text-primary);color:var(--bg-color);cursor:pointer;border:none;border-radius:100px;justify-content:center;align-items:center;width:100%;padding:16px 32px;font-size:17px;font-weight:600;transition:opacity .2s;display:inline-flex}.btn-secondary:active{opacity:.8}.page-header{letter-spacing:-.5px;margin-bottom:24px;font-size:32px;font-weight:700}.image-preview-container{aspect-ratio:3/4;background-color:var(--card-bg);border-radius:var(--border-radius-large);justify-content:center;align-items:center;width:100%;margin-bottom:24px;display:flex;position:relative;overflow:hidden}.image-preview{object-fit:cover;width:100%;height:100%}.bounding-box{border:3px solid var(--accent-color);cursor:pointer;background-color:#0071e31a;border-radius:8px;transition:all .2s;position:absolute}.bounding-box:active,.bounding-box.active{background-color:#0071e34d;transform:scale(1.02)}.placeholder-text{color:var(--text-secondary);font-size:17px;font-weight:500}.setting-item{border-bottom:1px solid #86868b33;justify-content:space-between;align-items:center;padding:16px 0;display:flex}.setting-item:last-child{border-bottom:none}.setting-label{font-size:17px;font-weight:500}.toggle-switch{background-color:var(--text-secondary);cursor:pointer;border-radius:31px;width:51px;height:31px;transition:background-color .3s;position:relative}.toggle-switch.on{background-color:var(--accent-color)}.toggle-knob{width:27px;height:27px;box-shadow:none;background-color:#fff;border-radius:50%;transition:transform .3s;position:absolute;top:2px;left:2px}.toggle-switch.on .toggle-knob{transform:translate(20px)}.file-input{display:none}.reading-overlay{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:200;opacity:0;pointer-events:none;background-color:#00000080;align-items:flex-end;width:100%;height:100%;transition:opacity .3s;display:flex;position:fixed;top:0;left:0}.reading-overlay.visible{opacity:1;pointer-events:auto}.reading-card{background-color:var(--card-bg);border-radius:var(--border-radius-large) var(--border-radius-large) 0 0;width:100%;padding:32px 24px calc(env(safe-area-inset-bottom,24px) + 24px);transition:transform .4s cubic-bezier(.25,1,.5,1);transform:translateY(100%)}.reading-overlay.visible .reading-card{transform:translateY(0)}.reading-text-large{text-align:center;margin-bottom:8px;font-size:28px;font-weight:700;line-height:1.4}.pinyin-text{color:var(--text-secondary);text-align:center;margin-bottom:24px;font-size:18px}.close-reading-btn{background-color:var(--bg-color);color:var(--text-primary);cursor:pointer;border:none;border-radius:100px;width:100%;padding:16px;font-size:17px;font-weight:600}.loading-indicator{background-color:#fffc;border-radius:50%;justify-content:center;align-items:center;padding:16px;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin{animation:1s linear infinite spin}