/* assets/premium-pages.css
 * 二期 视觉补丁: 给 enroll / exchange / profile 三个 secondary 页面
 * 加一层"商用级"质感, 不重写既有样式, 只在外层包一个 .premium-shell 即可生效.
 *
 * 设计语言:
 *   - 主色: 万游金 #c9a955
 *   - 中性: #1a1d22 (深) / #f5f1e8 (浅) / #e0d9c4 (边框)
 *   - 圆角: 6px (按钮/输入)、10px (卡片)
 *   - 阴影: 浅 + 双层
 *   - 字体节奏: 主标 24/32, 卡标 18/24, 正文 14/22, 副 12/18
 */

.premium-shell {
  background: linear-gradient(180deg, #f8f4ea 0%, #fdfaf3 60%, #f8f4ea 100%);
  min-height: 100vh;
  color: #1a1d22;
  font-feature-settings: "tnum" 1;
}

.premium-shell .premium-hero {
  background:
    radial-gradient(circle at 80% -20%, rgba(201, 169, 85, 0.18), transparent 60%),
    linear-gradient(135deg, #1f2125 0%, #2a2d33 70%, #34373d 100%);
  color: #faf5e7;
  padding: 56px 32px 40px;
  border-bottom: 1px solid #1a1d22;
}

.premium-shell .premium-hero h1 {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin: 0 0 8px;
  color: #f9efd2;
}

.premium-shell .premium-hero p {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(249, 239, 210, 0.7);
  max-width: 760px;
  margin: 0;
}

.premium-shell .premium-card {
  background: #ffffff;
  border: 1px solid #e8e1cc;
  border-radius: 10px;
  padding: 24px 28px;
  margin: 16px auto;
  max-width: 880px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 6px 24px rgba(28, 32, 38, 0.06);
}

.premium-shell .premium-card h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px;
  color: #1a1d22;
  letter-spacing: 0.3px;
}

.premium-shell .premium-card .sub {
  font-size: 12px;
  color: #847663;
  margin-bottom: 16px;
}

.premium-shell .premium-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #d4c89e, transparent);
  margin: 24px 0;
  border: 0;
}

.premium-shell .premium-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, #d4af5e 0%, #b89344 100%);
  color: #1a1d22;
  border: 1px solid #a07f31;
  border-radius: 6px;
  padding: 9px 22px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.3px;
  transition: transform 80ms ease, box-shadow 120ms ease;
  box-shadow:
    0 1px 0 rgba(255, 240, 200, 0.6) inset,
    0 2px 8px rgba(184, 147, 68, 0.25);
}

.premium-shell .premium-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 240, 200, 0.6) inset,
    0 4px 14px rgba(184, 147, 68, 0.35);
}

.premium-shell .premium-btn.ghost {
  background: transparent;
  color: #847663;
  border-color: #d6cdb2;
  box-shadow: none;
}

.premium-shell .premium-btn:disabled,
.premium-shell .premium-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
}

.premium-shell input[type="text"],
.premium-shell input[type="email"],
.premium-shell input[type="tel"],
.premium-shell input[type="password"],
.premium-shell input[type="number"],
.premium-shell select,
.premium-shell textarea {
  background: #fdfbf4;
  border: 1px solid #d6cdb2;
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 14px;
  color: #1a1d22;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.premium-shell input:focus,
.premium-shell select:focus,
.premium-shell textarea:focus {
  outline: none;
  border-color: #b89344;
  box-shadow: 0 0 0 3px rgba(184, 147, 68, 0.18);
}

.premium-shell label {
  font-size: 12px;
  color: #5e5345;
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
}

.premium-shell .premium-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}

@media (max-width: 720px) {
  .premium-shell .premium-grid {
    grid-template-columns: 1fr;
  }
  .premium-shell .premium-hero {
    padding: 40px 20px 28px;
  }
  .premium-shell .premium-card {
    padding: 20px 18px;
    margin: 12px;
    border-radius: 8px;
  }
}

.premium-shell .premium-tag {
  display: inline-block;
  background: rgba(201, 169, 85, 0.14);
  color: #8a6b1e;
  border: 1px solid rgba(201, 169, 85, 0.45);
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 11px;
  letter-spacing: 0.3px;
  font-weight: 500;
}

.premium-shell .premium-notice {
  background: #fff8e6;
  border: 1px solid #f0d99c;
  border-left: 3px solid #c9a955;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  color: #6e5520;
  margin: 12px 0;
  line-height: 1.6;
}

.premium-shell .premium-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.premium-shell .premium-stat {
  background: #fdfbf4;
  border: 1px solid #ece4cb;
  border-radius: 8px;
  padding: 12px 16px;
}

.premium-shell .premium-stat .label {
  font-size: 11px;
  color: #847663;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.premium-shell .premium-stat .value {
  font-size: 22px;
  font-weight: 600;
  color: #1a1d22;
  margin-top: 4px;
  letter-spacing: 0.5px;
}

.premium-shell a:not(.premium-btn) {
  color: #8a6b1e;
  text-decoration: none;
  border-bottom: 1px dotted rgba(138, 107, 30, 0.45);
}

.premium-shell a:not(.premium-btn):hover {
  color: #5e4810;
  border-bottom-color: #5e4810;
}