diff --git a/.gitignore b/.gitignore
index b947077..614b797 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,5 @@
node_modules/
dist/
+.env
+senha.txt
+.vscode/
diff --git a/auth.css b/auth.css
new file mode 100644
index 0000000..4513f3a
--- /dev/null
+++ b/auth.css
@@ -0,0 +1,227 @@
+/* Authentication Header Styles */
+.auth-header {
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ color: white;
+ padding: 15px 0;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ position: sticky;
+ top: 0;
+ z-index: 1000;
+}
+
+.auth-container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 20px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.logo h2 {
+ margin: 0;
+ font-size: 1.5rem;
+ font-weight: 600;
+}
+
+.auth-section {
+ display: flex;
+ align-items: center;
+}
+
+.auth-form {
+ background: rgba(255, 255, 255, 0.1);
+ backdrop-filter: blur(10px);
+ border-radius: 10px;
+ padding: 25px;
+ min-width: 300px;
+ border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.auth-form h3 {
+ margin: 0 0 20px 0;
+ text-align: center;
+ font-size: 1.3rem;
+ font-weight: 500;
+}
+
+.auth-form .form-group {
+ margin-bottom: 15px;
+}
+
+.auth-form input {
+ width: 100%;
+ padding: 12px;
+ border: 1px solid rgba(255, 255, 255, 0.3);
+ border-radius: 6px;
+ background: rgba(255, 255, 255, 0.1);
+ color: white;
+ font-size: 1rem;
+ backdrop-filter: blur(10px);
+ box-sizing: border-box;
+}
+
+.auth-form input::placeholder {
+ color: rgba(255, 255, 255, 0.7);
+}
+
+.auth-form input:focus {
+ outline: none;
+ border-color: rgba(255, 255, 255, 0.6);
+ background: rgba(255, 255, 255, 0.15);
+}
+
+.auth-btn {
+ width: 100%;
+ padding: 12px;
+ background: rgba(255, 255, 255, 0.2);
+ color: white;
+ border: 1px solid rgba(255, 255, 255, 0.3);
+ border-radius: 6px;
+ cursor: pointer;
+ font-size: 1rem;
+ font-weight: 600;
+ transition: all 0.3s ease;
+ backdrop-filter: blur(10px);
+}
+
+.auth-btn:hover {
+ background: rgba(255, 255, 255, 0.3);
+ transform: translateY(-1px);
+}
+
+.auth-switch {
+ text-align: center;
+ margin: 15px 0 0 0;
+ font-size: 0.9rem;
+ color: rgba(255, 255, 255, 0.8);
+}
+
+.auth-switch a {
+ color: white;
+ text-decoration: none;
+ font-weight: 600;
+}
+
+.auth-switch a:hover {
+ text-decoration: underline;
+}
+
+.user-info {
+ display: flex;
+ align-items: center;
+ gap: 15px;
+}
+
+.user-details {
+ display: flex;
+ align-items: center;
+ gap: 15px;
+}
+
+.user-details span {
+ font-weight: 500;
+ font-size: 1rem;
+}
+
+.logout-btn {
+ padding: 8px 16px;
+ background: rgba(255, 255, 255, 0.2);
+ color: white;
+ border: 1px solid rgba(255, 255, 255, 0.3);
+ border-radius: 6px;
+ cursor: pointer;
+ font-size: 0.9rem;
+ transition: all 0.3s ease;
+ backdrop-filter: blur(10px);
+}
+
+.logout-btn:hover {
+ background: rgba(255, 255, 255, 0.3);
+}
+
+/* Loading Overlay */
+.loading-overlay {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.7);
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ z-index: 9999;
+ backdrop-filter: blur(5px);
+}
+
+.loading-spinner {
+ width: 50px;
+ height: 50px;
+ border: 4px solid rgba(255, 255, 255, 0.3);
+ border-top: 4px solid white;
+ border-radius: 50%;
+ animation: spin 1s linear infinite;
+ margin-bottom: 20px;
+}
+
+.loading-overlay p {
+ color: white;
+ font-size: 1.1rem;
+ font-weight: 500;
+}
+
+@keyframes spin {
+ 0% { transform: rotate(0deg); }
+ 100% { transform: rotate(360deg); }
+}
+
+/* Utility Classes */
+.hidden {
+ display: none !important;
+}
+
+.display-none {
+ display: none;
+}
+
+.display-block {
+ display: block;
+}
+
+/* Update main content spacing */
+#app-content {
+ padding-top: 20px;
+}
+
+/* Mobile Responsive for Auth */
+@media (max-width: 768px) {
+ .auth-container {
+ flex-direction: column;
+ gap: 15px;
+ padding: 0 15px;
+ }
+
+ .logo {
+ order: 1;
+ }
+
+ .auth-section,
+ .user-info {
+ order: 2;
+ width: 100%;
+ justify-content: center;
+ }
+
+ .auth-form {
+ min-width: 280px;
+ padding: 20px;
+ }
+
+ .user-details {
+ flex-direction: column;
+ gap: 10px;
+ text-align: center;
+ }
+}
diff --git a/index.html b/index.html
index 65b8caa..513d454 100644
--- a/index.html
+++ b/index.html
@@ -5,115 +5,184 @@
Daily Calorie Tracker
+
-
-
🍎 Daily Calorie Tracker
-
-
-
-
-
-