/* =========================================================================
 * gp.css — Grammar Practice 主页面样式
 * 设计体系与 ezspelling / RC 完全一致：1rem = 1rpx
 * 主色渐变 #667eea → #764ba2；白色卡片、圆角、柔和阴影。
 * ========================================================================= */

/* ---------- 页面外壳 ---------- */
.page-gp {
  min-height: calc(100vh - 88rem);
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.page-gp .container {
  padding: 56rem 40rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-gp .header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 48rem;
  margin-top: 40rem;
}

.page-gp .logo-icon {
  font-size: 96rem;
  margin-bottom: 18rem;
}

.page-gp .title {
  font-size: 56rem;
  font-weight: bold;
  color: #667eea;
  margin-bottom: 10rem;
  text-align: center;
}

.page-gp .subtitle {
  font-size: 28rem;
  color: #8892b0;
  text-align: center;
  line-height: 1.6;
}

.page-gp .version {
  font-size: 22rem;
  color: #ccc;
  margin-top: 6rem;
}

/* ---------- 选择表单卡片 ---------- */
.gp-form-card {
  width: 90%;
  max-width: 1400px;
  background: #fff;
  border-radius: 20rem;
  padding: 36rem 32rem 44rem;
  box-shadow: 0 4rem 20rem rgba(0, 0, 0, 0.08);
}

.gp-form-item {
  margin-bottom: 32rem;
}
.gp-form-item:last-child {
  margin-bottom: 0;
}

.gp-form-label {
  display: block;
  font-size: 28rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 14rem;
}

/* ---------- 级联下拉组件 ---------- */
.gp-select {
  position: relative;
}

.gp-select__toggle {
  width: 100%;
  height: 90rem;
  padding: 0 24rem;
  background: #f8f8f8;
  border: 2rem solid transparent;
  border-radius: 12rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12rem;
  font-size: 30rem;
  color: #333;
  text-align: left;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.gp-select.is-open .gp-select__toggle {
  background: #fff;
  border-color: #667eea;
}

.gp-select.is-error .gp-select__toggle {
  background: #fff0f0;
  border-color: #ff6b6b;
}

.gp-select__value {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gp-select__toggle.is-empty .gp-select__value {
  color: #999;
}

.gp-select__caret {
  flex-shrink: 0;
  font-size: 22rem;
  color: #8892b0;
  transition: transform 0.2s ease;
}

.gp-select.is-open .gp-select__caret {
  transform: rotate(180deg);
}

.gp-select__panel {
  position: absolute;
  top: calc(100% + 10rem);
  left: 0;
  right: 0;
  z-index: 60;
  background: #fff;
  border: 1rem solid rgba(30, 43, 79, 0.08);
  border-radius: 16rem;
  box-shadow: 0 14rem 34rem rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8rem);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.gp-select.is-open .gp-select__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.gp-select__view {
  max-height: 360rem;
  overflow-y: auto;
  padding: 8rem;
  -webkit-overflow-scrolling: touch;
}

.gp-select__item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10rem;
  padding: 16rem 18rem;
  border-radius: 10rem;
  font-size: 28rem;
  color: #33415c;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
  border: none;
  background: transparent;
}

.gp-select__item:hover {
  background: #f2f5ff;
}

.gp-select__item.is-selected {
  background: #e8f0ff;
  color: #667eea;
  font-weight: bold;
}

.gp-select__item-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 生成按钮 ---------- */
.gp-btn-generate {
  width: 90%;
  max-width: 1400px;
  height: 96rem;
  margin-top: 32rem;
  border-radius: 50rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  box-shadow: 0 4rem 20rem rgba(102, 126, 234, 0.3);
  color: #fff;
  font-size: 34rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  border: none;
}

.gp-btn-generate:active {
  transform: translateY(2rem);
  box-shadow: 0 2rem 12rem rgba(102, 126, 234, 0.3);
}

/* ---------- 返回主页按钮 ---------- */
.gp-btn-home {
  width: 90%;
  max-width: 1400px;
  height: 96rem;
  margin-top: 24rem;
  border-radius: 50rem;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  box-shadow: 0 4rem 20rem rgba(79, 172, 254, 0.3);
  color: #fff;
  font-size: 34rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  border: none;
}

.gp-btn-home:active {
  transform: translateY(2rem);
  box-shadow: 0 2rem 12rem rgba(79, 172, 254, 0.3);
}

/* ---------- 页脚 ---------- */
.gp-footer {
  margin-top: auto;
  padding: 40rem 20rem calc(40rem + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 24rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #aaa;
}

/* ---------- 小屏适配 ---------- */
@media (max-width: 674px) {
  .gp-form-card {
    max-width: 100%;
    padding: 32rem 28rem 36rem;
  }
  .gp-btn-generate,
  .gp-btn-home,
  .gp-result {
    max-width: 100%;
  }
}

/* ---------- 小屏字号保底 ---------- */
@media (max-width: 524px) {
  .page-gp .version,
  .page-gp .subtitle,
  .gp-footer,
  .gp-result-hint,
  .gp-result-explanation {
    font-size: 14px;
  }
}

@media (max-width: 449px) {
  .page-gp .subtitle,
  .gp-form-label,
  .gp-select__item,
  .gp-btn-generate,
  .gp-btn-home,
  .gp-result-q-text,
  .gp-result-answer-body,
  .gp-toggle-label {
    font-size: 14px;
  }
}