/* Minimal, ad-safe, no external requests */
:root{
  --bg1:#0b1220;
  --bg2:#101a33;
  --text:rgba(255,255,255,.88);
  --muted:rgba(255,255,255,.62);
  --card:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.12);
  --shadow:0 18px 55px rgba(0,0,0,.45);
  --radius:18px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  color:var(--text);
  background: radial-gradient(900px 450px at 20% 20%, rgba(110,231,255,.16), transparent 55%),
              radial-gradient(900px 450px at 85% 25%, rgba(167,139,250,.14), transparent 60%),
              linear-gradient(180deg, var(--bg1), var(--bg2));
  font-family: system-ui,-apple-system,"Noto Sans SC","Noto Sans JP","PingFang SC","Microsoft YaHei",sans-serif;
  line-height:1.8;
}

.bg{
  position:fixed; inset:0;
  background: url("./grain.png");
  opacity:.06;
  pointer-events:none;
}

.wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 26px 16px 34px;
}

.head{
  padding: 18px 16px;
  border: 1px solid var(--stroke);
  border-radius: calc(var(--radius) + 8px);
  background: rgba(255,255,255,.04);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}
.head h1{
  margin: 0;
  font-size: 40px;
  letter-spacing: -0.02em;
}
.sub{
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.card{
  margin-top: 14px;
  padding: 18px 18px;
  border: 1px solid var(--stroke);
  border-radius: calc(var(--radius) + 10px);
  background: var(--card);
  box-shadow: var(--shadow);
}
.card p{
  margin: 0 0 14px;
  color: rgba(255,255,255,.86);
  font-size: 16px;
}
.card p:last-child{ margin-bottom: 0; }

.foot{
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--radius);
  background: rgba(255,255,255,.03);
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  color: var(--muted);
  font-size: 12px;
}

.btn{
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.9);
  padding: 10px 14px;
  border-radius: 14px;
  cursor: pointer;
  font-weight: 700;
}
.btn:hover{ background: rgba(255,255,255,.09); }
.btn:active{ transform: translateY(1px); }

.tap{
  position:fixed; inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.55);
  z-index: 9999;
}
.tapBox{
  width:min(520px, calc(100% - 28px));
  border:1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  background: rgba(15,20,35,.92);
  box-shadow: var(--shadow);
  padding: 16px 16px;
}
.tapTitle{ font-size: 18px; font-weight: 800; }
.tapHint{ margin-top: 6px; color: var(--muted); font-size: 12px; }
.tapBox .btn{ margin-top: 12px; width: 100%; }