/* ==========================================
 * BouIndexedDB CSS Styles
 * ���ïǶ��kq 
 * ========================================== */

/* ������� */
@keyframes slideIn {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* ��û�� */
.success-message {
  position: fixed !important;
  top: 100px !important;
  right: 20px !important;
  z-index: 99999 !important;
  min-width: 300px;
  padding: 16px 20px;
  border-radius: 8px;
  border: 3px solid var(--lego-green, #00a550);
  background: var(--background-white, #ffffff);
  color: var(--text-dark, #2c3e50);
  box-shadow:
    0 6px 0 rgba(0, 165, 80, 0.3),
    0 10px 20px rgba(0, 165, 80, 0.2);
  animation: slideIn 0.3s ease-out;
  font-weight: 500;
}

/* ��û��n���
�	 */
.success-message::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 20px;
  width: 8px;
  height: 8px;
  background: var(--lego-green, #00a550);
  border-radius: 2px;
  box-shadow:
    18px 0 0 var(--lego-green, #00a550),
    36px 0 0 var(--lego-green, #00a550);
}

/* ��û������ */
.success-message i {
  color: var(--lego-green, #00a550);
  font-size: 1.2em;
  vertical-align: middle;
}

/* ����û�� */
.error-message {
  position: fixed !important;
  top: 100px !important;
  right: 20px !important;
  z-index: 99999 !important;
  min-width: 300px;
  padding: 16px 20px;
  border-radius: 8px;
  border: 3px solid var(--lego-red, #d01012);
  background: var(--background-white, #ffffff);
  color: var(--text-dark, #2c3e50);
  box-shadow:
    0 6px 0 rgba(208, 16, 18, 0.3),
    0 10px 20px rgba(208, 16, 18, 0.2);
  animation: slideIn 0.3s ease-out, pulse 2s ease-in-out infinite;
  font-weight: 500;
}

/* ����û��n���
�	 */
.error-message::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 20px;
  width: 8px;
  height: 8px;
  background: var(--lego-red, #d01012);
  border-radius: 2px;
  box-shadow:
    18px 0 0 var(--lego-red, #d01012),
    36px 0 0 var(--lego-red, #d01012);
}

/* ����û������ */
.error-message i {
  color: var(--lego-red, #d01012);
  font-size: 1.2em;
  vertical-align: middle;
}

/* ������/�����ܿ���� */
.bou-export-import-buttons {
  text-align: center;
  margin: 2rem 0;
  padding: 1rem;
  background: var(--background, #fef9e7);
  border-radius: 8px;
  border: 2px solid var(--border, #f39c12);
}

/* ܿ�q���� */
.bou-export-import-buttons .btn {
  margin: 0.5rem;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
  position: relative;
  border: 2px solid;
}

/* ������ܿ� */
.bou-export-import-buttons .btn-outline-primary {
  border-color: var(--lego-blue, #0055bf);
  color: var(--lego-blue, #0055bf);
  background: var(--background-white, #ffffff);
}

.bou-export-import-buttons .btn-outline-primary:hover {
  background: var(--lego-blue, #0055bf);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(0, 85, 191, 0.3);
}

/* �����ܿ� */
.bou-export-import-buttons .btn-outline-info {
  border-color: var(--lego-purple, #9b59d0);
  color: var(--lego-purple, #9b59d0);
  background: var(--background-white, #ffffff);
}

.bou-export-import-buttons .btn-outline-info:hover {
  background: var(--lego-purple, #9b59d0);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(155, 89, 208, 0.3);
}

/* ����ܿ� */
.bou-export-import-buttons .btn-success {
  border-color: var(--lego-green, #00a550);
  color: white;
  background: var(--lego-green, #00a550);
}

.bou-export-import-buttons .btn-success:hover {
  background: #008c43;
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(0, 165, 80, 0.3);
}

/* ܿ�n���
�	 */
.bou-export-import-buttons .btn::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 2px;
  box-shadow:
    -12px 0 0 currentColor,
    12px 0 0 currentColor;
  opacity: 0.8;
}

/* ܿ����Bn������� */
.bou-export-import-buttons .btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
}

/* ������ */
@media (max-width: 768px) {
  .success-message,
  .error-message {
    right: 10px;
    left: 10px;
    min-width: auto;
  }

  .bou-export-import-buttons .btn {
    display: block;
    width: 100%;
    margin: 0.5rem 0;
  }
}

/* է�ɢ�Ȣ������ */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateX(400px);
  }
}

/* �û��L�H�Bn������� */
.success-message.fade-out,
.error-message.fade-out {
  animation: fadeOut 0.3s ease-out forwards;
}