:root {
    --bg-color: #121212;
    --surface-color: #1e1e1e;
    --primary-color: #ff9800; /* Laranja de destaque, ótimo para logística */
    --text-color: #ffffff;
    --text-secondary: #aaaaaa;
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

body { background-color: var(--bg-color); color: var(--text-color); padding-bottom: 70px; }

.app-header { background-color: var(--surface-color); padding: 20px; text-align: center; border-bottom: 1px solid #333; }

.card { background-color: var(--surface-color); margin: 15px; padding: 20px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
.card h2 { font-size: 1.2rem; margin-bottom: 5px; }
.card p { color: var(--text-secondary); margin-bottom: 15px; }

.btn-primary { width: 100%; background-color: var(--primary-color); color: #000; font-weight: bold; border: none; padding: 18px; border-radius: 8px; font-size: 1.1rem; cursor: pointer; transition: 0.2s; }
.btn-primary:active { transform: scale(0.98); opacity: 0.8; }

.bottom-nav { position: fixed; bottom: 0; width: 100%; background-color: var(--surface-color); display: flex; border-top: 1px solid #333; }
.nav-btn { flex: 1; padding: 20px; background: none; border: none; color: var(--text-secondary); font-size: 1rem; font-weight: 500; }
.nav-btn.active { color: var(--primary-color); border-top: 2px solid var(--primary-color); }