:root{
  --bg:#0b0f14; --panel:#121821; --muted:#7a8aa0; --text:#e8f0ff; --good:#1f9d55; --bad:#b91c1c; --warn:#d97706; --accent:#3b82f6;
}
*{box-sizing:border-box}
.controls{display:flex; gap:10px; flex-wrap:wrap; margin:16px 0 10px}
input[type="text"]{flex:1; min-width:240px; background:#0f1623; border:1px solid #243044; color:var(--text); padding:12px 14px; border-radius:12px; font-size:16px}
button{background:var(--accent); border:none; color:white; padding:12px 14px; border-radius:12px; font-weight:600; cursor:pointer}
.sub{background:#1f2937}
.table-wrap{max-height:600px; overflow:auto; border:1px solid #1e293b; border-radius:12px}
table{width:100%; border-collapse:collapse}
thead th{position:sticky; top:0; background:#0f1623; border-bottom:1px solid #1e293b; padding:8px; font-size:12px; color:#cbd5e1; text-align:left}
tbody td{border-bottom:1px solid #172033; padding:8px; font-size:13px}
.good{background:rgba(31,157,85,.2)}
.bad{background:rgba(185,28,28,.25)}
.warn{background:rgba(217,119,6,.25)}
.card{background:var(--panel); border:1px solid #1e293b; border-radius:12px; padding:12px; margin-top:12px}
.card h3{margin:0 0 8px; font-size:14px; color:#cbd5e1}
.grid{display:flex; gap:6px; flex-wrap:wrap}
.tile{display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:6px; border:1px solid #223047; background:#0f1623; font-size:18px}
.tile.good{background:#14532d; border-color:#1f9d55}
/* Overlay de parabéns */
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; padding:24px; z-index:50}
.overlay.hidden{display:none}
.dialog{background:#0f1623; color:var(--text); border:1px solid #1f2937; border-radius:16px; max-width:560px; width:100%; padding:20px}
.dialog h2{margin:0 0 8px; font-size:20px}
.dialog p{margin:6px 0 0; color:#cbd5e1}
.actions{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}
.btn{background:var(--accent); border:none; color:white; padding:10px 14px; border-radius:10px; font-weight:600; cursor:pointer}
.btn.secondary{background:#1f2937}
    .tile {
      display: inline-flex;
      align-items: center;
      height: 28px;
      padding: 0 10px;
      border-radius: 6px;
      border: 1px solid #223047;
      background: #0f1623;
      font-size: 16px;
      white-space: nowrap;
    }
    .tile.good {
      background: #14532d;
      border-color: #1f9d55;
      width: 100px;
    }
    .level-selector label {
      font-size: 13px;
      color: var(--muted);
      margin-left: auto;
    }
    .level-selector select {
      background: #1f2937;
      color: var(--text);
      border: 1px solid #243044;
      border-radius: 8px;
      padding: 4px 8px;
      font-size: 13px;
    }
    .controls input[type="text"]{
        flex-grow: 1;
        flex-basis: 150px;
    }
    .controls {
        align-items: center;
    }
    /* NOVO: Estilo para os botões de sugestão */
    .suggestion-tile {
      background: #1f2937;
      border: 1px solid #243044;
      color: var(--text);
      padding: 4px 10px;
      border-radius: 8px;
      font-size: 18px;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    .suggestion-tile:hover {
      background: #374151;
    }