* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { font-family: 'Inter', sans-serif; background-color: #f0fdf4; margin: 0; padding: 0; overflow-x: hidden; }

/* Status Bar */
.status-bar { height: 24px; background: #064e3b; }

/* App Bar */
.app-bar { background: linear-gradient(135deg, #064e3b 0%, #059669 100%); padding: 16px 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }

/* Bottom Navigation */
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: #ffffff; border-top: 1px solid #e2e8f0; padding: 8px 0 env(safe-area-inset-bottom, 8px); z-index: 1000; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); }
.nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 12px; border-radius: 12px; transition: all 0.2s; cursor: pointer; }
.nav-item.active { color: #059669; }
.nav-item.active .nav-dot { width: 4px; height: 4px; background: #059669; border-radius: 50%; }
.nav-item:not(.active) { color: #94a3b8; }

/* Page Content */
.page-content { padding-bottom: 80px; min-height: calc(100vh - 88px); }
.tab-page { display: none; }
.tab-page.active { display: block; animation: fadeUp 0.3s ease; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* Cards */
.card { background: white; border-radius: 16px; padding: 16px; margin: 12px 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

/* Upload Zone */
.upload-zone { border: 2px dashed #a7f3d0; border-radius: 16px; padding: 32px; text-align: center; transition: all 0.3s; background: #f0fdf4; }
.upload-zone:active { background: #dcfce7; border-color: #059669; }

/* Scrollbar */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-thumb { background: #10b981; border-radius: 10px; }