/* 基础样式（外部化） */
[v-cloak] { display: none !important; }
* { margin: 0; padding: 0; box-sizing: border-box; }

/* body 结构布局（背景由内联动态控制） */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* 动画与容器 */
.install-container { width: 100%; max-width: 900px; animation: fadeInUp 0.5s ease; }
@keyframes fadeInUp { from { opacity:0; transform: translateY(30px);} to { opacity:1; transform: translateY(0);} }

/* 安装框与头部 */
.install-box { background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.3); border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.15); overflow: hidden; }
.install-header { background: linear-gradient(135deg,#667eea 0%,#764ba2 100%); padding: 40px 30px; text-align: center; color: #fff; position: relative; }
.header-actions { position: absolute; top: 14px; right: 16px; display: flex; align-items: center; gap: 8px; }
.install-header h1 { font-size: 32px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 15px; }
.install-header p { font-size: 16px; opacity: 0.8; }
.install-content { padding: 40px 30px; }

/* 通用工具类 */
.text-success { color:#67C23A; }
.text-error { color:#F56C6C; }
.text-muted { color:#909399; }
.text-body { color:#606266; line-height:1.8; }
.mt-6 { margin-top:6px; }
.mt-10 { margin-top:10px; }
.mt-30 { margin-top:30px; }
.mb-10 { margin-bottom:10px; }
.mr-10 { margin-right:10px; }
.flex-row { display:flex; }
.align-center { align-items:center; }
.gap-10 { gap:10px; }
.w-200 { width:200px; }
.pt-10 { padding-top:10px; }
.ml-5 { margin-left:5px; }
.border-top { border-top:1px solid #ddd; }
.inline-code { background:#fff; padding:2px 6px; border-radius:3px; }
.perm-list { font-size:12px; color:#606266; line-height:1.8; background:#f5f5f5; padding:10px; border-radius:4px; }

/* 步骤指示 */
.step-indicator { display:flex; justify-content:center; margin-bottom:40px; gap:20px; }
.step-item { display:flex; align-items:center; gap:10px; }
.step-number { width:40px; height:40px; border-radius:50%; background:#e8ecf1; color:#909399; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:18px; transition:all .3s; }
.step-item.active .step-number { background: linear-gradient(135deg,#667eea 0%,#764ba2 100%); color:#fff; box-shadow: 0 4px 12px rgba(102,126,234,0.4); }
.step-item.completed .step-number { background:#67C23A; color:#fff; }
.step-label { font-size:14px; color:#606266; }
.step-item.active .step-label { color:#667eea; font-weight:600; }
.step-arrow { color:#DCDFE6; font-size:20px; }

/* 表单与区块 */
.form-section { margin-bottom:30px; }
.section-title { font-size:18px; font-weight:600; color:#303133; margin-bottom:20px; padding-bottom:10px; border-bottom:2px solid #667eea; display:flex; align-items:center; gap:8px; }
.section-title i { color:#667eea; }
.action-buttons { display:flex; justify-content:space-between; margin-top:40px; padding-top:30px; border-top:1px solid #EBEEF5; }

/* 成功页 */
.install-success { text-align:center; padding:40px 20px; }
.success-icon { font-size:80px; color:#67C23A; margin-bottom:20px; animation: scaleIn .5s ease; }
@keyframes scaleIn { from { transform: scale(0);} to { transform: scale(1);} }
.success-title { font-size:24px; color:#303133; font-weight:bold; margin-bottom:10px; }
.success-desc { font-size:16px; color:#606266; margin-bottom:30px; line-height:1.6; }
.success-info { background:#f5f7fa; padding:20px; border-radius:10px; margin:30px 0; text-align:left; }
.info-item { padding:10px 0; display:flex; align-items:center; gap:10px; font-size:14px; }
.info-item i { color:#409EFF; font-size:16px; }
.info-label { color:#909399; min-width:100px; }
.info-value { color:#303133; font-weight:500; flex:1; }

/* Element 对话框与消息（玻璃效果） */
.el-message-box { background: rgba(255,255,255,0.9) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border: 1px solid rgba(255,255,255,0.3) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important; border-radius: 16px !important; }
.el-message-box__wrapper { backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; background-color: rgba(0,0,0,0.4) !important; }
.el-message { background: rgba(255, 255, 255, 0.9) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important; }

/* 警告提示 */
.warning-box { background:#fff8e6; border:1px solid #ffe58f; padding:15px; border-radius:8px; margin-bottom:20px; }

/* Dark theme overrides */
body.theme-dark .warning-box {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: #e6e6e6;
}

/* Ensure inline code blocks are legible in dark mode */
body.theme-dark code {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #e6e6e6 !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}
.warning-box i { color:#faad14; margin-right:8px; }
.warning-box p { margin:5px 0; color:#666; line-height:1.6; }

/* 响应式 */
@media (max-width:768px){
body{ padding:10px; background-color:#f5f7fa; }
  .install-container{ padding:0; }
  .install-box{ border-radius:12px; }
  .install-header{ padding:30px 20px; }
  .install-header h1{ font-size:22px; gap:10px; }
  .install-header p{ font-size:14px; }
  .install-content{ padding:25px 15px; }
  .step-indicator{ flex-wrap:wrap; gap:8px; margin-bottom:30px; }
  .step-number{ width:36px; height:36px; font-size:16px; }
  .step-label{ display:none; }
  .step-arrow{ display:none; }
  .section-title{ font-size:16px; margin-bottom:15px; }
  .el-form-item__label{ font-size:14px !important; }
  .el-input__inner{ font-size:14px !important; }
  .action-buttons{ flex-direction:column; gap:10px; margin-top:30px; }
  .action-buttons .el-button{ width:100%; margin:0 !important; }
  .warning-box{ padding:12px; font-size:13px; }
  .success-icon{ font-size:60px; }
  .success-title{ font-size:20px; }
  .success-desc{ font-size:14px; }
}

/* 暗色主题覆盖（外部静态，背景仍由内联控制） */
body.theme-dark { color:#e0e0e0; }
body.theme-dark .install-box { background: rgba(30,30,30,0.92); border-color: rgba(255,255,255,0.12); }
body.theme-dark .install-header { background: linear-gradient(135deg,#1f2a44 0%,#2e1f3f 100%); }
body.theme-dark .section-title { color:#e6e6e6; border-bottom-color: rgba(255,255,255,0.12); }
body.theme-dark .install-content { color:#e0e0e0; }
body.theme-dark .warning-box { background: rgba(250, 173, 20, 0.10); border-color: rgba(250, 173, 20, 0.35); }

/* 暗色主题下工具类的适配（必要覆盖） */
body.theme-dark .text-muted { color:#bdbdbd; }
body.theme-dark .text-body { color:#cfcfcf; }

/* Utility: display and font sizes */
.d-block { display:block; }
.fs-12 { font-size:12px; }
.fs-14 { font-size:14px; }
.fs-15 { font-size:15px; }

/* Element UI input prefix alignment fix: center the icon vertically */
.el-input__prefix { display: inline-flex; align-items: center; justify-content: center; height: 100%; }
.el-input__prefix i { display: inline-flex; align-items: center; justify-content: center; height: 100%; line-height: 1; font-size: 16px; color: currentColor; }

/* Install page background overlay (light/dark), driven by CSS variables */
body.bg-loaded {
  background-image: linear-gradient(
    rgba(255,255,255, var(--frontOverlayAlpha, 0)),
    rgba(255,255,255, var(--frontOverlayAlpha, 0))
  ), var(--bg-url);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
body.theme-dark.bg-loaded {
  background-image: linear-gradient(
    rgba(0,0,0, var(--frontOverlayAlpha, 0)),
    rgba(0,0,0, var(--frontOverlayAlpha, 0))
  ), var(--bg-url);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
body.theme-dark .inline-code { background: rgba(255,255,255,0.06) !important; color:#e6e6e6 !important; border: 1px solid rgba(255,255,255,0.12); }
body.theme-dark .perm-list { background: rgba(255,255,255,0.06); color:#e0e0e0; border: 1px solid rgba(255,255,255,0.12); }
body.theme-dark .border-top { border-top-color: rgba(255,255,255,0.18); }

/* Element UI 暗色适配 */
body.theme-dark .el-input__inner { background-color: #2a2a2a; border-color: #444; color: #e0e0e0; }
body.theme-dark .el-textarea__inner { background-color: #2a2a2a; border-color: #444; color: #e0e0e0; }
body.theme-dark .el-input__inner::placeholder, body.theme-dark .el-textarea__inner::placeholder { color: #aaaaaa; }
body.theme-dark .el-input__inner:focus, body.theme-dark .el-textarea__inner:focus { border-color: #409EFF; box-shadow: 0 0 0 2px rgba(64,158,255,0.15); }
body.theme-dark .el-button--default { background-color: #1e1e1e; border-color: #333; color: #e6e6e6; }
body.theme-dark .el-button--primary { background-color: #409EFF; border-color: #409EFF; color: #fff; }
body.theme-dark .el-message-box { background: #1e1e1e !important; border-color: #333 !important; color: #e6e6e6 !important; }
body.theme-dark .el-message { background: #1e1e1e !important; border-color: #333 !important; color: #e6e6e6 !important; }

/* 下一步按钮点击拦截与提示 */
.next-button-wrapper { position: relative; display: inline-block; }
.btn-block-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: not-allowed;
  background: transparent;
}