/* 引入统一的CSS变量 */
@import url('./variables.css');

/* 自助更换页面样式 */
body,html{height:100%;min-height:100vh;width:100%;overflow-x:hidden}
body{background-color:hsl(var(--color-bg-secondary));color:hsl(var(--color-text-primary));line-height:var(--leading-relaxed);padding:0;display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:var(--font-family-sans)}
.fullscreen-content{width:100%;max-width:600px;padding:var(--space-5)}
header{text-align:center;margin-bottom:var(--space-10)}
.title{font-size:var(--text-4xl);font-weight:700;color:hsl(var(--color-primary));margin-bottom:var(--space-4);line-height:var(--leading-tight);display:flex;align-items:center;justify-content:center;gap:var(--space-3)}
.title i{font-size:var(--text-3xl)}
.tagline{font-size:var(--text-lg);color:hsl(var(--color-text-muted));opacity:.8;margin-bottom:var(--space-3)}
form{width:100%}
.form-group{margin-bottom:var(--space-6);width:100%}
label{display:block;margin-bottom:var(--space-2);font-weight:500;color:hsl(var(--color-text-primary));font-size:var(--text-base)}
.form-control{width:100%;height:60px;padding:0 var(--space-5);border:var(--border-width) solid hsl(var(--color-text-primary));border-radius:var(--radius-md);font-size:var(--text-lg);transition:all var(--transition-normal);background:hsl(var(--color-white));font-family:var(--font-family-sans);line-height:var(--leading-tight);box-shadow:var(--shadow-sm);font-weight:500}
.form-control:focus{border-color:hsl(var(--color-primary));outline:0;box-shadow:0 0 15px hsl(var(--color-primary), 0.2)}
.btn{width:100%;height:65px;background:hsl(var(--color-primary));color:hsl(var(--color-white));border:var(--border-width) solid hsl(var(--color-text-primary));border-radius:var(--radius-md);cursor:pointer;font-size:var(--text-lg);font-weight:900;display:flex;align-items:center;justify-content:center;gap:var(--space-3);transition:all var(--transition-fast);margin:var(--space-5) 0 var(--space-8);font-family:var(--font-family-sans);line-height:var(--leading-tight);box-shadow:var(--shadow-md);text-shadow:1px 1px 0px hsl(var(--color-text-primary));position:relative;overflow:hidden}
.btn:hover:not(:disabled){background:hsl(var(--color-primary-light));transform:translateY(-2px);box-shadow:var(--shadow-md)}
.btn:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow-sm)}
.result-container{margin-bottom:var(--space-8);animation:fadeIn var(--transition-normal)}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:translateY(0)}
}
.alert{padding:var(--space-5);border-radius:var(--radius-md);font-size:var(--text-base);margin-bottom:var(--space-8);display:flex;align-items:center;gap:var(--space-3);animation:fadeIn var(--transition-normal)}
.alert-success{background:hsl(var(--color-success), 0.1);border:1px solid hsl(var(--color-success));color:hsl(var(--color-success))}
.alert-danger{background:hsl(var(--color-danger), 0.1);border:1px solid hsl(var(--color-danger));color:hsl(var(--color-danger))}
.alert i{font-size:var(--text-xl)}
.instructions{background:hsl(var(--color-gray-50));padding:var(--space-6);border-radius:var(--radius-md);margin-top:var(--space-5);border:1px solid hsl(var(--color-border-light));box-shadow:var(--shadow-sm);transition:all var(--transition-normal)}
.instructions:hover{box-shadow:var(--shadow-md)}
.instructions h3{font-size:var(--text-base);margin-bottom:var(--space-4);color:hsl(var(--color-text-primary));display:flex;align-items:center;gap:var(--space-2);font-weight:600}
.instructions h3 i{color:hsl(var(--color-primary))}
.instructions ul{padding-left:var(--space-5);margin-bottom:0}
.instructions li{margin-bottom:var(--space-3);font-size:var(--text-sm);color:hsl(var(--color-text-secondary));line-height:var(--leading-relaxed)}
.instructions li:last-child{margin-bottom:0}

/* 卡片样式扩展 */
.card{
  background-color:hsl(var(--color-white));
  border:1px solid hsl(var(--color-border));
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  transition:all var(--transition-normal);
  overflow:hidden;
  padding:var(--space-6);
  margin-bottom:var(--space-6);
}

.card:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-2px);
}

/* 响应式设计 */
@media (max-width:768px){
  .title{font-size:var(--text-3xl)}
  .btn,.form-control{height:55px;font-size:var(--text-base)}
  .fullscreen-content{padding:var(--space-4)}
  header{margin-bottom:var(--space-8)}
}

@media (max-width:480px){
  .title{font-size:var(--text-2xl)}
  .tagline{font-size:var(--text-base)}
  .btn,.form-control{height:50px;font-size:var(--text-base)}
  header{margin-bottom:var(--space-6)}
  .instructions{padding:var(--space-4)}
  .fullscreen-content{padding:var(--space-4)}
  .instructions li{font-size:var(--text-xs)}
}

/* 动画效果 */
.fade-in{
  animation:fadeIn var(--transition-normal);
}

.slide-up{
  animation:slideUp var(--transition-normal);
}

@keyframes slideUp{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}