.mel{--mel-ink:#101412;--mel-line:#D9D5C6;--mel-muted:#4A524D;--mel-green:#0F3D2B;--mel-soft:#F4F2EA;color:var(--mel-ink);line-height:1.4;font-size:16px}
.mel *{box-sizing:border-box}
.mel a{color:var(--mel-green);text-decoration:underline}
.mel-carregando{padding:24px;text-align:center;color:var(--mel-muted)}
.mel-card{background:#fff;border:1px solid var(--mel-line);border-radius:16px;padding:18px;margin:0 0 18px}
.mel-head{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;justify-content:space-between;background:var(--mel-soft)}
.mel-titulo{margin:0;font-size:28px;line-height:1.1;font-weight:800}
.mel-sub{margin:4px 0 0;font-weight:700}
.mel-meta{margin:6px 0 0;font-size:13px;color:var(--mel-muted)}
.mel-ctrl{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.mel-ctrl label{display:flex;flex-direction:column;font-size:12px;font-weight:700;color:var(--mel-muted);gap:4px}
.mel-sel{font:inherit;padding:9px 12px;border:1px solid var(--mel-ink);border-radius:10px;background:#fff;min-width:190px}
.mel-btn{font:inherit;font-weight:700;padding:10px 16px;border-radius:999px;border:0;background:var(--mel-green);color:#fff;cursor:pointer}
.mel-btn:hover{opacity:.9}
.mel-avisos{list-style:none;margin:0 0 18px;padding:12px 16px;background:#FFF6D6;border:1px solid #E8D48A;border-radius:12px;font-size:14px}
.mel-avisos li+li{margin-top:4px}
.mel-h{margin:0 0 12px;font-size:16px;font-weight:800;text-transform:uppercase;letter-spacing:.02em}
.mel-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.mel-stat{background:#F7F6F1;border:1px solid var(--mel-line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:2px}
.mel-stat-l{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mel-muted)}
.mel-stat strong{font-size:22px;line-height:1.1}
.mel-stat-s{font-size:13px;color:var(--mel-muted)}
.mel-cols{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.mel-cols>.mel-card{flex:1 1 380px;min-width:0;margin:0}
.mel-rank{display:flex;flex-direction:column;gap:12px}
.mel-row{display:grid;grid-template-columns:1fr;gap:4px}
.mel-name{font-weight:700}
.mel-name small{color:var(--mel-muted);font-weight:400}
.mel-badge{display:inline-block;background:var(--mel-green);color:#fff;font-size:11px;padding:1px 8px;border-radius:999px;margin-left:4px}
.mel-track{background:#ECEAE0;border-radius:999px;height:14px;overflow:hidden}
.mel-bar{height:100%;border-radius:999px;min-width:4px}
.mel-val{font-size:14px;color:var(--mel-muted)}
.mel-val strong{color:var(--mel-ink);font-size:16px}
.mel-h-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-bottom:12px}
.mel-h-row .mel-h{margin:0}
.mel-tabs{display:inline-flex;border:1px solid var(--mel-line);border-radius:999px;overflow:hidden}
.mel-tabs button{font:inherit;font-size:14px;font-weight:700;padding:6px 14px;border:0;background:#fff;cursor:pointer}
.mel-tabs button.on{background:var(--mel-ink);color:#fff}
.mel-map{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
.mel-tile{aspect-ratio:1/1;border:2px solid transparent;border-radius:8px;background:#B9B6A8;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;font:inherit;padding:0;line-height:1.1}
.mel-tile b{font-size:15px}
.mel-tile small{font-size:10px;opacity:.95}
.mel-tile.is-vazio{color:#333}
.mel-tile.is-ro{outline:3px solid var(--mel-ink);outline-offset:1px}
.mel-tile.is-sel{border-color:var(--mel-ink);box-shadow:0 0 0 2px #fff inset}
.mel-tile:focus-visible{outline:3px solid #FFB020}
.mel-leg{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:14px}
.mel-leg i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.mel-nota{margin:10px 0 0;font-size:12px;color:var(--mel-muted)}
.mel-scroll{overflow-x:auto}
.mel-tab{width:100%;border-collapse:collapse;font-size:14px}
.mel-tab th,.mel-tab td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--mel-line)}
.mel-tab th{font-size:12px;text-transform:uppercase;color:var(--mel-muted)}
.mel-vazio{color:var(--mel-muted)}
.mel-erro{border-color:#E0A5A0;background:#FFF1F0}
.mel-rodape{font-size:13px;color:var(--mel-muted);margin:18px 0 0}
@media (max-width:640px){.mel-titulo{font-size:22px}.mel-tile b{font-size:13px}.mel-tile small{display:none}.mel-stat strong{font-size:19px}}
