/* Welcome / onboarding */
body { min-height: 100vh; display: flex; flex-direction: column; }

.top { width: 100%; max-width: 760px; margin: 0 auto; padding: 22px 24px 14px; display: flex; align-items: center; justify-content: space-between; }
.progress-text { margin: 0; font-size: 14px; color: var(--muted); }
.progress { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.progress i { height: 3px; border-radius: 2px; background: var(--line-2); transition: background .3s; }
.progress i.done { background: var(--accent); }

.flow { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 56px 24px 32px; }
.step h1 { font: 600 clamp(34px, 5vw, 48px)/1.05 var(--font); letter-spacing: -.04em; margin: 0 0 14px; }
.step h1:focus { outline: none; }
.lede { font-size: 18px; color: var(--muted); margin: 0 0 32px; max-width: 580px; }
.step { animation: step-in .45s var(--ease) both; }
@keyframes step-in { from { opacity: 0; transform: translateY(10px); } }

/* step 1 artwork */
.hero-art { height: 240px; border-radius: 10px; overflow: hidden; background: #0A0A16; margin-bottom: 40px; }
.hero-art span { position: absolute; border-radius: 50%; filter: blur(60px); }
.hero-art .b1 { width: 60%; height: 140%; left: -10%; top: -10%; background: var(--blue); animation: w1 16s ease-in-out infinite alternate; }
.hero-art .b2 { width: 50%; height: 120%; left: 35%; top: -40%; background: var(--pink); opacity: .85; animation: w2 18s ease-in-out infinite alternate; }
.hero-art .b3 { width: 50%; height: 120%; right: -10%; bottom: -60%; background: var(--orange); opacity: .85; animation: w1 20s ease-in-out infinite alternate-reverse; }
@keyframes w1 { to { transform: translate(14%, 8%) scale(1.1); } }
@keyframes w2 { to { transform: translate(-12%, 14%) scale(.9); } }

/* step 2: what to remember */
.options { display: grid; gap: 10px; }
.opt { position: relative; display: grid; grid-template-columns: 96px 1fr 22px; gap: 18px; align-items: center; padding: 12px 18px 12px 12px; border: 1px solid var(--line-2); border-radius: 8px; cursor: pointer; transition: border-color .15s, background .15s; }
.opt:hover { border-color: var(--muted); }
.opt input, .skip input { position: absolute; opacity: 0; pointer-events: none; }
.opt:has(input:checked) { border-color: var(--accent); background: rgba(207,255,74,.04); }
.opt:has(input:focus-visible), .skip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.opt-media { position: relative; height: 72px; border-radius: 5px; overflow: hidden; background: var(--panel-3); display: block; }
.opt-media img { width: 100%; height: 100%; object-fit: cover; }
.opt-media em { position: absolute; left: 6px; bottom: 6px; font: 600 10px var(--font); font-style: normal; background: rgba(8,8,10,.8); padding: 2px 6px; border-radius: 3px; }
.opt-media.hl { display: grid; place-items: center; background: radial-gradient(120% 90% at 0% 100%, #FF8A3D 0%, transparent 55%), radial-gradient(90% 90% at 100% 0%, #7C4DFF 0%, transparent 60%), #140C22; }
.opt-media.hl span { position: relative; z-index: 2; font-size: 26px; font-weight: 600; }
.opt-text b { display: block; font-size: 17px; font-weight: 600; }
.opt-text span { font-size: 15px; color: var(--muted); }
.check { width: 22px; height: 22px; border-radius: 5px; border: 1.5px solid var(--line-2); display: grid; place-items: center; }
.opt:has(input:checked) .check, .skip:has(input:checked) .box { background: var(--accent); border-color: var(--accent); }
.opt:has(input:checked) .check::after, .skip:has(input:checked) .box::after { content: ''; width: 9px; height: 5px; border-left: 2px solid var(--accent-ink); border-bottom: 2px solid var(--accent-ink); transform: rotate(-45deg) translate(1px, -1px); }
.warn { color: var(--orange); font-size: 15px; margin: 14px 0 0; }

/* step 3: sites to skip */
.skips { border-top: 1px solid var(--line); }
.skip { position: relative; display: grid; grid-template-columns: 22px 1fr; column-gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.skip .box { grid-row: span 2; width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid var(--line-2); display: grid; place-items: center; margin-top: 2px; }
.skip b { font-weight: 600; }
.skip span:not(.box) { font-size: 15px; color: var(--muted); }
.add-site { margin-top: 28px; }
.add-site label { display: block; font-weight: 600; margin-bottom: 8px; }
.add-row { display: flex; gap: 8px; }
.add-row input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border-radius: var(--r); border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); font: 400 16px var(--font); outline: 0; }
.add-row input:focus { border-color: var(--accent); }
.site-err { color: var(--orange); font-size: 14px; margin: 8px 0 0; }
.site-list { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.site-list li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; padding: 6px 8px 6px 12px; border-radius: 5px; background: var(--panel-2); border: 1px solid var(--line-2); }
.site-list button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; }
.site-list button:hover { color: var(--text); }

/* step 4: storage */
.storage { padding: 22px; border: 1px solid var(--line-2); border-radius: 8px; margin-bottom: 28px; }
.storage-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.storage-head span { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.meter { display: flex; height: 10px; border-radius: 3px; overflow: hidden; background: var(--panel-3); gap: 2px; }
.meter i { height: 100%; transition: width .5s var(--ease); }
#m-images, .legend [data-k="images"] i { background: var(--blue); }
#m-videos, .legend [data-k="videos"] i { background: var(--pink); }
#m-headlines, .legend [data-k="headlines"] i { background: var(--orange); }
#m-products, .legend [data-k="products"] i { background: var(--violet); }
.opt-media.pr { background: radial-gradient(120% 90% at 100% 100%, #3D5BFF 0%, transparent 55%), radial-gradient(90% 90% at 0% 0%, #FF4F9A 0%, transparent 60%), #0A0F24; }
.legend { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; color: var(--muted); }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend li.off { opacity: .4; text-decoration: line-through; }
.legend i { width: 8px; height: 8px; border-radius: 2px; }
.legend span { color: var(--text); }
.note { font-size: 14px; color: var(--muted); margin: 16px 0 0; }
.note b { color: var(--text); font-weight: 600; }
.points { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.points li { padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.points b { color: var(--text); font-weight: 600; }

/* step 5 */
.pin { padding: 20px 22px; border: 1px solid var(--line-2); border-radius: 8px; margin-bottom: 20px; }
.pin b { font-weight: 600; }
.pin ol { margin: 10px 0 0; padding-left: 20px; color: var(--muted); }
.pin li + li { margin-top: 4px; }
.summary { color: var(--muted); font-size: 15px; margin: 0 0 28px; }
.summary b { color: var(--text); font-weight: 600; }

/* footer nav */
.nav-row { position: sticky; bottom: 0; width: 100%; max-width: 760px; margin: 0 auto; padding: 16px 24px 24px; display: flex; justify-content: space-between; gap: 12px; background: linear-gradient(transparent, var(--bg) 30%); }
.nav-row .btn { min-width: 120px; }
.nav-row .btn[hidden] { display: inline-flex; visibility: hidden; }

@media (max-width: 560px) {
  .top, .progress, .flow, .nav-row { padding-inline: 16px; }
  .flow { padding-top: 36px; }
  .hero-art { height: 160px; margin-bottom: 28px; }
  .opt { grid-template-columns: 72px 1fr 22px; gap: 12px; }
  .opt-media { height: 56px; }
  .storage-head { flex-direction: column; gap: 2px; }
}