:root {
    --primary-color: #0056b3;
    --secondary-color: #198754;
    --accent-color: #ffc107;
    --light-bg: #f4f6f9;
    --dark-bg: #212529;
    --card-dark: #2c3034;
}
body { background-color: var(--light-bg); transition: background-color 0.3s; padding-bottom: 70px; }
body.dark-mode { background-color: var(--dark-bg); color: #e9ecef; }
.dark-mode .card { background-color: var(--card-dark); border-color: #495057; color: #e9ecef; }
.dark-mode .form-control, .dark-mode .form-select { background-color: #343a40; color: #fff; border-color: #495057; }
.desktop-view { max-width: 1200px; margin: 0 auto; transition: max-width 0.3s ease; }
.mobile-view { max-width: 480px; margin: 0 auto; transition: max-width 0.3s ease; box-shadow: 0 0 20px rgba(0,0,0,0.1); min-height: 100vh; background-color: var(--light-bg); }
.dark-mode .mobile-view { background-color: var(--dark-bg); box-shadow: 0 0 20px rgba(0,0,0,0.5); }
.card { border-radius: 12px; border: none; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.card-header { background-color: var(--primary-color); color: white; }
.theme-toggle, .view-toggle { cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1); background-color: #fff; color: #333; }
.dark-mode .theme-toggle, .dark-mode .view-toggle { background-color: #343a40; color: #fff; }
.hidden { display: none !important; }
.app-icon { width: 70px; height: 70px; border-radius: 16px; background-color: var(--primary-color); color: white; display: flex; align-items: center; justify-content: center; margin: 0 auto 15px; font-size: 2rem; }
.app-card { cursor: pointer; transition: all 0.3s; }
.app-card:hover { transform: translateY(-5px); }
.app-section { display: none; }
.app-section.active { display: block; animation: fadeIn 0.3s; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.whatsapp-preview { background-color: #e8f5e9; color: #1b5e20; padding: 15px; border-radius: 8px; border: 1px solid #c8e6c9; white-space: pre-line; font-family: monospace; font-size: 14px; min-height: 200px; }
.dark-mode .whatsapp-preview { background-color: #1e2e22; color: #a5d6a7; border-color: #2e4a33; }
.navbar-mobile { position: fixed; bottom: 0; left: 0; right: 0; background-color: white; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); z-index: 1000; }
.dark-mode .navbar-mobile { background-color: var(--card-dark); border-top: 1px solid #495057; }
.nav-link { color: #6c757d; font-size: 0.75rem; display: flex; flex-direction: column; align-items: center; text-decoration: none; padding: 8px 0;}
.nav-link.active { color: var(--primary-color); font-weight: bold; }