/* Onboarding pages 4-6 (page setup + invites) and the Invite friends card */
.o3-art.a4 { --k: 3; } .o3-art.a5 { --k: 4; } .o3-art.a6 { --k: 5; }
#ob[data-s="3"] { background: radial-gradient(120% 60% at 50% 0%, #1b1440 0%, #0c0a16 52%, #07070b 100%); }
#ob[data-s="4"] { background: radial-gradient(120% 60% at 50% 0%, #0f2236 0%, #0a0d14 52%, #07070b 100%); }
#ob[data-s="5"] { background: radial-gradient(120% 60% at 50% 0%, #0f2a1c 0%, #0a120d 52%, #07070b 100%); }
.o3-art.a4, .o3-art.a5, .o3-art.a6 { align-items: start; padding: 4px 0 10px; }
.o4 { width: 100%; max-width: 420px; max-height: 100%; overflow-y: auto; box-sizing: border-box; padding: 6px 20px 6px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: none; }
.o4::-webkit-scrollbar { display: none; }
.o4-pv { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 20px; background: linear-gradient(135deg, rgba(139,92,246,.22), rgba(255,255,255,.03)); border: 1px solid rgba(167,139,250,.28); }
.o4-av { width: 56px; height: 56px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #2a2450; box-shadow: 0 0 0 3px rgba(167,139,250,.45); }
.o4-av img { width: 100%; height: 100%; object-fit: cover; } .o4-av span { color: #fff; font-size: 22px; font-weight: 800; }
.o4-pt { display: flex; flex-direction: column; min-width: 0; }
.o4-pt b { color: #fff; font-size: 18px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o4-pt small { color: #c4b5fd; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.o4-url { display: flex; align-items: center; height: 58px; padding: 0 16px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.12); cursor: text; }
.o4-url:focus-within { border-color: #a78bfa; background: rgba(139,92,246,.08); }
.o4-url span { color: rgba(255,255,255,.5); font-size: 17px; font-weight: 600; flex: none; }
.o4-url input { all: unset; flex: 1; min-width: 0; color: #fff; font-size: 17px; font-weight: 700; }
.o4-msg { margin: -4px 4px 0; min-height: 18px; color: rgba(255,255,255,.5); font-size: 13px; }
.o4-msg.ok { color: #4ade80; } .o4-msg.bad { color: #fca5a5; }
.o4-f { display: flex; flex-direction: column; gap: 6px; }
.o4-f small { display: flex; justify-content: space-between; color: rgba(255,255,255,.6); font-size: 12.5px; font-weight: 650; padding: 0 4px; }
.o4-f small em { font-style: normal; color: rgba(255,255,255,.35); font-variant-numeric: tabular-nums; }
.o4-f input, .o4-f textarea { all: unset; box-sizing: border-box; width: 100%; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.12); color: #fff; font-size: 16px; line-height: 1.4; }
.o4-f textarea { min-height: 84px; white-space: pre-wrap; }
.o4-f input:focus, .o4-f textarea:focus { border-color: #a78bfa; background: rgba(139,92,246,.08); }
.o4-f input::placeholder, .o4-f textarea::placeholder, .o4-url input::placeholder, .o4-s input::placeholder, .o4-row input::placeholder { color: rgba(255,255,255,.3); }
.o4-soc { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.o4-s { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 50px; cursor: text; }
.o4-s + .o4-s { border-top: 1px solid rgba(255,255,255,.07); }
.o4-s:focus-within { background: rgba(255,255,255,.04); }
.o4-s i { flex: none; width: 82px; font-style: normal; font-size: 13.5px; font-weight: 750; color: var(--pc); }
.o4-s span { flex: none; color: rgba(255,255,255,.35); font-size: 13px; max-width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o4-s input { all: unset; flex: 1; min-width: 0; color: #fff; font-size: 15px; font-weight: 600; }
.o4-sec { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.o4-sec > b { color: #fff; font-size: 15px; } .o4-sec > small { color: rgba(255,255,255,.55); font-size: 13px; line-height: 1.45; margin-bottom: 4px; }
.o4-row { display: flex; gap: 8px; }
.o4-row input { all: unset; box-sizing: border-box; flex: 1; min-width: 0; height: 48px; padding: 0 14px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1.5px solid rgba(255,255,255,.12); color: #fff; font-size: 15px; font-weight: 600; }
.o4-row input:focus { border-color: #a78bfa; } .o4-row input:disabled { opacity: .7; }
.o4-row button { all: unset; cursor: pointer; flex: none; height: 48px; padding: 0 18px; border-radius: 14px; background: #fff; color: #0b0b10 !important; -webkit-text-fill-color: #0b0b10; font-size: 14.5px; font-weight: 750; }
.o4-row button:disabled { opacity: .4; cursor: default; }
.o4-sec .o4-msg { margin: 4px 2px 0; }
#nx:disabled { opacity: .45; }

/* invite block (Earn page card + onboarding) */
.rf-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(74,222,128,.12); color: #4ade80; }
.rf-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rf-box { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.rf-link { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 14px; border-radius: 14px; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.1); }
.rf-url { flex: 1; min-width: 0; color: rgba(255,255,255,.6); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-user-select: all; user-select: all; }
.rf-url b { color: #fff; font-weight: 750; }
.rf-copy, .rf-share { all: unset; cursor: pointer; flex: none; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 13.5px; font-weight: 750; }
.rf-copy { padding: 0 14px; background: #fff; color: #0b0b10 !important; -webkit-text-fill-color: #0b0b10; }
.rf-share { width: 38px; background: rgba(255,255,255,.1); }
.rf-share svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rf-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.rf-slots i { height: 40px; border-radius: 12px; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 750; color: rgba(255,255,255,.3); background: rgba(255,255,255,.04); border: 1.5px dashed rgba(255,255,255,.12); }
.rf-slots i.on { color: #052e16; background: #4ade80; border: 1.5px solid #4ade80; box-shadow: 0 0 14px rgba(74,222,128,.35); }
.rf-meta { display: flex; justify-content: space-between; gap: 10px; color: rgba(255,255,255,.5); font-size: 12px; font-variant-numeric: tabular-nums; }
.rf-collect { margin: 0 !important; background: #4ade80 !important; color: #052e16 !important; -webkit-text-fill-color: #052e16; }
.rf-need { margin: 0; color: rgba(255,255,255,.55); font-size: 13px; }
.rf-test { all: unset; cursor: pointer; align-self: flex-start; font-size: 12px; color: rgba(255,255,255,.4); text-decoration: underline; }
#ob.o3 { overflow: clip; } #ob .o3-track { overflow: clip; }
.o4-s .lg{border-radius:8px}.o4-s i{width:72px}
/* Page views card */
.pv-ico { background: rgba(79,163,247,.14); color: #4fa3f7; }
.pv-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 6px 0 12px; }
.pv-tiers div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 2px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); }
.pv-tiers small { font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.5); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pv-tiers b { font: 800 17px/1.15 -apple-system, system-ui, sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.pv-tiers em { font-style: normal; font-size: 10px; color: rgba(255,255,255,.4); }
.pv-tiers div.on { background: rgba(79,163,247,.14); border-color: rgba(79,163,247,.55); }
.pv-tiers div.on b { color: #8cc4ff; }
.pv-card .rf-meta { margin-bottom: 8px; }