/* 特殊符號大全 */
.tool { display: flex; flex-direction: column; gap: 18px; }
.lead { margin: 0; text-align: center; color: var(--muted); }
.panel { padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }

.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tab {
  min-height: 40px; padding: 6px 14px; font: inherit; font-weight: 700; color: var(--ink); background: var(--panel);
  border: 2px solid var(--line); border-radius: 999px; cursor: pointer;
}
.tab:hover, .tab:focus-visible { border-color: var(--accent); outline: none; }
.tab.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.out { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.out input {
  flex: 1; min-width: 12rem; font: inherit; font-size: 1.5rem; padding: 8px 14px;
  border: 2px solid var(--accent); border-radius: 12px; background: var(--panel); color: var(--ink);
}
.btn-s {
  min-height: 48px; padding: 6px 16px; font: inherit; font-weight: 700; color: var(--ink); background: var(--panel);
  border: 2px solid var(--line); border-radius: 12px; cursor: pointer;
}
.btn-s:hover, .btn-s:focus-visible { border-color: var(--accent); outline: none; }
.hint { margin: 8px 0 0; color: var(--muted); font-size: .9375rem; }
.copied { color: var(--accent); font-weight: 700; }

.sym-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr)); gap: 6px; }
.sym {
  min-height: 3rem; font: inherit; font-size: 1.5rem; line-height: 1; color: var(--ink); background: var(--panel);
  border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.sym-grid.wide { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.sym-grid.wide .sym { font-size: 1.125rem; padding: 6px 4px; overflow-wrap: anywhere; }
.tab { white-space: nowrap; }
.sym:hover, .sym:focus-visible { border-color: var(--accent); background: var(--accent-soft); outline: none; }
.notes { margin: 0; padding-left: 1.25rem; color: var(--muted); }