:root {
      --cream:     #f6f1eb;
      --parchment: #ede5d8;
      --gold:      #c8a96e;
      --gold-dark: #9a7840;
      --ink:       #1e1a14;
      --ink-soft:  #4a4237;
      --rust:      #8b3a2a;
      --sage:      #4a6741;
      --blue-deep: #1e3350;
      --border:    rgba(200,169,110,.25);
      --shadow:    0 4px 32px rgba(30,26,20,.12);
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; overflow-x: hidden; height: 100%; }
    body { background: var(--cream); color: var(--ink); font-family: 'Lato', sans-serif; font-weight: 300; min-height: 100vh; overflow-x: hidden; }
    /* No desktop, quando não há resultados, evita scroll desnecessário */
    body:not(.search-mode) { overflow-y: hidden; }
    @media (max-width: 768px) { body:not(.search-mode) { overflow-y: auto; } }
    body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E"); pointer-events: none; z-index: 0; }

    /* ─── RADIO BAR ─── */
    #radio-bar { position: sticky; top: 0; z-index: 100; background: var(--blue-deep); border-bottom: 2px solid var(--gold); padding: 0 16px; height: 52px; display: flex; align-items: center; gap: 10px; box-shadow: 0 2px 20px rgba(0,0,0,.35); overflow: hidden; width: 100%; }
    .radio-label { font-family: 'Cormorant Garamond', serif; font-size: 13px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); white-space: nowrap; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

    /* Badge AO VIVO */
    #radio-live-badge { display: none; align-items: center; gap: 6px; background: #dc2626; border-radius: 4px; padding: 3px 10px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; white-space: nowrap; box-shadow: 0 0 0 0 rgba(220,38,38,.7); animation: livePulse 2s ease-out infinite; }
    #radio-live-badge.visible { display: flex; }
    #radio-live-badge .live-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; }
    @keyframes livePulse { 0%{box-shadow:0 0 0 0 rgba(220,38,38,.7)} 70%{box-shadow:0 0 0 8px rgba(220,38,38,0)} 100%{box-shadow:0 0 0 0 rgba(220,38,38,0)} }

    .radio-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: pulse 1.8s ease-in-out infinite; }
    @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)} }
    .radio-dot.paused { animation: none; opacity: .3; }
    .radio-btn { background: none; border: 1px solid var(--gold); border-radius: 4px; color: var(--gold); padding: 6px 14px; font-size: 12px; font-family: 'Lato', sans-serif; letter-spacing: .06em; cursor: pointer; transition: background .2s, color .2s; white-space: nowrap; flex-shrink: 0; }
    .radio-btn:hover { background: var(--gold); color: var(--blue-deep); }
    #radio-title { flex: 1; min-width: 0; color: rgba(232,220,200,.7); font-size: 12px; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #volume-wrap { display: flex; align-items: center; gap: 6px; color: rgba(200,169,110,.7); font-size: 14px; flex-shrink: 0; }
    #vol-slider {
      -webkit-appearance: none;
      appearance: none; /* ✅ CORRIGIDO: adicionado padrão */
      width: 70px; height: 3px; background: rgba(200,169,110,.3); border-radius: 2px; outline: none; cursor: pointer;
    }
    #vol-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none; /* ✅ CORRIGIDO: adicionado padrão */
      width: 13px; height: 13px; border-radius: 50%; background: var(--gold); cursor: pointer;
    }
    #radio-audio { display: none; }

    /* Radio bar: telas pequenas — esconde título e comprime volume */
    @media (max-width: 480px) {
      #radio-bar { padding: 0 12px; gap: 8px; }
      #radio-title { display: none; }
      #vol-slider { width: 52px; }
      .radio-btn { padding: 5px 10px; font-size: 11px; }
      .radio-label { font-size: 11px; letter-spacing: .06em; }
    }

    /* ─── CENTRALIZAÇÃO VERTICAL NA HOME (telas grandes) ─── */
    @media (min-width: 769px) {
      body:not(.search-mode) {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
      }
      body:not(.search-mode) #hero {
        margin-top: auto;
        padding-top: 24px !important;
      }
      body:not(.search-mode) #home-tagline {
        margin-bottom: auto;
      }
    }

        /* ─── HERO ─── */
    #hero { position: relative; z-index: 1; padding: 52px 16px 36px; text-align: center; transition: padding .4s; }
    #hero::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 120px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
    .hero-eyebrow { font-size: 10px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 16px; opacity: 0; animation: fadeUp .8s .1s forwards; transition: all .4s; }
    .hero-title { font-family: 'Cormorant Garamond', serif; font-size: clamp(44px,9vw,104px); font-weight: 300; line-height: .95; color: var(--ink); letter-spacing: -.01em; opacity: 0; animation: fadeUp .9s .2s forwards; cursor: default; transition: font-size .4s; }
    .hero-title em { font-style: italic; color: var(--gold-dark); }
    .hero-sub { margin-top: 20px; font-size: 14px; letter-spacing: .08em; color: var(--ink-soft); opacity: 0; animation: fadeUp .9s .35s forwards; transition: all .4s; }
    @keyframes fadeUp { from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)} }

    body.search-mode #hero { padding: 20px 16px 18px; }
    body.search-mode .hero-title { font-size: clamp(26px,5vw,48px); }
    body.search-mode #logo-home { cursor: pointer; }
    body.search-mode #logo-home:hover em { color: var(--gold); opacity: .75; }
    body.search-mode { overflow-y: auto; }
    body.search-mode .hero-eyebrow, body.search-mode .hero-sub { opacity: 0 !important; height: 0; margin: 0; overflow: hidden; }

    /* ─── SEARCH SECTION ─── */
    #search-section { position: relative; z-index: 1; max-width: 720px; margin: 32px auto 0; padding: 0 20px; opacity: 0; animation: fadeUp .9s .5s forwards; transition: margin .4s; }
    body.search-mode #search-section { margin-top: 0; }

    /* Search wrap: lado a lado no desktop, empilhado no mobile */
    .search-wrap { display: grid; grid-template-columns: 1fr auto; box-shadow: var(--shadow), 0 0 0 1px var(--border); border-radius: 8px; overflow: hidden; }
    #search-input { padding: 16px 18px; font-family: 'Cormorant Garamond', serif; font-size: 20px; font-weight: 300; border: none; background: #fff; color: var(--ink); outline: none; width: 100%; min-width: 0; }
    #search-input::placeholder { color: rgba(74,66,55,.35); font-style: italic; }
    #search-btn { padding: 16px 24px; background: var(--gold-dark); border: none; color: #fff; font-family: 'Lato', sans-serif; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background .2s; white-space: nowrap; }
    #search-btn:hover { background: var(--rust); }

    @media (max-width: 380px) {
      #search-section { padding: 0 14px; }
      .search-wrap { grid-template-columns: 1fr; }
      #search-input { padding: 14px 14px; font-size: 17px; }
      #search-btn { padding: 13px 14px; font-size: 12px; width: 100%; }
    }

    /* Controles abaixo da busca */
    .search-controls { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }

    /* Seletor de idioma */
    .lang-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
    .lang-btn { padding: 5px 12px; border: 1px solid var(--border); border-radius: 20px; background: transparent; color: var(--ink-soft); font-family: 'Lato', sans-serif; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: all .2s; white-space: nowrap; }
    .lang-btn:hover { border-color: var(--gold); color: var(--gold-dark); }
    .lang-btn.active { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }

    @media (max-width: 540px) {
      .search-controls { flex-direction: column; align-items: flex-start; gap: 10px; }
      .lang-tabs { gap: 5px; }
      .lang-btn { padding: 5px 10px; font-size: 10.5px; }
    }

    @media (max-width: 380px) {
      .lang-btn { padding: 4px 8px; font-size: 10px; }
    }

    /* Toggle IA */
    .ai-toggle-label { display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .06em; color: var(--ink-soft); cursor: pointer; user-select: none; }
    .toggle-switch { position: relative; width: 40px; height: 22px; }
    .toggle-switch input { display: none; }
    .toggle-track { position: absolute; inset: 0; background: var(--parchment); border: 1px solid var(--border); border-radius: 11px; transition: background .2s; }
    .toggle-thumb { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink-soft); transition: transform .2s, background .2s; }
    .toggle-switch input:checked ~ .toggle-track { background: var(--sage); }
    .toggle-switch input:checked ~ .toggle-thumb { transform: translateX(18px); background: #fff; }

    /* ─── HOME TAGLINE ─── */
    #home-tagline { position: relative; z-index: 1; max-width: 560px; margin: 40px auto 0; padding: 0 24px; text-align: center; opacity: 0; animation: fadeUp .9s .7s forwards; }
    body.search-mode #home-tagline { display: none; }
    .tagline-verse { font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 300; font-style: italic; line-height: 1.7; color: var(--ink-soft); }
    .tagline-ref { display: block; margin-top: 10px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dark); opacity: .7; }
    .tagline-divider { margin: 36px auto; width: 60px; height: 1px; background: var(--border); }

    .footer-inline { display: flex; align-items: center; justify-content: center; gap: 10px; }
    .footer-inline a { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; opacity: .4; transition: opacity .2s, color .2s; }
    .footer-inline a:hover { opacity: .8; color: var(--gold-dark); }
    .footer-inline span { color: var(--ink-soft); opacity: .25; font-size: 10px; }
    .footer-copy-inline { margin-top: 10px; font-size: 10px; letter-spacing: .07em; color: var(--ink-soft); opacity: .25; }

    /* ─── RESULTS PAGE ─── */
    #results-page { display: none; max-width: 760px; margin: 0 auto; padding: 0 20px 80px; }
    #results-page.visible { display: block; }

    #results-topbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 20px 0 14px; }

    /* Filtros de tipo */
    #type-filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
    .tf-btn { padding: 5px 14px; border: 1px solid var(--border); border-radius: 20px; background: transparent; color: var(--ink-soft); font-family: 'Lato', sans-serif; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: all .2s; }
    .tf-btn:hover, .tf-btn.active { background: var(--gold-dark); border-color: var(--gold-dark); color: #fff; }

    /* Indicador de idioma */
    #lang-indicator { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-soft); letter-spacing: .06em; }
    .lang-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue-deep); opacity: .5; }

    #query-stats { font-size: 12px; color: var(--ink-soft); letter-spacing: .04em; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
    #query-stats strong { color: var(--gold-dark); }

    /* ─── AI BLOCK ─── */
    #ai-block { display: none; margin-bottom: 32px; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--border); animation: fadeUp .4s forwards; }
    .ai-block-header { background: var(--blue-deep); padding: 12px 20px; display: flex; align-items: center; gap: 10px; }
    .ai-spark { font-size: 16px; }
    .ai-label { font-family: 'Lato', sans-serif; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); flex: 1; }
    .ai-model-tag { font-size: 10px; color: rgba(200,169,110,.55); letter-spacing: .06em; }
    .ai-block-body { background: rgba(255,255,255,.95); padding: 24px 24px 20px; }
    #ai-loader { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-soft); letter-spacing: .04em; }
    #ai-loader.hidden { display: none; }
    .ai-spinner { width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--gold); border-radius: 50%; animation: spin .7s linear infinite; flex-shrink: 0; }
    @keyframes spin { to{transform:rotate(360deg)} }
    #ai-summary { font-family: 'Cormorant Garamond', serif; font-size: 19px; font-weight: 300; line-height: 1.7; color: var(--ink); white-space: pre-wrap; }
    #ai-summary.streaming::after { content: '▍'; display: inline-block; animation: blink .6s step-end infinite; color: var(--gold); margin-left: 2px; }
    @keyframes blink { 50%{opacity:0} }
    #ai-full { display: none; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); font-family: 'Cormorant Garamond', serif; font-size: 18px; font-weight: 300; line-height: 1.7; color: var(--ink); white-space: pre-wrap; animation: fadeUp .35s forwards; }
    #ai-full.visible { display: block; }
    #ai-expand-btn { margin-top: 16px; display: none; align-items: center; gap: 8px; background: none; border: 1px solid var(--border); border-radius: 6px; padding: 8px 18px; font-family: 'Lato', sans-serif; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-dark); cursor: pointer; transition: all .2s; }
    #ai-expand-btn.visible { display: flex; }
    #ai-expand-btn:hover { background: var(--gold-dark); color: #fff; border-color: var(--gold-dark); }
    #ai-sources { margin-top: 14px; display: none; flex-wrap: wrap; gap: 8px; align-items: center; }
    #ai-sources.visible { display: flex; }
    .ai-source-label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); opacity: .6; }
    .ai-source-tag { font-size: 11px; padding: 3px 10px; border-radius: 20px; background: var(--parchment); color: var(--ink-soft); border: 1px solid var(--border); }

    .ai-source-book { background: rgba(74,103,65,.10); border-color: rgba(74,103,65,.3); color: var(--sage); font-weight: 400; }
    .ai-source-url { background: rgba(30,51,80,.07); border-color: rgba(30,51,80,.2); max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ai-source-url a { color: var(--blue-deep); text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ai-source-url a:hover { color: var(--rust); text-decoration: underline; }

    /* ─── RESULT ITEMS ─── */
    .results-label { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-dark); margin: 8px 0 14px; display: flex; align-items: center; gap: 10px; }
    .results-label::after { content: ''; flex: 1; height: 1px; background: var(--border); }

    /* Card com fundo branco, borda sutil, hover com sombra */
    .result-item {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 16px 18px;
      margin-bottom: 10px;
      display: flex;
      gap: 14px;
      align-items: flex-start;
      animation: fadeUp .4s both;
      transition: box-shadow .18s, border-color .18s;
      cursor: pointer;
    }
    .result-item:hover { box-shadow: 0 4px 20px rgba(30,26,20,.09); border-color: rgba(200,169,110,.5); }
    .result-item:last-child { margin-bottom: 0; }

    /* Barra de score — lado esquerdo do card */
    .result-score-bar { width: 3px; min-height: 52px; border-radius: 3px; background: var(--gold); opacity: .45; flex-shrink: 0; align-self: stretch; }
    .result-score-bar.score-high   { opacity: 1; background: var(--gold-dark); }
    .result-score-bar.score-medium { opacity: .65; }
    .result-score-bar.score-low    { opacity: .25; }

    .result-body { flex: 1; min-width: 0; }

    /* Linha de origem: "Nome do Site · dominio.com.br" */
    .result-url {
      font-size: 11.5px;
      color: var(--sage);
      letter-spacing: .02em;
      margin-bottom: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-family: 'Lato', sans-serif;
      font-weight: 400;
      display: flex;
      align-items: center;
      gap: 5px;
    }
    .result-site-name { color: var(--gold-dark); font-weight: 700; flex-shrink: 0; }
    .result-url-sep { opacity: .35; flex-shrink: 0; font-size: 10px; }
    .result-domain { color: var(--sage); opacity: .75; overflow: hidden; text-overflow: ellipsis; }

    /* Ícone de tipo antes do domínio */
    .result-type-icon { font-size: 10px; opacity: .5; flex-shrink: 0; margin-right: 1px; }

    .result-lang-flag { display: inline-block; margin-right: 5px; font-size: 10px; padding: 1px 6px; border-radius: 3px; background: var(--parchment); color: var(--ink-soft); border: 1px solid var(--border); vertical-align: middle; font-family: 'Lato', sans-serif; }

    /* Título clicável */
    .result-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 19px;
      font-weight: 400;
      color: var(--blue-deep);
      text-decoration: none;
      line-height: 1.25;
      display: block;
      margin-bottom: 7px;
      transition: color .15s;
      letter-spacing: -.01em;
    }
    .result-title:hover { color: var(--rust); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(139,58,42,.3); }

    /* Descrição */
    .result-desc {
      font-size: 13.5px;
      line-height: 1.62;
      color: var(--ink-soft);
      font-family: 'Lato', sans-serif;
      font-weight: 300;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      line-clamp: 3; /* ✅ CORRIGIDO: adicionado padrão */
      overflow: hidden;
    }
    .result-desc mark { background: rgba(200,169,110,.22); color: var(--ink); border-radius: 2px; padding: 0 1px; font-weight: 700; }
    /* Highlight no título: sem fundo, apenas bold + cor de destaque */
    .result-title mark { background: transparent; color: var(--blue-deep); font-weight: 700; border-radius: 0; padding: 0; font-style: normal; }

    /* Meta row: badges + data */
    .result-meta { margin-top: 9px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
    .result-tag { font-size: 10px; padding: 2px 9px; border-radius: 20px; background: var(--parchment); color: var(--ink-soft); letter-spacing: .04em; border: 1px solid var(--border); font-family: 'Lato', sans-serif; font-weight: 400; }
    .result-tag.type-youtube { background: rgba(200,0,0,.07); color: #900; border-color: rgba(200,0,0,.15); }
    .result-tag.type-book    { background: rgba(30,51,80,.07); color: var(--blue-deep); border-color: rgba(30,51,80,.15); }
    .result-tag.tag-site     { background: rgba(74,103,65,.07); color: var(--sage); border-color: rgba(74,103,65,.2); }

    /* Thumbnail para YouTube */
    .result-thumb { width: 88px; height: 58px; object-fit: cover; border-radius: 6px; flex-shrink: 0; opacity: .92; }

    #no-results { display: none; padding: 28px 0; font-size: 14px; color: var(--ink-soft); font-style: italic; text-align: center; }
    #no-results.visible { display: block; }

    /* ─── GLOBAL MOBILE ADJUSTMENTS ─── */
    @media (max-width: 420px) {
      .result-item { padding: 12px 12px; gap: 10px; }
      .result-thumb { width: 68px; height: 46px; }
      .result-title { font-size: 17px; }
      .result-desc { font-size: 13px; }
      #home-tagline { padding: 0 14px; }
      .ai-block-body { padding: 14px 14px 12px; }
      #ai-summary { font-size: 17px; }
      #results-page { padding: 0 14px 80px; }
    }