#token-counter .tc-input {min-height: 260px; font-family: inherit; line-height: 1.65;}
.tc-scope, .tc-note {margin-top: 12px; line-height: 1.6;}
#token-counter .tc-metrics {grid-template-columns: repeat(4, minmax(0, 1fr));}
#token-counter .tc-primary {background: var(--site-accent-soft);}
#token-counter .tc-primary .tool-metric-value {color: var(--site-accent); font-size: 30px;}
.tc-section {margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--site-border);}
.tc-heading {font-weight: 700; color: var(--site-text); font-size: 16px;}
.tc-preview-heading {display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;}
.tc-symbols {min-height: 46px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;}
.tc-symbols input {width: 18px; height: 18px; flex-shrink: 0;}
.tc-preview {margin-top: 12px; padding: 16px; min-height: 100px; max-height: 360px; overflow: auto; border: 1px solid var(--site-border); border-radius: 6px; line-height: 2; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--site-surface); font-family: ui-monospace, monospace;}
.tc-empty {color: var(--site-muted); font-family: inherit;}
.tc-token {border-radius: 3px; padding: 2px 1px; box-decoration-break: clone; -webkit-box-decoration-break: clone;}
.tc-color-0 {background: #dbeafe; color: #172554;}
.tc-color-1 {background: #fce7f3; color: #500724;}
.tc-color-2 {background: #dcfce7; color: #052e16;}
.tc-color-3 {background: #fef3c7; color: #451a03;}
.tc-color-4 {background: #ede9fe; color: #2e1065;}
html[data-theme="dark"] .tc-color-0 {background: #1e3a5f; color: #dbeafe;}
html[data-theme="dark"] .tc-color-1 {background: #59213f; color: #fce7f3;}
html[data-theme="dark"] .tc-color-2 {background: #164332; color: #dcfce7;}
html[data-theme="dark"] .tc-color-3 {background: #54421e; color: #fef3c7;}
html[data-theme="dark"] .tc-color-4 {background: #3b2d60; color: #ede9fe;}
.tc-byte-details {margin-top: 16px; color: var(--site-muted); font-size: 13px;}
.tc-byte-details summary {cursor: pointer; min-height: 46px; padding-block: 12px;}
.tc-byte-details ol {max-height: 300px; overflow: auto; overflow-wrap: anywhere; font-family: ui-monospace, monospace; line-height: 1.8; padding: 12px; background: var(--site-surface-muted); border-radius: 6px;}
#token-counter [hidden] {display: none;}
.tc-copy {display: grid; gap: 28px;}
.tc-copy > p {margin: 0;}
.tc-copy .tc-faq {max-width: 84ch; min-width: 0;}
.tc-copy .tc-faq > h2 {margin: 0 0 16px;}
.tc-faq-list {display: grid; gap: 24px;}
.tc-faq-item {min-width: 0;}
.tc-copy .tc-faq-item h3 {margin: 0 0 8px;}
.tc-copy .tc-faq-item p {margin: 0;}
@media (max-width: 700px) {
    #token-counter .tc-metrics {grid-template-columns: repeat(2, minmax(0, 1fr));}
    #token-counter .tc-input {min-height: 220px;}
    .tc-faq-list {gap: 20px;}
}