/* ORDERPAD app pages: wizard, coin page, orders, content pages */
.narrow { max-width: 820px } .narrow2 { max-width: 900px }
.wrap.narrow, .wrap.narrow2 { margin-left: auto; margin-right: auto }

/* ---------- wizard ---------- */
.prog { list-style: none; display: flex; gap: 10px; margin: 0 0 26px; padding: 0 }
.prog li { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border: var(--line); border-radius: var(--r2); background: var(--paper); font: 600 17px/1 var(--display); opacity: .7 }
.prog li .pn { flex: none; width: 30px; height: 30px; border: 3px solid var(--ink); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 15px/1 var(--display); background: var(--paper) }
.prog li.on { background: var(--mint); opacity: 1; box-shadow: 0 4px 0 var(--ink) } .prog li.done { background: var(--mintl); opacity: 1 } .prog li.done .pn { background: var(--mint) }
@media (max-width: 560px) { .prog li { flex-direction: column; justify-content: center; gap: 4px; padding: 6px; font-size: 14.5px; text-align: center } }
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-bottom: 26px }
.pick { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px; text-align: left; border: var(--line); border-radius: var(--r); background: var(--paper); box-shadow: var(--sh); cursor: pointer; position: relative; transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), background .15s, box-shadow .2s }
.pick:hover { transform: translateY(-5px) rotate(-.6deg); box-shadow: 5px 10px 0 var(--ink) }
.pick .btile { align-self: stretch; height: 70px; font-size: 26px }
.pick h3 { font-size: 22px } .pick small { font: 600 14.5px/1.3 var(--text); color: var(--ink2) }
.pick[aria-checked="true"] { background: var(--mintl); box-shadow: 0 0 0 4px var(--mint), var(--sh) }
.pick[aria-checked="true"]::after { content: ''; position: absolute; right: 14px; top: 14px; width: 30px; height: 30px; border: 3px solid var(--ink); border-radius: 50%; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%23054a2b' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat }
.navrow { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; margin-top: 8px }
.navrow .btn.pri { margin-left: auto }
.upl { display: flex; align-items: center; gap: 16px; padding: 14px; border: 3px dashed var(--ink); border-radius: var(--r2); background: var(--mintxl); cursor: pointer; min-height: 96px }
.upl:hover, .upl:focus-within { background: var(--mintl) }
.upl input { position: absolute; width: 1px; height: 1px; opacity: 0 }
.upl .pv { flex: none; width: 76px; height: 76px; border: var(--line); border-radius: 18px; background: var(--paper); object-fit: cover; display: flex; align-items: center; justify-content: center; overflow: hidden }
.upl .pv img { width: 100%; height: 100%; object-fit: cover }
.upl b { font: 600 18px/1.2 var(--display) } .upl span { display: block; font-size: 14px; font-weight: 600; color: var(--ink2) }
.count { text-align: right; font-size: 13.5px; font-weight: 700; color: var(--ink2) }
.review { display: grid; gap: 22px }
.rhead { display: flex; align-items: center; gap: 18px }
.cimg { width: 72px; height: 72px; border: var(--line); border-radius: 20px; object-fit: cover; background: var(--mintl); flex: none }
.rhead h2 { font-size: clamp(28px, 5vw, 44px); word-break: break-word }
.rhead h2 span { color: var(--mintd) }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px }
.fact { border: 3px solid var(--ink); border-radius: var(--r2); padding: 12px 14px; background: var(--paper) } .fact small { display: block; font: 800 12.5px/1.2 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--ink2) } .fact b { display: block; margin-top: 4px; font: 600 20px/1.2 var(--display); word-break: break-word }
.olist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: o }
.olist li { display: flex; gap: 14px; align-items: flex-start; font-weight: 700; line-height: 1.4 }
.olist li::before { counter-increment: o; content: counter(o); flex: none; width: 30px; height: 30px; border: 3px solid var(--ink); border-radius: 10px; background: var(--mint); display: inline-flex; align-items: center; justify-content: center; font: 700 16px/1 var(--display) }
.chk { display: flex; gap: 14px; align-items: flex-start; font-weight: 700; cursor: pointer; padding: 14px; border: 3px solid var(--ink); border-radius: var(--r2); background: var(--sunl) }
.chk input { appearance: none; flex: none; width: 28px; height: 28px; border: 3px solid var(--ink); border-radius: 9px; background: var(--paper); cursor: pointer; margin: 0; display: grid; place-content: center }
.chk input:checked { background: var(--mint) } .chk input:checked::after { content: ''; width: 7px; height: 13px; border: solid var(--ink); border-width: 0 3.5px 3.5px 0; transform: rotate(45deg) translate(-1px, -1px) }
.wstate { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; padding: 14px 16px; border: 3px solid var(--ink); border-radius: var(--r2); background: var(--paper) }

.run { display: grid; gap: 22px; text-align: center; justify-items: center; padding: 34px 22px }
.run .cartgif { width: 120px; height: 120px; object-fit: contain; animation: bob 1.8s ease-in-out infinite }
.rsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; width: 100%; max-width: 440px; text-align: left }
.rsteps li { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; border: 3px solid var(--mintl); border-radius: 14px; font-weight: 800; color: var(--ink2) }
.rsteps li .st { flex: none; width: 26px; height: 26px; border: 3px solid var(--ink2); border-radius: 50%; position: relative }
.rsteps li.wait { border-color: var(--ink); color: var(--ink); background: var(--sunl) } .rsteps li.wait .st { border-color: var(--ink); border-right-color: transparent; animation: spin .8s linear infinite }
.rsteps li.done { border-color: var(--ink); color: var(--ink); background: var(--mintl) } .rsteps li.done .st { background: var(--mint); border-color: var(--ink) } .rsteps li.done .st::after { content: ''; position: absolute; left: 6px; top: 1px; width: 6px; height: 11px; border: solid var(--ink); border-width: 0 3px 3px 0; transform: rotate(45deg) }
.rsteps li.bad { border-color: var(--coral); color: var(--coral); background: var(--coralxl) } .rsteps li.bad .st { border-color: var(--coral); background: var(--coral) }
.okmark { width: 150px; height: 150px }
.okmark circle { fill: var(--mint); stroke: var(--ink); stroke-width: 6; transform-origin: center; animation: pop .5s cubic-bezier(.3, 1.6, .5, 1) both }
.okmark path { fill: none; stroke: var(--ink); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 70; stroke-dashoffset: 70; animation: draw .6s .35s ease forwards }
@keyframes draw { to { stroke-dashoffset: 0 } }
html.calm .okmark path { stroke-dashoffset: 0 }

/* ---------- coin page ---------- */
.chead { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 34px; padding: 22px }
.chead .cimg { width: 104px; height: 104px; border-radius: 26px }
.chead .meta { flex: 1 1 280px; display: grid; gap: 10px; min-width: 0 }
.chead h1 { font-size: clamp(32px, 5vw, 52px); word-break: break-word }
.chead .chips { display: flex; flex-wrap: wrap; gap: 8px }
.chead .links { display: flex; flex-wrap: wrap; gap: 10px }
.mintline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 600 14.5px/1 var(--mono); color: var(--ink2) }
.desc { color: var(--ink2); font-weight: 600; max-width: 700px }
.fees { margin-top: 28px; padding: 28px; background: var(--mint); position: relative; overflow: hidden }
.fees .lab { font: 800 14px/1 var(--text); letter-spacing: .1em; text-transform: uppercase }
.fees .bigno { font: 700 clamp(56px, 11vw, 112px)/1 var(--display); letter-spacing: -.03em; margin: 10px 0 6px; padding-bottom: .06em; text-shadow: 3px 4px 0 rgba(255, 255, 255, .7) }
.fees .sub { font-weight: 700; max-width: 620px }
.groups { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px }
.grp { background: var(--paper); border: var(--line); border-radius: var(--r); padding: 18px }
.grp h3 { font-size: 21px; margin-bottom: 4px } .grp > p { font-size: 14px; font-weight: 600; color: var(--ink2); margin-bottom: 12px }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.tile { border: 3px solid var(--ink); border-radius: 14px; padding: 10px 12px; background: var(--mintxl); min-width: 0 }
.tile.span { grid-column: 1 / -1 } .tile.hot { background: var(--mintl) }
.tile small { display: block; font: 800 12.5px/1.2 var(--text); letter-spacing: .05em; text-transform: uppercase; color: var(--ink2) }
.tile b { display: block; margin-top: 4px; font: 700 22px/1.15 var(--display); word-break: break-word } .tile em { display: block; font-style: normal; font-weight: 700; font-size: 14px; color: var(--ink2) }
.tile .na { font: 700 15px/1.3 var(--text); color: var(--ink2) }
.acts2 { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px }
@media (max-width: 760px) { .groups { grid-template-columns: 1fr } .fees { padding: 20px } .chead .cimg { width: 80px; height: 80px } }
.split { display: grid; grid-template-columns: 1.4fr .8fr; gap: 24px; margin-top: 36px; align-items: start }
.split .side { position: sticky; top: calc(var(--head) + 16px) }
@media (max-width: 960px) { .split { grid-template-columns: 1fr } .split .side { position: static; order: 2 } }
.sech { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px } .sech h2 { font-size: clamp(28px, 4vw, 38px) }
.qcs { display: flex; flex-wrap: wrap; gap: 10px }
.qc { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 3px solid var(--ink); border-radius: 999px; background: var(--paper); font: 600 17px/1 var(--display); cursor: pointer; transition: transform .15s cubic-bezier(.3, 1.6, .5, 1), background .15s; white-space: nowrap }
.qc:hover { transform: translateY(-2px) } .qc[aria-pressed="true"] { background: var(--mint); box-shadow: 0 3px 0 var(--ink) }
.qc .q { display: inline-flex; align-items: center; gap: 4px }
.qc .q i { font-style: normal; min-width: 24px; height: 26px; padding: 0 6px; border-radius: 999px; background: var(--paper); border: 2px solid var(--ink); display: inline-flex; align-items: center; justify-content: center; font: 700 14px/1 var(--text) }
.stp { display: inline-flex; align-items: center; gap: 4px }
.stp button { width: 44px; height: 44px; border: 3px solid var(--ink); border-radius: 12px; background: var(--paper); font: 700 22px/1 var(--display); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0 }
.stp button:hover { background: var(--mintl) } .stp span { min-width: 40px; text-align: center; font: 700 20px/1 var(--display) }
.sum .line { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 2px dashed var(--mintl); font-weight: 700 }
.sum .line:last-of-type { border-bottom: 0 } .sum .line b { font: 700 21px/1 var(--display) }
.sum .line.low b { color: var(--coral) }
.sum .total { margin: 6px 0 14px }
.privnote { margin-top: 18px; font-size: 14.5px; font-weight: 600; color: var(--ink2); display: flex; gap: 10px; align-items: flex-start }
.privnote svg { flex: none; width: 22px; height: 22px; stroke: var(--ink); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px }
.ocards { display: grid; gap: 12px }
.ocard { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: center; padding: 16px 18px; border: var(--line); border-radius: var(--r2); background: var(--paper); text-decoration: none; box-shadow: 0 4px 0 var(--ink); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), background .15s }
.ocard:hover { transform: translateY(-3px); background: var(--mintxl) }
.ocard .oid { font: 700 20px/1.1 var(--display) } .ocard .osum { font-weight: 600; color: var(--ink2); font-size: 15px; grid-column: 1 } .ocard .oval { text-align: right; font: 700 20px/1 var(--display) } .ocard .ostat { grid-column: 2; grid-row: 2; justify-self: end }
@media (max-width: 560px) { .ocard { grid-template-columns: 1fr } .ocard .oval, .ocard .ostat { text-align: left; justify-self: start; grid-column: 1; grid-row: auto } }
.devbox { margin-top: 36px; border: 3px dashed var(--ink2); border-radius: var(--r); padding: 18px; background: var(--paper) }
.devbox h3 { font-size: 20px; margin-bottom: 6px }
.done-pop { text-align: center; display: grid; justify-items: center; gap: 12px; padding: 10px 0 }

/* coin cards (My Coins) */
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 22px }
.ccard { display: grid; gap: 14px; padding: 20px; border: var(--line); border-radius: var(--r); background: var(--paper); box-shadow: var(--sh); text-decoration: none; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .25s }
.ccard:hover { transform: translateY(-6px) rotate(-.5deg); box-shadow: 5px 12px 0 var(--ink) }
.ccard .top2 { display: flex; align-items: center; gap: 14px; min-width: 0 } .ccard h3 { font-size: 24px; word-break: break-word } .ccard .tkr { font: 700 15px/1 var(--mono); color: var(--ink2) }
.ccard .bal { border: 3px solid var(--ink); border-radius: 14px; padding: 10px 14px; background: var(--mintl) } .ccard .bal small { display: block; font: 800 12.5px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--ink2) } .ccard .bal b { font: 700 30px/1.15 var(--display) }

/* ---------- orders ---------- */
.ohead { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 30px 0 18px }
.ohead h1 { font-size: clamp(34px, 6vw, 54px) }
.tl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 }
.tl li { position: relative; display: flex; gap: 16px; align-items: flex-start; padding: 0 0 22px; min-height: 52px }
.tl li::before { content: ''; position: absolute; left: 17px; top: 36px; bottom: 0; border-left: 4px dashed var(--mintl) } .tl li:last-child::before { display: none } .tl li.done::before { border-left: 4px solid var(--ink) }
.tl .dot { flex: none; width: 38px; height: 38px; border: 3px solid var(--ink2); border-radius: 50%; background: var(--paper); position: relative; z-index: 1 }
.tl li.done .dot { background: var(--mint); border-color: var(--ink) } .tl li.done .dot::after { content: ''; position: absolute; left: 11px; top: 4px; width: 9px; height: 16px; border: solid var(--ink); border-width: 0 4px 4px 0; transform: rotate(45deg) }
.tl li.active .dot { background: var(--sun); border-color: var(--ink); animation: pulse 1.6s ease-in-out infinite }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 216, 77, .8) } 50% { box-shadow: 0 0 0 10px rgba(255, 216, 77, 0) } }
.tl .tt b { font: 700 21px/1.2 var(--display) } .tl .tt span { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink2) } .tl li:not(.done):not(.active) .tt b { color: var(--ink2) }
.kv { display: grid; gap: 0 } .kv > div { display: flex; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 2px dashed var(--mintl); font-weight: 700 } .kv > div:last-child { border: 0 } .kv span:first-child { color: var(--ink2); flex: none } .kv span:last-child { text-align: right; word-break: break-word }
.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start } @media (max-width: 800px) { .twocol { grid-template-columns: 1fr } }
.ev { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px } .ev li { padding: 10px 14px; border: 2px solid var(--mintl); border-radius: 12px; font-weight: 600 } .ev small { display: block; color: var(--ink2); font-weight: 700 }
.gate { margin-top: 40px }

/* ---------- content pages ---------- */
.prose h2 { font-size: 26px; margin: 26px 0 8px } .prose h2:first-child { margin-top: 0 } .prose p { font-weight: 600; font-size: 17px; line-height: 1.6 }
.faqs { display: grid; gap: 14px; max-width: 860px }
.faq { border: var(--line); border-radius: var(--r2); background: var(--paper); box-shadow: 0 4px 0 var(--ink) }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 0 20px; cursor: pointer; font: 600 20px/1.25 var(--display); list-style: none }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: '+'; flex: none; width: 34px; height: 34px; border: 3px solid var(--ink); border-radius: 50%; background: var(--mint); display: inline-flex; align-items: center; justify-content: center; font: 700 22px/1 var(--display); transition: transform .2s }
.faq[open] summary::after { content: '–'; transform: rotate(180deg) }
.faq p { padding: 0 20px 20px; font-weight: 600; color: var(--ink2); max-width: 720px }
.steps-wrap { margin-top: 10px }
@media (max-width: 640px) { .faq summary { font-size: 18px; padding: 8px 16px } }
@media (max-width: 560px) { .acts2 .btn.lg { flex: 1 1 100% } .acts2 .btn.sm { flex: 1 1 100% } }