/* --- LOGIN MODAL STYLES (Added) --- */
.modal {
  display: none; position: fixed; z-index: 5000; left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  justify-content: center; align-items: center;
}
.modal-content {
  background: white; border-radius: 20px;
  width: 350px; max-width: 90%;
  padding: 0; 
  box-shadow: 0 5px 15px rgba(0,0,0,0.3); position: relative;
  text-align: center;
}
.close { position: absolute; top: 15px; right: 20px; font-size: 24px; cursor: pointer; z-index: 10; }

/* Login/Profile Internal Views */
#login-form, #profile { padding: 35px; }
.hidden { display: none !important; }

#avatar { width: 80px; border-radius: 50%; margin-bottom: 10px; border: 3px solid var(--accent, #2F6F6A); }
#g_id_signin { display: flex; justify-content: center; margin-bottom: 10px; }
#logout-btn { background: var(--text-main, #1F1F1F); color: white; border: none; padding: 10px 16px; border-radius: 999px; margin-top: 15px; cursor: pointer; }
.divider { margin: 15px 0; color: #aaa; font-size: 0.9em; }
.brand { color: var(--primary, #C84A3A); padding-bottom: 10px; }
.login-brand-mark { width: 58px; height: 58px; margin: 0 auto 8px; border-radius: 16px; object-fit: cover; }
.install-brand-mark { width: 46px; height: 46px; margin-bottom: 5px; border-radius: 13px; object-fit: cover; }

@media (max-width:768px){.site-header .logo img{display:none;}}