:root { --brand-primary: #6366f1; --brand-dark: #4338ca; --surface-bg: #f8fafc; }
body { font-family: 'Inter', sans-serif; background-color: var(--surface-bg); -webkit-font-smoothing: antialiased; padding-bottom: 80px; }
h1, h2, h3, h4, .font-display { font-family: 'Space Grotesk', sans-serif; }

.fade-in-up { animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; transform: translateY(10px); }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

.glass { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(0, 0, 0, 0.05); }

.card-hover { transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -8px rgba(99, 102, 241, 0.15); border-color: #c7d2fe; }

.btn-brand { background: black; color: white; transition: all 0.2s ease; position: relative; overflow: hidden; border-radius: 999px; }
.btn-brand:hover { background: #6366f1; transform: scale(1.02); box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4); }
.btn-brand:active { transform: scale(0.98); }
.btn-brand:disabled { opacity: 0.6; cursor: not-allowed; background: #94a3b8; transform: none; box-shadow: none; }

.blob { position: absolute; filter: blur(90px); opacity: 0.6; z-index: 0; animation: float 8s infinite ease-in-out; pointer-events: none; }
@keyframes float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-20px) scale(1.05); } }

/* Animação de Fluxo (Flow) */
@keyframes flowMove {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}
.flow-line-anim {
    background: linear-gradient(90deg, #6366f1, #a855f7, #6366f1);
    background-size: 200% 200%;
    animation: flowMove 3s linear infinite;
}

/* Mobile Nav */
.bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; background: white; border-top: 1px solid #f1f5f9; padding: 12px 24px 24px; z-index: 40; display: flex; justify-content: space-around; align-items: center; box-shadow: 0 -4px 20px rgba(0,0,0,0.02); }
.nav-item { color: #94a3b8; flex-direction: column; display: flex; align-items: center; font-size: 10px; font-weight: 600; gap: 4px; transition: 0.2s; }
.nav-item i { font-size: 20px; transition: 0.2s; }
.nav-item.active { color: #6366f1; }
.nav-item.active i { transform: translateY(-2px); }

@media (max-width: 768px) { .desktop-only { display: none !important; } }
@media (min-width: 769px) { .bottom-nav { display: none; } }

/* Chat Styles */
.chat-bubble { max-width: 80%; padding: 10px 14px; border-radius: 16px; font-size: 13px; line-height: 1.4; position: relative; margin-bottom: 8px; }
.chat-sent { background-color: #6366f1; color: white; align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-received { background-color: #f1f5f9; color: #334155; align-self: flex-start; border-bottom-left-radius: 4px; }

/* Form Elements */
.profile-input { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; font-size: 14px; width: 100%; transition: all 0.2s; }
.profile-input:focus { border-color: #6366f1; outline: none; background: white; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); }
.profile-label { display: block; font-size: 11px; font-weight: 700; color: #64748b; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.05em; }

.tag-select { cursor: pointer; transition: all 0.2s; user-select: none; }
.tag-select.selected { background-color: #000; color: #fff; border-color: #000; transform: scale(1.05); }

.tab-btn { padding: 10px 16px; font-size: 12px; font-weight: 700; color: #94a3b8; border-bottom: 2px solid transparent; transition: all 0.2s; }
.tab-btn.active { color: #6366f1; border-bottom-color: #6366f1; }
.tab-content { display: none; animation: fadeIn 0.3s ease; }
.tab-content.active { display: block; }

.toggle-checkbox:checked { right: 0; border-color: #6366f1; }
.toggle-checkbox:checked + .toggle-label { background-color: #6366f1; }
.toggle-checkbox { right: 0; }
.toggle-label { width: 40px; }
#turbo-toggle:checked { border-color: #f97316; }
#turbo-toggle:checked + .toggle-label { background-color: #f97316; }
.star-rating i:hover, .star-rating i.active { color: #fbbf24; }

html { scroll-behavior: smooth; }