* { margin: 0; padding: 0; box-sizing: border-box; font-family: sans-serif; }
body { background-color: #f4f7f6; color: #333; }

/* Header */
header { background-color: #1a1a2e; color: white; padding: 1rem 5%; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 1000; }
.logo span { color: #00d2ff; font-weight: bold; }
nav ul { display: flex; list-style: none; }
nav ul li { margin: 0 15px; }
nav ul li a { color: white; text-decoration: none; }
.header-icons button { background: #00d2ff; border: none; padding: 8px 15px; border-radius: 5px; cursor: pointer; font-weight: bold; margin-left: 10px; }
.login-btn-link { text-decoration: none; }

/* Produtos */
main { padding: 40px 5%; }
.products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.product-card { background: white; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.product-img { height: 150px; background: #ddd; margin-bottom: 15px; border-radius: 5px; }
.price { font-size: 1.2rem; color: #27ae60; font-weight: bold; margin: 10px 0; }
.add-to-cart { background: #1a1a2e; color: white; border: none; padding: 10px; width: 100%; border-radius: 5px; cursor: pointer; }

/* Chat */
.chat-container { position: fixed; bottom: 20px; right: 20px; width: 300px; background: white; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
.chat-header { background: #1a1a2e; color: white; padding: 10px; border-radius: 10px 10px 0 0; }
.chat-box { height: 150px; padding: 10px; overflow-y: auto; font-size: 0.85rem; }
.chat-input { display: flex; border-top: 1px solid #ddd; }
.chat-input input { flex: 1; border: none; padding: 10px; outline: none; }
.chat-input button { background: #00d2ff; border: none; padding: 10px; cursor: pointer; }

/* Cadastro */
.auth-container { display: flex; justify-content: center; align-items: center; min-height: 80vh; }
.auth-card { background: white; padding: 40px; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); width: 400px; }
.input-group { text-align: left; margin-bottom: 15px; }
.input-group label { display: block; margin-bottom: 5px; font-weight: bold; }
.input-group input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; }
.auth-btn { width: 100%; padding: 12px; background: #1a1a2e; color: white; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; }