/* Tone card picker: large visual choices with expandable extended/custom tones. */
.tone-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  justify-content:stretch;
  align-items:stretch;
}
.tone-card{
  min-height:116px;
  border:1px solid #344151;
  background:linear-gradient(180deg,#121a24,#0f161f);
  color:#d9e3ed;
  border-radius:18px;
  padding:14px 12px;
  text-align:center;
  cursor:pointer;
  transition:transform .16s,border-color .16s,background .16s,box-shadow .16s;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
}
.tone-card:hover{border-color:#50637a;transform:translateY(-2px)}
.tone-card.selected{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(66,232,245,.09),0 10px 28px rgba(0,0,0,.18);background:linear-gradient(180deg,#142532,#11202a);transform:translateY(-1px)}
.tone-card strong{display:block;font-size:16px;line-height:1.1}
.tone-card small{display:block;color:var(--muted);font-size:10px;line-height:1.3;max-width:132px}
.tone-icon{font-size:25px;line-height:1;filter:saturate(.9)}
.tone-card.more-tone-card{border-style:dashed;background:#0c131b}
.tone-card.more-tone-card .tone-icon{font-size:28px;color:var(--cyan)}
.tone-extra-panel{
  margin:12px auto 0;
  max-width:760px;
  border:1px dashed #334052;
  border-radius:16px;
  background:#0b1118;
  padding:12px;
}
.tone-extra-panel[hidden]{display:none}
.tone-extra-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.tone-extra-grid .tone-card{min-height:96px;border-radius:15px;padding:10px 8px}
.tone-extra-grid .tone-card strong{font-size:14px}
.tone-extra-grid .tone-card small{font-size:9px}
.tone-custom-row{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:12px}
.tone-custom-row input{
  width:100%;background:#090e14;border:1px solid #334052;color:white;border-radius:12px;padding:11px 12px;outline:none;
}
.tone-custom-row input:focus{border-color:#4a6c86;box-shadow:0 0 0 3px rgba(66,232,245,.08)}
.tone-selected-note{text-align:center;color:#7f90a3;font-size:10px;margin-top:8px;min-height:14px}
@media(max-width:820px){
  .tone-grid,.tone-extra-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:620px){
  .tone-grid,.tone-extra-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tone-card{min-height:108px;padding:12px 8px}
  .tone-card strong{font-size:15px}
  .tone-icon{font-size:23px}
}
@media(max-width:420px){
  .tone-grid,.tone-extra-grid{gap:7px}
  .tone-card{min-height:102px;border-radius:15px}
  .tone-card small{font-size:9px}
  .tone-custom-row{grid-template-columns:1fr}
  .tone-custom-row .secondary{width:100%}
}