/* --------- 变量 --------- */
:root{
  --c1:#1a5d1a;
  --c2:#0d47a1;
  --g:linear-gradient(135deg,var(--c1),var(--c2));
}

/* --------- 基础 --------- */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Microsoft YaHei',sans-serif;background:#f8f9fa;color:#333;line-height:1.6}

/* --------- 首屏 banner --------- */
.hero{
  position:relative;
  /* 关键：用 min-height 代替 height，并加入安全区域 */
  min-height:100vh;
  min-height: -webkit-fill-available;   /* iOS Safari */
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#fff;
  background:url("../banner (3).jpg") center/cover no-repeat;
  padding:env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) env(safe-area-inset-bottom, 20px) env(safe-area-inset-left, 20px);
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
}
.hero-inner{
  position:relative;
  z-index:1;
  width:100%;
  max-width:500px;
  padding:0 15px;          /* 窄屏左右留白 */
}

/* 标题大小自适应 */
.hero h1{font-size:clamp(1.8rem, 5vw, 2.5rem);margin-bottom:10px}
.hero p{font-size:clamp(1rem, 2.5vw, 1.2rem);margin-bottom:25px}

/* --------- 表单 --------- */
.naming-form{
  background:rgba(255,255,255,.95);
  border-radius:12px;
  padding:clamp(15px, 3vw, 25px);
  width:100%;
  box-shadow:0 8px 30px rgba(0,0,0,.25);
}
.naming-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:15px}
.naming-option{padding:12px;border:2px solid #e0e0e0;border-radius:8px;text-align:center;cursor:pointer;transition:.3s;color:#333;font-size:clamp(.8rem, 2vw, 1rem)}
.naming-option.active{border-color:var(--c2);background:rgba(13,71,161,.05)}
.option-badge{display:inline-block;padding:3px 8px;border-radius:12px;font-size:.7rem;color:#fff;margin-bottom:6px}
.free-badge{background:#4caf50}.premium-badge{background:#ff9800}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-group{margin-bottom:12px}label{font-weight:bold;margin-bottom:4px;display:block;font-size:.9rem;color: #666;}
input,select,textarea{width:100%;padding:8px;border:2px solid #e0e0e0;border-radius:6px;font-size:.95rem}
input:focus,select:focus,textarea:focus{border-color:var(--c1);outline:none}
.submit-btn{background:var(--g);color:#fff;padding:10px 0;border:none;border-radius:25px;font-size:1rem;cursor:pointer;width:100%;transition:.3s}
.submit-btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(0,0,0,.2)}

/* --------- 结果 --------- */
.results-section{display:none;background:#fff;padding:30px 15px;border-radius:12px;margin:30px 0;box-shadow:0 5px 20px rgba(0,0,0,.1)}
.results-grid{display:grid;gap:15px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.result-card{background:#f9fafb;border:1px solid #e0e0e0;border-radius:8px;padding:15px}
.result-title{font-size:1.3rem;color:var(--c2);margin-bottom:8px;text-align:center}
.detail-item{display:flex;justify-content:space-between;padding:4px 0;font-size:.85rem;border-bottom:1px solid #f0f0f0}
.detail-label{font-weight:bold;color:#555}

/* --------- 卖点 --------- */
.features-section{background:#fff;padding:40px 0;margin:30px 0;border-radius:12px}
.features-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));text-align:center}
.feature-icon{width:50px;height:50px;background:var(--g);border-radius:50%;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.3rem}

/* --------- 页脚 --------- */
footer{background:#333;color:#fff;text-align:center;padding:15px 0;font-size:.8rem}

/* --------- 加载 --------- */
.loading{text-align:center;padding:20px;display:none}
.loading-spinner{border:3px solid #f3f3f3;border-top:3px solid var(--c1);border-radius:50%;width:30px;height:30px;margin:0 auto;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* --------- 响应式 --------- */
@media(max-width:768px){
  .hero{min-height:-webkit-fill-available;padding-top:max(60px,env(safe-area-inset-top))}
  .form-row{grid-template-columns:1fr}
  .hero h1{font-size:1.6rem}
  .naming-options{grid-template-columns:1fr}
}
/* ===== 移动端输入文字颜色 ===== */
@media (max-width: 768px) {
  .naming-form input,
  .naming-form select,
  .naming-form textarea {
    color: #222;          /* 深灰色文字 */
    background-color: #fff; /* 纯白背景，不透 */
    border-color: #ccc;
  }
  /* 占位符颜色稍浅，避免刺眼 */
  .naming-form input::placeholder,
  .naming-form textarea::placeholder {
    color: #666;
  }
}
/* 日期、时间通用容器 */
.date-wrapper{
  position:relative;
}
.date-display{          /* 用户看到的漂亮框 */
  padding:8px;
  border:2px solid #e0e0e0;
  border-radius:6px;
  background:#fff;
  color:#222;
  cursor:pointer;
  font-size:.95rem;
}
.date-native{           /* 真正工作的原生 input */
  position:absolute;
  inset:0;              /* 上右下左全 0 */
  width:100%;
  height:100%;
  opacity:0;            /* 完全透明 */
  cursor:pointer;
}
.date-wrapper{position:relative}
.date-display{padding:8px;border:2px solid #e0e0e0;border-radius:6px;background:#fff;cursor:pointer}
.date-native{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}

/* 结果卡片瀑布流 */
.results-grid{
  display: grid;
  gap: 25px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.result-card{
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  transition: transform .3s;
}
.result-card:hover{
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0,0,0,.15);
}
.card-header{
  background: var(--g);
  color: #fff;
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.score-line span{
  margin-left: 10px;
  font-size: .8rem;
}
.trademark.low{color:#4caf50}
.trademark.medium{color:#ff9800}
.trademark.high{color:#f44336}

.slogan{
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--c2);
  margin: 10px 20px;
  text-align: center;
}
.section{
  padding: 10px 20px;
  border-bottom: 1px solid #f0f0f0;
}
.section h4{
  margin-bottom: 5px;
  color: var(--c1);
}
.keywords{
  color: #666;
  font-size: .9rem;
}

.card-actions{
  display: flex;
  gap: 10px;
  padding: 15px 20px;
}
.btn-copy, .btn-share, .btn-trademark{
  flex: 1;
  padding: 8px 0;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: .9rem;
  transition: .3s;
}
.btn-copy{background: #4caf50;color: #fff}
.btn-share{background: #2196f3;color: #fff}
.btn-trademark{background: #ff9800;color: #fff}
.btn-copy:hover, .btn-share:hover, .btn-trademark:hover{
  opacity: .9;
}

/* 骨架屏 */
.skeleton{
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton 1.5s infinite;
  border-radius: 4px;
  height: 20px;
  margin: 10px 0;
}
@keyframes skeleton{
  0%{background-position: 200% 0}
  100%{background-position: -200% 0}
}
/* 名字高对比金色 */
.result-title{
  font-size: 1.3rem;
  color: #d4af37;          /* 高端金色 */
  text-shadow: 0 0 2px rgba(0,0,0,.15);
  margin-bottom: 8px;
  text-align: center;
}

/* ===== 结果卡片：PC 一行3条 ===== */
.results-grid{
  display: grid;
  gap: 25px;
  grid-template-columns: repeat(3, 1fr);   /* PC 一行3条 */
}
@media (max-width: 1200px) {
  .results-grid{
    grid-template-columns: repeat(2, 1fr); /* 平板 一行2条 */
  }
}
@media (max-width: 768px) {
  .results-grid{
    grid-template-columns: 1fr;            /* 手机 一行1条 */
  }
}

/* 卡片最小宽度，防止过窄 */
.result-card{
  min-width: 0;
}