/*
README
【2026-07-23 19:21:00 +08:00】--------------------------------------------
在我的里面增加一个测试入口，只有 admin 用户能看到，做一个动画来演示白铅附件中的晶形如何形成的
----------------------------------------------------
*/
:root { color-scheme: dark; --cyan:#52d7ff; --line:rgba(130,180,220,.22); --panel:#0b121d; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:#05080d; color:#eef7ff; font-family:Inter,"PingFang SC","Microsoft YaHei",sans-serif; }
body { background:radial-gradient(circle at 50% 24%,#10283a 0,#08121d 30%,#05080d 65%); }
button, input { font:inherit; }
.hidden { display:none !important; }
.growth-app { width:min(1180px,100%); min-height:100vh; margin:auto; padding:20px clamp(14px,3vw,34px) 36px; }
.growth-header { height:72px; display:flex; align-items:center; gap:16px; }
.growth-header p { margin:0 0 4px; color:#6eacc9; font-size:11px; letter-spacing:.18em; }
.growth-header h1 { margin:0; font-size:clamp(18px,3vw,26px); }
.back-link,.icon-button { display:grid; place-items:center; width:42px; height:42px; border:1px solid var(--line); border-radius:12px; color:#eaf8ff; background:#0b1420; }
.back-link svg,.icon-button svg { width:20px; }
.test-badge { margin-left:auto; padding:5px 9px; border:1px solid rgba(82,215,255,.45); border-radius:999px; color:var(--cyan); font-size:12px; }
.auth-gate { min-height:70vh; display:grid; place-content:center; justify-items:center; color:#91a6b7; }
.gate-spinner { width:38px; height:38px; border:2px solid #193141; border-top-color:var(--cyan); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.growth-stage { position:relative; height:min(66vh,690px); min-height:420px; overflow:hidden; border:1px solid var(--line); border-radius:24px; background:radial-gradient(circle at 50% 45%,rgba(33,81,105,.42),transparent 48%),#04070b; box-shadow:0 24px 80px rgba(0,0,0,.48),inset 0 0 80px rgba(40,150,200,.07); }
#growthCanvas { width:100%; height:100%; display:block; touch-action:none; cursor:grab; }
#growthCanvas:active { cursor:grabbing; }
.stage-vignette { pointer-events:none; position:absolute; inset:0; background:linear-gradient(180deg,rgba(2,6,10,.35),transparent 25%,transparent 68%,rgba(2,6,10,.65)); }
.stage-copy { position:absolute; left:clamp(18px,4vw,46px); bottom:clamp(20px,5vw,48px); max-width:430px; text-shadow:0 2px 20px #000; }
.stage-copy span { color:var(--cyan); font-size:12px; letter-spacing:.14em; }
.stage-copy h2 { margin:8px 0 8px; font-size:clamp(24px,4vw,42px); }
.stage-copy p { margin:0; color:#b8cbd8; line-height:1.65; font-size:14px; }
.axis-note { position:absolute; top:22px; right:22px; color:#8ca4b4; font-size:12px; display:flex; align-items:center; gap:8px; }
.axis-note span { width:22px; height:1px; background:var(--cyan); box-shadow:0 0 8px var(--cyan); }
.growth-controls { display:grid; grid-template-columns:auto 1fr auto auto; gap:12px; align-items:center; padding:16px 2px; }
.play-button { height:44px; padding:0 18px; display:flex; align-items:center; gap:8px; border:0; border-radius:12px; color:#031018; background:linear-gradient(135deg,#7be5ff,#2bbce8); font-weight:700; }
.play-button svg { width:17px; }
.timeline { display:flex; gap:12px; align-items:center; color:#8fb0c2; font-size:12px; }
.timeline input { width:100%; accent-color:var(--cyan); }
.icon-button { border-radius:12px; cursor:pointer; }
.icon-button.active { color:var(--cyan); border-color:rgba(82,215,255,.5); box-shadow:inset 0 0 20px rgba(82,215,255,.1); }
.growth-steps { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin:6px 0 18px; padding:0; list-style:none; }
.growth-steps li { padding:12px; border-top:2px solid #182936; color:#607684; transition:.3s; }
.growth-steps li b { display:block; font-size:11px; margin-bottom:4px; }
.growth-steps li span { font-size:13px; }
.growth-steps li.active { color:#eafaff; border-color:var(--cyan); background:linear-gradient(180deg,rgba(82,215,255,.08),transparent); }
.science-note { display:flex; gap:14px; padding:18px; border:1px solid var(--line); border-radius:16px; background:rgba(10,18,29,.75); }
.science-note svg { flex:0 0 auto; color:var(--cyan); }
.science-note strong { font-size:14px; }
.science-note p { margin:6px 0 0; color:#8fa5b4; font-size:13px; line-height:1.7; }
@media (max-width:640px) {
  .growth-app { padding:8px 10px 28px; }
  .growth-header { height:64px; }
  .growth-header p { display:none; }
  .growth-stage { height:62vh; min-height:440px; border-radius:18px; }
  .axis-note { top:16px; right:14px; }
  .growth-controls { grid-template-columns:auto 1fr auto; }
  #rotateButton { display:none; }
  .play-button { padding:0 13px; }
  .growth-steps { overflow-x:auto; grid-template-columns:repeat(5,112px); }
  .stage-copy { right:18px; }
}