/* ======================================================
   MD9.top - 在线工具箱自定义样式
   Tailwind CSS CDN 补充
   ====================================================== */

/* ---- 侧边栏导航激活状态 ---- */
.nav-item.active {
  background-color: #EFF6FF;
  color: #2563EB;
  font-weight: 500;
}

/* ---- 按钮组件 ---- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  background-color: #2563EB;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.btn-primary:hover  { background-color: #1D4ED8; }
.btn-primary:active { background-color: #1E40AF; }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  background-color: #F3F4F6;
  border: 1px solid #E5E7EB;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.15s;
  white-space: nowrap;
}
.btn-secondary:hover  { background-color: #E5E7EB; }
.btn-secondary:active { background-color: #D1D5DB; }

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #2563EB;
  background-color: transparent;
  border: 1px solid #BFDBFE;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.btn-outline:hover  { background-color: #EFF6FF; border-color: #93C5FD; }

.btn-xs-outline {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #2563EB;
  background-color: transparent;
  border: 1px solid #BFDBFE;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-xs-outline:hover { background-color: #EFF6FF; }

/* ---- MD5 / 单选类型按钮 ---- */
.type-radio {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.875rem;
  font-size: 0.8125rem;
  color: #6B7280;
  background-color: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 0.5rem;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s;
}
.type-radio:hover      { border-color: #93C5FD; color: #2563EB; background-color: #EFF6FF; }
.type-radio.active     { border-color: #2563EB; color: #2563EB; background-color: #EFF6FF; font-weight: 500; }

/* ---- Toast 颜色 ---- */
#md9-toast.toast-ok   { background-color: #10B981; }
#md9-toast.toast-warn { background-color: #F59E0B; }
#md9-toast.toast-err  { background-color: #EF4444; }
#md9-toast.toast-info { background-color: #3B82F6; }

/* ---- 自定义滚动条 ---- */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }

/* ---- 代码 / 输出区 pre ---- */
pre {
  word-break: break-all;
  white-space: pre-wrap;
}

/* ---- 工具卡片图标区动态颜色补充（Tailwind JIT 动态类保障） ---- */
.bg-blue-50   { background-color: #EFF6FF; }
.bg-red-50    { background-color: #FEF2F2; }
.bg-green-50  { background-color: #F0FDF4; }
.bg-yellow-50 { background-color: #FEFCE8; }
.bg-purple-50 { background-color: #FAF5FF; }
.bg-indigo-50 { background-color: #EEF2FF; }
.bg-blue-100   { background-color: #DBEAFE; }
.bg-red-100    { background-color: #FEE2E2; }
.bg-green-100  { background-color: #DCFCE7; }
.bg-yellow-100 { background-color: #FEF9C3; }
.bg-purple-100 { background-color: #F3E8FF; }
.bg-indigo-100 { background-color: #E0E7FF; }

/* ---- 二维码工具组件 ---- */
.qr-type-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.35rem 0.875rem;
  font-size: 0.8125rem;
  color: #6B7280;
  background-color: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
  white-space: nowrap;
}
.qr-type-btn:hover { border-color: #A5B4FC; color: #4F46E5; background-color: #EEF2FF; }
.qr-type-btn.active { border-color: #4F46E5; color: #4F46E5; background-color: #EEF2FF; font-weight: 500; }

.qr-size-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6B7280;
  background-color: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.15s;
}
.qr-size-btn:hover  { border-color: #A5B4FC; color: #4F46E5; background-color: #EEF2FF; }
.qr-size-btn.active { border-color: #4F46E5; color: #4F46E5; background-color: #EEF2FF; font-weight: 700; }

.qr-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  border: 1px solid #E5E7EB;
  border-radius: 0.5rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.qr-input:focus {
  border-color: #818CF8;
  box-shadow: 0 0 0 3px rgba(129,140,248,0.15);
}