/* Color Picker */
.color-picker-grid { display: flex; gap: 24px; flex-wrap: wrap; }
.color-picker-main { flex: 1; min-width: 280px; }
.color-picker-display { width: 100%; height: 200px; border-radius: var(--radius); border: 1px solid var(--border-color); margin-bottom: 12px; }
.color-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.color-preset {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--border-color);
  cursor: pointer; transition: transform var(--transition);
}
.color-preset:hover { transform: scale(1.15); }
.color-values { flex: 1; min-width: 200px; }
.color-value-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  padding: 8px 12px; background: var(--bg-secondary);
  border-radius: var(--radius-sm); font-family: monospace; font-size: 0.85rem;
}
.color-value-row .copy-btn { margin-left: auto; }

/* QR Generator */
.qr-preview { text-align: center; padding: 20px; }
.qr-preview canvas, .qr-preview img { max-width: 280px; }

/* Text Diff */
.diff-container { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.diff-container textarea { min-height: 200px; }
.diff-output { font-family: 'Courier New', monospace; font-size: 0.85rem; line-height: 1.5; }
.diff-added { background: #d4edda; color: #155724; }
.diff-removed { background: #f8d7da; color: #721c24; }
[data-theme="dark"] .diff-added { background: #1e3a1e; color: #8bc34a; }
[data-theme="dark"] .diff-removed { background: #3a1e1e; color: #ef9a9a; }

/* PDF Reader */
.pdf-reader-container { display: flex; flex-direction: column; align-items: center; }
.pdf-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 16px; }
.pdf-controls input[type="number"] { width: 70px; text-align: center; }
.pdf-canvas-container { border: 1px solid var(--border-color); border-radius: var(--radius); overflow: hidden; max-width: 100%; }
.pdf-canvas-container canvas { max-width: 100%; height: auto !important; }

/* PDF Editor */
.pdf-editor-toolbar {
  display: flex; gap: 8px; flex-wrap: wrap; padding: 12px;
  background: var(--bg-secondary); border-radius: var(--radius) var(--radius) 0 0;
  border: 1px solid var(--border-color); border-bottom: none;
}
.pdf-editor-canvas-wrap { border: 1px solid var(--border-color); border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; position: relative; min-height: 400px; }
.pdf-editor-canvas-wrap canvas { display: block; max-width: 100%; }

/* Image Crop */
.crop-container { text-align: center; }
.crop-container img { max-width: 100%; max-height: 500px; }

/* Unit Converter */
.unit-converter-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.unit-converter-grid .swap-btn { padding: 10px; font-size: 1.2rem; }

/* Password Generator */
.password-display {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; background: var(--bg-secondary);
  border-radius: var(--radius-sm); font-family: monospace; font-size: 1.2rem;
  border: 1px solid var(--border-color); margin-bottom: 16px;
}
.password-display input { font-size: 1.2rem; text-align: center; letter-spacing: 2px; border: none; background: transparent; color: var(--text-primary); padding: 0; }
.password-strength { height: 6px; border-radius: 3px; background: var(--border-color); margin-top: 8px; overflow: hidden; }
.password-strength-bar { height: 100%; border-radius: 3px; transition: width 0.3s, background 0.3s; }
.pw-weak { background: var(--danger); }
.pw-medium { background: var(--warning); }
.pw-strong { background: var(--success); }

/* Image Tools */
.image-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.image-preview-item { position: relative; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border-color); }
.image-preview-item img { width: 100%; height: 140px; object-fit: cover; display: block; }
.image-preview-info { padding: 8px; font-size: 0.75rem; color: var(--text-secondary); background: var(--bg-card); }

/* PDF Merge/Split */
.file-list { margin-top: 12px; }
.file-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--bg-secondary);
  border-radius: var(--radius-sm); margin-bottom: 6px;
}
.file-item .file-name { flex: 1; font-size: 0.88rem; }
.file-item .file-size { font-size: 0.78rem; color: var(--text-secondary); }
.file-item .remove-file { color: var(--danger); cursor: pointer; font-size: 1.1rem; }

/* Unit converter styles */
.unit-select-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* JSON Formatter */
.json-tree { font-family: 'Courier New', monospace; font-size: 0.85rem; line-height: 1.6; }
.json-key { color: #0451a5; }
.json-string { color: #a31515; }
.json-number { color: #098658; }
.json-boolean { color: #0000ff; }
.json-null { color: #808080; }
[data-theme="dark"] .json-key { color: #9cdcfe; }
[data-theme="dark"] .json-string { color: #ce9178; }
[data-theme="dark"] .json-number { color: #b5cea8; }
[data-theme="dark"] .json-boolean { color: #569cd6; }
[data-theme="dark"] .json-null { color: #808080; }

/* Calculator results */
.calc-result {
  padding: 16px 20px;
  background: var(--accent-light);
  border-radius: var(--radius-sm);
  text-align: center;
  margin-top: 12px;
}
.calc-result .result-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
}
.calc-result .result-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Responsive tools */
@media (max-width: 768px) {
  .diff-container { grid-template-columns: 1fr; }
  .unit-converter-grid { grid-template-columns: 1fr; }
  .unit-converter-grid .swap-btn { text-align: center; }
  .color-picker-grid { flex-direction: column; }
}