/* ========================================
   龙慧云 Clean Design System
   清爽白底 + 蓝色标签 + 480px居中
   ======================================== */

:root {
  /* 背景 */
  --clean-bg: #F5F7FA;
  --clean-card: #FFFFFF;
  
  /* 主色 */
  --clean-blue: #165DFF;
  --clean-blue-light: #E8F4FF;
  --clean-cyan: #00E5FF;
  
  /* 文字 */
  --clean-text: #1D2129;
  --clean-text-sub: #4E5969;
  --clean-text-muted: #86909C;
  
  /* 边框 */
  --clean-border: #E5E6EB;
  --clean-border-light: #F2F3F5;
  
  /* 圆角 */
  --clean-radius: 12px;
  --clean-radius-lg: 16px;
  --clean-radius-pill: 100px;
  
  /* 布局 */
  --clean-max-width: 480px;
}

/* === 全局 === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;min-height:100vh;overflow-x:hidden}
body{
  font-family:"PingFang SC","Microsoft YaHei",sans-serif;
  background: var(--clean-bg);
  color: var(--clean-text);
  -webkit-font-smoothing:antialiased;
}

/* === 主容器 === */
#app{
  max-width: var(--clean-max-width);
  margin: 0 auto;
  padding: 16px;
}

/* === 头部 === */
.clean-header{
  text-align: center;
  padding: 24px 0 20px;
}
.clean-logo{
  font-size: 40px;
  margin-bottom: 8px;
}
.clean-logo-img{
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: 6px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.1));
}
.clean-brand-title{
  font-size: 24px;
  font-weight: 700;
  color: var(--clean-blue);
  letter-spacing: 6px;
}
.clean-brand-sub{
  font-size: 13px;
  color: var(--clean-text-muted);
  margin-top: 6px;
}

/* === 顶部标签栏 === */
.clean-tags{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}
.clean-tag{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--clean-card);
  border: 1px solid var(--clean-border);
  border-radius: var(--clean-radius-pill);
  font-size: 12px;
  color: var(--clean-text-sub);
}
.clean-tag .icon{
  font-size: 14px;
}

/* === 白色卡片区块 === */
.clean-section{
  background: var(--clean-card);
  border-radius: var(--clean-radius-lg);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.clean-section-title{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--clean-text);
  margin-bottom: 12px;
}

/* === 按钮网格 === */
.clean-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.clean-btn{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  background: var(--clean-bg);
  border: 1px solid var(--clean-border);
  border-radius: var(--clean-radius-pill);
  font-size: 13px;
  color: var(--clean-text);
  text-decoration: none;
  transition: all 0.2s;
}
.clean-btn:hover,
.clean-btn:active{
  background: var(--clean-blue-light);
  border-color: var(--clean-blue);
  color: var(--clean-blue);
}

/* === 底部 === */
.clean-footer{
  text-align: center;
  padding: 20px 0;
  color: var(--clean-text-muted);
  font-size: 12px;
}
.clean-footer a{
  color: var(--clean-blue);
  text-decoration: none;
}

/* === 大图标 === */
.clean-icon{
  font-size: 56px;
  text-align: center;
  margin: 8px 0;
}

/* === 描述文字 === */
.clean-desc{
  text-align: center;
  color: var(--clean-text-sub);
  font-size: 14px;
  line-height: 1.8;
  margin: 12px 0;
}

/* === 主按钮（蓝色背景+白字） === */
.clean-btn-primary{
  display: block;
  width: 100%;
  max-width: 260px;
  margin: 0 auto;
  padding: 13px 24px;
  background: var(--clean-blue);
  color: #FFFFFF;
  border: none;
  border-radius: var(--clean-radius-pill);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  transition: all 0.2s;
}
.clean-btn-primary:active{
  transform: scale(0.97);
  opacity: 0.9;
}
.clean-btn-primary:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

/* === 描边按钮（白底蓝字） === */
.clean-btn-outline{
  flex: 1;
  padding: 12px;
  background: #FFFFFF;
  color: var(--clean-blue);
  border: 1.5px solid var(--clean-blue);
  border-radius: var(--clean-radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}
.clean-btn-outline:active{
  background: var(--clean-blue-light);
}

/* === 按钮组 === */
.clean-btn-group{
  display: flex;
  gap: 10px;
}

/* === 预览图片行 === */
.clean-preview-row{
  display: flex;
  gap: 10px;
}
.clean-preview-box{
  flex: 1;
  text-align: center;
}
.clean-preview-label{
  font-size: 12px;
  color: var(--clean-text-muted);
  margin-bottom: 6px;
}
.clean-preview-img{
  width: 100%;
  border-radius: var(--clean-radius);
  display: block;
}

/* === 滑块 === */
.clean-slider-row{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  font-size: 13px;
  color: var(--clean-text);
}
.clean-slider{
  flex: 1;
  -webkit-appearance: none;
  height: 6px;
  border-radius: 3px;
  background: var(--clean-border);
  outline: none;
}
.clean-slider::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--clean-blue);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(22,93,255,0.3);
}
.clean-slider-val{
  min-width: 38px;
  text-align: right;
  color: var(--clean-blue);
  font-weight: 600;
  font-size: 12px;
}

/* === 加载动画 === */
.clean-spinner{
  width: 44px;
  height: 44px;
  border: 3px solid var(--clean-border);
  border-top-color: var(--clean-blue);
  border-radius: 50%;
  animation: clean-spin 0.8s linear infinite;
  margin: 10px auto;
}
@keyframes clean-spin{ to{ transform: rotate(360deg); } }

/* === 徽章 === */
.clean-badge{
  display: inline-block;
  padding: 2px 8px;
  background: #16A34A;
  color: #fff;
  font-size: 10px;
  border-radius: 10px;
  margin-left: 4px;
}
.clean-badge.warn{
  background: #E85D04;
}