Update app.py

app.py

@@ -61,7 +61,7 @@ def get_fresh_token(force_refresh=False):
             browser.close()
             if token:
                 token_cache["token"] = token
-                token_cache["expires_at"] = time.time() + 600  # 10 minutos
+                token_cache["expires_at"] = time.time() + 600
                 logger.info(f"Token obtido: {token[:30]}...")
                 return token
             else:
@@ -72,76 +72,30 @@ def get_fresh_token(force_refresh=False):
         return None
 
 def search_stf(query: str, bases: list, page: int = 1, page_size: int = 20):
-    """
-    Faz a busca na API do STF filtrando pelas bases selecionadas com paginação
-    bases: lista com valores 'acordaos' e/ou 'decisoes'
-    page: número da página (começa em 1)
-    page_size: resultados por página
-    """
     token = get_fresh_token()
     if not token:
         return {"error": "Não foi possível obter token de acesso"}, 503
 
-    # Calcular offset baseado na página
     from_idx = (page - 1) * page_size
 
-    # Constrói filtro OR para as bases selecionadas
     should_filters = []
     for base in bases:
         should_filters.append({"term": {"base": base}})
     
-    # Payload com filtro flexível para as bases selecionadas
     payload = {
         "query": {
             "bool": {
-                "filter": [
-                    {
-                        "bool": {
-                            "should": should_filters,
-                            "minimum_should_match": 1
-                        }
-                    }
-                ],
-                "must": [
-                    {
-                        "bool": {
-                            "should": [
-                                {
-                                    "query_string": {
-                                        "fields": ["ementa_texto"],
-                                        "query": query,
-                                        "default_operator": "AND",
-                                        "fuzziness": "AUTO:4,7"
-                                    }
-                                },
-                                {
-                                    "query_string": {
-                                        "fields": ["decisao_texto"],
-                                        "query": query,
-                                        "default_operator": "AND",
-                                        "fuzziness": "AUTO:4,7"
-                                    }
-                                },
-                                {
-                                    "query_string": {
-                                        "fields": ["acordao_ata"],
-                                        "query": query,
-                                        "default_operator": "AND",
-                                        "fuzziness": "AUTO:4,7"
-                                    }
-                                }
-                            ]
-                        }
-                    }
-                ]
+                "filter": [{"bool": {"should": should_filters, "minimum_should_match": 1}}],
+                "must": [{"bool": {"should": [
+                    {"query_string": {"fields": ["ementa_texto"], "query": query, "default_operator": "AND", "fuzziness": "AUTO:4,7"}},
+                    {"query_string": {"fields": ["decisao_texto"], "query": query, "default_operator": "AND", "fuzziness": "AUTO:4,7"}},
+                    {"query_string": {"fields": ["acordao_ata"], "query": query, "default_operator": "AND", "fuzziness": "AUTO:4,7"}}
+                ]}}]
             }
         },
-        "_source": [
-            "id", "titulo", "ementa_texto", "decisao_texto", "acordao_ata",
-            "processo_codigo_completo", "relator_processo_nome",
-            "orgao_julgador", "julgamento_data", "publicacao_data",
-            "inteiro_teor_url", "base"
-        ],
+        "_source": ["id", "titulo", "ementa_texto", "decisao_texto", "acordao_ata",
+                    "processo_codigo_completo", "relator_processo_nome",
+                    "orgao_julgador", "julgamento_data", "publicacao_data", "inteiro_teor_url", "base"],
         "size": page_size,
         "from": from_idx,
         "sort": [{"julgamento_data": {"order": "desc"}}],
@@ -156,7 +110,6 @@ def search_stf(query: str, bases: list, page: int = 1, page_size: int = 20):
         if response.status_code == 200:
             return response.json()
         elif response.status_code == 202:
-            # Tenta renovar o token uma vez
             token = get_fresh_token(force_refresh=True)
             if token:
                 headers['Cookie'] = f'aws-waf-token={token}'
@@ -169,1193 +122,917 @@ def search_stf(query: str, bases: list, page: int = 1, page_size: int = 20):
     except Exception as e:
         return {"error": str(e)}, 502
 
+
+# ============================================
+# CSS compartilhado
+# ============================================
+SHARED_CSS = """
+@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&family=DM+Sans:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=swap');
+
+:root {
+  --bg:         #0e1018;
+  --bg-1:       #13161f;
+  --bg-2:       #191d28;
+  --bg-3:       #1f2435;
+  --gold:       #c9a84c;
+  --gold-lt:    #e8cf82;
+  --gold-dim:   #7a6030;
+  --gold-glow:  rgba(201,168,76,.12);
+  --gold-glow2: rgba(201,168,76,.05);
+  --gold-bd:    rgba(201,168,76,.22);
+  --blue:       #3d7de8;
+  --blue-dim:   rgba(61,125,232,.13);
+  --blue-bd:    rgba(61,125,232,.30);
+  --purple:     #7c5cbf;
+  --purple-dim: rgba(124,92,191,.13);
+  --purple-bd:  rgba(124,92,191,.30);
+  --tx:         #e6e8ee;
+  --tx-2:       #8e91a8;
+  --tx-3:       #484c62;
+  --bd:         rgba(255,255,255,.07);
+  --bd-2:       rgba(255,255,255,.11);
+  --red-dim:    rgba(239,68,68,.12);
+  --red-bd:     rgba(239,68,68,.28);
+  --serif: 'Cormorant Garamond', Georgia, serif;
+  --sans:  'DM Sans', system-ui, sans-serif;
+  --mono:  'JetBrains Mono', monospace;
+}
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+html { scroll-behavior: smooth; }
+
+body {
+  font-family: var(--sans);
+  background: var(--bg);
+  color: var(--tx);
+  min-height: 100vh;
+  -webkit-font-smoothing: antialiased;
+  line-height: 1.6;
+}
+
+/* Grain */
+body::after {
+  content: '';
+  position: fixed; inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
+  pointer-events: none; z-index: 9999; opacity: .5;
+}
+
+::selection { background: var(--gold-glow); color: var(--tx); }
+::-webkit-scrollbar { width: 3px; }
+::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 3px; }
+
+/* ── TOPBAR ── */
+.topbar {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 18px 40px;
+  border-bottom: 1px solid var(--bd);
+  position: sticky; top: 0; z-index: 100;
+  background: rgba(14,16,24,.92);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+}
+
+.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
+
+.brand-logo { height: 36px; width: auto; object-fit: contain; }
+
+.brand-sep { width: 1px; height: 20px; background: var(--bd-2); }
+
+.brand-label {
+  font-family: var(--mono);
+  font-size: .65rem;
+  letter-spacing: .18em;
+  text-transform: uppercase;
+  color: var(--tx-3);
+}
+
+.topbar-right { display: flex; align-items: center; gap: 14px; }
+
+.status-dot {
+  display: flex; align-items: center; gap: 6px;
+  font-family: var(--mono); font-size: .68rem;
+  color: var(--tx-3); letter-spacing: .06em;
+}
+.status-dot::before {
+  content: ''; width: 6px; height: 6px; border-radius: 50%;
+  background: #4ade80;
+  box-shadow: 0 0 6px rgba(74,222,128,.6);
+}
+
+/* ── SHELL ── */
+.shell { max-width: 1060px; margin: 0 auto; padding: 0 32px 80px; }
+
+/* ── HERO ── */
+.hero { padding: 56px 0 44px; text-align: center; position: relative; }
+
+.hero-glow {
+  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
+  width: 600px; height: 300px;
+  background: radial-gradient(ellipse at center top, rgba(201,168,76,.08) 0%, transparent 70%);
+  pointer-events: none;
+}
+
+.hero-logo-wrap { margin-bottom: 28px; }
+.hero-logo { height: 90px; width: auto; object-fit: contain; filter: drop-shadow(0 0 24px rgba(201,168,76,.15)); }
+
+.hero-sub {
+  font-size: .8rem;
+  font-family: var(--mono);
+  letter-spacing: .2em;
+  text-transform: uppercase;
+  color: var(--tx-3);
+  margin-bottom: 10px;
+}
+
+.hero-title {
+  font-family: var(--serif);
+  font-size: clamp(1.8rem, 4vw, 3rem);
+  font-weight: 300;
+  color: var(--tx);
+  line-height: 1.15;
+  margin-bottom: 10px;
+}
+.hero-title em { font-style: italic; color: var(--gold-lt); }
+
+/* ── SEARCH AREA ── */
+.search-wrap { margin-top: 36px; }
+
+/* Filtros de base — linha simples */
+.bases-line {
+  display: flex; align-items: center; gap: 20px;
+  margin-bottom: 14px;
+  font-size: .8rem; color: var(--tx-3);
+}
+
+.base-check {
+  display: flex; align-items: center; gap: 7px;
+  cursor: pointer; user-select: none;
+  color: var(--tx-2);
+  transition: color .2s;
+}
+.base-check:hover { color: var(--tx); }
+.base-check input { display: none; }
+
+.check-box {
+  width: 15px; height: 15px;
+  border: 1px solid var(--bd-2); border-radius: 4px;
+  display: flex; align-items: center; justify-content: center;
+  transition: all .2s; flex-shrink: 0;
+}
+.base-check input:checked + .check-box { border-color: var(--gold-dim); background: var(--gold-glow); }
+.base-check input:checked + .check-box::after {
+  content: ''; width: 6px; height: 6px; border-radius: 2px; background: var(--gold);
+}
+
+.base-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
+.dot-ac { background: var(--blue); }
+.dot-de { background: var(--purple); }
+
+/* Input row */
+.search-row {
+  display: flex; gap: 10px; align-items: center;
+  background: var(--bg-1);
+  border: 1px solid var(--bd-2);
+  border-radius: 14px;
+  padding: 6px 6px 6px 20px;
+  transition: border-color .25s, box-shadow .25s;
+}
+.search-row:focus-within {
+  border-color: var(--gold-dim);
+  box-shadow: 0 0 0 3px var(--gold-glow), 0 8px 32px rgba(0,0,0,.3);
+}
+
+.search-input {
+  flex: 1; background: transparent; border: none; outline: none;
+  font-family: var(--sans); font-size: .95rem; color: var(--tx);
+  padding: 10px 0; min-width: 0;
+}
+.search-input::placeholder { color: var(--tx-3); }
+
+.search-btn {
+  background: linear-gradient(135deg, #6b4f1a, var(--gold));
+  border: none; border-radius: 10px;
+  padding: 11px 26px;
+  font-family: var(--sans); font-size: .85rem; font-weight: 500;
+  color: #0e1018; letter-spacing: .04em;
+  cursor: pointer; white-space: nowrap;
+  display: flex; align-items: center; gap: 8px;
+  transition: opacity .2s, transform .15s;
+  flex-shrink: 0;
+}
+.search-btn:hover { opacity: .88; transform: translateY(-1px); }
+.search-btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }
+
+/* ── STATS CARDS ── */
+.stats-row {
+  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
+  margin: 32px 0 0; display: none;
+}
+
+.stat-card {
+  background: var(--bg-1); border: 1px solid var(--bd);
+  border-radius: 14px; padding: 20px 22px; text-align: center;
+  position: relative; overflow: hidden;
+  transition: border-color .2s;
+}
+.stat-card::before {
+  content: '';
+  position: absolute; top: 0; left: 0; right: 0; height: 1px;
+  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
+  opacity: .5;
+}
+.stat-card:hover { border-color: var(--gold-bd); }
+
+.stat-val {
+  font-family: var(--serif); font-size: 2rem; font-weight: 300;
+  color: var(--gold-lt); line-height: 1; margin-bottom: 4px;
+}
+.stat-label {
+  font-family: var(--mono); font-size: .63rem; letter-spacing: .12em;
+  text-transform: uppercase; color: var(--tx-3);
+}
+
+/* ── DIVIDER ── */
+.section-divider {
+  display: none; align-items: center; gap: 14px; margin: 28px 0 20px;
+}
+.div-line { flex: 1; height: 1px; background: var(--bd); }
+.div-label {
+  font-family: var(--mono); font-size: .65rem; letter-spacing: .14em;
+  text-transform: uppercase; color: var(--tx-3); white-space: nowrap;
+}
+
+/* ── RESULT CARDS ── */
+.result-card {
+  background: var(--bg-1); border: 1px solid var(--bd);
+  border-radius: 16px; padding: 26px 28px;
+  margin-bottom: 12px; position: relative; overflow: hidden;
+  transition: border-color .22s, box-shadow .22s, transform .15s;
+  animation: riseUp .3s ease both;
+}
+
+@keyframes riseUp {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* Circuit accent linha esquerda */
+.result-card::before {
+  content: '';
+  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
+  transition: opacity .2s;
+}
+.result-card.acordaos::before { background: linear-gradient(180deg, var(--blue), transparent); }
+.result-card.decisoes::before { background: linear-gradient(180deg, var(--purple), transparent); }
+
+/* Corner circuit decoration */
+.result-card::after {
+  content: '';
+  position: absolute; right: 0; top: 0;
+  width: 80px; height: 80px;
+  background: radial-gradient(circle at top right, rgba(255,255,255,.025) 0%, transparent 70%);
+  pointer-events: none;
+}
+
+.result-card:hover {
+  border-color: var(--gold-bd);
+  box-shadow: 0 0 0 1px var(--gold-bd), 0 12px 40px rgba(0,0,0,.35);
+  transform: translateY(-1px);
+}
+
+/* Card header */
+.card-head {
+  display: flex; align-items: flex-start; justify-content: space-between;
+  gap: 14px; margin-bottom: 14px;
+}
+.card-title {
+  font-family: var(--serif); font-size: 1.08rem; font-weight: 400;
+  color: var(--tx); line-height: 1.35; flex: 1;
+}
+.card-num {
+  font-family: var(--mono); font-size: .62rem; color: var(--tx-3);
+  flex-shrink: 0; margin-top: 3px;
+}
+
+/* Tipo tag */
+.tipo-tag {
+  display: inline-flex; align-items: center; gap: 5px;
+  font-family: var(--mono); font-size: .60rem; letter-spacing: .07em;
+  padding: 3px 9px; border-radius: 20px; font-weight: 500;
+  flex-shrink: 0; margin-top: 2px;
+}
+.tipo-tag.acordaos { background: var(--blue-dim); color: #7ab4ff; border: 1px solid var(--blue-bd); }
+.tipo-tag.decisoes { background: var(--purple-dim); color: #b39dff; border: 1px solid var(--purple-bd); }
+.tipo-tag-dot { width: 5px; height: 5px; border-radius: 50%; }
+.tipo-tag.acordaos .tipo-tag-dot { background: var(--blue); }
+.tipo-tag.decisoes .tipo-tag-dot { background: var(--purple); }
+
+/* Meta pills */
+.meta-row {
+  display: flex; flex-wrap: wrap; gap: 6px;
+  margin-bottom: 16px; padding-bottom: 16px;
+  border-bottom: 1px solid var(--bd);
+}
+.meta-pill {
+  font-size: .73rem; color: var(--tx-2);
+  background: var(--bg-2); border: 1px solid var(--bd);
+  border-radius: 20px; padding: 3px 11px;
+  display: flex; align-items: center; gap: 5px;
+}
+.meta-pill-icon { opacity: .55; font-size: .75rem; }
+
+/* Field blocks */
+.field-block {
+  border-radius: 10px; padding: 14px 16px; margin-bottom: 10px;
+  border-left: 2px solid transparent;
+}
+.field-block.ementa  { background: rgba(61,125,232,.07);  border-left-color: var(--blue); }
+.field-block.decisao { background: rgba(124,92,191,.07); border-left-color: var(--purple); }
+.field-block.acordao { background: rgba(201,168,76,.06);  border-left-color: var(--gold-dim); }
+
+.field-label {
+  font-family: var(--mono); font-size: .60rem; letter-spacing: .14em;
+  text-transform: uppercase; font-weight: 500;
+  margin-bottom: 7px; display: block;
+}
+.field-block.ementa .field-label  { color: #7ab4ff; }
+.field-block.decisao .field-label { color: #b39dff; }
+.field-block.acordao .field-label { color: var(--gold); }
+
+.field-text {
+  font-size: .84rem; color: var(--tx-2); line-height: 1.7;
+  white-space: pre-wrap; max-height: 200px; overflow-y: auto;
+}
+.field-text::-webkit-scrollbar { width: 2px; }
+.field-text::-webkit-scrollbar-thumb { background: var(--bd-2); }
+
+/* Card footer */
+.card-foot { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
+
+.btn-ghost {
+  font-family: var(--sans); font-size: .77rem; color: var(--tx-2);
+  background: var(--bg-2); border: 1px solid var(--bd);
+  border-radius: 20px; padding: 7px 16px;
+  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
+  transition: color .2s, border-color .2s; cursor: pointer;
+}
+.btn-ghost:hover { color: var(--tx); border-color: var(--bd-2); }
+
+.btn-gold {
+  font-family: var(--sans); font-size: .77rem; color: var(--gold);
+  background: var(--gold-glow); border: 1px solid var(--gold-bd);
+  border-radius: 20px; padding: 7px 16px;
+  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
+  transition: background .2s;
+}
+.btn-gold:hover { background: rgba(201,168,76,.18); }
+
+/* ── LOADER ── */
+#loader { display: none; text-align: center; padding: 60px 0; }
+.spinner {
+  width: 32px; height: 32px; margin: 0 auto 14px;
+  border: 2px solid var(--bd); border-top-color: var(--gold);
+  border-radius: 50%; animation: spin .75s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+.loader-txt { font-family: var(--mono); font-size: .72rem; color: var(--tx-3); letter-spacing: .1em; }
+
+/* ── ERROR ── */
+.err-box {
+  display: none; background: var(--red-dim); border: 1px solid var(--red-bd);
+  border-radius: 12px; padding: 16px 20px; font-size: .88rem;
+  color: #fca5a5; margin-top: 16px;
+}
+
+/* ── EMPTY ── */
+.empty-box { display: none; text-align: center; padding: 70px 0; color: var(--tx-3); }
+.empty-icon { font-size: 2rem; margin-bottom: 10px; opacity: .4; }
+
+/* ── PAGINATION ── */
+.pag-wrap {
+  display: none; flex-wrap: wrap; align-items: center;
+  justify-content: center; gap: 6px; margin-top: 36px;
+}
+.pag-btn {
+  width: 36px; height: 36px; border-radius: 50%;
+  border: 1px solid var(--bd); background: transparent;
+  color: var(--tx-2); cursor: pointer; font-size: .83rem;
+  display: flex; align-items: center; justify-content: center;
+  transition: all .18s; font-family: var(--sans);
+}
+.pag-btn:hover:not(:disabled) { border-color: var(--gold-bd); color: var(--gold); }
+.pag-btn.active { background: var(--gold-glow); border-color: var(--gold-bd); color: var(--gold); }
+.pag-btn:disabled { opacity: .25; cursor: default; }
+.pag-info { font-family: var(--mono); font-size: .68rem; color: var(--tx-3); padding: 0 10px; letter-spacing: .06em; }
+
+/* ── FOOTER ── */
+.footer {
+  border-top: 1px solid var(--bd); margin-top: 70px; padding-top: 24px;
+  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
+}
+.footer-brand { font-family: var(--serif); font-size: .9rem; color: var(--tx-3); font-style: italic; }
+.footer-brand span { color: var(--gold); }
+.footer-note { font-family: var(--mono); font-size: .63rem; color: var(--tx-3); letter-spacing: .04em; }
+
+/* ── DOC PAGE SPECIFICS ── */
+.back-link {
+  display: inline-flex; align-items: center; gap: 7px;
+  font-size: .8rem; color: var(--tx-2); text-decoration: none;
+  border: 1px solid var(--bd); border-radius: 20px; padding: 7px 16px;
+  transition: color .2s, border-color .2s;
+}
+.back-link:hover { color: var(--tx); border-color: var(--bd-2); }
+
+.doc-header-card {
+  background: var(--bg-1); border: 1px solid var(--bd);
+  border-radius: 16px; padding: 28px 30px; margin: 28px 0 20px;
+  position: relative; overflow: hidden;
+}
+.doc-header-card::before {
+  content: '';
+  position: absolute; top: 0; left: 0; right: 0; height: 1px;
+  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
+  opacity: .6;
+}
+.doc-title {
+  font-family: var(--serif); font-size: 1.5rem; font-weight: 400;
+  color: var(--tx); margin-bottom: 18px; line-height: 1.3;
+}
+
+.doc-field {
+  border-radius: 12px; padding: 20px 22px; margin-bottom: 14px;
+  border-left: 2px solid transparent;
+}
+.doc-field.ementa  { background: rgba(61,125,232,.07);  border-left-color: var(--blue); }
+.doc-field.decisao { background: rgba(124,92,191,.07); border-left-color: var(--purple); }
+.doc-field.acordao { background: rgba(201,168,76,.06);  border-left-color: var(--gold-dim); }
+
+.doc-field-label {
+  font-family: var(--mono); font-size: .62rem; letter-spacing: .14em;
+  text-transform: uppercase; font-weight: 500;
+  margin-bottom: 12px; display: block;
+}
+.doc-field.ementa .doc-field-label  { color: #7ab4ff; }
+.doc-field.decisao .doc-field-label { color: #b39dff; }
+.doc-field.acordao .doc-field-label { color: var(--gold); }
+
+.doc-field-text {
+  font-size: .9rem; color: var(--tx-2); line-height: 1.78;
+  white-space: pre-wrap;
+}
+
+.inteiro-teor-link {
+  display: inline-flex; align-items: center; gap: 8px;
+  font-family: var(--sans); font-size: .85rem;
+  color: var(--gold); text-decoration: none;
+  border: 1px solid var(--gold-bd); border-radius: 10px;
+  padding: 12px 22px; margin-top: 16px;
+  background: var(--gold-glow); transition: background .2s;
+}
+.inteiro-teor-link:hover { background: rgba(201,168,76,.18); }
+
+/* SVG icon inline helper */
+.ico { display: inline-block; vertical-align: middle; }
+"""
+
+
 # ============================================
 # Rota principal (HTML)
 # ============================================
 @app.route('/')
 def index():
-    return render_template_string("""
-<!DOCTYPE html>
-<html>
+    return render_template_string("""<!DOCTYPE html>
+<html lang="pt-BR">
 <head>
-    <title>⚖️ PARA AI - Busca STF</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <style>
-        :root {
-            --primary: #1E3A8A;      /* Azul escuro principal */
-            --secondary: #2563EB;     /* Azul médio */
-            --accent: #3B82F6;        /* Azul claro */
-            --background: #F8FAFC;    /* Fundo claro */
-            --text: #0F172A;          /* Texto escuro */
-            --card-bg: #FFFFFF;       /* Fundo dos cards */
-            --border: #E2E8F0;        /* Bordas suaves */
-            --success: #10B981;        /* Verde */
-            --warning: #F59E0B;        /* Laranja */
-            --error: #EF4444;          /* Vermelho */
-            --purple: #8B5CF6;         /* Roxo para decisões */
-        }
-        
-        body { 
-            font-family: 'Inter', 'Segoe UI', Roboto, system-ui, sans-serif; 
-            max-width: 1400px; 
-            margin: 0 auto; 
-            padding: 20px; 
-            background: var(--background); 
-            color: var(--text);
-            line-height: 1.5;
-        }
-        
-        .container { 
-            background: var(--card-bg); 
-            border-radius: 24px; 
-            padding: 30px; 
-            box-shadow: 0 20px 40px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.1); 
-            border: 1px solid var(--border);
-        }
-        
-        /* Logo e cabeçalho */
-        .header {
-            text-align: center;
-            margin-bottom: 15px;
-            border-bottom: 2px solid var(--border);
-            padding-bottom: 25px;
-        }
-        
-        .logo-container {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 8px;
-        }
-        
-        .logo {
-            height: 180px;
-            width: auto;
-        }
-        
-        .logo-text {
-            font-size: 28px;
-            font-weight: 700;
-            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            letter-spacing: -0.5px;
-        }
-        
-        .tagline {
-            font-size: 14px;
-            color: #64748B;
-            font-weight: 400;
-            letter-spacing: 1px;
-        }
-        
-        .stats-badge {
-            background: linear-gradient(135deg, var(--primary), var(--secondary));
-            color: white;
-            padding: 8px 20px;
-            border-radius: 40px;
-            font-size: 16px;
-            font-weight: 500;
-            display: inline-block;
-            margin-top: 10px;
-            box-shadow: 0 4px 10px rgba(30,58,138,0.2);
-        }
-        
-        .info-box { 
-            background: #EFF6FF; 
-            border-left: 6px solid var(--primary); 
-            padding: 20px 25px; 
-            margin: 25px 0; 
-            border-radius: 16px; 
-            font-size: 15px;
-        }
-        
-        .base-selector { 
-            background: var(--card-bg); 
-            border-radius: 20px; 
-            padding: 20px; 
-            margin: 20px 0; 
-            border: 1px solid var(--border); 
-        }
-        
-        .base-selector h3 { 
-            margin-top: 0; 
-            color: var(--primary); 
-            font-size: 16px; 
-            margin-bottom: 15px; 
-            font-weight: 600;
-        }
-        
-        .checkbox-group { 
-            display: flex; 
-            gap: 30px; 
-            flex-wrap: wrap; 
-        }
-        
-        .checkbox-item { 
-            display: flex; 
-            align-items: center; 
-            gap: 12px; 
-            cursor: pointer; 
-        }
-        
-        .checkbox-item input[type="checkbox"] { 
-            width: 20px; 
-            height: 20px; 
-            cursor: pointer; 
-            accent-color: var(--primary); 
-        }
-        
-        .checkbox-item label { 
-            font-size: 16px; 
-            cursor: pointer; 
-            font-weight: 500; 
-        }
-        
-        .badge { 
-            background: var(--primary); 
-            color: white; 
-            padding: 4px 12px; 
-            border-radius: 20px; 
-            font-size: 13px; 
-            font-weight: 500; 
-            margin-left: 8px; 
-        }
-        
-        .badge.acordaos { 
-            background: var(--secondary); 
-        }
-        
-        .badge.decisoes { 
-            background: var(--purple); 
-        }
-        
-        /* Caixa de busca - botão abaixo */
-        .search-section {
-            margin: 30px 0;
-        }
-        
-        .search-input {
-            width: 100%;
-            padding: 18px 20px;
-            font-size: 16px;
-            border: 2px solid var(--border);
-            border-radius: 16px;
-            transition: all 0.3s;
-            background: var(--card-bg);
-            margin-bottom: 15px;
-            box-sizing: border-box;
-        }
-        
-        .search-input:focus {
-            outline: none;
-            border-color: var(--secondary);
-            box-shadow: 0 0 0 4px rgba(37,99,235,0.15);
-        }
-        
-        .search-button-container {
-            display: flex;
-            justify-content: center;
-        }
-        
-        .search-button {
-            padding: 16px 48px;
-            background: linear-gradient(135deg, var(--primary), var(--secondary));
-            color: white;
-            border: none;
-            border-radius: 60px;
-            font-size: 18px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s;
-            display: inline-flex;
-            align-items: center;
-            gap: 10px;
-            box-shadow: 0 8px 20px rgba(30,58,138,0.3);
-            letter-spacing: 0.5px;
-        }
-        
-        .search-button:hover { 
-            transform: translateY(-2px); 
-            box-shadow: 0 12px 28px rgba(30,58,138,0.4); 
-        }
-        
-        .search-button:disabled { 
-            opacity: 0.6; 
-            cursor: not-allowed; 
-            transform: none; 
-            box-shadow: none; 
-        }
-        
-        .exemplos {
-            text-align: center;
-            color: #64748B;
-            font-size: 14px;
-            margin: 15px 0 5px;
-        }
-        
-        .exemplos strong {
-            color: var(--primary);
-        }
-        
-        .stats-grid { 
-            display: grid; 
-            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); 
-            gap: 15px; 
-            margin: 25px 0; 
-        }
-        
-        .stat-card { 
-            background: #F8FAFC; 
-            border-radius: 20px; 
-            padding: 20px; 
-            border: 1px solid var(--border); 
-            text-align: center; 
-            transition: all 0.2s;
-        }
-        
-        .stat-card:hover {
-            border-color: var(--secondary);
-            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
-        }
-        
-        .stat-value { 
-            font-size: 32px; 
-            font-weight: 700; 
-            color: var(--primary); 
-            line-height: 1.2;
-        }
-        
-        .stat-label { 
-            color: #64748B; 
-            font-size: 14px; 
-            margin-top: 5px; 
-            text-transform: uppercase; 
-            letter-spacing: 0.5px; 
-        }
-        
-        /* Resultados */
-        .result { 
-            border: 1px solid var(--border); 
-            border-radius: 20px; 
-            padding: 25px; 
-            margin: 20px 0; 
-            background: var(--card-bg); 
-            box-shadow: 0 4px 12px rgba(0,0,0,0.03); 
-            transition: all 0.2s; 
-        }
-        
-        .result.acordaos { 
-            border-left: 6px solid var(--secondary); 
-        }
-        
-        .result.decisoes { 
-            border-left: 6px solid var(--purple); 
-        }
-        
-        .result:hover { 
-            box-shadow: 0 8px 24px rgba(0,0,0,0.08); 
-            border-color: var(--secondary); 
-        }
-        
-        .result h3 { 
-            margin: 0 0 15px; 
-            color: var(--primary); 
-            font-size: 18px; 
-            display: flex; 
-            align-items: center; 
-            gap: 8px; 
-            flex-wrap: wrap; 
-        }
-        
-        .tipo-badge { 
-            font-size: 12px; 
-            padding: 4px 12px; 
-            border-radius: 30px; 
-            font-weight: 500; 
-        }
-        
-        .tipo-badge.acordaos { 
-            background: var(--secondary); 
-            color: white; 
-        }
-        
-        .tipo-badge.decisoes { 
-            background: var(--purple); 
-            color: white; 
-        }
-        
-        .meta { 
-            display: flex; 
-            flex-wrap: wrap; 
-            gap: 10px; 
-            margin-bottom: 15px; 
-            padding-bottom: 15px; 
-            border-bottom: 1px solid var(--border); 
-        }
-        
-        .meta-item { 
-            background: #F1F5F9; 
-            padding: 6px 14px; 
-            border-radius: 30px; 
-            font-size: 13px; 
-            color: var(--text); 
-            display: flex; 
-            align-items: center; 
-            gap: 6px; 
-        }
-        
-        .campo { 
-            margin: 20px 0; 
-            padding: 20px; 
-            border-radius: 16px; 
-        }
-        
-        .ementa { 
-            background: #EFF6FF; 
-            border-left: 4px solid var(--secondary); 
-        }
-        
-        .decisao { 
-            background: #F5F3FF; 
-            border-left: 4px solid var(--purple); 
-        }
-        
-        .acordao { 
-            background: #FFFBEB; 
-            border-left: 4px solid var(--warning); 
-        }
-        
-        .campo-label { 
-            font-weight: 600; 
-            margin-bottom: 10px; 
-            display: block; 
-            font-size: 14px; 
-            text-transform: uppercase; 
-            letter-spacing: 0.5px;
-        }
-        
-        .ementa .campo-label { 
-            color: var(--secondary); 
-        }
-        
-        .decisao .campo-label { 
-            color: var(--purple); 
-        }
-        
-        .acordao .campo-label { 
-            color: var(--warning); 
-        }
-        
-        .campo-conteudo { 
-            font-size: 14px; 
-            line-height: 1.7; 
-            color: var(--text); 
-            white-space: pre-wrap; 
-            max-height: 300px; 
-            overflow-y: auto; 
-            background: rgba(255,255,255,0.5);
-            padding: 10px;
-            border-radius: 8px;
-        }
-        
-        .url-link { 
-            margin-top: 15px; 
-            padding: 12px; 
-            background: #F8FAFC; 
-            border-radius: 12px; 
-            border: 1px solid var(--border);
-        }
-        
-        .url-link a { 
-            color: var(--secondary); 
-            text-decoration: none; 
-            display: inline-flex; 
-            align-items: center; 
-            gap: 8px; 
-            font-weight: 500; 
-        }
-        
-        .url-link a:hover { 
-            text-decoration: underline; 
-        }
-        
-        .action-buttons { 
-            display: flex; 
-            gap: 12px; 
-            margin-top: 20px; 
-            flex-wrap: wrap; 
-        }
-        
-        .btn { 
-            padding: 12px 24px; 
-            border-radius: 40px; 
-            font-size: 14px; 
-            font-weight: 500; 
-            text-decoration: none; 
-            display: inline-flex; 
-            align-items: center; 
-            gap: 8px; 
-            transition: all 0.2s; 
-            cursor: pointer; 
-            border: none; 
-        }
-        
-        .btn-primary { 
-            background: linear-gradient(135deg, var(--primary), var(--secondary)); 
-            color: white; 
-            box-shadow: 0 4px 10px rgba(30,58,138,0.2);
-        }
-        
-        .btn-primary:hover { 
-            background: linear-gradient(135deg, var(--secondary), var(--primary)); 
-            box-shadow: 0 6px 15px rgba(30,58,138,0.3);
-        }
-        
-        .btn-outline { 
-            background: white; 
-            border: 1px solid var(--border); 
-            color: var(--primary); 
-        }
-        
-        .btn-outline:hover { 
-            background: #F8FAFC; 
-            border-color: var(--secondary); 
-        }
-        
-        .btn-secondary { 
-            background: #F1F5F9; 
-            color: var(--text); 
-        }
-        
-        .btn-secondary:hover { 
-            background: #E2E8F0; 
-        }
-        
-        /* Paginação */
-        .pagination { 
-            display: flex; 
-            justify-content: center; 
-            align-items: center; 
-            gap: 8px; 
-            margin: 40px 0 20px; 
-            flex-wrap: wrap; 
-        }
-        
-        .pagination button { 
-            padding: 10px 16px; 
-            border: 1px solid var(--border); 
-            background: white; 
-            border-radius: 40px; 
-            cursor: pointer; 
-            font-weight: 500; 
-            transition: all 0.2s; 
-            color: var(--text);
-        }
-        
-        .pagination button:hover:not(:disabled) { 
-            background: #F1F5F9; 
-            border-color: var(--secondary); 
-            color: var(--secondary);
-        }
-        
-        .pagination button.active { 
-            background: var(--primary); 
-            color: white; 
-            border-color: var(--primary); 
-        }
-        
-        .pagination button:disabled { 
-            opacity: 0.4; 
-            cursor: not-allowed; 
-        }
-        
-        .page-info { 
-            margin: 0 15px; 
-            font-weight: 500; 
-            color: var(--text); 
-        }
-        
-        .page-size-selector { 
-            display: flex; 
-            align-items: center; 
-            gap: 10px; 
-            margin-left: 20px; 
-        }
-        
-        .page-size-selector select { 
-            padding: 8px 16px; 
-            border-radius: 40px; 
-            border: 1px solid var(--border); 
-            background: white;
-            color: var(--text);
-            font-weight: 500;
-        }
-        
-        .loading { 
-            display: inline-block; 
-            width: 30px; 
-            height: 30px; 
-            border: 3px solid rgba(30,58,138,0.2); 
-            border-top-color: var(--primary); 
-            border-radius: 50%; 
-            animation: spin 1s linear infinite; 
-        }
-        
-        @keyframes spin { 
-            to { transform: rotate(360deg); } 
-        }
-        
-        .error { 
-            color: var(--error); 
-            background: #FEF2F2; 
-            border-left: 6px solid var(--error); 
-            padding: 20px 25px; 
-            margin: 15px 0; 
-            border-radius: 16px; 
-        }
-        
-        .warning { 
-            color: #92400E; 
-            background: #FFFBEB; 
-            border-left: 6px solid var(--warning); 
-            padding: 20px 25px; 
-            margin: 15px 0; 
-            border-radius: 16px; 
-        }
-        
-        .footer { 
-            margin-top: 50px; 
-            text-align: center; 
-            color: #64748B; 
-            font-size: 14px; 
-            border-top: 1px solid var(--border);
-            padding-top: 25px;
-        }
-        
-        .highlight { 
-            background-color: #FEF9C3; 
-            color: var(--text); 
-            font-weight: 600; 
-            padding: 2px 4px; 
-            border-radius: 4px; 
-        }
-        
-        .aviso { 
-            background: #FFFBEB; 
-            border-left: 4px solid var(--warning); 
-            padding: 12px 18px; 
-            border-radius: 12px; 
-            margin: 15px 0; 
-            font-size: 14px; 
-        }
-        
-        .loading-container {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 15px;
-            margin: 30px 0;
-        }
-        
-        .loading-text {
-            color: var(--primary);
-            font-weight: 500;
-        }
-    </style>
+  <title>PARA AI — Jurisprudência STF</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>""" + SHARED_CSS + """</style>
 </head>
 <body>
-    <div class="container">
-        <div class="header">
-            <div class="logo-container">
-                <img src="https://huggingface.co/spaces/caarleexx/paraAI_CHATBOT/resolve/main/public/logo_light.png" 
-                     alt="PARA AI" 
-                     class="logo"
-                     onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
-            </div>
-        </div>
-        
-
-        <div class="base-selector">
-            <h3>🔍 Selecionar bases para pesquisa:</h3>
-            <div class="checkbox-group">
-                <div class="checkbox-item">
-                    <input type="checkbox" id="baseAcordaos" checked>
-                    <label for="baseAcordaos"><span class="badge acordaos">Acordaos</span></label>
-                </div>
-                <div class="checkbox-item">
-                    <input type="checkbox" id="baseDecisoes" checked>
-                    <label for="baseDecisoes"><span class="badge decisoes">Decisoes Monocráticas</span></label>
-                </div>
-            </div>
-        </div>
 
-        <div class="search-section">
-            <input type="text" 
-                   class="search-input" 
-                   id="query" 
-                   placeholder="Ex: dano moral mordida cachorro, habeas corpus, liminar..." 
-                   value="" 
-                   autofocus>
-            
-            <div class="search-button-container">
-                <button id="searchBtn" class="search-button" onclick="doSearch(1)">
-                    <span>🔍</span> PESQUISAR
-                </button>
-            </div>
-            
-            <div class="exemplos">
-                <strong>Exemplos:</strong> Dano moral em atraso de voo · Agravo de instrumento · Responsabilidade civil
-            </div>
-        </div>
+<!-- TOPBAR -->
+<nav class="topbar">
+  <a href="/" class="brand">
+    <img src="https://huggingface.co/spaces/caarleexx/paraAI_CHATBOT/resolve/main/public/logo_dark.png"
+         alt="PARA AI" class="brand-logo"
+         onerror="this.style.display='none'">
+    <div class="brand-sep"></div>
+    <span class="brand-label">Jurisprudência STF</span>
+  </a>
+  <div class="topbar-right">
+    <span class="status-dot">online</span>
+  </div>
+</nav>
 
-        <div id="loading" class="loading-container" style="display: none;">
-            <div class="loading"></div>
-            <div class="loading-text">Buscando jurisprudência...</div>
-        </div>
+<div class="shell">
 
-        <div class="stats-grid" id="stats" style="display: none;">
-            <div class="stat-card"><div class="stat-value" id="totalDocs">0</div><div class="stat-label">documentos</div></div>
-            <div class="stat-card"><div class="stat-value" id="totalAcordaos">0</div><div class="stat-label">acórdãos</div></div>
-            <div class="stat-card"><div class="stat-value" id="totalDecisoes">0</div><div class="stat-label">decisões</div></div>
-            <div class="stat-card"><div class="stat-value" id="timeMs">0</div><div class="stat-label">tempo (ms)</div></div>
-        </div>
+  <!-- HERO -->
+  <section class="hero">
+    <div class="hero-glow"></div>
 
-        <div id="results"></div>
-        
-        <!-- Paginação -->
-        <div id="pagination" class="pagination" style="display: none;">
-            <button id="firstPageBtn" onclick="goToPage(1)" disabled>⏮️ Primeira</button>
-            <button id="prevPageBtn" onclick="goToPage(currentPage - 1)" disabled>◀ Anterior</button>
-            <span id="pageInfo" class="page-info">Página <span id="currentPageDisplay">1</span> de <span id="totalPagesDisplay">1</span></span>
-            <button id="nextPageBtn" onclick="goToPage(currentPage + 1)" disabled>Próxima ▶</button>
-            <button id="lastPageBtn" onclick="goToPage(totalPages)" disabled>Última ⏭️</button>
-            <div class="page-size-selector">
-                <label for="pageSize">Itens:</label>
-                <select id="pageSize" onchange="changePageSize()">
-                    <option value="10">10</option>
-                    <option value="20" selected>20</option>
-                    <option value="50">50</option>
-                    <option value="100">100</option>
-                </select>
-            </div>
-        </div>
+    <div class="hero-logo-wrap">
+      <img src="https://huggingface.co/spaces/caarleexx/paraAI_CHATBOT/resolve/main/public/logo_light.png"
+           alt="PARA AI" class="hero-logo"
+           onerror="this.style.display='none'">
+    </div>
+
+    <p class="hero-sub">Supremo Tribunal Federal · Pesquisa Jurisprudencial</p>
+    <h1 class="hero-title">Busque acórdãos e decisões<br><em>com precisão.</em></h1>
+
+    <!-- SEARCH -->
+    <div class="search-wrap">
+
+      <!-- Bases: linha discreta acima do input -->
+      <div class="bases-line">
+        <span>Bases:</span>
+        <label class="base-check">
+          <input type="checkbox" id="cbAcordaos" checked>
+          <span class="check-box"></span>
+          <span class="base-dot dot-ac"></span>
+          Acórdãos
+        </label>
+        <label class="base-check">
+          <input type="checkbox" id="cbDecisoes" checked>
+          <span class="check-box"></span>
+          <span class="base-dot dot-de"></span>
+          Decisões Monocráticas
+        </label>
+      </div>
+
+      <!-- Input + botão -->
+      <div class="search-row">
+        <input type="text" id="query" class="search-input"
+               placeholder="Ex.: habeas corpus tráfico, dano moral, ADI…"
+               autocomplete="off" autofocus>
+        <button id="searchBtn" class="search-btn" onclick="doSearch(1)">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2">
+            <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
+          </svg>
+          Pesquisar
+        </button>
+      </div>
 
-        <div class="footer">
-            <span>⚖️ STF - Supremo Tribunal Federal • </span>
-            <span>PARA AI - Pesquisa Jurisprudencial</span>
-        </div>
     </div>
+  </section>
 
-    <script>
-        let lastQuery = '';
-        let currentPage = 1;
-        let totalPages = 1;
-        let totalResults = 0;
-        let pageSize = 20;
-
-        async function doSearch(page = 1) {
-            const query = document.getElementById('query').value.trim();
-            if (!query) {
-                alert('Digite algo para buscar');
-                return;
-            }
+  <!-- LOADER -->
+  <div id="loader">
+    <div class="spinner"></div>
+    <div class="loader-txt">consultando o STF…</div>
+  </div>
 
-            const baseAcordaos = document.getElementById('baseAcordaos').checked;
-            const baseDecisoes = document.getElementById('baseDecisoes').checked;
-            pageSize = parseInt(document.getElementById('pageSize').value);
-            
-            
-            lastQuery = query;
-            currentPage = page;
-            
-            const btn = document.getElementById('searchBtn');
-            const loading = document.getElementById('loading');
-            const resultsDiv = document.getElementById('results');
-            const statsDiv = document.getElementById('stats');
-            const paginationDiv = document.getElementById('pagination');
-            
-            btn.disabled = true;
-            loading.style.display = 'flex';
-            resultsDiv.innerHTML = '';
-            statsDiv.style.display = 'none';
-            paginationDiv.style.display = 'none';
-            
-            const startTime = performance.now();
-            
-            try {
-                const response = await fetch(`/api/busca-multipla?q=${encodeURIComponent(query)}&acordaos=${baseAcordaos}&decisoes=${baseDecisoes}&page=${page}&page_size=${pageSize}`);
-                const data = await response.json();
-                const elapsed = Math.round(performance.now() - startTime);
-                
-                if (data.error) {
-                    resultsDiv.innerHTML = `<div class="error">❌ Erro: ${data.error}</div>`;
-                } else {
-                    const resultados = data.resultados || [];
-                    totalResults = data.total || resultados.length;
-                    totalPages = Math.ceil(totalResults / pageSize);
-                    
-                    document.getElementById('totalDocs').textContent = totalResults;
-                    document.getElementById('totalAcordaos').textContent = data.total_acordaos || 0;
-                    document.getElementById('totalDecisoes').textContent = data.total_decisoes || 0;
-                    document.getElementById('timeMs').textContent = elapsed;
-                    statsDiv.style.display = 'grid';
-                    
-                    updatePagination();
-                    
-                    if (resultados.length === 0) {
-                        resultsDiv.innerHTML = `<div class="warning">🔍 Nenhum resultado encontrado para "${query}"</div>`;
-                        paginationDiv.style.display = 'none';
-                    } else {
-                        let html = `<p style="margin-bottom: 20px; font-weight: 500;">📚 Encontrados ${totalResults} documentos. Página ${currentPage} de ${totalPages}:</p>`;
-                        
-                        resultados.forEach((item, index) => {
-                            const tipo = item.base === 'acordaos' ? 'acordaos' : 'decisoes';
-                            const tipoLabel = item.base === 'acordaos' ? 'Acórdão' : 'Decisão Monocrática';
-                            const temEmenta = item.ementa && item.ementa.trim() !== '';
-                            const temDecisao = item.decisao_texto && item.decisao_texto.trim() !== '';
-                            const temAcordao = item.acordao_ata && item.acordao_ata.trim() !== '';
-                            
-                            html += `
-                                <div class="result ${tipo}" id="doc-${item.id}">
-                                    <h3>
-                                        ${((currentPage-1)*pageSize) + index + 1}. ${item.titulo || item.processo || 'Documento sem título'}
-                                        <span class="tipo-badge ${tipo}">${tipoLabel}</span>
-                                    </h3>
-                                    <div class="meta">
-                                        ${item.relator ? `<span class="meta-item">⚖️ ${item.relator}</span>` : ''}
-                                        ${item.orgao ? `<span class="meta-item">🏛️ ${item.orgao}</span>` : ''}
-                                        ${item.data ? `<span class="meta-item">📅 ${item.data}</span>` : ''}
-                                        ${item.publicacao ? `<span class="meta-item">📰 Pub: ${item.publicacao}</span>` : ''}
-                                        ${item.id ? `<span class="meta-item">🆔 ${item.id}</span>` : ''}
-                                    </div>
-                            `;
-                            
-                            if (temEmenta) {
-                                html += `
-                                    <div class="campo ementa">
-                                        <span class="campo-label">📝 Ementa:</span>
-                                        <div class="campo-conteudo">${item.ementa.replace(/\\n/g, '<br>').replace(/<em>/g, '<span class="highlight">').replace(/<\\/em>/g, '</span>')}</div>
-                                    </div>
-                                `;
-                            }
-                            
-                            if (temDecisao) {
-                                html += `
-                                    <div class="campo decisao">
-                                        <span class="campo-label">⚖️ Decisão:</span>
-                                        <div class="campo-conteudo">${item.decisao_texto.replace(/\\n/g, '<br>').replace(/<em>/g, '<span class="highlight">').replace(/<\\/em>/g, '</span>')}</div>
-                                    </div>
-                                `;
-                            }
-                            
-                            if (temAcordao) {
-                                html += `
-                                    <div class="campo acordao">
-                                        <span class="campo-label">📋 Acórdão/Ata:</span>
-                                        <div class="campo-conteudo">${item.acordao_ata.replace(/\\n/g, '<br>').replace(/<em>/g, '<span class="highlight">').replace(/<\\/em>/g, '</span>')}</div>
-                                    </div>
-                                `;
-                            }
-                            
-                            // Botões de ação
-                            html += `
-                                <div class="action-buttons">
-                                    <a href="/documento/${item.id}" target="_blank" class="btn btn-primary">
-                                        <span>🔍</span> Ver detalhes completos
-                                    </a>
-                                    ${item.url_documento ? `
-                                        <a href="${item.url_documento}" target="_blank" class="btn btn-outline">
-                                            <span>📄</span> Inteiro teor
-                                        </a>
-                                    ` : ''}
-                                    <a href="#doc-${item.id}" class="btn btn-secondary">
-                                        <span>🔗</span> Link direto
-                                    </a>
-                                </div>
-                            `;
-                            
-                            html += `</div>`;
-                        });
-                        
-                        resultsDiv.innerHTML = html;
-                        paginationDiv.style.display = 'flex';
-                    }
-                }
-            } catch (err) {
-                resultsDiv.innerHTML = `<div class="error">❌ Erro na requisição: ${err.message}</div>`;
-            } finally {
-                btn.disabled = false;
-                loading.style.display = 'none';
-            }
-        }
+  <!-- ERROR -->
+  <div class="err-box" id="errBox"></div>
 
-        function updatePagination() {
-            document.getElementById('currentPageDisplay').textContent = currentPage;
-            document.getElementById('totalPagesDisplay').textContent = totalPages;
-            
-            document.getElementById('firstPageBtn').disabled = currentPage === 1;
-            document.getElementById('prevPageBtn').disabled = currentPage === 1;
-            document.getElementById('nextPageBtn').disabled = currentPage === totalPages;
-            document.getElementById('lastPageBtn').disabled = currentPage === totalPages;
-        }
+  <!-- STATS -->
+  <div class="stats-row" id="statsRow">
+    <div class="stat-card">
+      <div class="stat-val" id="statTotal">—</div>
+      <div class="stat-label">Total encontrado</div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-val" id="statAcordaos">—</div>
+      <div class="stat-label">Acórdãos</div>
+    </div>
+    <div class="stat-card">
+      <div class="stat-val" id="statDecisoes">—</div>
+      <div class="stat-label">Decisões</div>
+    </div>
+  </div>
 
-        function goToPage(page) {
-            if (page < 1 || page > totalPages) return;
-            doSearch(page);
-        }
+  <!-- DIVIDER -->
+  <div class="section-divider" id="secDivider">
+    <div class="div-line"></div>
+    <span class="div-label" id="divLabel">Resultados</span>
+    <div class="div-line"></div>
+  </div>
 
-        function changePageSize() {
-            if (lastQuery) {
-                doSearch(1);
-            }
-        }
+  <!-- EMPTY -->
+  <div class="empty-box" id="emptyBox">
+    <div class="empty-icon">⚖</div>
+    <p>Nenhum resultado para esta busca.</p>
+  </div>
 
-        document.getElementById('query').addEventListener('keypress', function(e) {
-            if (e.key === 'Enter') {
-                doSearch(1);
-            }
-        });
+  <!-- RESULTS -->
+  <div id="results"></div>
 
-        // Validação das checkboxes
-        document.getElementById('baseAcordaos').addEventListener('change', validateBases);
-        document.getElementById('baseDecisoes').addEventListener('change', validateBases);
+  <!-- PAGINATION -->
+  <div class="pag-wrap" id="pagWrap"></div>
 
-        function validateBases() {
-            const acordaos = document.getElementById('baseAcordaos').checked;
-            const decisoes = document.getElementById('baseDecisoes').checked;
-        }
+  <!-- FOOTER -->
+  <footer class="footer">
+    <span class="footer-brand">PARA<span>|AI</span></span>
+    <span class="footer-note">Dados: jurisprudencia.stf.jus.br · uso não-oficial</span>
+  </footer>
+
+</div><!-- /shell -->
+
+<script>
+  let curPage = 1, curQuery = '', totalRes = 0;
+  const PS = 10;
+
+  document.getElementById('query').addEventListener('keydown', e => {
+    if (e.key === 'Enter') doSearch(1);
+  });
+
+  function fmtNum(n) { return n >= 1000 ? (n/1000).toFixed(1)+'k' : String(n); }
+
+  function fmtDate(d) {
+    if (!d) return null;
+    const m = String(d).match(/(\\d{4})-(\\d{2})-(\\d{2})/);
+    return m ? m[3]+'/'+m[2]+'/'+m[1] : String(d).substring(0,10);
+  }
+
+  function trunc(t, max=420) {
+    if (!t) return '';
+    return t.length > max ? t.substring(0, max) + '…' : t;
+  }
+
+  function setVisible(id, val) {
+    const el = document.getElementById(id);
+    if (el) el.style.display = val;
+  }
+
+  async function doSearch(page) {
+    const q = document.getElementById('query').value.trim();
+    if (!q) { document.getElementById('query').focus(); return; }
+
+    const ac = document.getElementById('cbAcordaos').checked;
+    const de = document.getElementById('cbDecisoes').checked;
+    if (!ac && !de) { showErr('Selecione ao menos uma base.'); return; }
+
+    curQuery = q; curPage = page;
+
+    document.getElementById('results').innerHTML = '';
+    setVisible('loader', 'block');
+    setVisible('errBox', 'none');
+    setVisible('emptyBox', 'none');
+    document.getElementById('statsRow').style.display = 'none';
+    document.getElementById('secDivider').style.display = 'none';
+    document.getElementById('pagWrap').style.display = 'none';
+    document.getElementById('searchBtn').disabled = true;
+
+    try {
+      const params = new URLSearchParams({q, acordaos: ac, decisoes: de, page, page_size: PS});
+      const res = await fetch('/api/busca-multipla?' + params);
+      const data = await res.json();
+
+      setVisible('loader', 'none');
+      document.getElementById('searchBtn').disabled = false;
+
+      if (!res.ok || data.error) throw new Error(data.error || 'Erro ' + res.status);
+      if (!data.resultados || !data.resultados.length) {
+        setVisible('emptyBox', 'block'); return;
+      }
+
+      totalRes = data.total || data.resultados.length;
+      const totalPages = Math.ceil(totalRes / PS);
 
-        window.onload = function() {
-            document.getElementById('query').focus();
-        };
-    </script>
+      // Stats
+      document.getElementById('statTotal').textContent    = fmtNum(totalRes);
+      document.getElementById('statAcordaos').textContent = fmtNum(data.total_acordaos || 0);
+      document.getElementById('statDecisoes').textContent = fmtNum(data.total_decisoes || 0);
+      document.getElementById('statsRow').style.display   = 'grid';
+
+      // Divider
+      document.getElementById('divLabel').textContent = 'Página ' + page + ' de ' + totalPages;
+      document.getElementById('secDivider').style.display = 'flex';
+
+      // Cards
+      const container = document.getElementById('results');
+      data.resultados.forEach((item, i) => {
+        const offset = (page-1)*PS + i + 1;
+        container.appendChild(buildCard(item, offset));
+      });
+
+      // Pagination
+      buildPag(totalPages);
+
+      if (page > 1) document.getElementById('results').scrollIntoView({behavior:'smooth'});
+
+    } catch(e) {
+      setVisible('loader', 'none');
+      document.getElementById('searchBtn').disabled = false;
+      showErr(e.message);
+    }
+  }
+
+  function showErr(msg) {
+    const el = document.getElementById('errBox');
+    el.style.display = 'block';
+    el.textContent = '✕ ' + msg;
+  }
+
+  function buildCard(item, num) {
+    const tipo = item.base === 'acordaos' ? 'acordaos' : 'decisoes';
+    const label = item.base === 'acordaos' ? 'ACÓRDÃO' : 'DECISÃO';
+    const date = fmtDate(item.data);
+    const pub  = fmtDate(item.publicacao);
+
+    const div = document.createElement('div');
+    div.className = 'result-card ' + tipo;
+    div.style.animationDelay = (num % 10 * 35) + 'ms';
+
+    let meta = '';
+    if (item.processo)  meta += `<span class="meta-pill"><span class="meta-pill-icon">⚙</span>${item.processo}</span>`;
+    if (item.relator)   meta += `<span class="meta-pill"><span class="meta-pill-icon">⚖</span>${item.relator}</span>`;
+    if (item.orgao)     meta += `<span class="meta-pill"><span class="meta-pill-icon">🏛</span>${item.orgao}</span>`;
+    if (date)           meta += `<span class="meta-pill"><span class="meta-pill-icon">📅</span>${date}</span>`;
+    if (pub)            meta += `<span class="meta-pill"><span class="meta-pill-icon">📢</span>DJe ${pub}</span>`;
+
+    let fields = '';
+    if (item.ementa)
+      fields += `<div class="field-block ementa"><span class="field-label">Ementa</span><div class="field-text">${trunc(item.ementa)}</div></div>`;
+    if (item.decisao_texto)
+      fields += `<div class="field-block decisao"><span class="field-label">Decisão</span><div class="field-text">${trunc(item.decisao_texto,360)}</div></div>`;
+    if (item.acordao_ata)
+      fields += `<div class="field-block acordao"><span class="field-label">Acórdão / Ata</span><div class="field-text">${trunc(item.acordao_ata,360)}</div></div>`;
+
+    let foot = `<a class="btn-ghost" href="/documento/${encodeURIComponent(item.id)}">
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M14 2H6a2 2 0 0 0-2 2v16c0 1.1.9 2 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/>
+      </svg>
+      Ver documento
+    </a>`;
+    if (item.url_documento)
+      foot += `<a class="btn-gold" href="${item.url_documento}" target="_blank" rel="noopener">
+        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
+          <polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/>
+        </svg>
+        Inteiro teor
+      </a>`;
+
+    div.innerHTML = `
+      <div class="card-head">
+        <div class="card-title">${item.titulo || item.processo || 'Documento STF'}</div>
+        <div style="display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0">
+          <span class="tipo-tag ${tipo}"><span class="tipo-tag-dot"></span>${label}</span>
+          <span class="card-num">#${num}</span>
+        </div>
+      </div>
+      <div class="meta-row">${meta}</div>
+      ${fields}
+      <div class="card-foot">${foot}</div>`;
+
+    return div;
+  }
+
+  function buildPag(total) {
+    const pg = document.getElementById('pagWrap');
+    pg.innerHTML = '';
+    if (total <= 1) return;
+    pg.style.display = 'flex';
+
+    const btn = (lbl, page, active, disabled) => {
+      const b = document.createElement('button');
+      b.className = 'pag-btn' + (active ? ' active' : '');
+      b.textContent = lbl; b.disabled = disabled;
+      if (!disabled && !active) b.onclick = () => doSearch(page);
+      pg.appendChild(b);
+    };
+
+    btn('‹', curPage-1, false, curPage===1);
+    const s = Math.max(1, curPage-2), e = Math.min(total, curPage+2);
+    for (let p=s; p<=e; p++) btn(p, p, p===curPage, false);
+    btn('›', curPage+1, false, curPage===total);
+
+    const info = document.createElement('span');
+    info.className = 'pag-info';
+    info.textContent = curPage + ' / ' + total;
+    pg.insertBefore(info, pg.children[Math.floor(pg.children.length/2)]);
+  }
+</script>
 </body>
 </html>
 """)
 
+
 # ============================================
 # Página de detalhes do documento
 # ============================================
 @app.route('/documento/<doc_id>')
 def documento_detalhe(doc_id):
-    return render_template_string("""
-<!DOCTYPE html>
-<html>
+    return render_template_string("""<!DOCTYPE html>
+<html lang="pt-BR">
 <head>
-    <title>⚖️ PARA AI - Documento {{ doc_id }}</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <style>
-        :root {
-            --primary: #1E3A8A;
-            --secondary: #2563EB;
-            --accent: #3B82F6;
-            --background: #F8FAFC;
-            --text: #0F172A;
-            --card-bg: #FFFFFF;
-            --border: #E2E8F0;
-            --success: #10B981;
-            --warning: #F59E0B;
-            --purple: #8B5CF6;
-        }
-        
-        body { 
-            font-family: 'Inter', 'Segoe UI', Roboto, system-ui, sans-serif; 
-            max-width: 1200px; 
-            margin: 0 auto; 
-            padding: 20px; 
-            background: var(--background); 
-            color: var(--text);
-        }
-        
-        .container { 
-            background: var(--card-bg); 
-            border-radius: 24px; 
-            padding: 30px; 
-            box-shadow: 0 20px 40px rgba(0,0,0,0.05); 
-            border: 1px solid var(--border);
-        }
-        
-        .header { 
-            display: flex; 
-            justify-content: space-between; 
-            align-items: center; 
-            margin-bottom: 30px; 
-            border-bottom: 2px solid var(--border);
-            padding-bottom: 20px;
-        }
-        
-        .logo-small {
-            height: 40px;
-            width: auto;
-        }
-        
-        .back-btn { 
-            padding: 12px 24px; 
-            background: #F1F5F9; 
-            border-radius: 40px; 
-            text-decoration: none; 
-            color: var(--primary); 
-            font-weight: 500; 
-            display: inline-flex; 
-            align-items: center; 
-            gap: 8px; 
-            transition: all 0.2s;
-            border: 1px solid var(--border);
-        }
-        
-        .back-btn:hover { 
-            background: #E2E8F0; 
-            border-color: var(--secondary);
-        }
-        
-        .loading-container {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 15px;
-            padding: 60px;
-        }
-        
-        .loading { 
-            width: 50px; 
-            height: 50px; 
-            border: 4px solid rgba(30,58,138,0.2); 
-            border-top-color: var(--primary); 
-            border-radius: 50%; 
-            animation: spin 1s linear infinite; 
-        }
-        
-        @keyframes spin { 
-            to { transform: rotate(360deg); } 
-        }
-        
-        .error { 
-            color: #EF4444; 
-            background: #FEF2F2; 
-            border-left: 6px solid #EF4444; 
-            padding: 20px 25px; 
-            border-radius: 16px; 
-        }
-        
-        .doc-header { 
-            background: #F8FAFC; 
-            border-radius: 20px; 
-            padding: 25px; 
-            margin-bottom: 25px; 
-            border: 1px solid var(--border); 
-        }
-        
-        .doc-header h2 { 
-            margin-top: 0; 
-            color: var(--primary); 
-        }
-        
-        .meta { 
-            display: flex; 
-            flex-wrap: wrap; 
-            gap: 12px; 
-            margin: 20px 0; 
-        }
-        
-        .meta-item { 
-            background: #F1F5F9; 
-            padding: 8px 18px; 
-            border-radius: 40px; 
-            font-size: 14px; 
-            color: var(--text); 
-            display: flex; 
-            align-items: center; 
-            gap: 8px; 
-        }
-        
-        .campo { 
-            margin: 25px 0; 
-            padding: 25px; 
-            border-radius: 20px; 
-        }
-        
-        .ementa { 
-            background: #EFF6FF; 
-            border-left: 6px solid var(--secondary); 
-        }
-        
-        .decisao { 
-            background: #F5F3FF; 
-            border-left: 6px solid var(--purple); 
-        }
-        
-        .acordao { 
-            background: #FFFBEB; 
-            border-left: 6px solid var(--warning); 
-        }
-        
-        .campo-label { 
-            font-weight: 600; 
-            margin-bottom: 15px; 
-            display: block; 
-            font-size: 16px; 
-        }
-        
-        .campo-conteudo { 
-            font-size: 15px; 
-            line-height: 1.8; 
-            color: var(--text); 
-            white-space: pre-wrap; 
-            background: rgba(255,255,255,0.7);
-            padding: 15px;
-            border-radius: 12px;
-        }
-        
-        .url-link { 
-            margin-top: 25px; 
-            padding: 15px; 
-            background: #F8FAFC; 
-            border-radius: 12px; 
-            border: 1px solid var(--border);
-        }
-        
-        .url-link a { 
-            color: var(--secondary); 
-            text-decoration: none; 
-            display: inline-flex; 
-            align-items: center; 
-            gap: 8px; 
-            font-weight: 500; 
-            font-size: 16px;
-        }
-        
-        .url-link a:hover { 
-            text-decoration: underline; 
-        }
-        
-        .highlight { 
-            background-color: #FEF9C3; 
-            font-weight: 600; 
-            padding: 2px 4px; 
-            border-radius: 4px; 
-        }
-    </style>
+  <title>PARA AI — Documento {{ doc_id }}</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>""" + SHARED_CSS + """</style>
 </head>
 <body>
-    <div class="container">
-        <div class="header">
-            <img src="https://huggingface.co/spaces/caarleexx/paraAI_CHATBOT/resolve/main/public/logo_dark.png" 
-                 alt="PARA AI" 
-                 class="logo-small"
-                 onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
-            <div style="display: none; font-weight: 700; color: var(--primary);">⚖️ PARA AI</div>
-            <a href="/" class="back-btn">← Voltar para busca</a>
-        </div>
-        
-        <div id="loading" class="loading-container">
-            <div class="loading"></div>
-            <p style="color: var(--primary); font-weight: 500;">Carregando documento...</p>
-        </div>
-        
-        <div id="error" style="display: none;"></div>
-        <div id="documento" style="display: none;"></div>
+
+<!-- TOPBAR -->
+<nav class="topbar">
+  <a href="/" class="brand">
+    <img src="https://huggingface.co/spaces/caarleexx/paraAI_CHATBOT/resolve/main/public/logo_light.png"
+         alt="PARA AI" class="brand-logo" onerror="this.style.display='none'">
+    <div class="brand-sep"></div>
+    <span class="brand-label">Jurisprudência STF</span>
+  </a>
+  <div class="topbar-right">
+    <a href="/" class="back-link">
+      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M19 12H5M12 5l-7 7 7 7"/>
+      </svg>
+      Voltar à busca
+    </a>
+  </div>
+</nav>
+
+<div class="shell" style="padding-top:0">
+
+  <div id="loader" style="display:block">
+    <div style="padding:80px 0; text-align:center">
+      <div class="spinner"></div>
+      <div class="loader-txt">carregando documento…</div>
     </div>
+  </div>
 
-    <script>
-        const docId = "{{ doc_id }}";
-        
-        async function carregarDocumento() {
-            try {
-                const response = await fetch(`/api/documento/${docId}`);
-                const data = await response.json();
-                
-                document.getElementById('loading').style.display = 'none';
-                
-                if (data.error) {
-                    const errorDiv = document.getElementById('error');
-                    errorDiv.style.display = 'block';
-                    errorDiv.className = 'error';
-                    errorDiv.innerHTML = `❌ Erro: ${data.error}`;
-                    return;
-                }
-                
-                const item = data;
-                const docDiv = document.getElementById('documento');
-                docDiv.style.display = 'block';
-                
-                const tipo = item.base === 'acordaos' ? 'acordaos' : 'decisoes';
-                const tipoLabel = item.base === 'acordaos' ? 'Acórdão' : 'Decisão Monocrática';
-                const temEmenta = item.ementa && item.ementa.trim() !== '';
-                const temDecisao = item.decisao_texto && item.decisao_texto.trim() !== '';
-                const temAcordao = item.acordao_ata && item.acordao_ata.trim() !== '';
-                
-                let html = `
-                    <div class="doc-header">
-                        <h2>${item.titulo || item.processo || 'Documento sem título'}</h2>
-                        <div class="meta">
-                            <span class="meta-item">⚖️ ${tipoLabel}</span>
-                            ${item.relator ? `<span class="meta-item">⚖️ Relator: ${item.relator}</span>` : ''}
-                            ${item.orgao ? `<span class="meta-item">🏛️ ${item.orgao}</span>` : ''}
-                            ${item.data ? `<span class="meta-item">📅 Julgamento: ${item.data}</span>` : ''}
-                            ${item.publicacao ? `<span class="meta-item">📰 Publicação: ${item.publicacao}</span>` : ''}
-                            ${item.id ? `<span class="meta-item">🆔 ID: ${item.id}</span>` : ''}
-                            ${item.processo ? `<span class="meta-item">📋 Processo: ${item.processo}</span>` : ''}
-                        </div>
-                    </div>
-                `;
-                
-                if (temEmenta) {
-                    html += `
-                        <div class="campo ementa">
-                            <span class="campo-label">📝 Ementa</span>
-                            <div class="campo-conteudo">${item.ementa.replace(/\\n/g, '<br>').replace(/<em>/g, '<span class="highlight">').replace(/<\\/em>/g, '</span>')}</div>
-                        </div>
-                    `;
-                }
-                
-                if (temDecisao) {
-                    html += `
-                        <div class="campo decisao">
-                            <span class="campo-label">⚖️ Decisão</span>
-                            <div class="campo-conteudo">${item.decisao_texto.replace(/\\n/g, '<br>').replace(/<em>/g, '<span class="highlight">').replace(/<\\/em>/g, '</span>')}</div>
-                        </div>
-                    `;
-                }
-                
-                if (temAcordao) {
-                    html += `
-                        <div class="campo acordao">
-                            <span class="campo-label">📋 Acórdão/Ata</span>
-                            <div class="campo-conteudo">${item.acordao_ata.replace(/\\n/g, '<br>').replace(/<em>/g, '<span class="highlight">').replace(/<\\/em>/g, '</span>')}</div>
-                        </div>
-                    `;
-                }
-                
-                if (item.url_documento) {
-                    html += `
-                        <div class="url-link">
-                            <a href="${item.url_documento}" target="_blank">
-                                <span>📄</span> Ver inteiro teor completo (PDF/HTML)
-                            </a>
-                        </div>
-                    `;
-                }
-                
-                docDiv.innerHTML = html;
-                
-            } catch (err) {
-                document.getElementById('loading').style.display = 'none';
-                const errorDiv = document.getElementById('error');
-                errorDiv.style.display = 'block';
-                errorDiv.className = 'error';
-                errorDiv.innerHTML = `❌ Erro ao carregar: ${err.message}`;
-            }
-        }
-        
-        carregarDocumento();
-    </script>
+  <div class="err-box" id="errBox"></div>
+  <div id="docWrap" style="display:none"></div>
+
+  <footer class="footer">
+    <span class="footer-brand">PARA<span>|AI</span></span>
+    <span class="footer-note">Dados: jurisprudencia.stf.jus.br · uso não-oficial</span>
+  </footer>
+</div>
+
+<script>
+  const DOC_ID = "{{ doc_id }}";
+
+  function fmtDate(d) {
+    if (!d) return null;
+    const m = String(d).match(/(\\d{4})-(\\d{2})-(\\d{2})/);
+    return m ? m[3]+'/'+m[2]+'/'+m[1] : String(d).substring(0,10);
+  }
+
+  async function loadDoc() {
+    try {
+      const res  = await fetch('/api/documento/' + DOC_ID);
+      const data = await res.json();
+      document.getElementById('loader').style.display = 'none';
+
+      if (data.error) throw new Error(data.error);
+
+      const tipo   = data.base === 'acordaos' ? 'acordaos' : 'decisoes';
+      const label  = data.base === 'acordaos' ? 'Acórdão' : 'Decisão Monocrática';
+      const date   = fmtDate(data.data);
+      const pub    = fmtDate(data.publicacao);
+
+      let meta = `<span class="meta-pill">${label}</span>`;
+      if (data.relator)   meta += `<span class="meta-pill"><span class="meta-pill-icon">⚖</span>${data.relator}</span>`;
+      if (data.orgao)     meta += `<span class="meta-pill"><span class="meta-pill-icon">🏛</span>${data.orgao}</span>`;
+      if (date)           meta += `<span class="meta-pill"><span class="meta-pill-icon">📅</span>${date}</span>`;
+      if (pub)            meta += `<span class="meta-pill"><span class="meta-pill-icon">📢</span>DJe ${pub}</span>`;
+      if (data.processo)  meta += `<span class="meta-pill"><span class="meta-pill-icon">⚙</span>${data.processo}</span>`;
+
+      let fields = '';
+      if (data.ementa)
+        fields += `<div class="doc-field ementa"><span class="doc-field-label">Ementa</span><div class="doc-field-text">${data.ementa.replace(/\\n/g,'<br>')}</div></div>`;
+      if (data.decisao_texto)
+        fields += `<div class="doc-field decisao"><span class="doc-field-label">Decisão</span><div class="doc-field-text">${data.decisao_texto.replace(/\\n/g,'<br>')}</div></div>`;
+      if (data.acordao_ata)
+        fields += `<div class="doc-field acordao"><span class="doc-field-label">Acórdão / Ata</span><div class="doc-field-text">${data.acordao_ata.replace(/\\n/g,'<br>')}</div></div>`;
+
+      let teor = '';
+      if (data.url_documento)
+        teor = `<a class="inteiro-teor-link" href="${data.url_documento}" target="_blank" rel="noopener">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
+            <polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/>
+          </svg>
+          Ver inteiro teor (PDF/HTML)
+        </a>`;
+
+      document.getElementById('docWrap').style.display = 'block';
+      document.getElementById('docWrap').innerHTML = `
+        <div class="doc-header-card">
+          <div class="doc-title">${data.titulo || data.processo || 'Documento STF'}</div>
+          <div class="meta-row">${meta}</div>
+        </div>
+        ${fields}
+        ${teor}`;
+
+    } catch(e) {
+      document.getElementById('loader').style.display = 'none';
+      const el = document.getElementById('errBox');
+      el.style.display = 'block';
+      el.textContent = '✕ ' + e.message;
+    }
+  }
+
+  loadDoc();
+</script>
 </body>
 </html>
 """, doc_id=doc_id)
 
+
 # ============================================
 # API para buscar documento por ID
 # ============================================
@@ -1366,17 +1043,10 @@ def api_documento(doc_id):
         return jsonify({"error": "Não foi possível obter token"}), 503
 
     payload = {
-        "query": {
-            "ids": {
-                "values": [doc_id]
-            }
-        },
-        "_source": [
-            "id", "titulo", "ementa_texto", "decisao_texto", "acordao_ata",
-            "processo_codigo_completo", "relator_processo_nome",
-            "orgao_julgador", "julgamento_data", "publicacao_data",
-            "inteiro_teor_url", "base"
-        ],
+        "query": {"ids": {"values": [doc_id]}},
+        "_source": ["id", "titulo", "ementa_texto", "decisao_texto", "acordao_ata",
+                    "processo_codigo_completo", "relator_processo_nome",
+                    "orgao_julgador", "julgamento_data", "publicacao_data", "inteiro_teor_url", "base"],
         "size": 1
     }
 
@@ -1437,6 +1107,7 @@ def api_documento(doc_id):
     except Exception as e:
         return jsonify({"error": str(e)}), 500
 
+
 # ============================================
 # Endpoint /api/busca-multipla (retorna JSON)
 # ============================================
@@ -1450,22 +1121,17 @@ def busca_multipla():
     
     if not query:
         return jsonify({"error": "Parâmetro 'q' obrigatório"}), 400
-    
     if not busca_acordaos and not busca_decisoes:
         return jsonify({"error": "Selecione pelo menos uma base para pesquisa"}), 400
 
-    # Determinar quais bases incluir
     bases = []
-    if busca_acordaos:
-        bases.append("acordaos")
-    if busca_decisoes:
-        bases.append("decisoes")
+    if busca_acordaos: bases.append("acordaos")
+    if busca_decisoes: bases.append("decisoes")
 
     result = search_stf(query, bases, page, page_size)
     if isinstance(result, tuple):
         return jsonify(result[0]), result[1]
     
-    # Converte para o formato simplificado de saída
     hits = result.get('result', {}).get('hits', {}).get('hits', [])
     resultados = []
     total_acordaos = 0
@@ -1474,11 +1140,8 @@ def busca_multipla():
     for hit in hits:
         src = hit.get('_source', {})
         base = src.get('base', '')
-        if base == 'acordaos':
-            total_acordaos += 1
-        elif base == 'decisoes':
-            total_decisoes += 1
-            
+        if base == 'acordaos': total_acordaos += 1
+        elif base == 'decisoes': total_decisoes += 1
         item = {
             "id": src.get('id') or hit.get('_id'),
             "titulo": src.get('titulo'),
@@ -1494,21 +1157,18 @@ def busca_multipla():
             "base": base,
             "score": hit.get('_score')
         }
-        # Remove campos vazios
         item = {k: v for k, v in item.items() if v is not None}
         resultados.append(item)
 
     return jsonify({
-        "q": query,
-        "bases": bases,
-        "page": page,
-        "page_size": page_size,
+        "q": query, "bases": bases, "page": page, "page_size": page_size,
         "total": result.get('result', {}).get('hits', {}).get('total', {}).get('value', len(resultados)),
         "total_acordaos": total_acordaos,
         "total_decisoes": total_decisoes,
         "resultados": resultados
     })
 
+
 # ============================================
 # Endpoint de saúde
 # ============================================
@@ -1527,6 +1187,7 @@ def health():
         "token_cached": bool(token_cache["token"])
     })
 
+
 if __name__ == '__main__':
     try:
         import certifi
@@ -1539,4 +1200,4 @@ if __name__ == '__main__':
     logger.info("📋 Bases: acordaos e decisoes")
     logger.info("="*50)
     port = int(os.environ.get('PORT', 7860))
-    app.run(host='0.0.0.0', port=port, debug=False)
+    app.run(host='0.0.0.0', port=port, debug=False)