/* ========== Code Highlighter Tool ========== */
.tool-container { max-width: 1400px; margin: 0 auto; padding: 16px; }
.tool-header { text-align: center; margin-bottom: 12px; }
.tool-header h1 { font-size: 22px; font-weight: 700; color: var(--color-heading); margin-bottom: 4px; }

.settings-panel { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 12px; padding: 12px; background: var(--color-bg-card); border-radius: 10px; border: 1px solid var(--color-border); }
.setting-group { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: #fff; border-radius: 6px; border: 1px solid var(--color-border); }
.setting-group label { font-size: 13px; color: var(--color-muted); font-weight: 500; }
.setting-group select, .setting-group input[type="number"] { padding: 4px 8px; border: 1px solid var(--color-border); border-radius: 4px; font-size: 13px; background: #fff; cursor: pointer; min-width: 100px; }
.setting-group input[type="number"] { width: 60px; min-width: auto; }
.setting-checkbox { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--color-text); cursor: pointer; padding: 6px 10px; background: #fff; border-radius: 6px; border: 1px solid var(--color-border); }
.setting-checkbox input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--color-primary); cursor: pointer; }

.tool-toolbar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 12px; padding: 10px; background: var(--color-bg-card); border-radius: 10px; border: 1px solid var(--color-border); }
.tool-btn { display: inline-flex; align-items: center; gap: 4px; padding: 8px 16px; border: none; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.tool-btn-primary { background: var(--color-primary); color: #fff; }
.tool-btn-primary:hover { background: #1d4ed8; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,0.3); }
.tool-btn-secondary { background: #10b981; color: #fff; }
.tool-btn-secondary:hover { background: #059669; }
.tool-btn-outline { background: #fff; color: var(--color-text); border: 1px solid var(--color-border); }
.tool-btn-outline:hover { background: var(--color-bg-hover); border-color: var(--color-primary); }
.tool-btn-purple { background: #8b5cf6; color: #fff; }
.tool-btn-purple:hover { background: #7c3aed; }
.tool-btn-orange { background: #f59e0b; color: #fff; }
.tool-btn-orange:hover { background: #d97706; }

/* Theme selector in output panel header */
.theme-select { padding: 4px 8px; border: 1px solid var(--color-border); border-radius: 4px; font-size: 13px; background: #fff; cursor: pointer; min-width: 110px; }

.tool-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.editor-panel { background: #fff; border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; }
.editor-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--color-bg-card); border-bottom: 1px solid var(--color-border); }
.editor-panel-header h3 { font-size: 13px; font-weight: 600; color: var(--color-heading); }
.editor-panel-header .panel-actions { display: flex; gap: 6px; align-items: center; }
.panel-btn { padding: 4px 10px; font-size: 12px; border: 1px solid var(--color-border); border-radius: 4px; background: #fff; color: var(--color-text); cursor: pointer; }
.panel-btn:hover { background: var(--color-bg-hover); border-color: var(--color-primary); }
.panel-btn-copy { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.panel-btn-copy:hover { background: #1d4ed8; }
.editor-panel textarea { width: 100%; height: 500px; padding: 14px; border: none; font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-size: 14px; line-height: 1.6; resize: vertical; background: #f8fafc; color: #2d3748; }
.editor-panel textarea:focus { outline: none; }
.editor-panel textarea::placeholder { color: #a0aec0; }

.code-container { display: flex; height: 500px; overflow: auto; background: var(--code-bg, #fdf6e3); }
.line-numbers { padding: 14px 10px; text-align: right; font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-size: 14px; line-height: 1.6; user-select: none; min-width: 45px; background: var(--ln-bg, #eee8d5); color: var(--ln-fg, #93a1a1); border-right: 1px solid var(--code-border, #e4ddc8); }
.line-numbers.hidden { display: none; }
.line-numbers span { display: block; }
.code-content { flex: 1; padding: 14px; font-family: 'Consolas', 'Monaco', 'Courier New', monospace; font-size: 14px; line-height: 1.6; white-space: pre; overflow-x: auto; color: var(--code-fg, #657b83); }
.code-content.wrap { white-space: pre-wrap; word-break: break-all; }

.file-upload { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--color-bg-card); border: 1px dashed var(--color-border); border-radius: 6px; margin-bottom: 12px; cursor: pointer; }
.file-upload:hover { border-color: var(--color-primary); background: var(--color-bg-active); }
.file-upload.dragover { border-color: var(--color-primary); background: #eff6ff; }
.file-upload input[type="file"] { display: none; }
.file-upload-icon { font-size: 20px; color: var(--color-primary); }
.file-upload-text { font-size: 13px; color: var(--color-text); }
.file-upload-text span { color: var(--color-primary); font-weight: 600; }

.stats-bar { display: flex; flex-wrap: wrap; gap: 12px; padding: 10px 14px; background: var(--color-bg-card); border-radius: 6px; border: 1px solid var(--color-border); margin-bottom: 10px; font-size: 13px; align-items: center; }
.stats-bar .stat-item { display: flex; align-items: center; gap: 4px; }
.stats-bar .stat-label { color: var(--color-muted); }
.stats-bar .stat-value { font-weight: 600; font-family: 'Consolas', 'Monaco', 'Courier New', monospace; }

/* Prism code output - inherit from prism-solarizedlight theme */
.code-content pre { margin: 0; padding: 0; background: transparent; }
.code-content code { display: block; padding: 0; background: transparent; font-family: inherit; font-size: inherit; line-height: inherit; }