/* Base variables and theme */
:root {
  --bg-dark: #FCFAFA; /* fundo claro */
  --text: #2b2b2b;
  --lilas-bioativo: #A4B8C4; /* usar como acento azul */
  --panel: #ffffff; /* cards e painéis brancos */
  --panel-border: #C8D3D5; /* cinza claro */
  --chip-bg: #fff;
  --chip-border: #C8D3D5;
  --chip-active-bg: #f0f4f6;
  --chip-active-border: #A4B8C4;
  --gray-dark: #6E8387;
  --green-glp: #0CCA4A;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg-dark); color: var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }

/* Header */
.app-header { position: sticky; top: 0; left: 0; right: 0; background: rgba(255,255,255,.9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(0,0,0,.06); box-shadow: 0 2px 8px rgba(0,0,0,0.04); padding: 8px 16px; z-index: 100; }
.header-wrap { display: flex !important; justify-content: center !important; align-items: center !important; position: relative !important; max-width: 1100px; margin: 0 auto; width: 100%; }
.brand-logo { height: 80px !important; width: 80px !important; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.15)) brightness(1.3) !important; }
.header-actions { position: absolute !important; right: 0 !important; }
.header-wrap .btn { position: absolute !important; right: 0 !important; }
.brand-title { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--panel-border); background: #fff; color: #1f2937; cursor: pointer; }
.btn-primary { border-color: var(--green-glp); background: var(--green-glp); color: #fff; }
.btn-secondary { border-color: var(--panel-border); background: #fff; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(164,184,196,.35); }

/* Search */
.search-bar { padding: 4px 16px 6px; margin-top: 0; display: flex; justify-content: center; }
.search-wrap { position: relative; width: 90%; max-width: 640px; }
.search-wrap input { width: 100%; padding: 12px 16px 12px 40px; border-radius: 30px; border: 1px solid var(--panel-border); background: #fff; color: var(--text); outline: none; }
.search-wrap input::placeholder { color: var(--gray-dark); }
.search-wrap input:focus-visible { border-color: var(--lilas-bioativo); box-shadow: 0 0 0 3px rgba(164,184,196,.25); }
.search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--gray-dark); }

/* Dashboard layout */
.dashboard { padding-top: 0; }
.container { max-width: 1100px; margin: 0 auto; padding: 8px 16px; }
.recipe-counter { margin: 4px 0 6px; background:#ffffff; color: var(--text); padding:6px 10px; border-radius: 8px; border:1px solid var(--panel-border); }

/* Category filters */
.category-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 4px; }
.category-filter { display:flex; align-items:center; gap:8px; padding:8px 12px; background: var(--chip-bg); color:#222; border:1px solid var(--chip-border); border-radius:30px; box-shadow: 0 1px 0 rgba(0,0,0,.06); cursor:pointer; transition: background .2s, border-color .2s, transform .05s; }
.category-filter:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(164,184,196,.35); }
.category-filter.active { background: var(--chip-active-bg); border-color: var(--chip-active-border); }

/* Categories grid */
.categories-grid { display: grid; gap: 16px; }
.category-card { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 12px; overflow: hidden; }
.category-header { padding: 12px 16px; background: linear-gradient(45deg, var(--lilas-bioativo), #C8D3D5); color: #0f172a; }
.category-title { margin:0; font-size: 16px; }
.category-content { padding: 12px 12px 16px; }

/* Recipe list */
.recipe-list { display: grid; grid-template-columns: 1fr; gap: 12px; list-style: none; padding: 0; margin: 0; }
@media (min-width: 640px) { .recipe-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .recipe-list { grid-template-columns: repeat(3, 1fr); } }

.recipe-item { position: relative; background: #fff; border:1px solid var(--panel-border); border-radius: 12px; overflow: hidden; }
.recipe-image { width: 100%; height: 180px; object-fit: cover; display:block; }
.recipe-content { padding: 10px 12px; }
.recipe-name { font-weight: 600; margin-bottom: 6px; color: #111827; }
.recipe-meta { font-size: 12px; color: var(--gray-dark); margin-bottom: 8px; }
.recipe-footer { display:flex; align-items:center; justify-content: space-between; }
.recipe-link { color: var(--green-glp); text-decoration: none; font-weight: 600; }
.recipe-link:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(12,202,74,.25); border-radius: 6px; }
.recipe-link-arrow { margin-left:6px; }

.favorite-btn { position:absolute; top:10px; right:10px; border:none; background: rgba(255,255,255,.85); color:#777; width:32px; height:32px; border-radius: 50%; cursor: pointer; box-shadow: 0 1px 6px rgba(0,0,0,.08); }
.favorite-btn.active { color: #f0b90b; }
.favorite-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(240,185,11,.35); }

.recipe-category-tag { position: absolute; bottom: 10px; left: 10px; background: rgba(255,255,255,.9); color:#111827; font-size: 12px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--panel-border); backdrop-filter: blur(6px); }

/* Empty state */
.empty-state { padding: 24px; text-align: center; background: #fff; border:1px dashed var(--panel-border); border-radius: 12px; }

/* Toast */
.toast { position: fixed; bottom: 20px; right: 20px; background: #ffffff; color: #111827; padding: 10px 12px; border:1px solid var(--panel-border); border-radius: 10px; opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s; z-index: 999; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.toast.show { opacity: 1; transform: translateY(0); }

/* Skeleton */
.skeleton-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.skeleton-card { background: #fff; border-radius: 12px; padding: 12px; border:1px solid var(--panel-border); }
.skeleton-image { height: 120px; background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 8px; margin-bottom: 8px; }
.skeleton-text { height: 12px; background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 6px; }
@keyframes shimmer { 0% { background-position: 200% 0;} 100% { background-position: -200% 0;} }

/* Waves and particles */
.wave-container { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.wave { position: absolute; width: 200%; height: 150px; bottom: 0; background: rgba(164,184,196,0.15); animation: wave 8s infinite ease-in-out; }
.wave-1 { left: 0; animation-delay: 0s; }
.wave-2 { left: -25%; animation-delay: 2s; opacity: .8; }
.wave-3 { left: -50%; animation-delay: 4s; opacity: .6; }
@keyframes wave { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.particles { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.particle { position: absolute; background: rgba(0,0,0,0.06); border-radius: 50%; animation: float 10s infinite ease-in-out; }
@keyframes float { 0%,100%{transform: translateY(0);} 50%{transform: translateY(-20px);} }

/* Loader */
.loader-overlay { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.25); z-index: 999; transition: opacity .3s; }
.loader { width: 40px; height: 40px; border-radius: 50%; border: 4px solid rgba(0,0,0,.15); border-top-color: var(--green-glp); animation: spin 1s linear infinite; }
.loader-text { margin-top: 12px; color: #111827; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Recipe badges */
.recipe-badges { display:flex; flex-wrap: wrap; gap:6px; margin-bottom:6px; }
.badge { font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid var(--panel-border); background:#fff; color:#0f172a; box-shadow: 0 1px 0 rgba(0,0,0,.04); }
.badge--novo { background: rgba(12,202,74,.12); border-color: var(--green-glp); color: var(--green-glp); }
.badge--popular { background: rgba(245,158,11,.12); border-color: #F59E0B; color: #B45309; }
.badge--rapido { background: rgba(115,113,252,.12); border-color: #7371FC; color: #4F46E5; }

/* Ingredients preview */
.ingredients-preview { font-size: 13px; color:#374151; background: #f9fafb; border: 1px dashed var(--panel-border); border-radius:8px; padding:8px; margin-top:8px; transition: opacity .3s ease, max-height .3s ease; opacity:0; max-height:0; overflow:hidden; }
.recipe-item:hover .ingredients-preview, .recipe-item.show-preview .ingredients-preview { opacity:1; max-height:120px; }
.preview-title { font-weight:600; margin-bottom:4px; color:#111827; }
.preview-text { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* Login */
.login-container { display: none; align-items: center; justify-content: center; min-height: 100vh; }
.login-card { width: 360px; background: #fff; border:1px solid var(--panel-border); border-radius: 12px; padding: 16px; box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.login-header { margin-bottom: 12px; }
.login-title { margin: 0 0 6px 0; color:#111827; }
.login-subtitle { margin: 0; opacity: .8; }
.form-group { margin-bottom: 10px; }
.form-label { display: block; margin-bottom: 6px; }
.form-control { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--panel-border); background: #fff; color: var(--text); }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); display: none; align-items: center; justify-content: center; z-index: 1000; }
.modal-overlay.active { display: flex; }
.modal-content { width: 640px; max-width: 95%; background: #fff; border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.12); border: 1px solid var(--panel-border); }
.modal-header { padding: 16px; border-bottom: 1px solid var(--panel-border); }
.modal-title { margin: 0; font-size: 20px; color: #111827; }
.modal-body { padding: 16px; color: #1f2937; }
.modal-footer { padding: 16px; border-top: 1px solid var(--panel-border); display:flex; justify-content: flex-end; }
.close-modal { position: absolute; right: 18px; top: 12px; border:none; background:#fff; border:1px solid var(--panel-border); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.recipe-detail-section { margin-bottom: 12px; }
.recipe-detail-section h4 { margin: 0 0 8px 0; font-size: 16px; color: #111827; }
.recipe-detail-section ul, .recipe-detail-section ol { margin: 0; padding-left: 18px; }

/* Filter carousel */
.filter-carousel {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  scroll-behavior: smooth;
  scrollbar-color: rgba(164,184,196,.6) rgba(200,211,213,.35);
  scrollbar-width: thin;
}
.filter-carousel .category-filter {
  flex: 0 0 auto;
  scroll-snap-align: start;
}
.filter-carousel::-webkit-scrollbar { height: 6px; }
.filter-carousel::-webkit-scrollbar-thumb { background: rgba(164,184,196,.6); border-radius: 999px; }
.filter-carousel::-webkit-scrollbar-track { background: rgba(200,211,213,.35); }

/* Scroll progress indicator */
.scroll-indicator { height: 4px; background: var(--panel-border); border-radius: 999px; overflow: hidden; margin: 4px 8px 12px; }
.scroll-indicator__progress { height: 100%; width: 0%; background: linear-gradient(90deg, var(--lilas-bioativo), #7371FC); transition: width .2s ease; }

@media (max-width: 480px) {
  .filter-carousel { gap: 6px; }
}

/* Search autocomplete dropdown */
.search-wrap { position: relative; }
.search-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid var(--panel-border); border-radius: 12px; box-shadow: 0 10px 24px rgba(0,0,0,.08); z-index: 200; }
.search-suggest.hidden { display: none; }
.search-suggest-header { font-size: 12px; color: var(--gray-dark); padding: 8px 12px; border-bottom: 1px solid rgba(200,211,213,.5); }
.search-suggest-list { list-style: none; margin: 0; padding: 6px; max-height: 280px; overflow-y: auto; }
.search-suggest-item { padding: 8px 12px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 8px; color: #1f2937; }
.search-suggest-item:hover { background: rgba(164,184,196,.12); color: #0f172a; }
.search-suggest-item.active { background: rgba(164,184,196,.18); outline: 2px solid rgba(164,184,196,.35); }
.search-suggest-empty { padding: 10px 12px; color: var(--gray-dark); }