.HTMLEncoderTool-module__vsyViW__root{gap:var(--space-4);flex-direction:column;display:flex}.HTMLEncoderTool-module__vsyViW__tabs{border-bottom:1px solid var(--border);display:flex}.HTMLEncoderTool-module__vsyViW__tab{padding:var(--space-2) var(--space-5);cursor:pointer;color:var(--text-muted);transition:all var(--transition-fast);background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px;font-size:.875rem;font-weight:500}.HTMLEncoderTool-module__vsyViW__tab:hover{color:var(--text)}.HTMLEncoderTool-module__vsyViW__tabActive{color:var(--primary-text);border-bottom-color:var(--primary)}.HTMLEncoderTool-module__vsyViW__options{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.HTMLEncoderTool-module__vsyViW__optLabel{color:var(--text);font-size:.875rem;font-weight:600}.HTMLEncoderTool-module__vsyViW__optBtn{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-md);cursor:pointer;color:var(--text-muted);transition:all var(--transition-fast);font-size:.875rem;font-weight:500;display:flex}.HTMLEncoderTool-module__vsyViW__optBtn:hover{border-color:var(--primary)}.HTMLEncoderTool-module__vsyViW__optActive{border-color:var(--primary);background:var(--primary-light);color:var(--primary-text)}.HTMLEncoderTool-module__vsyViW__optDesc{color:var(--text-subtle);font-size:.75rem;font-weight:400}.HTMLEncoderTool-module__vsyViW__examples{align-items:center;gap:var(--space-2);padding-top:var(--space-1);flex-wrap:wrap;display:flex}.HTMLEncoderTool-module__vsyViW__exLabel{color:var(--text-subtle);flex-shrink:0;font-size:.8rem;font-weight:500}.HTMLEncoderTool-module__vsyViW__exBtn{padding:var(--space-1) var(--space-3);cursor:pointer;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-full);color:var(--text-muted);font-size:.75rem;font-family:var(--font-mono);transition:all var(--transition-fast);text-overflow:ellipsis;white-space:nowrap;max-width:220px;overflow:hidden}.HTMLEncoderTool-module__vsyViW__exBtn:hover{background:var(--primary-light);color:var(--primary-text);border-color:var(--primary)}.HTMLEncoderTool-module__vsyViW__layout{gap:var(--space-4);grid-template-columns:1fr 1fr;min-height:300px;display:grid}.HTMLEncoderTool-module__vsyViW__pane{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-lg);flex-direction:column;display:flex;overflow:hidden}.HTMLEncoderTool-module__vsyViW__paneHeader{align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-4);background:var(--bg-alt);border-bottom:1px solid var(--border);flex-shrink:0;display:flex}.HTMLEncoderTool-module__vsyViW__paneTitle{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.8rem;font-weight:600}.HTMLEncoderTool-module__vsyViW__countBadge{background:var(--primary-light);color:var(--primary-text);border-radius:var(--radius-full);padding:2px 8px;font-size:.75rem;font-weight:500}.HTMLEncoderTool-module__vsyViW__copyBtn{padding:var(--space-1) var(--space-3);background:var(--primary-light);border:1px solid var(--primary);border-radius:var(--radius-sm);color:var(--primary-text);cursor:pointer;transition:all var(--transition-fast);margin-left:auto;font-size:.75rem;font-weight:500}.HTMLEncoderTool-module__vsyViW__copyBtn:hover{background:var(--primary);color:#fff}.HTMLEncoderTool-module__vsyViW__textarea{padding:var(--space-4);font-family:var(--font-mono);color:var(--text);resize:none;background:0 0;border:none;outline:none;flex:1;font-size:.875rem;line-height:1.65}.HTMLEncoderTool-module__vsyViW__output{padding:var(--space-4);font-family:var(--font-mono);color:var(--text);white-space:pre-wrap;word-break:break-all;flex:1;margin:0;font-size:.875rem;line-height:1.65;overflow:auto}.HTMLEncoderTool-module__vsyViW__placeholder{color:var(--text-subtle);font-style:italic}.HTMLEncoderTool-module__vsyViW__refCard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4)}.HTMLEncoderTool-module__vsyViW__refTitle{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:var(--space-3);font-size:.75rem;font-weight:700}.HTMLEncoderTool-module__vsyViW__refGrid{gap:var(--space-2);grid-template-columns:repeat(auto-fill,minmax(100px,1fr));display:grid}.HTMLEncoderTool-module__vsyViW__refItem{padding:var(--space-2);background:var(--bg-alt);border:1px solid var(--border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);flex-direction:column;align-items:center;gap:2px;display:flex}.HTMLEncoderTool-module__vsyViW__refItem:hover{background:var(--primary-light);border-color:var(--primary)}.HTMLEncoderTool-module__vsyViW__refChar{color:var(--text);font-size:1.1rem;font-weight:600}.HTMLEncoderTool-module__vsyViW__refEntity{font-family:var(--font-mono);color:var(--text-muted);font-size:.65rem}@media (max-width:700px){.HTMLEncoderTool-module__vsyViW__layout{grid-template-columns:1fr}.HTMLEncoderTool-module__vsyViW__options{align-items:flex-start;gap:var(--space-2);margin-bottom:var(--space-2);flex-direction:column}.HTMLEncoderTool-module__vsyViW__optBtn{justify-content:flex-start;width:100%}.HTMLEncoderTool-module__vsyViW__examples{align-items:flex-start;gap:var(--space-2);padding-top:var(--space-2);border-top:1px dashed var(--border);flex-direction:column}.HTMLEncoderTool-module__vsyViW__exBtn{text-align:left;width:100%;max-width:100%}}