#device.recommend-generation-device {
 --generation-ink:#1f2433;
 --generation-sub:#6b6470;
 --generation-dim:#b9aab3;
 --card:rgba(255,255,255,.72);
 --wave1:#fbd9e8;
 --wave2:#fdeaf1;
 color:var(--generation-ink);
 background:radial-gradient(120% 70% at 100% 0%,#efe3fa,transparent 60%),
  radial-gradient(100% 60% at 100% 85%,#fbe4ef,transparent 60%),#fff6f8;
}
.recommend-generation-device .status { background:transparent; }
.recommend-generation-device .content { padding:0; overflow:auto; }
.recommend-generation-device .homebar { z-index:2; }
.recommend-generation {
 position:relative;
 display:flex;
 min-height:100%;
 flex-direction:column;
 align-items:center;
 overflow:hidden;
 padding:0 24px 104px;
}
.recommend-generation .generation-back {
 position:absolute;
 z-index:1;
 top:0;
 left:14px;
 width:44px;
 height:44px;
 padding:0;
 color:var(--generation-ink);
}
.recommend-generation h1 {
 margin:44px 0 0;
 font-size:26px;
 font-weight:700;
 letter-spacing:.04em;
 text-align:center;
}
.recommend-generation .generation-subtitle {
 margin:12px 0 0;
 font-size:14px;
 color:var(--generation-sub);
 text-align:center;
 letter-spacing:.03em;
}
.recommend-generation .stage { width:100%; margin-top:17px; }
.recommend-generation .stage svg { display:block; width:100%; height:auto; overflow:visible; }
.recommend-generation .spin { transform-origin:300px 210px; animation:daily-spin 3.6s linear infinite; }
.recommend-generation .orbit { transform-origin:300px 215px; animation:daily-orbit 14s ease-in-out infinite alternate; }
.recommend-generation .beat { transform-box:fill-box; transform-origin:center; animation:daily-beat 1.8s ease-in-out infinite; }
.recommend-generation .ripple { transform-origin:300px 210px; animation:daily-ripple 1.8s ease-out infinite; }
.recommend-generation .fl { animation:daily-float 3.4s ease-in-out infinite; }
.recommend-generation .net { transform-origin:300px 210px; animation:daily-spin 16s linear infinite; }
.recommend-generation .orb2 { transform-origin:300px 210px; animation:daily-spin 8s linear infinite reverse; }
.recommend-generation .spark { transform-box:fill-box; transform-origin:center; animation:daily-spark 1.8s ease-in-out infinite; }
.recommend-generation .nd { animation:daily-twinkle 1.8s ease-in-out infinite; }
@keyframes daily-spark { 0%,100%{transform:scale(.85)} 50%{transform:scale(1.2)} }
@keyframes daily-twinkle { 50%{opacity:.3} }
@keyframes daily-spin { to{transform:rotate(360deg)} }
@keyframes daily-orbit { from{transform:rotate(-7deg) scaleY(1)} to{transform:rotate(-4deg) scaleY(1.1)} }
@keyframes daily-beat { 0%,100%{transform:scale(1)} 18%{transform:scale(1.07)} 34%{transform:scale(.99)} 50%{transform:scale(1.04)} }
@keyframes daily-ripple { 0%{transform:scale(.8);opacity:.45} 100%{transform:scale(1.9);opacity:0} }
@keyframes daily-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.recommend-generation .generation-steps {
 position:relative;
 z-index:1;
 list-style:none;
 margin:29px 0 0;
 padding:0;
 display:flex;
 flex-direction:column;
 gap:18px;
}
.recommend-generation .generation-steps li {
 display:flex;
 align-items:center;
 gap:14px;
 font-size:18px;
 color:var(--generation-dim);
 transition:color .4s;
}
.recommend-generation .step-icon { position:relative; width:28px; height:28px; flex:none; }
.recommend-generation .step-icon svg { position:absolute; inset:0; transition:opacity .35s,transform .45s cubic-bezier(.3,1.6,.5,1); }
.recommend-generation .step-icon .chk { opacity:0; transform:scale(.4); }
.recommend-generation .step-icon .spn { opacity:.5; }
.recommend-generation .generation-steps .active,
.recommend-generation .generation-steps .done { color:var(--generation-sub); }
.recommend-generation .active .spn { opacity:1; }
.recommend-generation .done .spn { opacity:0; transform:scale(.4); }
.recommend-generation .done .chk { opacity:1; transform:scale(1); }
.recommend-generation .spn circle { transform-origin:14px 14px; animation:daily-spin 3.2s linear infinite; }
.recommend-generation .wave { position:absolute; left:-10%; right:-10%; bottom:0; height:150px; pointer-events:none; }
.recommend-generation .wave svg { display:block; width:100%; height:100%; }
.recommend-generation .wave .w1 { animation:daily-sway 9s ease-in-out infinite alternate; }
.recommend-generation .wave .w2 { animation:daily-sway 12s ease-in-out infinite alternate-reverse; }
@keyframes daily-sway { from{transform:translateX(-4%)} to{transform:translateX(4%)} }
.export .recommend-generation * { animation-play-state:paused; }
@media (prefers-reduced-motion:reduce) {
 .recommend-generation * { animation:none!important; transition:none!important; }
}
@media (max-width:350px) {
 .recommend-generation { padding-inline:18px; }
 .recommend-generation h1 { font-size:23px; }
 .recommend-generation .generation-subtitle { font-size:12px; }
 .recommend-generation .generation-steps li { font-size:16px; }
}

.history-meta { display:flex; flex-direction:column; align-items:flex-end; gap:4px; flex:none; }