@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#f4f7fb;
  --surface:#ffffff;
  --surface-soft:#f8fbff;
  --text:#13233a;
  --muted:#60708a;
  --border:#dfe7f2;
  --brand:#155eef;
  --brand-2:#0f52d8;
  --accent:#16a34a;
  --warn:#f59e0b;
  --danger:#dc2626;
  --shadow:0 10px 35px rgba(15, 23, 42, .08);
  --radius:18px;
  --font-scale:1;
  --content-width:780px;
}
body.theme-dark{
  --bg:#08101b;
  --surface:#0f1827;
  --surface-soft:#111f32;
  --text:#edf3ff;
  --muted:#a0b0cb;
  --border:#22314a;
  --brand:#60a5fa;
  --brand-2:#3b82f6;
  --accent:#22c55e;
  --warn:#fbbf24;
  --danger:#ef4444;
  --shadow:0 14px 40px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:
    radial-gradient(circle at 10% 0%, rgba(21,94,239,.08), transparent 40%),
    radial-gradient(circle at 90% 0%, rgba(34,197,94,.07), transparent 45%),
    var(--bg);
  color:var(--text);
  line-height:1.65;
  font-size: calc(16px * var(--font-scale));
  transition: background .2s ease,color .2s ease;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}
.hidden{display:none!important}

.progress-bar{
  position:fixed; top:0; left:0; height:4px; width:0%;
  background:linear-gradient(90deg,var(--brand),var(--accent));
  z-index:9999;
}
.site-header{
  position:sticky; top:0; z-index:500;
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  border-bottom:1px solid var(--border);
}
.header-inner{
  max-width:1200px; margin:0 auto; padding:10px 16px;
}
.brand-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.logo-wrap{display:flex; align-items:center; gap:10px}
.logo-badge{
  width:40px;height:40px;border-radius:12px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:#fff; display:grid; place-items:center; font-weight:800;
  box-shadow:0 10px 20px rgba(21,94,239,.25);
}
.logo-text{line-height:1.1}
.logo-text strong{display:block; font-size:15px}
.logo-text span{font-size:12px; color:var(--muted)}
.header-actions{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end;
}
.icon-btn, .pill-btn{
  border:1px solid var(--border); background:var(--surface);
  color:var(--text); border-radius:12px; padding:10px 12px; cursor:pointer;
  font:inherit; box-shadow:var(--shadow);
}
.icon-btn:hover, .pill-btn:hover{transform:translateY(-1px); text-decoration:none}
.icon-btn{display:inline-flex; align-items:center; justify-content:center; min-width:42px}
.pill-btn{display:inline-flex; align-items:center; gap:6px; font-weight:600}
.search-top{
  margin-top:10px; display:flex; gap:10px; flex-wrap:wrap;
}
.search-top input{
  flex:1; min-width:200px; border:1px solid var(--border); background:var(--surface);
  color:var(--text); border-radius:12px; padding:12px 14px; font:inherit;
}
.search-top .quick-link{
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  border-radius:999px; padding:10px 12px; font-size:13px; text-decoration:none;
}
.main-nav{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;
}
.main-nav a{
  color:var(--text); border:1px solid var(--border); background:var(--surface);
  padding:9px 12px; border-radius:999px; font-size:14px; font-weight:600;
  text-decoration:none;
}
.main-nav a.active{
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  border-color:transparent; color:#fff;
}

.page-shell{
  max-width:1200px; margin:18px auto 0; padding:0 16px 90px;
}
.hero{
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 9%, var(--surface)), var(--surface));
  border:1px solid var(--border); border-radius:24px; box-shadow:var(--shadow);
  padding:20px;
}
.hero h1{margin:0 0 10px; font-size:clamp(1.35rem, 2vw, 2rem); line-height:1.2}
.hero p{margin:0; color:var(--muted)}
.hero-grid{
  display:grid; grid-template-columns:1.25fr .75fr; gap:16px; margin-top:14px;
}
.hero-card{
  border:1px solid var(--border); background:var(--surface-soft); border-radius:16px; padding:14px;
}
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.chip{
  padding:8px 10px; border-radius:999px; border:1px solid var(--border);
  background:var(--surface); color:var(--muted); font-size:13px; font-weight:600;
}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.btn-primary,.btn-secondary,.btn-linkish{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:12px; padding:12px 14px; font-weight:700; text-decoration:none;
}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; border:none}
.btn-secondary{background:var(--surface); color:var(--text); border:1px solid var(--border)}
.btn-linkish{background:transparent; border:1px dashed var(--border); color:var(--text)}

.layout{
  display:grid; grid-template-columns:minmax(0,var(--content-width)) minmax(280px,1fr);
  gap:18px; margin-top:18px;
}
.layout.no-sidebar{grid-template-columns:minmax(0,1fr)}
.content-card, .sidebar-card, .panel, .tool-box{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.content-card{padding:18px}
.sidebar-stack{display:flex; flex-direction:column; gap:14px; position:sticky; top:132px; align-self:start}
.sidebar-card{padding:14px}
.sidebar-card h3{margin:0 0 8px; font-size:16px}
.sidebar-card p, .sidebar-card li{color:var(--muted); font-size:14px}
.sidebar-card ul{margin:8px 0 0; padding-left:18px}
.toc-list{list-style:none; padding:0; margin:8px 0 0}
.toc-list li{margin:8px 0}
.toc-list a{color:var(--text); font-size:14px}
.toc-list a:hover{color:var(--brand)}
.tools-inline{display:flex; gap:8px; flex-wrap:wrap}
.small-btn{
  border:1px solid var(--border); background:var(--surface-soft); color:var(--text);
  border-radius:10px; padding:8px 10px; cursor:pointer; font-weight:600; font-size:13px;
}

.article-header{
  border-bottom:1px solid var(--border); padding-bottom:12px; margin-bottom:14px;
}
.article-header h1{margin:0 0 8px; font-size:clamp(1.25rem, 1.8vw, 1.9rem); line-height:1.2}
.article-meta{
  display:flex; gap:8px; flex-wrap:wrap;
}
.meta-pill{
  border:1px solid var(--border); background:var(--surface-soft); color:var(--muted);
  border-radius:999px; padding:6px 10px; font-size:12px; font-weight:700;
}
.notice{
  background:color-mix(in srgb, var(--warn) 12%, var(--surface));
  border:1px solid color-mix(in srgb, var(--warn) 40%, var(--border));
  border-radius:14px; padding:12px; margin:12px 0;
}
.notice strong{display:block; margin-bottom:4px}
.disclaimer{
  background:color-mix(in srgb, var(--danger) 7%, var(--surface));
  border-left:4px solid var(--danger);
  border-radius:12px; padding:12px; margin:14px 0;
}
.callout{
  background:var(--surface-soft); border:1px solid var(--border);
  border-radius:14px; padding:14px; margin:14px 0;
}
.callout h3{margin:0 0 8px; font-size:16px}
.callout p{margin:0}
.figure-box{
  background:var(--surface-soft);
  border:1px solid var(--border); border-radius:16px; padding:12px; margin:16px 0;
}
.figure-box p{margin:0 0 10px; font-size:14px; color:var(--muted)}
.figure-box img{border-radius:12px; border:1px solid var(--border)}
.article-body h2, .article-body h3{
  scroll-margin-top:150px;
}
.article-body h2{
  margin:18px 0 10px; color:var(--text); font-size:1.1rem;
}
.article-body h3{margin:14px 0 6px; font-size:1rem}
.article-body p{margin:0 0 10px}
.article-body ul, .article-body ol{margin:0 0 12px; padding-left:20px}
.article-body li{margin:5px 0}
.article-body .badge-line{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 14px}
.badge{
  padding:6px 8px; border-radius:999px; font-size:12px; font-weight:700;
  background:color-mix(in srgb, var(--brand) 10%, var(--surface));
  border:1px solid color-mix(in srgb, var(--brand) 22%, var(--border));
}
.links-list{
  display:grid; gap:10px; margin:10px 0 0;
}
.official-link{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1px solid var(--border); background:var(--surface-soft); border-radius:12px; padding:11px 12px;
  text-decoration:none; color:var(--text);
}
.official-link span:last-child{color:var(--muted); font-size:12px}

.faq-list details{
  border:1px solid var(--border); border-radius:12px; padding:10px 12px; margin-bottom:8px;
  background:var(--surface-soft);
}
.faq-list summary{cursor:pointer; font-weight:700}
.faq-list p{margin:8px 0 0; color:var(--muted)}

.related-grid, .cards-grid, .tools-grid{
  display:grid; gap:12px;
}
.cards-grid{
  grid-template-columns:repeat(auto-fit, minmax(210px,1fr));
}
.topic-card{
  border:1px solid var(--border); background:var(--surface); border-radius:16px;
  box-shadow:var(--shadow); padding:14px;
  display:flex; flex-direction:column; gap:8px;
}
.topic-card h3{margin:0; font-size:16px}
.topic-card p{margin:0; color:var(--muted); font-size:14px}
.topic-card .topic-footer{margin-top:auto; display:flex; justify-content:space-between; align-items:center; gap:6px}
.topic-card .tag{font-size:11px; padding:5px 8px; border:1px solid var(--border); border-radius:999px; color:var(--muted)}
.topic-card a{font-weight:700; text-decoration:none}
.topic-card a:hover{text-decoration:underline}

.section-title{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin:18px 0 10px;
}
.section-title h2{margin:0; font-size:1.05rem}
.section-title p{margin:0; color:var(--muted); font-size:13px}

.quick-search{
  margin-top:12px; display:flex; gap:10px; flex-wrap:wrap;
}
.quick-search input{
  flex:1; min-width:200px;
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  border-radius:12px; padding:12px; font:inherit;
}
.quick-search .hint{font-size:12px; color:var(--muted); align-self:center}

.ad-slot{
  border:1px dashed var(--border);
  border-radius:14px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--surface-soft) 88%, transparent), var(--surface));
  min-height:100px;
  margin:16px 0;
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--muted); font-size:13px; padding:8px;
}
.ad-slot.compact{min-height:70px}
.ad-label{display:block; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}

.ad-ins{
  width:100%;
  min-height:90px;
  display:block;
}

.tool-box{padding:14px}
.tool-box h2, .tool-box h3{margin:0 0 8px}
.tool-box p{margin:0 0 10px; color:var(--muted)}
.tool-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px;
}
.field{
  display:flex; flex-direction:column; gap:6px; margin:8px 0;
}
.field label{font-size:13px; color:var(--muted); font-weight:600}
.field input, .field select, .field textarea{
  border:1px solid var(--border); background:var(--surface-soft); color:var(--text);
  border-radius:10px; padding:10px 12px; font:inherit;
}
.checkbox-list{
  display:grid; gap:6px; max-height:250px; overflow:auto; padding-right:4px;
}
.checkbox-list label{
  display:flex; align-items:flex-start; gap:8px; font-size:14px;
  border:1px solid var(--border); border-radius:10px; padding:8px; background:var(--surface-soft);
}
.checkbox-list input{margin-top:3px}
.tool-result{
  border:1px solid var(--border); background:var(--surface-soft); border-radius:12px; padding:12px; min-height:56px;
}
.tool-result strong{display:block; margin-bottom:4px}
.mini-list{margin:0; padding-left:18px}
.mini-list li{margin:4px 0; color:var(--muted)}
.toolbar{
  display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 0;
}
.toolbar button{
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  border-radius:10px; padding:9px 10px; font-weight:700; cursor:pointer;
}
.toolbar button:hover{background:var(--surface-soft)}
.saved-links{display:grid; gap:8px; margin-top:10px}
.saved-item{
  display:flex; justify-content:space-between; gap:10px; align-items:center;
  border:1px solid var(--border); border-radius:10px; padding:8px 10px; background:var(--surface-soft);
}
.saved-item a{font-weight:600; color:var(--text)}
.saved-item button{
  border:none; background:transparent; color:var(--danger); cursor:pointer; font-weight:700;
}

.filter-pills{
  display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 12px;
}
.filter-pills button{
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  border-radius:999px; padding:8px 10px; cursor:pointer; font-weight:700; font-size:13px;
}
.filter-pills button.active{
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; border-color:transparent;
}
.update-list{display:grid; gap:10px}
.update-card{
  border:1px solid var(--border); background:var(--surface-soft); border-radius:14px; padding:12px;
}
.update-card h3{margin:0 0 6px; font-size:15px}
.update-card p{margin:0 0 8px; color:var(--muted); font-size:14px}
.update-card .meta{
  display:flex; gap:8px; flex-wrap:wrap;
}
.update-card .meta span{
  font-size:11px; color:var(--muted); border:1px solid var(--border); border-radius:999px; padding:4px 8px;
}

.footer{
  border-top:1px solid var(--border);
  background:color-mix(in srgb, var(--surface) 90%, transparent);
  padding:18px 16px 90px;
}
.footer-inner{
  max-width:1200px; margin:0 auto;
}
.footer-grid{
  display:grid; grid-template-columns:2fr 1fr 1fr; gap:16px;
}
.footer h4{margin:0 0 8px; font-size:15px}
.footer p{margin:0 0 8px; color:var(--muted); font-size:14px}
.footer a{display:block; margin:6px 0; color:var(--text)}
.legal-note{
  margin-top:10px; font-size:12px; color:var(--muted);
  border-top:1px solid var(--border); padding-top:10px;
}
.mobile-bottom-nav{
  position:fixed; bottom:0; left:0; right:0; z-index:600;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  border-top:1px solid var(--border);
  display:none; grid-template-columns:repeat(5,1fr); gap:6px; padding:8px 10px;
  backdrop-filter: blur(10px);
}
.mobile-bottom-nav a{
  text-decoration:none; color:var(--text); font-size:12px; text-align:center;
  border:1px solid var(--border); border-radius:10px; padding:8px 4px;
  background:var(--surface-soft); font-weight:700;
}

.box-print{
  background:var(--surface-soft); border:1px solid var(--border); border-radius:16px; padding:12px; margin:12px 0;
}
.box-print p{margin:0 0 10px; font-size:14px; color:var(--muted)}
.box-alerta{
  background:color-mix(in srgb, var(--danger) 7%, var(--surface));
  border:1px solid color-mix(in srgb, var(--danger) 30%, var(--border));
  border-left:4px solid var(--danger);
  border-radius:14px; padding:12px; margin:14px 0;
}
.navegacao-final{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 12px; border-radius:10px; font-weight:700; text-decoration:none;
  border:1px solid var(--border); background:var(--surface-soft); color:var(--text);
}
.btn:hover{text-decoration:none; border-color:var(--brand)}
.botao-oficial a{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff; padding:12px 14px;
  border-radius:12px; font-weight:700;
}
.atualizacao, .reading-time{color:var(--muted); font-size:13px}

.back-to-top{
  position:fixed; right:14px; bottom:90px; z-index:700;
  border:none; border-radius:999px; width:44px; height:44px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff;
  box-shadow:var(--shadow); cursor:pointer; display:none; font-size:18px;
}
.back-to-top.show{display:block}

body.focus-mode .sidebar,
body.focus-mode .site-header .search-top,
body.focus-mode .site-header .main-nav{
  display:none!important;
}
body.focus-mode .page-shell{max-width:900px}
body.focus-mode .layout{grid-template-columns:1fr}
body.focus-mode .content-card{padding:20px}

@media (max-width: 980px){
  .hero-grid, .layout, .footer-grid{grid-template-columns:1fr}
  .sidebar-stack{position:static}
}
@media (max-width: 720px){
  .header-actions .label-hide{display:none}
  .mobile-bottom-nav{display:grid}
  .page-shell{padding-bottom:110px}
  .footer{padding-bottom:110px}
  .hero{padding:16px}
  .content-card{padding:14px}
  .main-nav{overflow:auto; flex-wrap:nowrap; padding-bottom:4px}
  .main-nav a{white-space:nowrap}
}