:root{
  --blue-600:#0b5bd3;
  --blue-700:#0a4db2;
  --blue-100:#e8f0fe;
  --text-900:#1f2937;
  --text-600:#4b5563;
  --muted:#6b7280;
  --bg:#f6f8fb;
  --radius:12px;
  --shadow-1:0 6px 16px rgba(0,0,0,.08);
  --shadow-2:0 10px 24px rgba(0,0,0,.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC",
  "Hiragino Sans GB","Microsoft Yahei","Helvetica Neue", Arial, "Noto Sans CJK SC", sans-serif;
  color:var(--text-900); background:var(--bg);
}

.container{width:min(1160px, 92%); margin:0 auto}
a{color:var(--blue-600); text-decoration:none}
a:hover{text-decoration:underline}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #d1d5db; background:#fff; padding:.6rem 1rem; border-radius:10px;
  cursor:pointer; box-shadow: var(--shadow-1);
}
.btn:hover{filter:brightness(0.98)}
.btn-primary{background:var(--blue-600); color:#fff; border-color:transparent}
.btn-primary:hover{background:var(--blue-700)}

.site-header{background:#fff; box-shadow:var(--shadow-1)}
.site-header.simple{box-shadow:none; border-bottom:1px solid #e5e7eb}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:.8rem 0}
.brand{display:flex; gap:12px; align-items:center}
.brand-compact{gap:8px}
.logo{width:40px; height:40px}
.brand-text h1{font-size:16px; margin:0}
.brand-text p{margin:.2rem 0 0; color:var(--muted); font-size:12px}

/* 模拟徽章样式 - 固定在页面左上角 */
.simulation-badge {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 9999;
  background: linear-gradient(135deg, #ff6b6b, #ee5a24);
  color: white;
  font-size: 14px;
  font-weight: bold;
  padding: 8px 12px;
  border-radius: 8px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  backdrop-filter: blur(10px);
  cursor: default;
  user-select: none;
}
.top-nav a{margin-left:16px}

main.container, .container.narrow{padding:24px 0}
.container.narrow{width:min(720px, 92%)}

.panel{
  background:#fff; box-shadow:var(--shadow-1); border-radius:var(--radius);
  padding:20px; margin:16px 0;
}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.grid-2 .form-item{width:100%}
.line{display:flex; gap:8px; align-items:center}

.form-item{display:flex; flex-direction:column; gap:6px; margin-bottom:14px}
.form-item label{color:#111827; font-size:14px}
.form-item input{
  height:40px; padding:0 12px; border:1px solid #d1d5db; border-radius:10px; outline:none;
}
.form-item input:focus{border-color:var(--blue-600); box-shadow:0 0 0 3px rgba(11,91,211,.12)}
.form-row{display:flex; align-items:center; gap:12px; margin:10px 0}
.form-row.between{justify-content:space-between}
.form-row.center{justify-content:center}
.checkbox{display:flex; align-items:center; gap:8px}
.err{color:#dc2626; min-height:1em; font-size:12px}
.link{font-size:14px}
.block{width:100%}

/* 移动端优化 */
@media (max-width: 768px){
  .container{width:95%; padding:0 10px}
  .grid-2{grid-template-columns:1fr; gap:12px}
  
  .header-inner{
    flex-direction:column; gap:8px; text-align:center; padding:.6rem 0
  }
  
  .brand-text h1{font-size:14px}
  .brand-text p{font-size:11px}
  
  .panel{
    padding:15px; margin:12px 0; border-radius:8px
  }
  
  .form-item input{
    height:44px; font-size:16px; /* 防止iOS缩放 */
  }
  
  .btn{
    padding:.8rem 1.2rem; font-size:16px; min-height:44px
  }
  
  main.container, .container.narrow{
    padding:16px 0
  }
}

@media (max-width: 480px){
  .container{width:98%; padding:0 5px}
  
  .panel{
    padding:12px; margin:8px 0
  }
  
  .brand-text h1{font-size:13px}
  .brand-text p{font-size:10px}
  
  .form-item input{
    height:48px; font-size:16px
  }
  
  .btn{
    padding:1rem 1.5rem; font-size:16px; min-height:48px
  }
}