/* =========================================================
   Base
========================================================= */

body {
  margin: 0;
  padding: 0;
  background: #f5f7fb;
  font-family: Arial, Helvetica, sans-serif;
  color: #333;
}

.container {
  max-width: 760px;
  margin: 40px auto;
  padding: 28px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
}


.result-container {

  margin-top: 16px;

}

h2 {
  margin: 0 0 22px;
  color: #222;
}

/* =========================================================
   Input
========================================================= */

input,
select,
textarea {

  width: 100%;

  padding: 12px;

  margin-bottom: 12px;

  box-sizing: border-box;

  border: 1px solid #d1d5db;

  border-radius: 8px;

  font-size: 14px;

  transition: .2s;

}

input:focus,
select:focus,
textarea:focus {

  outline: none;

  border-color: #2563eb;

  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);

}

/* =========================================================
   Button
========================================================= */

button {

  padding: 12px 18px;

  min-width: 110px;

  min-height: 44px;

  margin-right: 10px;

  margin-bottom: 10px;

  border: none;

  border-radius: 8px;

  background: #2563eb;

  color: #fff;

  font-size: 14px;

  font-weight: 500;

  cursor: pointer;

  transition: .2s;

}

button:hover {

  background: #1d4ed8;

}

button:active {

  transform: scale(.98);

}

button:disabled {

  opacity: .6;

  cursor: not-allowed;

}

button.danger {

  background: #dc2626;

}

button.danger:hover {

  background: #b91c1c;

}

/* =========================================================
   Result
========================================================= */

pre {

  background: #f7f8fa;

  padding: 16px;

  border-radius: 10px;

  white-space: pre-wrap;

  word-break: break-word;

  max-height: 48vh;

  overflow-y: auto;

  font-size: 13px;

  line-height: 1.7;

  font-family: Consolas, monospace;

}

#adminButtons {

  margin-top: 16px;

}

#loginMessage,
#uploadMessage,
#createUserMessage {

  margin-top: 10px;

  color: #dc2626;

  font-size: 14px;

}

/* =========================================================
   Responsive
========================================================= */

@media (max-width:768px) {

  .container {

    margin: 12px;

    padding: 20px;

  }

  button {

    width: 100%;

    margin-right: 0;

  }

}

/* =========================================================
   Loading
========================================================= */

button.loading {

  position: relative;

  opacity: .8;

  pointer-events: none;

}

button.loading::after {

  content: "";

  display: inline-block;

  width: 14px;

  height: 14px;

  margin-left: 8px;

  border: 2px solid rgba(255, 255, 255, .35);

  border-top-color: #fff;

  border-radius: 50%;

  animation: button-spin .7s linear infinite;

  vertical-align: -2px;

}

@keyframes button-spin {

  to {

    transform: rotate(360deg);

  }

}


/* =========================================================
   Toast
========================================================= */

#toastContainer {

  position: fixed;

  top: 20px;

  right: 20px;

  z-index: 9999;

  display: flex;

  flex-direction: column;

  gap: 12px;

}

.toast {

  min-width: 220px;

  max-width: 360px;

  padding: 14px 18px;

  border-radius: 10px;

  color: #fff;

  font-size: 14px;

  line-height: 1.5;

  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);

  opacity: 0;

  transform: translateX(40px);

  transition: all .25s ease;

}

.toast.show {

  opacity: 1;

  transform: translateX(0);

}

.toast.success {

  background: #16a34a;

}

.toast.error {

  background: #dc2626;

}

.toast.warning {

  background: #ea580c;

}

.toast.info {

  background: #2563eb;

}

.toast.hide {

  opacity: 0;

  transform: translateX(40px);

}

/* =========================================================
   Result Card
========================================================= */

.result-card {

  background: #fff;

  border: 1px solid #e5e7eb;

  border-radius: 12px;

  padding: 18px;

  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);

  margin-top: 15px;

}

/* 最新验证码 */

.result-card.latest {

  border: 2px solid #2563eb;

  background: #eff6ff;

  animation: latestFadeIn .35s ease;

}

/* 卡片标题 */

.result-title {

  font-size: 13px;

  color: #2563eb;

  font-weight: 600;

  margin-bottom: 12px;

}

/* 验证码 */

.result-code {

  font-size: 28px;

  font-weight: 700;

  letter-spacing: 3px;

  color: #111827;

  cursor: pointer;

  user-select: none;

  font-family: Consolas, Monaco, monospace;

  text-align: center;

  display: inline-block;

  padding: 8px 20px;

}

.result-code:hover {

  color: #2563eb;

  text-decoration: underline;

}

/* 接收时间 */

.result-time {

  margin-top: 10px;

  font-size: 13px;

  color: #6b7280;

}

.result-card:hover {

  transform: translateY(-2px);

  box-shadow: 0 6px 16px rgba(0, 0, 0, .08);

  transition: .2s;

}


.result-tip {

  margin-top: 8px;

  font-size: 12px;

  color: #9ca3af;

}

.result-code:active {

  transform: scale(.96);

}

/* 每一项 */

.result-item {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 12px 0;

  border-bottom: 1px solid #f1f5f9;

}

.result-item:last-child {

  border-bottom: none;

}


/* 左侧标题 */

.result-label {

  width: 110px;

  flex-shrink: 0;

  color: #6b7280;

  font-size: 13px;

  font-weight: 500;

}


/* 右侧内容 */

.result-value {

  flex: 1;

  display: flex;

  justify-content: flex-end;

  align-items: center;

  gap: 8px;

  overflow-wrap: anywhere;

  color: #111827;

  font-size: 14px;

  word-break: break-all;

}


/* 长字符串 */

.result-value span:first-child {

  flex: 1;

  text-align: right;

}


/* 空内容 */

.result-empty {

  color: #9ca3af;

  font-style: italic;

}


/* 鼠标经过 */

.result-item:hover {

  background: #f8fafc;

  transition: .2s;

}

/* =========================================================
   Copy
========================================================= */

.copy-icon {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 28px;

  height: 28px;

  margin-left: 8px;

  border-radius: 6px;

  cursor: pointer;

  user-select: none;

  font-size: 15px;

  transition: all .2s;

}

.copy-icon:hover {

  background: #eef4ff;

  color: #2563eb;

  transform: scale(1.1);

}

.copy-icon:active {

  transform: scale(.95);

}


/* =========================================================
   OTP
========================================================= */

#assignOtpCode,
#searchOtpCode {

  color: #dc2626;

  font-size: 20px;

  font-weight: 700;

  letter-spacing: 2px;

  font-family: Consolas, monospace;

}

#assignOtpRemain,
#searchOtpRemain {

  color: #2563eb;

  font-size: 16px;

  font-weight: 700;

}


/* =========================================================
   Highlight
========================================================= */

.result-item:nth-child(4),
.result-item:nth-child(5) {

  background: #fafcff;

}



/* =========================================================
   Statistics
========================================================= */

/* 统计卡片 */

.stats-card {

  display: flex;

  flex-direction: column;

  gap: 14px;

}


/* 每一项 */

.stats-item {

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 14px 18px;

  border-radius: 10px;

  background: #f8fafc;

  border: 1px solid #e5e7eb;

  transition: .2s;

}

.stats-item:hover {

  background: #eef4ff;

}


/* 左侧 */

.stats-title {

  color: #6b7280;

  font-size: 14px;

}


/* 右侧数字 */

.stats-number {

  font-size: 22px;

  font-weight: bold;

  color: #2563eb;

}

/* =========================================================
   Button Group
========================================================= */

.button-group {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-bottom: 16px;

}

.button-group button {

  margin: 0;

}

hr {

  margin: 18px 0;

  border: none;

  border-top: 1px solid #e5e7eb;

}

h3 {

  margin: 0 0 12px;

  font-size: 15px;

  color: #374151;

  font-weight: 600;

}

/* ========================================
   Dialog 
======================================== */

.dialog {

  position: fixed;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, .45);

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 9999;

}

.dialog.hidden {

  display: none;

}

.dialog-box {

  width: 420px;

  max-width: 90%;

  background: #fff;

  border-radius: 8px;

  padding: 20px;

}

.provider-item {

  display: flex;

  align-items: center;

  gap: 8px;

  padding: 8px 0;

  cursor: pointer;

}

/* ==========================================================
   Loading
========================================================== */

.loading-overlay {

  position: fixed;

  inset: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  background: rgba(0, 0, 0, .45);

  z-index: 9999;

}

.hidden {
  display: none;
}

.loading-box {

  background: #fff;

  border-radius: 12px;

  padding: 28px 36px;

  text-align: center;

  min-width: 180px;

  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);

}

.loading-spinner {

  width: 42px;

  height: 42px;

  margin: 0 auto 16px;

  border: 4px solid #ddd;

  border-top-color: #4285F4;

  border-radius: 50%;

  animation: loadingSpin .8s linear infinite;

}

.loading-text {

  font-size: 15px;

  color: #555;

}

@keyframes loadingSpin {

  from {

    transform: rotate(0deg);

  }

  to {

    transform: rotate(360deg);

  }

}


/* ==========================================================
   Toast
========================================================== */


.toast.hide {

  opacity: 0;

  transform: translateX(30px);

}

/* ========================================
   Status Badge
======================================== */

.status-badge {

  display: inline-block;

  padding: 2px 8px;

  border-radius: 12px;

  font-size: 12px;

  font-weight: 600;

}

.status-unused {

  background: #e8f5e9;

  color: #2e7d32;

}

.status-used {

  background: #fff3e0;

  color: #ef6c00;

}

.status-lock {

  background: #ede7f6;

  color: #6a1b9a;

}

.status-invalid {

  background: #ffebee;

  color: #c62828;

}

.result-section {

  margin-top: 18px;

  margin-bottom: 10px;

  font-weight: 600;

  color: #374151;

  border-left: 4px solid #3b82f6;

  padding-left: 8px;

}

.result-divider {

  border: none;

  border-top: 1px solid #e5e7eb;

  margin: 18px 0;

}

/* 最新验证码动画 */

@keyframes latestFadeIn {

  from {

    opacity: 0;

    transform: translateY(8px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}

/* ========================================
   最新验证码
======================================== */

.latest-code {

  animation: latestFlash .8s ease;

  background: #ecfeff;

  border-radius: 8px;

}

@keyframes latestFlash {

  0% {

    background: #fef3c7;

  }

  100% {

    background: #ecfeff;

  }

}

.copy-code {

  cursor: pointer;

  color: #2563eb;

  user-select: none;

}

.copy-code:hover {

  text-decoration: underline;

}

.result-code-wrapper {

  text-align: center;

}

.result-code {

  display: inline-block;

  padding: 8px 20px;

}