/* Blank text / invisible character tool — uses site-shell tokens (dark + light). */
.bt-hero .eyebrow { margin-bottom: 4px; }
.bt-methods { align-items: stretch; }
.bt-card { display: flex; flex-direction: column; gap: 12px; }
.bt-card__title { font-size: 1.12rem; margin: 0; }
.bt-card__desc { margin: 0; color: var(--glass-text-muted); font-size: .95rem; }
.bt-card .btn--block { margin-top: auto; }

.bt-preview {
  display: grid; gap: 6px; justify-items: center; width: 100%; padding: 18px; cursor: pointer;
  border: 2px dashed rgba(56, 189, 248, .45); border-radius: 14px; background: var(--control-bg);
  color: var(--glass-text-main); font: inherit;
}
.bt-preview:hover { border-color: var(--olive); background: var(--control-bg-focus); }
.bt-preview__glyph { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.8rem; color: #0284c7; padding: 4px 14px; border-radius: 8px; background: var(--glass-bg-subtle); }
html:not(.light-mode) .bt-preview__glyph { color: var(--olive); }
.bt-preview__code { font-size: .8rem; color: var(--glass-text-muted); }

.bt-manual { text-align: center; font-size: 1.2rem; resize: none; min-height: 48px; }
.bt-gen { display: grid; grid-template-columns: 96px 1fr; gap: 10px; }
@media (max-width: 380px) { .bt-gen { grid-template-columns: 1fr; } }

.bt-section { margin-top: 22px; }
.bt-test { min-height: 96px; margin: 10px 0 12px; }
.bt-meta { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; font-size: .92rem; color: var(--glass-text-muted); }
.bt-meta strong { color: var(--glass-text-main); }
.bt-meta .btn { margin-inline-start: auto; }
.bt-pill { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: .82rem; font-weight: 700; }
.bt-pill--empty { background: rgba(148,163,184,.16); color: var(--glass-text-muted); }
.bt-pill--invisible { background: rgba(16,185,129,.16); color: #047857; }
.bt-pill--text { background: rgba(59,130,246,.16); color: #1d4ed8; }
html:not(.light-mode) .bt-pill--invisible { color: #34d399; }
html:not(.light-mode) .bt-pill--text { color: #93c5fd; }

.bt-variants { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.bt-variant { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--glass-border); background: var(--glass-bg-subtle); }
.bt-variant__code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; font-size: .88rem; color: var(--accent); }
html.light-mode .bt-variant__code { color: var(--brand); }
.bt-variant__hint { font-size: .82rem; color: var(--glass-text-muted); margin-top: 2px; }

.bt-guide h2 { margin-top: 0; font-size: 1.35rem; }
.bt-guide h3 { margin: 22px 0 10px; font-size: 1.08rem; }
.bt-guide p { color: var(--glass-text-muted); }
.bt-guide p strong, .bt-uses strong { color: var(--glass-text-main); }
.bt-guide code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
.bt-uses { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.bt-use { padding: 12px 16px; border-radius: 10px; background: var(--glass-bg-subtle); border-inline-start: 3px solid var(--olive); color: var(--glass-text-muted); }
.bt-use--2 { border-inline-start-color: #10b981; }
.bt-use--3 { border-inline-start-color: var(--brand); }
.bt-use--4 { border-inline-start-color: #f59e0b; }
.bt-guide .table td { white-space: nowrap; }