:root {
  --bg: #0b0f1a;
  --surface: #11182a;
  --text: #e9eef8;
  --muted: #a2b0c6;
  --brand: #1F36A6;
  --brand-2: #1FAD6D;
  --border: #223052;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #ffffff;
    --surface: #f8fafc;
    --text: #0b1220;
    --muted: #475569;
    --brand: #1F36A6;
    --brand-2: #1FAD6D;
    --border: #e2e8f0;
  }
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif; }

.container { width:min(1100px, 92%); margin-inline:auto; }

/* Header / Nav */
.site-header { position: sticky; top:0; backdrop-filter: blur(8px); background: color-mix(in oklab, var(--bg), transparent 20%); border-bottom:1px solid var(--border); z-index:1000; }
.nav-wrap { display:flex; align-items:center; justify-content:space-between; padding: .8rem 0; }
.brand { font-weight:800; letter-spacing:.2px; color:var(--text); text-decoration:none; }
.site-nav { display:flex; }
.menu-root { list-style:none; display:flex; gap:.5rem; padding:0; margin:0; align-items:center; }
.menu-root > li > a, .menu-button { padding:.6rem .8rem; border-radius:.6rem; text-decoration:none; color:var(--text); border:0; background:transparent; cursor:pointer; font-weight:600; }
.menu-root > li > a:hover, .menu-button:hover { background:color-mix(in oklab, var(--surface), transparent 50%); }
.menu-root > li.ext > a { opacity:.9; }

.menu-dropdown { position:relative; }
.menu-dropdown .dropdown {
  position:absolute; top:100%; left:0; min-width: 220px;
  background:var(--surface); border:1px solid var(--border); border-radius:.8rem;
  padding:.4rem; margin-top:.4rem; display:none;
  box-shadow: 0 6px 22px rgba(0,0,0,.25);
}
.menu-dropdown.open .dropdown { display:block; }
.dropdown a { display:block; padding:.5rem .7rem; border-radius:.5rem; color:var(--text); text-decoration:none; }
.dropdown a:hover, .dropdown a:focus { background:color-mix(in oklab, var(--brand), white 85%); outline:none; }

.nav-toggle { display:none; flex-direction:column; gap:4px; background:transparent; border:0; }
.nav-toggle .bar { width:20px; height:2px; background:var(--text); display:block; }

@media (max-width: 820px) {
  .nav-toggle { display:flex; }
  .site-nav { display:none; position:absolute; top:56px; right:4%; left:4%; background:var(--surface); border:1px solid var(--border); border-radius: .8rem; }
  .site-nav.open { display:block; }
  .menu-root { flex-direction:column; align-items:stretch; padding:.6rem; gap:.25rem; }
  .menu-dropdown .dropdown { position:static; display:none; box-shadow:none; border:0; margin:0; padding:.3rem 0; }
  .menu-dropdown.open .dropdown { display:block; }
}

/* Main */
.hero { padding: 2rem 0 3rem; }
.hero h1 { font-size: clamp(1.8rem, 3vw, 3rem); line-height:1.15; margin:.5rem 0; }
.lead { font-size:1.1rem; color:var(--muted); max-width: none; }

.cta { display:flex; gap: .75rem; margin: 1rem 0 2rem; }
.btn {
  display:inline-block; text-decoration:none; padding:.7rem 1rem; border-radius:.8rem;
  border:1px solid var(--border); color:var(--text); background:var(--surface); font-weight:700;
}
.btn.primary { background:var(--brand); border-color: color-mix(in oklab, var(--brand), black 10%); }
.btn:hover { filter: brightness(1.05); }

.features { display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; margin-top:2rem; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:1rem; padding:1rem; }
.card-grid + .card-grid{
  margin-block-start: clamp(16px, 4vh, 20px);
}
@media (max-width: 900px) { .features { grid-template-columns: 1fr; } }

.table-area { margin:1.5rem 0; background:var(--surface); border:1px solid var(--border); border-radius:1rem; padding:1rem; }
.backlink a { color: var(--brand-2); text-decoration: none; font-weight:700; }
.backlink a:hover { text-decoration: underline; }

/* Footer */
.site-footer { border-top:1px solid var(--border); padding:1rem 0; margin-top:2rem; opacity:.9; }
.site-footer a { color: var(--brand-2); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* Focus visible */
:focus-visible { outline: 3px solid color-mix(in oklab, var(--brand), white 35%); outline-offset: 3px; border-radius:.4rem; }


/* Table + Controls */
.controls{
  display:grid;
  gap:.8rem;
  align-items:center;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:1rem;
  padding:.8rem;
  margin:1rem 0 1rem;
}
.controls__row{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
.controls__row:first-child input[type="search"]{ flex:1 1 420px; width:100%; }

/* Inputs */
.controls input[type="search"],
.controls select{
  display:block;
  width:auto;
  box-sizing:border-box;
  padding:.5rem .7rem;
  border:1px solid var(--border);
  border-radius:.6rem;
  background:transparent;
  color:var(--text);
}

/* Range control */
.controls input[type="range"]{
  width:220px;
}
.controls label.speed{ display:flex; align-items:center; gap:.4rem; }

/* Keep legacy class working */
.controls-search{ width:100%; }
.controls-search input[type="search"]{ width:100%; }
/* A linha da busca ocupa a largura total do card */
.controls-search { width: 100%; }

/* O input preenche a caixa, mas sem ultrapassar 1040px */
.controls-search input[type="search"],
.controls input[type="search"] {
  display: block;
  width: 100%;
  max-width: 4040px;     /* limite superior */
  box-sizing: border-box;/* evita “vazar” por causa de padding/borda */
  padding: .5rem .7rem;
  border: 1px solid var(--border);
  border-radius: .6rem;
  background: transparent;
  color: var(--text);
}
.big-table { width:100%; border-collapse:separate; border-spacing:0; }
.big-table th, .big-table td { border-bottom:1px solid var(--border); padding:.6rem .5rem; vertical-align:top; }
.big-table thead th { position:sticky; top:58px; background:var(--bg); z-index:5; }
.big-table code { background: color-mix(in oklab, var(--surface), white 8%); padding:.12rem .3rem; border-radius:.3rem; }
.muted { color: var(--muted); }
.speak { border:1px solid var(--border); background:var(--surface); border-radius:.4rem; padding:.2rem .4rem; cursor:pointer; margin-right:.35rem; }
.pron { font-size:.88rem; color:var(--muted); margin-top:.1rem;}
.k { font-weight:700; }

/* --- Patch: unify 'Tabelas' button font and keep dropdown open on hover --- */
.menu-root > li > a, .menu-button { font-size: 1rem; }
.menu-button { font: inherit; -webkit-appearance: none; appearance: none; }

/* Dropdown: remove hover gap so it doesn't close when movendo o mouse */
.menu-dropdown .dropdown {
  margin-top: 0;              /* remove gap */
  top: calc(100% + 6px);      /* usa espaço via top */
}

/* Também mantém aberto enquanto o mouse está sobre o container */
@media (hover: hover) {
  .menu-dropdown:hover .dropdown { display:block; }
}

/* --- Patch 02: menu visual consistency + alert card --- */
.menu-button { font: inherit; font-weight:600; padding:.6rem .8rem; border-radius:.6rem; }
.menu-dropdown .dropdown { top: 100%; margin-top: 0; }

/* Footer GitHub icon */
.site-footer .gh { display:inline-flex; align-items:center; gap:.4rem; color:var(--brand-2); text-decoration:none; margin-left:.5rem; }
.site-footer .gh:hover { text-decoration:underline; }

/* Alert card (below table) */
.alert { margin: 1rem 0; padding: .8rem 1rem; border:1px solid var(--border); border-radius:.8rem; background: color-mix(in oklab, var(--surface), white 5%); }
.alert.info { border-color: color-mix(in oklab, var(--brand), black 10%); }

/* === PATCH 15: Dark theme harmonization for table + audio buttons === */
@media (prefers-color-scheme: dark) {
  /* Zebra mais sutil e consistente */
  .table-classic tbody tr:nth-child(odd)  { background: color-mix(in oklab, var(--surface), white 4%); }
  .table-classic tbody tr:nth-child(even) { background: color-mix(in oklab, var(--surface), white 1.5%); }
  /* Hover sem "clarão" branco */
  .table-classic tbody tr:hover { background: color-mix(in oklab, var(--surface), white 8%); }

  /* Botão de áudio mais escuro e harmônico */
  .table-classic .speak {
    background: color-mix(in oklab, var(--brand), black 30%);
    border: 1px solid color-mix(in oklab, var(--brand), black 22%);
    color: var(--on-surface);
  }
  .table-classic .speak:hover {
    background: color-mix(in oklab, var(--brand), black 20%);
    filter: none;
  }

  /* Hover do item do dropdown também mais escuro */
  .dropdown a:hover, .dropdown a:focus {
    background: color-mix(in oklab, var(--brand), black 70%);
    color: var(--on-surface);
  }
}



/* Anti-overflow for tiny screens */
.controls{ overflow:hidden; }
.controls__row{ width:100%; }
.controls__row > *{ min-width:0; max-width:100%; }

.controls input[type="search"]{
  flex:1 1 16rem;
  max-width:100%;
}
.controls select{
  flex:1 1 12rem;
  max-width:100%;
}

/* Range line wraps nicely */
.controls .range-row{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.controls .range-row > *{ min-width:0; }

@media (max-width: 520px){
  .controls input[type="range"]{ width:100%; max-width:100%; }
}



/* === Controls: robust responsive layout === */
.controls{
  display:grid;
  gap:.8rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:1rem;
  padding:.8rem;
  margin:1rem 0 1rem;
}
.controls .controls__row{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:.6rem;
  align-items:center;
}
/* Search always ocupa linha inteira */
.controls input[type="search"]{
  grid-column: 1 / -1;
  width:100%;
  box-sizing:border-box;
  padding:.5rem .7rem;
  border:1px solid var(--border);
  border-radius:.6rem;
  background:transparent;
  color:var(--text);
  min-width:0;
}
/* Selects e outros inputs */
.controls select{
  width:100%;
  min-width:0;
  box-sizing:border-box;
  padding:.5rem .7rem;
  border:1px solid var(--border);
  border-radius:.6rem;
  background:transparent;
  color:var(--text);
}
/* Range ocupa coluna inteira e nunca vaza */
.controls input[type="range"]{
  grid-column: 1 / -1;
  width:100%;
  min-width:0;
}
.controls .speed-readout{ justify-self:end; }
.controls .controls__row > *{ min-width:0; max-width:100%; }



/* === Theming the native <select> dropdown panel (best effort) === */
.controls select{ color-scheme: dark; }
.controls select option,
.controls select optgroup{
  background: var(--surface);
  color: var(--text);
}
/* Focus ring harmonized */
.controls select:focus{ outline: none; box-shadow: 0 0 0 2px color-mix(in oklab, var(--primary, #6cf), transparent 60%) inset; }