* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Rubik', -apple-system, 'Segoe UI', sans-serif;
  background: #0D0B14;
  color: #EFEAFB;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.phone {
  width: 100%;
  max-width: 420px;
  min-height: 100vh;
  background: linear-gradient(165deg, #1C1630 0%, #12101E 60%);
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
}
.screen { display: none; flex: 1; flex-direction: column; }
.screen.active { display: flex; }
.cover { font-size: 72px; text-align: center; margin-top: 16px; }
.cover-img {
  width: 100%; max-height: 190px; object-fit: cover;
  border-radius: 16px; margin-top: 20px; display: block;
}
h1 { font-size: 26px; font-weight: 800; text-align: center; line-height: 1.25; margin: 18px 0 8px; }
.subtitle { text-align: center; opacity: .55; font-size: 14px; }
.hint { text-align: center; font-size: 14px; opacity: .8; margin: 18px 0 0; line-height: 1.5; }
h2 { font-size: 21px; font-weight: 700; line-height: 1.35; margin: 26px 0 22px; }
.counter { font-size: 12px; opacity: .5; margin-top: 12px; letter-spacing: 1px; }
.pwrap { height: 6px; background: #2C2545; border-radius: 3px; overflow: hidden; }
.pbar { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #C77DFF, #F5A623); transition: width .3s ease; width: 0%; }
.answers { display: flex; flex-direction: column; gap: 12px; }
.abtn {
  background: #221B3A; border: 1px solid #37305A; color: #EFEAFB;
  border-radius: 14px; padding: 15px 16px; font-size: 15px;
  text-align: left; cursor: pointer; font-family: inherit; line-height: 1.35;
}
.abtn:active { background: #2C2450; }
.primary {
  background: linear-gradient(90deg, #8E44EC, #C77DFF); color: #fff;
  border: none; border-radius: 14px; padding: 16px; font-size: 16px;
  font-weight: 700; cursor: pointer; margin-top: 14px; font-family: inherit; width: 100%;
  text-decoration: none; text-align: center; display: block;
}
.ghost {
  background: transparent; color: #9C93BC; border: none; padding: 12px;
  font-size: 14px; cursor: pointer; margin-top: 4px; font-family: inherit;
  text-align: center; text-decoration: none; display: block;
}
.rcard {
  background: #191330; border: 2px solid #C77DFF; border-radius: 20px;
  padding: 22px 18px 14px; text-align: center; margin-top: 6px;
}
.rcard .label { font-size: 12px; letter-spacing: 2px; opacity: .6; margin-bottom: 8px; }
.rcard .emoji { font-size: 64px; line-height: 1; }
.rimg {
  width: 200px; height: 240px; object-fit: cover;
  border-radius: 18px; display: block; margin: 0 auto;
}
.rname { font-size: 22px; font-weight: 800; margin-top: 10px; }
.rshort { font-size: 15px; opacity: .85; margin-top: 6px; line-height: 1.4; }
.rfull {
  font-size: 14px; opacity: .75; line-height: 1.55; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid #2C2545; text-align: left; display: none;
}
.rfull.show { display: block; }
.wm { font-size: 11px; opacity: .35; margin-top: 14px; letter-spacing: 1px; }
.genwrap { margin-top: 60px; text-align: center; }
.genico { font-size: 40px; margin-bottom: 16px; }
.gentext { font-weight: 700; font-size: 18px; margin-bottom: 20px; }
.genpct { opacity: .5; font-size: 13px; margin-top: 10px; }
.adslot {
  background: #16121F; border: 1px dashed #37305A; border-radius: 12px;
  min-height: 250px; display: flex; align-items: center; justify-content: center;
  color: #665F85; font-size: 13px; margin: 18px 0; text-align: center; padding: 10px;
}
.hub-title { font-size: 28px; font-weight: 800; margin: 30px 0 6px; text-align: center; }
.hub-sub { text-align: center; opacity: .55; font-size: 14px; margin-bottom: 26px; }
.qcardlink {
  display: flex; align-items: center; gap: 14px;
  background: #221B3A; border: 1px solid #37305A; border-radius: 16px;
  padding: 14px; margin-bottom: 14px; text-decoration: none; color: #EFEAFB;
}
.qcardlink:active { background: #2C2450; }
.qcard-emoji { font-size: 40px; flex-shrink: 0; }
.qcard-img { width: 64px; height: 64px; object-fit: cover; border-radius: 12px; flex-shrink: 0; }
.qcard-name { font-weight: 700; font-size: 16px; line-height: 1.3; }
.qcard-meta { font-size: 12px; opacity: .5; margin-top: 3px; }
.hub-foot { font-size: 12px; opacity: .4; text-align: center; margin-top: auto; padding-top: 26px; line-height: 1.6; }
.hub-foot a { color: #9C93BC; }