/* 基本重置与变量 */
:root{
  --bg1: #0f172a;
  --bg2: #08203a;
  --accent1: #7dd3fc;
  --accent2: #c084fc;
  --glass: rgba(255,255,255,0.06);
  --card: rgba(255,255,255,0.04);
  --text: #e6eef8;
  --muted: #9fb0c8;
  --radius: 14px;
  --container: 1100px;
  font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a {
  text-decoration: none; 
  color: inherit;
  font-weight: inherit;
  font-style: inherit;
}
a:hover {
  text-decoration: underline;
  color: inherit;
  font-weight: inherit;
  font-style: inherit;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background: linear-gradient(135deg,var(--bg1) 0%, var(--bg2) 100%);
  min-height:100%;
  display:flex;
  flex-direction:column;
  background-attachment: fixed;
  overflow-y:auto;
}

/* 动态背景的柔和动画 */
@keyframes slowShift {
  0%{filter: hue-rotate(0deg) saturate(100%);}
  50%{filter: hue-rotate(20deg) saturate(110%);}
  100%{filter: hue-rotate(0deg) saturate(100%);}
}
body::before{
  content:"";
  position:fixed;
  inset: -20%;
  background: radial-gradient(600px 400px at 10% 20%, rgba(120,90,250,0.15), transparent 10%),
              radial-gradient(500px 400px at 90% 80%, rgba(34,211,238,0.12), transparent 10%);
  z-index:0;
  pointer-events:none;
  animation: slowShift 18s linear infinite;
}

/* container */
.container{
  width:calc(100% - 40px);
  max-width:var(--container);
  margin:0 auto;
  position:relative;
  z-index:2;
  padding:10px;
}

/* header */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 0;
}
.logo{margin:0;font-size:1.2rem}
.tagline{display:block;font-size:.7rem;color:var(--muted);margin-top:4px}
.nav a{color:var(--text);text-decoration:none;margin-left:14px;opacity:.95}
.nav .btn-primary{
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  padding:8px 12px;border-radius:10px;color:#071224;font-weight:600;
  text-decoration:none;
  box-shadow: 0 6px 18px rgba(120,90,250,0.12);
}

/* hero */
.hero{margin-top:40px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent); padding:28px;border-radius:18px;box-shadow: 0 8px 30px rgba(2,6,23,0.6);backdrop-filter: blur(6px); }
.hero h2{margin:0 0 8px 0;font-size:1.6rem}
.lead{color:var(--muted);margin:0 0 16px 0}
.cta{
  display:inline-block;
  padding:12px 18px;
  border-radius:12px;
  background:linear-gradient(90deg,var(--accent2),var(--accent1));
  color:#021827;
  font-weight:700;
  text-decoration:none;
  box-shadow: 0 10px 30px rgba(12,20,40,0.25);
  transform: translateY(0);
  transition: transform .18s ease;
}
.cta:hover{transform: translateY(-3px)}

/* features grid */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:20px}
.feature{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:14px;border-radius:12px;}

/* result page */
.result-card{display:flex;justify-content:center;align-items:center;min-height:60vh;padding:40px 0}
.glass{
  width:100%;
  max-width:680px;
  padding:28px;
  border-radius:20px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  box-shadow: 0 12px 40px rgba(2,6,23,0.6);
  text-align:center;
  position:relative;
  overflow:hidden;
}
.result-card h2{margin:0 0 18px 0;font-size:1.4rem}
.result-area{
  margin:18px 0;
  min-height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:64px;
  font-weight:800;
  letter-spacing:2px;
  color:transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.06);
  position:relative;
}

/* 数字高亮样式 */
.badge {
  background: linear-gradient(90deg,var(--accent1),var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-size:5.2rem;
  padding:10px 18px;
  border-radius:12px;
  transform: translateY(0);
}

/* loader */
.loader{color:var(--muted);font-size:1rem}

/* actions */
.actions{display:flex;gap:12px;justify-content:center;margin-top:14px}
.btn{
  padding:10px 14px;border-radius:10px;border:none;background:var(--card);color:var(--text);cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:active{transform: translateY(2px)}
.share-hint{margin-top:10px;color:var(--muted);font-size:.92rem}

/* footer */
.site-footer{margin-top:auto;padding:28px 0 40px;color:var(--muted)}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.footer-bottom{text-align:center;margin-top:12px;color:var(--muted)}

/* responsive */
@media (max-width:700px){
  .result-area{font-size:40px}
  .cta,.btn-primary{padding:10px 12px}
}
/* ---- 提升动画中数字可读性的样式（添加到 styles.css 末尾） ---- */
/* 数字加载过程中：小一些 + 白色字 + 粗描边阴影 */
.result-area .number {
  font-size: clamp(2.2rem, 7vw, 3.5rem);  /* 比完成状态小 */
  font-weight: 800;
  color: #fff;

  text-shadow: 0 4px 10px rgba(0,0,0,0.5);
  transition: all 0.5s ease;  /* 平滑过渡到完成态 */
}

/* 数字加载完成：更大 + 彩色渐变 + 轻描边 */
.result-area .number.badge {
  font-size: clamp(3rem, 9vw, 5.2rem);  /* 更大 */
  background: linear-gradient(90deg, var(--accent1), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  text-shadow: 0 8px 20px rgba(0,0,0,0.45);
}