/* ============================================
   QuickKit Tools — Shared Stylesheet
   Palette: Electric Blue #378ADD
   ============================================ */

:root {
  --qk-primary:      #378ADD;
  --qk-primary-dark: #185FA5;
  --qk-text-dark:    #0C447C;
  --qk-bg:           #F8FAFC;
  --qk-bg-white:     #ffffff;
  --qk-border:       #B5D4F4;
  --qk-border-light: #E6F1FB;
  --qk-muted:        #5F5E5A;
  --qk-radius:       10px;
  --qk-radius-sm:    6px;
}

/* --- Tool container --- */
.qk-tool {
  background: var(--qk-bg-white);
  border: 1px solid var(--qk-border);
  border-radius: var(--qk-radius);
  padding: 24px;
  margin: 24px 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* --- Labels --- */
.qk-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--qk-muted);
  margin-bottom: 6px;
}

/* --- Textareas & inputs --- */
.qk-textarea {
  width: 100%;
  min-height: 180px;
  padding: 12px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  line-height: 1.6;
  border: 1px solid var(--qk-border);
  border-radius: var(--qk-radius-sm);
  background: var(--qk-bg);
  color: #2C2C2A;
  resize: vertical;
  box-sizing: border-box;
  transition: border-color 0.15s;
}

.qk-textarea:focus {
  outline: none;
  border-color: var(--qk-primary);
}

.qk-textarea[readonly] {
  background: #F0F7FF;
  color: var(--qk-text-dark);
}

/* --- Two-column grid --- */
.qk-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

@media (max-width: 640px) {
  .qk-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* --- Button group --- */
.qk-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* --- Buttons --- */
.qk-btn {
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--qk-radius-sm);
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
}

.qk-btn-primary {
  background: var(--qk-primary-dark);
  color: #ffffff;
}

.qk-btn-primary:hover {
  background: var(--qk-text-dark);
  color: #ffffff;
}

.qk-btn-secondary {
  background: var(--qk-bg-white);
  color: var(--qk-primary);
  border: 1px solid var(--qk-border);
}

.qk-btn-secondary:hover {
  background: var(--qk-border-light);
}

.qk-btn-ghost {
  background: transparent;
  color: var(--qk-muted);
  border: 1px solid var(--qk-border);
}

.qk-btn-ghost:hover {
  color: #2C2C2A;
  background: var(--qk-bg);
}

/* --- Status badge --- */
.qk-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.qk-badge-success {
  background: #EAF3DE;
  color: #3B6D11;
}

.qk-badge-error {
  background: #FCEBEB;
  color: #A32D2D;
}

/* --- Status bar --- */
.qk-status {
  margin-top: 12px;
  font-size: 13px;
  min-height: 22px;
  color: var(--qk-muted);
}

/* --- Error message --- */
.qk-error {
  color: #A32D2D;
  font-size: 13px;
}

/* --- Copy feedback --- */
.qk-copied {
  color: #3B6D11;
  font-size: 12px;
  margin-left: 8px;
  opacity: 0;
  transition: opacity 0.2s;
}

.qk-copied.show {
  opacity: 1;
}