/* ============================================
   星命出行 — Global Stylesheet (styles.css)
   ============================================ */

:root {
  --black: #0a0a0f;
  --black2: #111118;
  --gold: #d4a853;
  --gold-light: #f0d68a;
  --gold-dark: #a07828;
  --white: #eee;
  --gray: #888;
  --gray-light: #aaa;
  --wood: #4a8c5c;
  --fire: #c0392b;
  --earth: #8b6f47;
  --metal: #c0c0c0;
  --water: #2980b9;
  --card-bg: rgba(20,18,28,0.85);
  --card-border: rgba(212,168,83,0.25);
  --shadow: 0 4px 30px rgba(0,0,0,0.5);
  --font-cn: "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html, body {
  width:100%; height:100%;
  font-family:var(--font-cn);
  background:var(--black);
  color:var(--white);
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
}

#app {
  width:100%; height:100%;
  position:relative;
}

/* ======== Page Base ======== */
.page {
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity 0.5s ease, transform 0.5s ease;
  transform:translateX(30px);
  overflow:hidden;
}
.page.active {
  opacity:1; visibility:visible;
  transform:translateX(0);
  z-index:10;
}
.page.exit-left {
  opacity:0; visibility:hidden;
  transform:translateX(-30px);
}

.page-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  background-repeat:no-repeat;
  background-color:var(--black);
  z-index:0;
}
.page-bg::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,15,0.3) 0%, rgba(10,10,15,0.6) 100%);
}

.overlay {
  position:relative; z-index:1;
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:20px 24px 60px;
}

/* ======== Disclaimer ======== */
.disclaimer {
  position:fixed; bottom:0; left:0; right:0;
  text-align:center; padding:8px 16px;
  font-size:11px; color:var(--gray);
  background:rgba(10,10,15,0.9);
  z-index:999;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

/* ======== Card ======== */
.card {
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:16px;
  padding:28px 24px;
  width:100%; max-width:360px;
  position:relative;
  overflow:hidden;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.card-glow {
  position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  background:radial-gradient(circle at 50% 50%, rgba(212,168,83,0.06), transparent 60%);
  pointer-events:none;
}
.card-title {
  text-align:center;
  font-size:18px; font-weight:600;
  color:var(--gold-light);
  margin-bottom:20px;
  letter-spacing:2px;
}

/* ======== Buttons ======== */
.btn-primary, .btn-secondary {
  display:block; width:100%;
  padding:14px 20px;
  border:none; border-radius:12px;
  font-size:16px; font-weight:600;
  cursor:pointer;
  transition:all 0.3s ease;
  letter-spacing:1px;
  font-family:var(--font-cn);
}
.btn-primary {
  background:linear-gradient(135deg, var(--gold-dark), var(--gold));
  color:var(--black);
  box-shadow:0 0 20px rgba(212,168,83,0.3);
}
.btn-primary:active {
  transform:scale(0.97);
  box-shadow:0 0 10px rgba(212,168,83,0.2);
}
.btn-primary.disabled, .btn-primary:disabled {
  background:var(--black2);
  color:var(--gray);
  box-shadow:none;
  cursor:not-allowed;
}
.btn-primary.glow {
  animation:btnGlow 2s ease-in-out infinite;
}
@keyframes btnGlow {
  0%,100% { box-shadow:0 0 20px rgba(212,168,83,0.3); }
  50% { box-shadow:0 0 40px rgba(212,168,83,0.6); }
}
.btn-secondary {
  background:transparent;
  color:var(--gold);
  border:1px solid var(--gold-dark);
}
.btn-secondary:active {
  background:rgba(212,168,83,0.1);
}

/* ======== Page 1: Splash ======== */
.splash-content {
  display:flex; flex-direction:column; align-items:center;
  gap:20px;
}
.splash-title {
  font-size:36px; font-weight:700;
  text-align:center;
  line-height:1.4;
  color:var(--gold-light);
  text-shadow:0 0 30px rgba(212,168,83,0.4);
  animation:fadeInDown 1s ease;
}
.splash-subtitle {
  font-size:15px;
  color:var(--gray-light);
  letter-spacing:4px;
  animation:fadeInDown 1s ease 0.3s both;
}
.splash-content .btn-primary {
  width:240px;
  margin-top:10px;
  animation:fadeInDown 1s ease 0.6s both;
}
.star-rotate {
  width:120px; height:120px;
  border:2px solid var(--gold-dark);
  border-radius:50%;
  position:relative;
  animation:spin 8s linear infinite;
}
.star-rotate::before, .star-rotate::after {
  content:''; position:absolute;
  background:var(--gold);
  opacity:0.3;
}
.star-rotate::before {
  top:50%; left:10%; width:80%; height:1px;
}
.star-rotate::after {
  left:50%; top:10%; width:1px; height:80%;
}
@keyframes spin { to { transform:rotate(360deg); } }

.runes {
  display:flex; gap:20px;
  justify-content:center;
}
.rune {
  width:32px; height:32px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700;
  animation:breathe 3s ease-in-out infinite;
  opacity:0.7;
}
.rune-wood { color:var(--wood); border:1px solid var(--wood); animation-delay:0s; }
.rune-fire { color:var(--fire); border:1px solid var(--fire); animation-delay:0.6s; }
.rune-earth { color:var(--earth); border:1px solid var(--earth); animation-delay:1.2s; }
.rune-metal { color:var(--metal); border:1px solid var(--metal); animation-delay:0.3s; }
.rune-water { color:var(--water); border:1px solid var(--water); animation-delay:0.9s; }
@keyframes breathe {
  0%,100% { opacity:0.5; transform:scale(1); }
  50% { opacity:1; transform:scale(1.2); }
}

/* ======== Page 2: Privacy ======== */
.privacy-card { text-align:center; }
.privacy-icon {
  font-size:36px; color:var(--gold);
  margin-bottom:8px;
}
.privacy-text {
  font-size:14px; line-height:1.8;
  color:var(--gray-light);
  margin-bottom:20px;
}
.checkbox-wrap {
  display:flex; align-items:center; gap:10px;
  cursor:pointer; margin-bottom:20px;
  justify-content:center;
}
.checkbox-wrap input { display:none; }
.check-box {
  width:20px; height:20px;
  border:2px solid var(--gold-dark);
  border-radius:4px;
  position:relative;
  transition:all 0.3s;
  flex-shrink:0;
}
.checkbox-wrap input:checked + .check-box {
  background:var(--gold);
  border-color:var(--gold);
}
.checkbox-wrap input:checked + .check-box::after {
  content:'✓'; position:absolute;
  inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--black); font-size:14px; font-weight:700;
}
.check-label { font-size:13px; color:var(--gray-light); }

/* ======== Page 3: Form ======== */
.form-container { max-width:380px; }
.form-group {
  margin-bottom:16px;
}
.form-label {
  display:block;
  font-size:13px; color:var(--gold-light);
  margin-bottom:6px;
  letter-spacing:1px;
}
.select-wrap {
  position:relative;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--card-border);
  border-radius:8px;
  padding:12px 14px;
  cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
}
.select-value { font-size:14px; color:var(--white); flex:1; }
.select-arrow { color:var(--gold); font-size:10px; transition:transform 0.3s; }
.select-wrap.open .select-arrow { transform:rotate(180deg); }
.select-dropdown {
  position:absolute; top:100%; left:0; right:0;
  background:var(--black2);
  border:1px solid var(--card-border);
  border-radius:8px;
  max-height:180px; overflow-y:auto;
  z-index:20;
  display:none;
  list-style:none;
}
.select-wrap.open .select-dropdown { display:block; }
.select-dropdown li {
  padding:10px 14px;
  font-size:13px;
  color:var(--gray-light);
  cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.select-dropdown li:last-child { border-bottom:none; }
.select-dropdown li:active { background:rgba(212,168,83,0.1); }

.date-inputs {
  display:flex; gap:8px;
}
.date-select {
  flex:1;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--card-border);
  border-radius:8px;
  padding:12px 8px;
  font-size:13px;
  color:var(--white);
  font-family:var(--font-cn);
  appearance:none; -webkit-appearance:none;
  text-align:center;
}
.date-select option { background:var(--black2); color:var(--white); }

.preference-group {
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
}
.pref-option {
  text-align:center;
  padding:12px 8px;
  border:1px solid var(--card-border);
  border-radius:8px;
  font-size:13px;
  color:var(--gray-light);
  cursor:pointer;
  transition:all 0.3s;
}
.pref-option.active {
  border-color:var(--gold);
  background:rgba(212,168,83,0.15);
  color:var(--gold-light);
}

/* ======== Page 4: Loading ======== */
.loading-content {
  display:flex; flex-direction:column; align-items:center;
  gap:24px;
}
.loading-star {
  width:100px; height:100px;
  border:2px solid var(--gold);
  border-radius:50%;
  position:relative;
  animation:spin 1.5s linear infinite;
}
.loading-star::before, .loading-star::after {
  content:''; position:absolute;
  background:var(--gold);
}
.loading-star::before { top:50%; left:5%; width:90%; height:1px; }
.loading-star::after { left:50%; top:5%; width:1px; height:90%; }
.loading-trigram {
  width:120px; height:80px;
  background:linear-gradient(90deg, transparent, var(--gold-dark), transparent);
  opacity:0.3;
  animation:trigramReveal 1.5s ease infinite;
}
@keyframes trigramReveal {
  0% { opacity:0.1; transform:scaleX(0.5); }
  50% { opacity:0.5; transform:scaleX(1); }
  100% { opacity:0.1; transform:scaleX(0.5); }
}
.loading-text {
  font-size:14px; color:var(--gray-light);
  text-align:center;
  letter-spacing:1px;
  min-height:44px;
}
.loading-bar {
  width:200px; height:3px;
  background:rgba(255,255,255,0.1);
  border-radius:2px;
  overflow:hidden;
}
.loading-bar-fill {
  height:100%;
  background:linear-gradient(90deg, var(--gold-dark), var(--gold));
  border-radius:2px;
  transition:width 0.1s linear;
}

/* ======== Pages 5-6: Result ======== */
.result-scroll {
  width:100%; max-width:380px;
  height:100%;
  overflow-y:auto;
  padding:20px 4px 80px;
  -webkit-overflow-scrolling:touch;
}
.result-title {
  font-size:17px;
  margin-bottom:16px;
}
.result-card {
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:12px;
  padding:16px;
  margin-bottom:12px;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  animation:cardIn 0.5s ease both;
}
.result-card:nth-child(2) { animation-delay:0.1s; }
.result-card:nth-child(3) { animation-delay:0.2s; }
.result-card:nth-child(4) { animation-delay:0.3s; }
.result-card:nth-child(5) { animation-delay:0.4s; }

@keyframes cardIn {
  from { opacity:0; transform:translateY(20px); }
  to { opacity:1; transform:translateY(0); }
}
.result-label {
  font-size:13px; color:var(--gold-light);
  margin-bottom:8px;
  letter-spacing:1px;
}
.result-text {
  font-size:14px; line-height:1.7;
  color:var(--gray-light);
}
.good-match { border-color:rgba(74,140,92,0.4); }
.bad-match { border-color:rgba(192,57,43,0.4); }
.conclusion { border-color:var(--gold-dark); }

.nav-buttons {
  display:flex; gap:12px;
  margin-top:16px;
}
.nav-buttons .btn-primary, .nav-buttons .btn-secondary {
  flex:1;
}

/* ======== Page 6: Bazi extras ======== */
.wuxing-icons {
  display:flex; gap:12px;
  margin-top:10px;
  justify-content:center;
}
.wuxing-icon {
  width:36px; height:36px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700;
  border:1px solid;
  opacity:0.8;
}

/* ======== Page 7: Report ======== */
.report-scroll {
  width:100%; max-width:400px;
  height:100%;
  overflow-y:auto;
  padding:20px 4px 80px;
  -webkit-overflow-scrolling:touch;
}
.report-section {
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:12px;
  padding:18px;
  margin-bottom:14px;
  animation:cardIn 0.5s ease both;
}
.report-section:nth-child(2) { animation-delay:0.1s; }
.report-section:nth-child(3) { animation-delay:0.2s; }
.report-section:nth-child(4) { animation-delay:0.3s; }
.report-section:nth-child(5) { animation-delay:0.4s; }
.report-icon { font-size:28px; margin-bottom:6px; }
.report-section h3 {
  font-size:15px; color:var(--gold-light);
  margin-bottom:8px;
}
.report-section p {
  font-size:13px; line-height:1.8;
  color:var(--gray-light);
}

/* ======== Page 8: Poster ======== */
.poster-content {
  display:flex; flex-direction:column; align-items:center;
  gap:16px;
  width:100%;
}
.poster-frame {
  width:100%; max-width:320px;
  aspect-ratio:9/16;
  border-radius:12px;
  overflow:hidden;
  border:2px solid var(--gold-dark);
  box-shadow:0 0 30px rgba(212,168,83,0.2);
  position:relative;
  background:var(--black);
}
#poster-canvas {
  width:100%; height:100%;
  display:block;
}
.poster-buttons {
  display:flex; flex-direction:column; gap:10px;
  width:100%; max-width:320px;
}

/* ======== Network Toast ======== */
.network-toast {
  position:fixed; top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.9);
  display:none;
  flex-direction:column; align-items:center; justify-content:center;
  gap:16px;
  z-index:9999;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.network-toast.show { display:flex; }
.network-toast p { font-size:15px; color:var(--gray-light); }
.network-toast button {
  padding:10px 30px;
  border:1px solid var(--gold);
  border-radius:8px;
  background:transparent;
  color:var(--gold);
  font-size:14px;
  cursor:pointer;
}

/* ======== Animations ======== */
@keyframes fadeInDown {
  from { opacity:0; transform:translateY(-15px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(15px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes pulse {
  0%,100% { opacity:1; }
  50% { opacity:0.5; }
}

/* ======== Scrollbar Hide ======== */
.result-scroll::-webkit-scrollbar, .report-scroll::-webkit-scrollbar {
  width:0;
}

/* ======== Responsive ======== */
@media (max-width:360px) {
  .splash-title { font-size:28px; }
  .card { padding:20px 16px; }
  .preference-group { grid-template-columns:1fr 1fr; gap:6px; }
  .pref-option { padding:10px 6px; font-size:12px; }
  .date-select { font-size:12px; padding:10px 4px; }
}
@media (min-height:800px) {
  .overlay { padding:40px 24px 80px; }
}