:root{
  --navy:#0F2744;
  --navy-deep:#081625;
  --petrol:#123B47;
  --gold:#C7A34A;
  --gold-light:#E4C878;
  --white:#FFFFFF;
  --mist:#F7F6F2;
  --ink:#1C2430;
  --ink-soft:#5B6472;
  --line: rgba(199,163,74,.28);
  --radius: 18px;

  --bg-1: var(--navy-deep);
  --bg-grad-1: rgba(199,163,74,.10);
  --bg-grad-2: rgba(18,59,71,.5);
  --text-main: var(--white);
  --text-soft: rgba(255,255,255,.68);
  --text-faint: rgba(255,255,255,.4);
  --card-bg-1: rgba(255,255,255,.06);
  --card-bg-2: rgba(255,255,255,.02);
  --input-bg: rgba(255,255,255,.05);
  --surface: rgba(255,255,255,.05);
}

[data-theme="light"]{
  --bg-1: var(--mist);
  --bg-grad-1: rgba(199,163,74,.14);
  --bg-grad-2: rgba(18,59,71,.06);
  --text-main: var(--ink);
  --text-soft: var(--ink-soft);
  --text-faint: rgba(28,36,48,.45);
  --card-bg-1: rgba(15,39,68,.04);
  --card-bg-2: rgba(15,39,68,.01);
  --input-bg: rgba(15,39,68,.04);
  --surface: rgba(15,39,68,.04);
  --line: rgba(15,39,68,.14);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter', sans-serif;
  color:var(--text-main);
  background:
    radial-gradient(1200px 600px at 15% -10%, var(--bg-grad-1), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, var(--bg-grad-2), transparent 55%),
    var(--bg-1);
  min-height:100vh;
  line-height:1.5;
  padding:20px 16px 90px;
  transition:background .3s ease, color .3s ease;
}
h1,h2,h3{font-family:'Playfair Display', serif; font-weight:700; color:var(--text-main); letter-spacing:.2px;}
a{color:inherit;}
.wrap{max-width:1000px; margin:0 auto;}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between;
  padding:10px 4px 14px; margin-bottom:8px; backdrop-filter:blur(10px);
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand img{width:30px; height:30px; border-radius:8px;}
.brand span{font-family:'Poppins'; font-size:.82rem; font-weight:600; color:var(--text-main); letter-spacing:.02em;}
.topbar-actions{display:flex; gap:8px;}
/* Cartão fixo de instalação (estilo "Manifestador") */
.install-card{
  display:flex; align-items:center; gap:14px; margin:6px 0 22px;
  background:linear-gradient(155deg, var(--card-bg-1), var(--card-bg-2));
  border:1px solid var(--line); border-radius:16px; padding:14px 16px;
  animation:install-pop .35s ease;
}
.install-card[hidden]{display:none;}
.install-card-icon{
  width:38px; height:38px; min-width:38px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--gold-light), var(--gold)); color:var(--navy-deep);
  font-family:'Playfair Display', serif; font-weight:700; font-size:1.1rem;
}
.install-card-text{display:flex; flex-direction:column; flex:1; min-width:0;}
.install-card-text strong{font-family:'Poppins'; font-size:.85rem; color:var(--text-main); font-weight:600;}
.install-card-text span{font-size:.76rem; color:var(--text-soft);}
.install-card-btn{
  font-family:'Poppins'; font-size:.78rem; font-weight:600; padding:9px 16px; border-radius:999px; border:none; cursor:pointer;
  background:linear-gradient(135deg, var(--gold-light), var(--gold)); color:var(--navy-deep); white-space:nowrap;
}
.install-card-close{
  background:none; border:none; color:var(--text-faint); font-size:.9rem; cursor:pointer; padding:4px 6px; line-height:1;
}
.install-card-close:hover{color:var(--text-main);}
.install-howto{
  background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 16px; margin:-8px 0 22px;
  font-size:.8rem; color:var(--text-soft); line-height:1.7;
}
.install-howto[hidden]{display:none;}
@keyframes install-pop{ from{ transform:scale(.92); opacity:0; } to{ transform:scale(1); opacity:1; } }

.icon-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--surface);
  color:var(--text-main); display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:border-color .2s ease, background .2s ease;
}
.icon-btn:hover, .icon-btn:focus-visible{border-color:var(--gold); outline:none;}
.icon-btn svg{width:17px; height:17px;}

header.hero{text-align:center; margin:20px 0 30px;}
.eyebrow{
  font-family:'Poppins', sans-serif; font-size:.72rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold-light); font-weight:600; display:block; margin-bottom:12px;
}
h1{font-size:clamp(1.7rem, 4vw, 2.5rem); margin-bottom:8px;}
.subtitle{font-family:'Cormorant Garamond', serif; font-style:italic; color:var(--text-soft); font-size:1.1rem; max-width:520px; margin:0 auto;}

/* Controls */
.controls{display:flex; flex-direction:column; gap:14px; margin-bottom:28px;}
.search-box{position:relative;}
.search-box input{
  width:100%; padding:16px 46px 16px 46px; border-radius:999px; border:1px solid var(--line);
  background:var(--input-bg); color:var(--text-main); font-family:'Inter'; font-size:.95rem;
  outline:none; transition:border-color .2s ease, background .2s ease;
}
.search-box input::placeholder{color:var(--text-faint);}
.search-box input:focus{border-color:var(--gold); background:var(--surface);}
.search-box svg.search-icon{position:absolute; left:18px; top:50%; transform:translateY(-50%); width:16px; height:16px; opacity:.55; pointer-events:none;}
.clear-btn{
  position:absolute; right:8px; top:50%; transform:translateY(-50%); border:none; background:none;
  color:var(--text-soft); width:30px; height:30px; border-radius:50%; cursor:pointer; display:none;
  align-items:center; justify-content:center; font-size:1.1rem;
}
.clear-btn.show{display:flex;}
.clear-btn:hover{background:var(--surface);}

/* Autocomplete */
.autocomplete{
  position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--navy-deep); border:1px solid var(--line);
  border-radius:14px; overflow:hidden; z-index:50; box-shadow:0 20px 40px rgba(0,0,0,.35); display:none;
}
[data-theme="light"] .autocomplete{background:var(--white);}
.autocomplete.show{display:block;}
.autocomplete-item{
  padding:11px 18px; font-size:.86rem; color:var(--text-main); cursor:pointer; display:flex; justify-content:space-between; gap:10px;
  border-bottom:1px solid var(--line);
}
.autocomplete-item:last-child{border-bottom:none;}
.autocomplete-item:hover, .autocomplete-item.active{background:var(--surface);}
.autocomplete-item small{color:var(--gold-light); font-family:'Poppins'; font-weight:600; white-space:nowrap;}

.chips{display:flex; flex-wrap:wrap; gap:9px;}
.chip{
  font-family:'Poppins', sans-serif; font-size:.74rem; font-weight:500; letter-spacing:.02em;
  padding:8px 16px; border-radius:999px; border:1px solid var(--line); color:var(--text-soft);
  background:transparent; cursor:pointer; transition:all .2s ease; white-space:nowrap;
}
.chip:hover{border-color:var(--gold);}
.chip.active{background:linear-gradient(135deg, var(--gold-light), var(--gold)); color:var(--navy-deep); border-color:transparent; font-weight:600;}

/* quick sections: history / trending */
.quick-row{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:.78rem; color:var(--text-faint); margin-bottom:2px;}
.quick-row .tag-btn{
  background:var(--surface); border:1px solid var(--line); color:var(--text-soft); padding:5px 12px; border-radius:999px;
  cursor:pointer; font-size:.74rem;
}
.quick-row .tag-btn:hover{border-color:var(--gold);}

.section-label{font-family:'Poppins'; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-light); font-weight:600; margin:24px 0 12px;}

/* Grid & Cards */
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:16px;}
.card{
  background:linear-gradient(155deg, var(--card-bg-1), var(--card-bg-2));
  border:1px solid var(--line); border-radius:var(--radius); padding:20px 18px;
  cursor:pointer; transition:transform .25s ease, border-color .25s ease, background .25s ease;
  position:relative; overflow:hidden;
}
.card::before{
  content:""; position:absolute; inset:0; opacity:0;
  background:radial-gradient(300px 120px at 20% 0%, rgba(199,163,74,.18), transparent 70%);
  transition:opacity .3s ease;
}
.card:hover{transform:translateY(-3px); border-color:var(--gold);}
.card:hover::before{opacity:1;}
.card.open{background:linear-gradient(155deg, rgba(199,163,74,.14), var(--card-bg-2)); border-color:var(--gold);}
.card:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}

.card-top{display:flex; justify-content:space-between; align-items:flex-start; position:relative; z-index:1; gap:8px;}
.cat-tag{
  font-family:'Poppins'; font-size:.62rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--gold-light); font-weight:600;
}
.fav-btn{
  background:none; border:none; cursor:pointer; font-size:1rem; color:var(--text-faint);
  transition:color .2s ease, transform .2s ease; line-height:1; padding:2px;
}
.fav-btn.active{color:var(--gold-light); transform:scale(1.15);}

.code-number{
  font-family:'Playfair Display', serif; font-weight:700; font-size:1.35rem; color:var(--text-main);
  margin:12px 0 6px; letter-spacing:.02em; position:relative; z-index:1; word-break:break-word;
}
.code-label{font-family:'Inter'; font-size:.82rem; color:var(--text-soft); position:relative; z-index:1;}
.card-detail{max-height:0; overflow:hidden; transition:max-height .35s ease, margin-top .35s ease; position:relative; z-index:1;}
.card.open .card-detail{max-height:600px; margin-top:12px;}
.card-detail p{font-size:.8rem; color:var(--text-soft); border-top:1px solid var(--line); padding-top:10px; margin-bottom:10px;}
.card-detail .meta-line{font-size:.72rem; color:var(--text-faint); margin-bottom:10px;}
.card-actions{display:flex; flex-wrap:wrap; gap:8px;}
.copy-btn, .open-btn{
  font-family:'Poppins'; font-size:.7rem; font-weight:600; letter-spacing:.02em;
  border:none; border-radius:999px; padding:8px 14px; cursor:pointer;
}
.copy-btn{color:var(--navy-deep); background:linear-gradient(135deg, var(--gold-light), var(--gold));}
.open-btn{color:var(--text-main); background:var(--surface); border:1px solid var(--line);}

.empty{text-align:center; color:var(--text-faint); font-family:'Cormorant Garamond'; font-style:italic; font-size:1.1rem; padding:50px 0; grid-column:1/-1;}

.disclaimer{max-width:640px; margin:44px auto 0; text-align:center; font-size:.75rem; color:var(--text-faint); line-height:1.7; border-top:1px solid var(--line); padding-top:22px;}

.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--white); color:var(--navy-deep); font-family:'Poppins'; font-size:.8rem; font-weight:600;
  padding:12px 22px; border-radius:999px; opacity:0; pointer-events:none; transition:all .3s ease;
  box-shadow:0 12px 30px rgba(0,0,0,.35); z-index:100;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ---- Detail page (single code view) ---- */
.detail-view{max-width:640px; margin:0 auto;}
.back-link{
  display:inline-flex; align-items:center; gap:6px; font-family:'Poppins'; font-size:.78rem; color:var(--text-soft);
  text-decoration:none; margin-bottom:22px; cursor:pointer; background:none; border:none;
}
.back-link:hover{color:var(--gold-light);}
.detail-card{
  background:linear-gradient(155deg, var(--card-bg-1), var(--card-bg-2)); border:1px solid var(--line);
  border-radius:24px; padding:32px 26px;
}
.detail-card .cat-tag{font-size:.68rem;}
.detail-code{font-family:'Playfair Display', serif; font-weight:700; font-size:2rem; color:var(--text-main); margin:16px 0 8px; word-break:break-word;}
.detail-label{font-size:1rem; color:var(--text-soft); margin-bottom:18px;}
.detail-desc{font-size:.9rem; line-height:1.7; color:var(--text-soft); border-top:1px solid var(--line); padding-top:16px; margin-bottom:16px;}
.detail-obs{font-size:.8rem; color:var(--text-faint); font-style:italic; margin-bottom:20px;}
.detail-meta{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px;}
.meta-pill{font-size:.7rem; padding:5px 12px; border-radius:999px; background:var(--surface); border:1px solid var(--line); color:var(--text-soft);}
.detail-actions{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px;}
.big-btn{
  font-family:'Poppins'; font-size:.8rem; font-weight:600; padding:12px 20px; border-radius:999px; cursor:pointer; border:1px solid var(--line);
  background:var(--surface); color:var(--text-main); display:flex; align-items:center; gap:8px;
}
.big-btn.primary{background:linear-gradient(135deg, var(--gold-light), var(--gold)); color:var(--navy-deep); border-color:transparent;}
.share-row{display:flex; flex-wrap:wrap; gap:10px;}
.share-btn{
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:var(--surface); color:var(--text-main); cursor:pointer; text-decoration:none;
}
.share-btn:hover{border-color:var(--gold);}
.share-btn svg{width:18px; height:18px;}

.related-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:12px; margin-top:14px;}

@media (prefers-reduced-motion: reduce){ *{transition:none !important; scroll-behavior:auto !important;} }
@media (min-width:640px){ body{padding:40px 24px 90px;} }