:root{
  --bg:#f6f4ef; --card:#ffffff; --ink:#2b2b2b; --muted:#7a7568;
  --accent:#3f51b5; --accent-soft:#e8ebfa; --line:#e2ded4;
  --tag:#f1eee5;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:Georgia,'Times New Roman',serif;
  background:var(--bg); color:var(--ink); line-height:1.5;
  padding:24px 16px 60px;
}
.wrap{max-width:1050px; margin:0 auto;}
header h1{font-size:1.7rem; margin:0 0 4px;}
header p{color:var(--muted); margin:0 0 20px; font-size:.95rem;}
header p a{color:var(--accent); text-decoration:none;}
header p a:hover{text-decoration:underline;}

/* Controlli */
.controls{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px; margin-bottom:18px;
}
.panel{
  background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:12px 14px;
}
.panel h2{
  font-size:.78rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); margin:0 0 8px;
}
.opts label{
  display:flex; align-items:center; gap:8px; padding:4px 2px;
  font-size:.9rem; cursor:pointer; border-radius:6px;
}
.opts label:hover{background:var(--accent-soft);}
.opts input{accent-color:var(--accent);}
.actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
button{
  font-family:inherit; font-size:.9rem; cursor:pointer;
  border:1px solid var(--line); background:var(--card);
  padding:7px 14px; border-radius:8px;
}
button:hover{background:var(--accent-soft); border-color:var(--accent);}
.count{color:var(--muted); font-size:.85rem; margin-left:auto;}

/* Tabella */
.tablewrap{
  background:var(--card); border:1px solid var(--line);
  border-radius:12px; overflow:auto;
}
table{border-collapse:collapse; width:100%; min-width:720px;}
thead th{
  position:sticky; top:0; background:#efeadf; z-index:2;
  text-align:left; padding:12px 12px; font-size:.82rem;
  text-transform:uppercase; letter-spacing:.04em; color:#5b5648;
  border-bottom:2px solid var(--line); cursor:pointer; user-select:none;
  white-space:nowrap;
}
thead th:hover{background:#e6e0d0;}
thead th .arrow{opacity:.45; font-size:.8em;}
thead th.active{color:var(--accent);}
thead th.active .arrow{opacity:1;}
tbody td{padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:middle;}
tbody tr:hover{background:#faf8f2;}
td.sym{font-size:1.5rem; text-align:center; width:56px;}
td.name{font-style:italic;}
.tag{
  display:inline-block; background:var(--tag); border:1px solid var(--line);
  padding:2px 9px; border-radius:20px; font-size:.82rem; white-space:nowrap;
}
.tag.muta{background:#fbeaea; border-color:#eecfcf;}
.tag.cont{background:#e8f5ec; border-color:#cbe7d4;}
.empty{text-align:center; padding:30px; color:var(--muted); font-style:italic;}
footer{margin-top:16px; color:var(--muted); font-size:.82rem;}

/* ===== HELP / TOOLTIP ===== */
.help{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:17px; height:17px;
  border:1px solid var(--line); border-radius:50%;
  font-size:.72rem; line-height:1; color:var(--muted);
  font-family:sans-serif; cursor:help; flex:none;
}
.help::after{
  content:attr(data-tip);
  position:absolute; bottom:150%; left:50%; transform:translateX(-50%);
  width:260px; white-space:normal; text-align:left;
  background:#2b2b2b; color:#fff;
  padding:10px 14px; border-radius:8px;
  font-size:0.9rem; line-height:1.5; font-family:Georgia,serif;
  opacity:0; pointer-events:none; transition:opacity .15s ease;
  z-index:50;
}
.help::before{
  content:""; position:absolute; bottom:150%; left:50%; transform:translateX(-50%);
  border:7px solid transparent; border-top-color:#2b2b2b;
  opacity:0; transition:opacity .15s ease; z-index:50;
}
.help:hover::after, .help:hover::before{opacity:1;}
/* tooltip nei filtri: spunta verso l'alto */
.opts .help::after{transform:translateX(-50%) translateY(-6px);}
.opts .help:hover::after{transform:translateX(-50%) translateY(-8px);}