/* MGMBOX 交互体验增强样式(独立于 tailwind 编译产物,go:embed 自动包含)。
 * 目录:页面淡入、按钮按压、卡片 hover、toast 堆叠、confirm 弹窗、骨架屏、日志高亮。 */

/* ---------- 页面淡入 ---------- */
@keyframes mgmbox-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- 卡片/按钮微交互 ---------- */
.card {
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.card:hover {
  border-color: rgba(55, 65, 81, .9);
}
button:not(:disabled), a.btn-primary, a.btn-ghost, a.btn-danger, .icon-btn {
  transition: transform .08s ease;
}
button:not(:disabled):active, a.btn-primary:active, a.btn-ghost:active, a.btn-danger:active, .icon-btn:active {
  transform: scale(.97);
}

/* ---------- 按钮 loading 态(配合 mgmbox.btnBusy) ---------- */
.btn-loading {
  pointer-events: none;
  opacity: .75;
}
.btn-loading::before {
  content: "";
  display: inline-block;
  width: .95em;
  height: .95em;
  margin-right: .5rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 9999px;
  animation: mgmbox-spin .7s linear infinite;
  vertical-align: -.15em;
}
@keyframes mgmbox-spin {
  to { transform: rotate(360deg); }
}

/* ---------- Toast 堆叠(容器固定右下,条目独立) ---------- */
#toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-width: min(22rem, calc(100vw - 2rem));
}
.toast-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem .9rem;
  border-radius: .6rem;
  border: 1px solid;
  background: rgba(17, 24, 39, .96);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  font-size: .85rem;
  color: #e5e7eb;
  animation: mgmbox-toast-in .18s ease-out;
  cursor: pointer;
  backdrop-filter: blur(4px);
}
.toast-item i { font-size: .95rem; flex-shrink: 0; }
.toast-item.toast-success { border-color: rgba(16, 185, 129, .5); }
.toast-item.toast-success i { color: #34d399; }
.toast-item.toast-error   { border-color: rgba(239, 68, 68, .55); }
.toast-item.toast-error i { color: #f87171; }
.toast-item.toast-warning { border-color: rgba(245, 158, 11, .55); }
.toast-item.toast-warning i { color: #fbbf24; }
.toast-item.toast-info    { border-color: rgba(59, 130, 246, .5); }
.toast-item.toast-info i  { color: #60a5fa; }
.toast-item.mgmbox-toast-out {
  animation: mgmbox-toast-out .2s ease-in forwards;
}
@keyframes mgmbox-toast-in {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@keyframes mgmbox-toast-out {
  to { opacity: 0; transform: translateX(12px); }
}

/* ---------- 通用确认弹窗 ---------- */
.mgmbox-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(3px);
  animation: mgmbox-fade-in .15s ease-out;
}
.mgmbox-confirm-panel {
  width: 100%;
  max-width: 24rem;
  border-radius: .9rem;
  border: 1px solid #1f2937;
  background: #0f172a;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
  animation: mgmbox-toast-in .18s ease-out;
  overflow: hidden;
}
.mgmbox-confirm-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid rgba(31, 41, 55, .8);
  font-weight: 600;
  color: #f9fafb;
}
.mgmbox-confirm-head i { color: #f59e0b; }
.mgmbox-confirm-body {
  padding: 1rem 1.25rem;
  font-size: .9rem;
  color: #d1d5db;
  line-height: 1.6;
  word-break: break-all;
}
.mgmbox-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  padding: .8rem 1.25rem 1.1rem;
  border-top: 1px solid rgba(31, 41, 55, .8);
}
.mgmbox-confirm-actions button {
  padding: .45rem 1rem;
  border-radius: .5rem;
  font-weight: 600;
  font-size: .85rem;
  transition: background-color .15s ease, transform .08s ease;
}
.mgmbox-confirm-actions button:active { transform: scale(.97); }
.mgmbox-confirm-cancel {
  border: 1px solid #374151;
  color: #d1d5db;
  background: transparent;
}
.mgmbox-confirm-cancel:hover { background: rgba(31, 41, 55, .6); }
.mgmbox-confirm-ok {
  border: 1px solid transparent;
  background: #dc2626;
  color: #fff;
}
.mgmbox-confirm-ok:hover { background: #ef4444; }
.mgmbox-confirm-ok.confirm-safe {
  background: #059669;
}
.mgmbox-confirm-ok.confirm-safe:hover { background: #10b981; }

/* ---------- 骨架屏 ---------- */
@keyframes mgmbox-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  border-radius: .5rem;
  background: linear-gradient(90deg, rgba(31,41,55,.5) 25%, rgba(55,65,81,.7) 50%, rgba(31,41,55,.5) 75%);
  background-size: 800px 100%;
  animation: mgmbox-shimmer 1.3s linear infinite;
}
.skeleton-line {
  height: .8rem;
  border-radius: .25rem;
}
.skeleton-block {
  height: 6rem;
  border-radius: .75rem;
}

/* ---------- 部署/中转实时日志高亮 ---------- */
.log-line-error { color: #f87171 !important; }
.log-line-warn  { color: #fbbf24 !important; }
.log-line-ok    { color: #34d399 !important; }

/* ---------- 状态徽标 ---------- */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .18rem .7rem;
  border-radius: 9999px;
  font-size: .75rem;
  font-weight: 600;
}
.status-badge-running { color: #fbbf24; background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.35); }
.status-badge-ok      { color: #34d399; background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.35); }
.status-badge-error   { color: #f87171; background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35); }

/* ---------- 弹窗全屏遮罩:半透明 + 模糊背景(盖住整个界面含顶部导航) ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background-color: rgba(2, 6, 23, .55) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 90;
}

/* ---------- 开关(toggle) ---------- */
.toggle-switch {
  appearance: none;
  width: 2.6rem;
  height: 1.4rem;
  border-radius: 9999px;
  background-color: #374151;
  position: relative;
  cursor: pointer;
  transition: background-color .2s ease;
  flex-shrink: 0;
}
.toggle-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 9999px;
  background: #fff;
  transition: transform .2s ease;
}
.toggle-switch:checked {
  background-color: #10b981;
}
.toggle-switch:checked::after {
  transform: translateX(1.2rem);
}

/* ---------- 兑换结果弹窗(状态边框 + 失败按钮) ---------- */
.redeem-modal-ok {
  border-color: rgba(16, 185, 129, .4) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(16, 185, 129, .25);
}
.redeem-modal-fail {
  border-color: rgba(239, 68, 68, .45) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(239, 68, 68, .28);
}
.redeem-btn-fail {
  background-color: #dc2626 !important;
  border-color: #dc2626 !important;
}
.redeem-btn-fail:hover {
  background-color: #ef4444 !important;
}

/* ---------- 富文本编辑器(博客正文) ---------- */
.rtf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  height: 1.75rem;
  padding: 0 .5rem;
  border-radius: .375rem;
  font-size: .75rem;
  color: #9ca3af;
  transition: background-color .15s, color .15s;
}
.rtf-btn:hover { background-color: #1f2937; color: #e5e7eb; }

.rtf-area:empty::before {
  content: attr(data-placeholder);
  color: #6b7280;
}
.rtf-area h2 { font-size: 1.25rem; font-weight: 700; color: #fff; margin: .75rem 0 .5rem; }
.rtf-area h3 { font-size: 1.125rem; font-weight: 600; color: #e5e7eb; margin: .6rem 0 .4rem; }
.rtf-area p { margin: .4rem 0; }
.rtf-area ul { list-style: disc; padding-left: 1.5rem; margin: .4rem 0; }
.rtf-area ol { list-style: decimal; padding-left: 1.5rem; margin: .4rem 0; }
.rtf-area blockquote { border-left: 3px solid #10b981; padding-left: .75rem; margin: .5rem 0; color: #9ca3af; }
.rtf-area a { color: #34d399; text-decoration: underline; }
.rtf-area img { max-width: 100%; border-radius: .5rem; margin: .5rem 0; }

/* ---------- 广播跑马灯 ---------- */
.marquee-track {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: mgmbox-marquee 25s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes mgmbox-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}