/* ========== 全局 ========== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(135deg, #0b0d17 0%, #1a1c2b 50%, #0f111a 100%);
  color: #e0e6f0;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before{                    /* 全局光效点缀，可删但不影响 */
  content:''; position:fixed; top:0; left:0; width:100%; height:100%;
  background: radial-gradient(circle at 20% 30%, rgba(120,80,255,0.08), transparent 50%),
              radial-gradient(circle at 80% 70%, rgba(0,200,255,0.06), transparent 50%);
  pointer-events:none; z-index:0;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
input,textarea,select,button{font:inherit;outline:none;border:none;background:transparent}
*{-webkit-tap-highlight-color:transparent}

.container{max-width:1100px;margin:0 auto;padding:0 20px;position:relative;z-index:1}

/* ========== 霓虹卡片 ========== */
.card{
  background: rgba(20,22,35,0.75);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 28px;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.card::after{                     /* 底部光条 */
  content:''; position:absolute; bottom:-1px; left:20px; right:20px; height:2px;
  background: linear-gradient(90deg, transparent, #00c8ff, #a855f7, transparent);
  border-radius:4px; opacity:0; transition:opacity 0.4s;
}
.card:hover{
  border-color: rgba(0,200,255,0.3);
  box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 25px rgba(0,200,255,0.15);
  transform: translateY(-2px);
}
.card:hover::after{opacity:0.8}
.glass{
  background: rgba(30,34,50,0.5); backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.06);
}

/* ========== iOS 开关 (青色) ========== */
.switch{display:inline-flex;align-items:center;cursor:pointer;gap:8px;font-size:14px;color:#9ca3af}
.switch input{display:none}
.switch .slider{
  position:relative; width:44px; height:24px;
  background:#2d3148; border-radius:12px; transition:background .25s;
}
.switch .slider::after{
  content:''; position:absolute; top:2px; left:2px;
  width:20px; height:20px; background:#fff; border-radius:50%;
  box-shadow:0 1px 4px rgba(0,0,0,0.3); transition:transform .25s;
}
.switch input:checked+.slider{background:#00c8ff}
.switch input:checked+.slider::after{transform:translateX(20px)}

/* ========== 按钮 ========== */
.btn{
  display:inline-block; padding:12px 28px; border-radius:12px; font-weight:600;
  font-size:15px; cursor:pointer; border:none; transition:all 0.3s;
  position:relative; overflow:hidden;
}
.btn-primary{
  background: linear-gradient(135deg, #6d28d9, #2563eb, #00c8ff);
  color:#fff; box-shadow: 0 0 12px rgba(0,200,255,0.4);
  background-size:150% 150%; animation: gradientShift 4s ease infinite;
}
.btn-primary:hover{
  box-shadow: 0 0 20px rgba(0,200,255,0.7), 0 4px 18px rgba(109,40,217,0.5);
  transform: translateY(-2px);
}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.btn-outline{
  background:transparent; border:2px solid rgba(0,200,255,0.4); color:#00c8ff;
}
.btn-outline:hover{border-color:#00c8ff; box-shadow: 0 0 12px rgba(0,200,255,0.3); background:rgba(0,200,255,0.06)}
.btn-danger{
  background: linear-gradient(135deg, #e11d48, #f43f5e); color:#fff;
  box-shadow: 0 0 12px rgba(225,29,72,0.4);
}
.btn-danger:hover{box-shadow: 0 0 20px rgba(225,29,72,0.7)}

/* ========== 表单 ========== */
.input-group{margin-bottom:20px}
.input-group label{display:block; font-size:14px; font-weight:500; color:#a1a9c0; margin-bottom:6px}
.input-group input,.input-group textarea,.input-group select{
  width:100%; padding:14px 18px;
  border:2px solid rgba(255,255,255,0.08); border-radius:14px;
  font-size:15px; background: rgba(0,0,0,0.35);
  color:#e0e6f0; transition: all .3s;
}
.input-group input:focus,.input-group textarea:focus{
  border-color:#00c8ff; box-shadow: 0 0 12px rgba(0,200,255,0.2), inset 0 0 8px rgba(0,200,255,0.05);
}

/* ========== 网格 ========== */
.grid{display:grid; gap:24px}
.grid-2{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}

/* ========== 标签 ========== */
.tag{display:inline-block; padding:4px 16px; border-radius:20px; font-size:12px; font-weight:600}
.tag-hot{background:rgba(255,71,132,0.2); color:#ff4782; border:1px solid rgba(255,71,132,0.3); backdrop-filter:blur(4px)}
.tag-new{background:rgba(0,200,255,0.2); color:#00c8ff; border:1px solid rgba(0,200,255,0.3)}

/* ========== 价格 ========== */
.price{font-size:28px; font-weight:800; color:#fff; text-shadow:0 0 8px rgba(0,200,255,0.4)}
.price .original{font-size:16px; font-weight:400; color:#6b7280; text-decoration:line-through; margin-left:10px}

/* ========== 提示 ========== */
.alert{padding:16px 20px; border-radius:14px; margin-bottom:20px; font-size:14px}
.alert-success{background:rgba(16,185,129,0.15); color:#10b981; border:1px solid rgba(16,185,129,0.25)}
.alert-error{background:rgba(239,68,68,0.15); color:#ef4444; border:1px solid rgba(239,68,68,0.25)}

/* ========== 底部 ========== */
.footer{text-align:center; padding:40px 0; color:#6b7280; font-size:14px; border-top:1px solid rgba(255,255,255,0.05); margin-top:40px; position:relative; z-index:1}
.footer::before{content:''; position:absolute; top:0; left:10%; right:10%; height:1px; background:linear-gradient(90deg,transparent,#00c8ff,transparent)}

/* ========== 响应式 ========== */
@media(max-width:768px){.container{padding:0 14px}.grid-2,.grid-3{grid-template-columns:1fr}.price{font-size:22px}}