:root{--primary:#409eff;--primary-dark:#3a8ee6;--bg:#f5f5f5;--card-bg:#fff;--text:#333;--text-secondary:#999;--text-muted:#bbb;--border:#e8e8e8;--shadow:0 1px 8px rgba(0,0,0,.06);--radius:12px;--header-height:48px;--footer-height:56px;--safe-bottom:env(safe-area-inset-bottom,0px);--max-content-width:1200px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}#app,body{min-height:100vh}#app{width:100%}.nav-bar{position:fixed;width:100%;background:var(--card-bg);z-index:1000;border-bottom:1px solid var(--border);font-size:17px;font-weight:600}.nav-bar,.nav-bar .back-btn{top:0;left:0;height:var(--header-height);display:flex;align-items:center;justify-content:center;color:var(--text)}.nav-bar .back-btn{position:absolute;width:var(--header-height);font-size:20px;cursor:pointer;border:none;background:none}.page-body{padding-top:var(--header-height);padding-bottom:calc(var(--footer-height) + var(--safe-bottom) + 12px);min-height:100vh;margin:0 auto}.card,.page-body{max-width:var(--max-content-width)}.card{background:var(--card-bg);border-radius:var(--radius);margin:10px auto;padding:16px;box-shadow:var(--shadow)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 24px;border-radius:8px;font-size:15px;font-weight:500;cursor:pointer;border:none;transition:all .2s}.btn-primary{background:var(--primary);color:#fff}.btn-primary:active{background:var(--primary-dark);transform:scale(.98)}.btn-block{width:100%}.input-field{width:100%;height:44px;padding:0 12px;border:1px solid var(--border);border-radius:8px;font-size:15px;color:var(--text);outline:none;transition:border-color .2s}.input-field:focus{border-color:var(--primary)}.bottom-nav{position:fixed;bottom:0;left:0;width:100%;height:var(--footer-height);background:var(--card-bg);z-index:1000;display:flex;border-top:1px solid var(--border);padding-bottom:var(--safe-bottom)}.bottom-nav .nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:11px;color:var(--text-secondary);cursor:pointer;transition:color .2s}.bottom-nav .nav-item.active{color:var(--primary)}.bottom-nav .nav-item .icon{font-size:22px;margin-bottom:2px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:var(--text-muted)}.empty-state .icon{font-size:48px;margin-bottom:12px}.empty-state p{font-size:15px;margin-bottom:16px}@media (max-width:767px){.card,.page-body{max-width:100%}.card{margin:10px 12px}.bottom-nav,.nav-bar{left:0}}