:root{
  --bg:#0b0e14;
  --card:#0f1522;
  --text:#eef3ff;
  --muted:#9aa6c3;
  --line:rgba(255,255,255,.10);
  --accent:#6ee7ff;
  --accent2:#a78bfa;
  --shadow: 0 12px 40px rgba(0,0,0,.45);
  --radius: 18px;
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1); /* UX: ease-out for entering */
  --ease-in: cubic-bezier(0.32, 0, 0.67, 0); /* UX: ease-in for exiting */
  --duration: 250ms; /* UX: 150-300ms for micro-interactions */
}

*{box-sizing:border-box;max-width:100%}
html,body{height:100%}
html{
  /* UX: Font loading without layout shift */
  font-display: swap;
}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Segoe UI,Roboto,Helvetica,Arial,"Noto Sans",sans-serif;
  background: var(--bg);
  color:var(--text);
  /* UX: Smooth touch scrolling */
  -webkit-overflow-scrolling: touch;
  /* 防止左右滑动 */
  overflow-x: hidden;
  width: 100%;
}

html {
  /* 防止左右滑动 */
  overflow-x: hidden;
  width: 100%;
}

/* Background Orbs - UX: Animate with transform only */
.bg-orbs{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.orb{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  opacity:0.5;
}
.orb-1{
  width:300px;height:300px;
  top:-100px;left:-50px;
  background:radial-gradient(circle, rgba(110,231,255,.4), transparent 70%);
}
.orb-2{
  width:280px;height:280px;
  bottom:-80px;right:-60px;
  background:radial-gradient(circle, rgba(167,139,250,.4), transparent 70%);
}

/* Loading Overlay - UX: Show feedback during async */
.loading-overlay{
  position:fixed;
  inset:0;
  background:rgba(11,14,20,.95);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  z-index:9999;
  opacity:0;
  visibility:hidden;
  transition:opacity var(--duration) var(--ease-out),
             visibility var(--duration);
}
.loading-overlay.active{
  opacity:1;
  visibility:visible;
}

/* Loading Spinner - UX: Continuous animation for loading only */
.loading-spinner{
  position:relative;
  width:48px;height:48px;
}
.spinner-ring{
  position:absolute;
  inset:0;
  border:3px solid transparent;
  border-top-color:var(--accent);
  border-radius:50%;
}
.spinner-ring:nth-child(1){
  animation:spin 1s linear infinite;
}
.spinner-ring:nth-child(2){
  inset:6px;
  border-top-color:var(--accent2);
  animation:spin 1.5s linear infinite reverse;
}
.spinner-ring:nth-child(3){
  inset:12px;
  border-top-color:var(--accent);
  animation:spin 2s linear infinite;
}
@keyframes spin{
  to{transform:rotate(360deg);}
}
.loading-text{
  margin-top:20px;
  font-size:14px;
  color:var(--muted);
  animation:pulse 1.5s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:0.6;}
  50%{opacity:1;}
}

.app{
  position:relative;
  z-index:1;
  max-width:760px;
  margin:0 auto;
  padding:18px 14px 28px;
  /* 防止左右滑动 */
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
}

.topbar{padding:8px 0 12px}
.brand{display:flex;gap:12px;align-items:center}
.logo{
  width:48px;height:48px;border-radius:16px;display:grid;place-items:center;
  background:linear-gradient(135deg, rgba(110,231,255,.35), rgba(167,139,250,.35));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  font-weight:900; letter-spacing:.5px;
  font-size:16px;
  color:var(--accent);
}
.title h1{margin:0;font-size:18px;line-height:1.2}
.subtitle{margin:4px 0 0;color:var(--muted);font-size:12px}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px;
}

.hero{
  padding:14px 14px 6px;
  border-radius:16px;
  border:1px solid var(--line);
  background:
    radial-gradient(600px 260px at 20% 0%, rgba(110,231,255,.14), transparent 60%),
    radial-gradient(520px 240px at 80% 30%, rgba(167,139,250,.14), transparent 60%),
    rgba(255,255,255,.02);
  margin-bottom:14px;
}
.hero-badge{
  position:relative;
  display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid var(--line);
  color:var(--accent);font-size:12px;background:rgba(110,231,255,.08);
  overflow:hidden;
}
/* Shimmer effect - UX: Subtle continuous animation for emphasis */
.badge-shimmer{
  position:absolute;
  inset:-50%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transform:skewX(-20deg);
  animation:shimmer 3s ease-in-out infinite;
}
@keyframes shimmer{
  0%{transform:translateX(-100%) skewX(-20deg);}
  100%{transform:translateX(200%) skewX(-20deg);}
}
.hero-text{margin-top:10px}
.hero-line{font-size:16px;color:var(--muted)}
.hero-line.strong{font-size:22px;color:var(--text);font-weight:900}

.grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:720px){.grid{grid-template-columns:1fr 1fr}}

.field{
  display:flex;flex-direction:column;gap:6px;padding:10px;border:1px solid var(--line);
  border-radius:14px;background:rgba(255,255,255,.015);
  /* UX: Transform only for better performance */
  transition:border-color var(--duration) var(--ease-out),
             box-shadow var(--duration) var(--ease-out),
             transform var(--duration) var(--ease-out);
}
/* UX: Touch feedback - subtle transform on active */
.field:active{
  transform:scale(0.99);
}
.field span{font-size:13px;font-weight:750}
.field small{font-size:11px;color:var(--muted);line-height:1.35}

input,select{
  width:100%;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.20);color:var(--text);outline:none;
  font-size:16px; /* UX: Prevent iOS auto-zoom */
  /* UX: Transform only for better performance */
  transition:border-color var(--duration) var(--ease-out),
             box-shadow var(--duration) var(--ease-out);
}
input::placeholder{color:rgba(154,166,195,.7)}
input:focus,select:focus{
  border-color:rgba(110,231,255,.55);
  box-shadow:0 0 0 4px rgba(110,231,255,.10);
}

/* Picker Trigger - iOS-style selector */
.picker-trigger{
  position:relative;
  width:100%;padding:11px 32px 11px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.20);color:var(--text);outline:none;
  font-size:16px;
  line-height:1.4;
  min-height:44px;
  display:flex;
  align-items:center;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  cursor:pointer;
  transition:border-color var(--duration) var(--ease-out),
             box-shadow var(--duration) var(--ease-out),
             transform var(--duration) var(--ease-out);
}
.picker-trigger:hover{
  border-color:rgba(110,231,255,.3);
}
.picker-trigger:active{
  transform:scale(0.99);
  border-color:rgba(110,231,255,.5);
}
.picker-trigger::after{
  content:"";
  position:absolute;
  right:12px;top:50%;
  transform:translateY(-50%);
  width:0;height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:5px solid var(--muted);
  pointer-events:none;
  transition:transform var(--duration) var(--ease-out);
}
.picker-trigger:active::after{
  transform:translateY(-50%) scale(0.9);
}
.picker-trigger.has-value{
  color:var(--text);
}
.picker-trigger.placeholder{
  color:rgba(154,166,195,.7);
}

/* iosSelect Dark Theme Customization */
.ios-select-widget-box.olay > div{
  background:linear-gradient(180deg, #1a1d29, #0f1522) !important;
}
.ios-select-widget-box header.iosselect-header{
  background:linear-gradient(180deg, #1a1d29, #131620) !important;
  border-bottom:1px solid rgba(255,255,255,.10) !important;
}
.ios-select-widget-box header.iosselect-header a.close{
  color:var(--muted) !important;
}
.ios-select-widget-box header.iosselect-header a.sure{
  color:var(--accent) !important;
}
.ios-select-widget-box #iosSelectTitle{
  color:var(--text) !important;
}
.ios-select-widget-box ul{
  background:transparent !important;
}
.ios-select-widget-box ul li{
  color:var(--text) !important;
  background:transparent !important;
}
.ios-select-widget-box ul li.at{
  color:var(--accent) !important;
  font-weight:700;
}
.ios-select-widget-box ul li.side1{
  color:rgba(238,243,255,.7) !important;
}
.ios-select-widget-box ul li.side2{
  color:rgba(238,243,255,.5) !important;
}
.ios-select-widget-box .cover-area1,
.ios-select-widget-box .cover-area2{
  border-top:1px solid rgba(110,231,255,.3) !important;
  background:linear-gradient(180deg, rgba(110,231,255,.1), rgba(110,231,255,.05)) !important;
}
.ios-select-widget-box .cover-area2{
  border-top:none !important;
  border-bottom:1px solid rgba(110,231,255,.3) !important;
}

/* SweetAlert2 自定义样式 - 精简深色主题 */
.swal2-popup {
  border-radius: 20px !important;
  padding: 20px 20px 16px !important;
  max-width: 280px !important;
  width: 85% !important;
  background: linear-gradient(180deg, #1a1d29, #131620) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.6) !important;
}
.swal2-icon {
  width: 48px !important;
  height: 48px !important;
  margin: 0 auto 12px !important;
  font-size: 24px !important;
  border-width: 3px !important;
}
.swal2-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #eef3ff !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}
.swal2-html-container {
  font-size: 13px !important;
  color: rgba(238,243,255,.75) !important;
  margin: 0 0 16px !important;
  padding: 0 !important;
  line-height: 1.5 !important;
}
.swal2-actions {
  margin: 0 !important;
  padding: 0 !important;
}
.swal2-confirm {
  background: linear-gradient(135deg, rgba(110,231,255,.4), rgba(167,139,250,.4)) !important;
  border: 1px solid rgba(110,231,255,.3) !important;
  border-radius: 12px !important;
  padding: 10px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #eef3ff !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 12px rgba(110,231,255,.15) !important;
}
.swal2-confirm:hover {
  background: linear-gradient(135deg, rgba(110,231,255,.5), rgba(167,139,250,.5)) !important;
  border-color: rgba(110,231,255,.5) !important;
  box-shadow: 0 6px 20px rgba(110,231,255,.3) !important;
  transform: translateY(-1px) !important;
}
.swal2-confirm:active {
  transform: translateY(0) scale(0.98) !important;
}
.swal2-icon.swal2-warning {
  border-color: #fbbf24 !important;
  color: #fbbf24 !important;
}
.swal2-icon.swal2-info {
  border-color: #6ee7ff !important;
  color: #6ee7ff !important;
}

/* Segmented Control - Better touch targets */
.seg{
  display:flex;gap:8px;padding:8px;
  border:1px dashed rgba(255,255,255,.14);
  border-radius:12px;background:rgba(0,0,0,.12);
}
.seg-option{
  flex:1;
  display:flex;align-items:center;justify-content:center;
  padding:8px 12px;border-radius:10px;
  cursor:pointer;
  /* UX: Touch feedback */
  transition:background var(--duration) var(--ease-out),
             transform 150ms var(--ease-out);
}
.seg-option:active{
  transform:scale(0.95);
}
.seg-option input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.seg-option span{
  font-size:13px;color:var(--muted);
  transition:color var(--duration) var(--ease-out);
}
.seg-option input:checked + span{
  color:var(--accent);
  font-weight:600;
}
.seg-option:has(input:checked){
  background:rgba(110,231,255,.1);
}

.range-row{display:flex;justify-content:space-between;color:var(--muted);font-size:11px}
#exec-val{color:var(--accent);font-weight:800}

/* Range Slider Styling */
input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  height:6px;
  background:rgba(255,255,255,.1);
  border-radius:3px;
  border:none;
  padding:0;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:20px;height:20px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  cursor:pointer;
  box-shadow:0 2px 8px rgba(110,231,255,.4);
}
input[type="range"]::-moz-range-thumb{
  width:20px;height:20px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--accent2));
  cursor:pointer;
  border:none;
  box-shadow:0 2px 8px rgba(110,231,255,.4);
}

/* Button with loading state */
.btn{
  position:relative;
  appearance:none;border:none;border-radius:14px;padding:12px 14px;
  background:rgba(255,255,255,.06);color:var(--text);font-weight:850;cursor:pointer;
  border:1px solid var(--line);
  font-size:15px;
  /* UX: Transform only, 150-300ms duration */
  transition:background var(--duration) var(--ease-out),
             transform 150ms var(--ease-out),
             box-shadow var(--duration) var(--ease-out);
  /* UX: Prevent double-tap zoom on iOS */
  touch-action: manipulation;
}
.btn:active{
  transform:scale(0.97);
}
.btn.primary{
  background:linear-gradient(135deg, rgba(110,231,255,.35), rgba(167,139,250,.35));
  border:1px solid rgba(255,255,255,.18);
}
.btn.primary:hover{
  box-shadow:0 0 20px rgba(110,231,255,.3);
}
.btn.ghost{background:transparent}

/* 提交按钮居中 */
#submit-btn{
  display:block;
  margin:20px auto 0;
  width:100%;
  max-width:320px;
  font-size:17px;
  padding:14px 24px;
}

/* Button loading state */
.btn-loader{
  display:none;
  position:absolute;
  inset:0;
  place-items:center;
  justify-content:center;
  align-items:center;
  gap:4px;
}
.btn.loading .btn-text{
  visibility:hidden;
}
.btn.loading .btn-loader{
  display:flex;
}
.btn-loader::before,
.btn-loader::after{
  content:"";
  width:8px;height:8px;
  border-radius:50%;
  background:var(--accent);
  animation:bounce 0.6s ease-in-out infinite alternate;
}
.btn-loader::after{
  animation-delay:0.2s;
  background:var(--accent2);
}
@keyframes bounce{
  from{transform:translateY(-4px);opacity:0.5;}
  to{transform:translateY(4px);opacity:1;}
}
.btn.loading{
  pointer-events:none;
}

.fineprint{margin:10px 2px 0;color:var(--muted);font-size:11px;line-height:1.45}
.hidden{display:none !important;}

/* Result View */
.result-top .tag{
  display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid var(--line);
  color:var(--accent);font-size:12px;background:rgba(110,231,255,.08);
}
.result-top h2{margin:10px 0 12px;font-size:22px;line-height:1.35}

.amount{
  padding:12px;border:1px solid var(--line);border-radius:16px;
  background:rgba(255,255,255,.02);
  position:relative;
  overflow:hidden;
}
/* Subtle glow effect */
.amount::before{
  content:"";
  position:absolute;
  inset:-50%;
  background:radial-gradient(circle at 50% 0%, rgba(110,231,255,.1), transparent 70%);
  pointer-events:none;
}
.amount-label{font-size:12px;color:var(--muted);position:relative;}
.amount-value{margin-top:6px;font-size:32px;font-weight:950;position:relative;
  background:linear-gradient(135deg, var(--text), var(--accent));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.amount-sub{margin-top:4px;font-size:12px;color:var(--muted);position:relative;}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);color:rgba(255,255,255,.92);font-size:12px;
}
.chip b{color:var(--accent)}

.story{
  margin-top:12px;padding:12px;border:1px solid var(--line);border-radius:16px;
  background:rgba(255,255,255,.02);
  line-height:1.65;font-size:13px;color:rgba(255,255,255,.92);
}
.story .muted{color:var(--muted)}

.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
@media(min-width:720px){.actions{grid-template-columns:1fr 1fr}}

/* 海报弹窗容器 */
.poster-wrap{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  flex-direction:column;
  background:rgba(11,14,20,.95);
  padding:0;
  border:none;
  border-radius:0;
}
/* 弹窗头部工具栏 */
.poster-tools{
  flex-shrink:0;
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:center;
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  background:rgba(26,29,41,.9);
}
.poster-tools .btn{
  font-size:14px;
  padding:10px 18px;
}
/* 海报内容区域 - 可滚动 */
.poster-wrap #poster{
  flex:1;
  width:100%;
  max-width:480px;
  height:auto;
  max-height:calc(100vh - 120px);
  margin:0 auto;
  border-radius:0;
  border:none;
  background:transparent;
  object-fit:contain;
  overflow-y:auto;
}
.poster-wrap .fineprint{
  flex-shrink:0;
  padding:12px;
  margin:0;
  background:rgba(26,29,41,.9);
  border-top:1px solid var(--line);
}
.center{text-align:center}

/* ===== Rolldate 深色主题定制 ===== */
.rolldate-container{
  font-size:18px !important;
  color:#fff !important;
}
/* 整体容器背景 */
.rolldate-container .rolldate-mask{
  background:rgba(11,14,20,.85) !important;
}
/* 头部 */
.rolldate-container header{
  background:var(--card) !important;
  border-bottom:1px solid var(--line) !important;
  line-height:50px !important;
}
.rolldate-container .rolldate-btn{
  color:var(--muted) !important;
}
.rolldate-container .rolldate-confirm{
  color:var(--accent) !important;
  font-weight:600;
}
/* 滚动区域背景 */
.rolldate-container .rolldate-panel{
  background:var(--bg) !important;
}
/* 列表项文字 - 全部白色 */
.rolldate-container .wheel-item{
  color:rgba(255,255,255,.5) !important;
}
/* 选中项 - 青色高亮 */
.rolldate-container .wheel-item.active{
  color:#6ee7ff !important;
  font-weight:600 !important;
}
/* 中间选中区域遮罩 */
.rolldate-container .rolldate-dim{
  background:rgba(15,21,34,.3) !important;
}
/* 选中区域边框 */
.rolldate-container .mask-top{
  border-bottom:1px solid var(--accent) !important;
  background:linear-gradient(180deg, var(--bg), transparent) !important;
}
.rolldate-container .mask-bottom{
  border-top:1px solid var(--accent) !important;
  background:linear-gradient(0deg, var(--bg), transparent) !important;
}

/* #birth 输入框样式 */
#birth{
  width:100%;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.20);
  color:var(--text);
  font-size:16px;
  cursor:pointer;
  transition:border-color var(--duration) var(--ease-out),
             box-shadow var(--duration) var(--ease-out);
}
#birth:hover{
  border-color:rgba(110,231,255,.3);
}
#birth:active{
  transform:scale(0.99);
  border-color:rgba(110,231,255,.5);
}
#birth::placeholder{
  color:rgba(154,166,195,.7);
}

.footer{margin-top:14px;text-align:center;color:rgba(154,166,195,.7);font-size:11px}

/* UX: prefers-reduced-motion - Respect user's motion preferences */
@media (prefers-reduced-motion: reduce){
  .badge-shimmer,
  .loading-text,
  .spinner-ring,
  .btn-loader::before,
  .btn-loader::after{
    animation:none !important;
  }
  *{
    transition-duration:0.01ms !important;
    animation-duration:0.01ms !important;
  }
}

/* Initial states for GSAP animations */
[data-animate="fade-down"]{opacity:0;transform:translateY(-20px);}
[data-animate="fade-up"]{opacity:0;transform:translateY(20px);}
[data-animate="fade-in"]{opacity:0;}
[data-animate="scale-in"]{opacity:0;transform:scale(0.9);}
[data-animate="scale-up"]{opacity:0;transform:scale(0.95);}
[data-animate="stagger"]>.field{opacity:0;transform:translateY(10px);}
[data-animate="stagger-in"]>.chip{opacity:0;transform:scale(0.9);}
[data-animate="expand"]{opacity:0;transform:scaleY(0.95);transform-origin:top;}