.token-counter-demo{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);margin:var(--spacing-lg) 0}.token-counter-demo-header{margin-bottom:var(--spacing-md)}.token-counter-demo-header h3{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin:0 0 var(--spacing-xs);color:var(--color-text)}.token-counter-demo-header p{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}.token-counter-demo-textarea{width:100%;min-height:200px;padding:var(--spacing-md);background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font-size:var(--font-size-sm);font-family:var(--font-family-mono);line-height:1.7;resize:vertical;transition:all var(--transition-fast)}.token-counter-demo-textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-alpha-10)}.token-counter-demo-textarea::placeholder{color:var(--color-text-secondary);opacity:.6}.token-counter-demo-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--spacing-md);margin:var(--spacing-lg) 0}.token-counter-stat{text-align:center;padding:var(--spacing-md);background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:all var(--transition-fast)}.token-counter-stat:hover{border-color:var(--color-primary);box-shadow:var(--shadow-sm)}.token-counter-stat-value{font-size:2rem;font-weight:var(--font-weight-semibold);color:var(--color-primary);line-height:1;margin-bottom:var(--spacing-xs)}.token-counter-stat-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text);margin-bottom:.25rem}.token-counter-stat-desc{font-size:var(--font-size-xs);color:var(--color-text-secondary)}.token-counter-demo-footer{text-align:center;padding-top:var(--spacing-lg);border-top:1px solid var(--color-border);margin-top:var(--spacing-lg)}.token-counter-demo-footer p{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0 0 var(--spacing-md)}.token-counter-demo-cta{padding:var(--spacing-sm) var(--spacing-lg);background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);cursor:pointer;transition:all var(--transition-fast);display:inline-flex;align-items:center;gap:var(--spacing-xs)}.token-counter-demo-cta:hover{background:var(--color-primary-hover);box-shadow:var(--shadow-sm)}.token-counter-demo-cta:focus{outline:2px solid var(--color-primary);outline-offset:2px}@media(max-width:768px){.token-counter-demo-stats{grid-template-columns:repeat(2,1fr)}.token-counter-stat-value{font-size:1.5rem}}