/* Maker claim (/claim). Values from Paper "App · Maker claim". Prefix cl-. */
.cl { padding-bottom: 80px; }
.cl [hidden] { display: none !important; }
.cl-mono, .cl-lbl { font: 400 11px/14px var(--ff-mono); color: var(--color-muted); letter-spacing: .02em; }

/* head + stepper */
.cl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 48px 0 32px; flex-wrap: wrap; }
.cl-title { display: flex; flex-direction: column; gap: 10px; }
.cl-title h1 { font: 600 44px/50px var(--ff-display); letter-spacing: -.02em; margin: 0; }
.cl-title p { font: 400 16px/24px var(--ff-sans); color: var(--color-muted); margin: 0; }
.cl-steps { display: flex; align-items: center; gap: 10px; list-style: none; margin: 0; padding: 0; }
.cl-steps li[data-s] { display: flex; align-items: center; gap: 8px; font: 500 13px/16px var(--ff-sans); color: var(--color-muted); }
.cl-steps i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 12px; border: 1px solid var(--color-line-strong); font: 400 11px/1 var(--ff-mono); font-style: normal; color: var(--color-muted);
  transition: background-color .35s var(--ease-out), border-color .35s, color .35s, scale .4s var(--spring); }
.cl-steps li.done { color: var(--color-fg); }
.cl-steps li.done i { background: var(--color-vault); border-color: var(--color-vault); color: #04130C; }
.cl-steps li.cur { color: var(--color-fg); font-weight: 600; }
.cl-steps li.cur i { background: var(--color-fg); border-color: var(--color-fg); color: #000; font-weight: 600; }
.m .cl-steps li.cur i { animation: cl-pulse 2.4s var(--ease-out) infinite; }
@keyframes cl-pulse { 0% { box-shadow: 0 0 0 0 #FFFFFF59; } 70%, 100% { box-shadow: 0 0 0 8px #FFFFFF00; } }
.cl-sep { width: 28px; height: 1px; background: var(--color-line-strong); position: relative; overflow: hidden; }
.cl-sep::after { content: ""; position: absolute; inset: 0; background: var(--color-vault); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); }
.cl-sep.done::after { transform: none; }

/* outcome / state cards */
.cl-out:not(:empty) { margin-bottom: 24px; }
.cl-out .state { min-height: 280px; }
.cl-oc { display: flex; align-items: center; gap: 20px; padding: 24px; border-radius: 14px; border: 1px solid var(--color-line); background: var(--color-card); }
.m .cl-oc { animation: cl-rise .5s var(--ease-out) both; }
@keyframes cl-rise { from { opacity: 0; translate: 0 10px; } }
.cl-oc-ic { flex: none; display: grid; place-items: center; }
.cl-oc-ic img { width: 56px; height: 56px; }
.cl-oc-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cl-oc h2 { font: 600 22px/28px var(--ff-display); margin: 0; }
.cl-oc p { font: 400 14px/20px var(--ff-sans); color: var(--color-muted); margin: 0; max-width: 640px; }
.cl-oc-kv { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 8px; padding: 12px; border: 1px solid var(--color-line); border-radius: 8px; }
.cl-oc-kv div { display: flex; flex-direction: column; gap: 4px; }
.cl-oc-kv span { font: 400 11px/14px var(--ff-mono); color: var(--color-faint); }
.cl-oc-kv b { font: 500 13px/18px var(--ff-mono); }
.cl-oc-kv b.g { color: var(--color-vault); }
.cl-oc-kv b.copy { cursor: copy; border-bottom: 1px dashed var(--color-line-strong); }
.cl-oc-kv b.copy:hover { color: var(--color-vault); border-color: var(--color-vault); }
.cl-oc-acts { flex: none; display: flex; gap: 10px; }
.cl-oc-acts .cl-btn { height: 44px; font-size: 14px; padding: 0 18px; }
.cl-tag { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--color-line-strong); font: 500 11px/1 var(--ff-mono); color: var(--color-muted); }
.cl-tag i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cl-oc.win, .cl-oc.done { border-color: #3DDC9766; background: radial-gradient(ellipse 60% 120% at 0% 50%, #3DDC971F, #0000 70%), var(--color-card); }
.cl-oc.win .cl-tag, .cl-oc.done .cl-tag { color: var(--color-vault); border-color: #3DDC9766; }
.cl-oc.late { background: radial-gradient(ellipse 60% 120% at 0% 50%, #FFFFFF0F, #0000 70%), var(--color-card); }
.cl-oc.notmaker { border-color: #FF615466; background: radial-gradient(ellipse 60% 120% at 0% 50%, #FF61541A, #0000 70%), var(--color-card); }
.cl-oc.notmaker .cl-tag { color: var(--color-hunt); border-color: #FF615466; }
.cl-oc.off { border-style: dashed; border-color: var(--color-line-strong); }
.cl-lock { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: #FFFFFF0A; border: 1px solid var(--color-line); color: var(--color-muted); }
.cl-nm { display: flex; align-items: center; gap: 4px; }
.cl-nm .cl-av { width: 44px; height: 44px; border-radius: 22px; }

/* picker */
.cl-pick { display: flex; flex-direction: column; gap: 14px; }
.cl-find { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px; flex-wrap: wrap; }
.cl-find-tx { display: flex; flex-direction: column; gap: 4px; }
.cl-find-tx b { font: 600 22px/28px var(--ff-display); }
.cl-find-tx span { font: 400 14px/20px var(--ff-sans); color: var(--color-muted); }
.cl-find-row { display: flex; gap: 10px; flex: 1; max-width: 560px; min-width: 280px; }
.cl-in { flex: 1; height: 44px; gap: 10px; color: var(--color-muted); }
.cl-in input { color: var(--color-fg); }
.cl-go { height: 44px; }
.cl-wait-h { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; font: 600 14px/18px var(--ff-sans); }
.cl-wait { display: flex; flex-direction: column; border: 1px solid var(--color-line); border-radius: 14px; background: var(--color-card); overflow: clip; }
.cl-wait:has(.state) { border: 0; background: none; }
.cl-wrow { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--color-line); color: inherit; text-decoration: none; transition: background-color .15s var(--ease-ui); }
.cl-wrow:last-child { border-bottom: 0; }
.m .cl-wrow { animation: cl-rise .45s var(--ease-out) both; animation-delay: calc(var(--i) * 50ms); }
a.cl-wrow:hover { background: #FFFFFF08; }
a.cl-wrow:hover .chev { translate: 3px 0; rotate: -90deg; color: var(--color-fg); }
.cl-wrow img, .cl-wrow > .cl-av { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: none; }
.cl-wrow > span:not(.cl-av) { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cl-w-t b { font: 600 14px/18px var(--ff-sans); }
.cl-w-t small { font: 400 11px/14px var(--ff-mono); color: var(--color-muted); }
.cl-w-v { font: 500 14px/18px var(--ff-mono); color: var(--color-vault); }
.cl-wrow .chev { rotate: -90deg; color: var(--color-faint); transition: translate .2s var(--ease-out), color .2s; }

/* body grid */
.cl-body { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 24px; align-items: start; }
.cl-left { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cl-right { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 24px; }

/* identity row */
.cl-ids { display: flex; gap: 16px; }
.cl-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 20px; transition: border-color .4s var(--ease-out); }
.cl-id.ok { border-color: #3DDC9766; }
.cl-id-m { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cl-id-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cl-id-t b { font: 600 14px/18px var(--ff-sans); }
.cl-id-t span { font: 400 12px/16px var(--ff-sans); color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cl-av { width: 36px; height: 36px; border-radius: 18px; object-fit: cover; flex: none; background: #FFFFFF14; }
.cl-av-i { display: grid; place-items: center; font: 600 15px/1 var(--ff-display); color: var(--color-muted); }
.cl-ph-p { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 18px; background: var(--color-hunt); color: #fff; font: 600 18px/1 var(--ff-display); }
.cl-ph-p.off { background: #FFFFFF14; color: var(--color-faint); }
.cl-faces { display: flex; }
.cl-faces .cl-av { width: 32px; height: 32px; border: 2px solid var(--color-card); box-sizing: content-box; }
.cl-faces .cl-av + .cl-av { margin-left: -8px; }
.cl-match { display: flex; align-items: center; gap: 6px; color: var(--color-vault); flex: none; }
.cl-match > .cl-av:first-child { background: var(--color-hunt); color: #fff; }
.cl-st { display: inline-flex; align-items: center; gap: 6px; font: 400 11px/14px var(--ff-mono); color: var(--color-muted); }
.cl-st i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.cl-st.ok { color: var(--color-vault); }
.cl-st.err { color: var(--color-hunt); }
.cl-st.off { color: var(--color-faint); }
.m .cl-st.wait i { animation: cl-blink 1.4s ease-in-out infinite; }
@keyframes cl-blink { 50% { opacity: .25; } }
.cl-ph-go { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; border-radius: 8px; background: var(--color-hunt); color: #fff; font: 600 13px/1 var(--ff-sans); text-decoration: none; transition: filter .15s, scale .15s var(--ease-ui); }
.cl-ph-go:hover { filter: brightness(1.08); }
.cl-ph-go:hover svg { translate: 2px 0; }
.cl-ph-go svg { transition: translate .2s var(--ease-out); }
.cl-ph-go:active { scale: .97; }
.cl-safe { width: 40px; height: 40px; flex: none; }
.cl-bal { font: 500 24px/30px var(--ff-mono); color: var(--color-vault); font-variant-numeric: tabular-nums; display: inline-block; }
.cl-bal.bump { animation: bump .6s var(--spring); }
.cl-clock { display: flex; flex-direction: column; gap: 8px; }
.cl-days { display: block; height: 6px; border-radius: 2px; background: #FFFFFF14; position: relative; overflow: hidden;
  mask: repeating-linear-gradient(90deg, #000 0 calc(100% / 9 - 2px), #0000 0 calc(100% / 9)); }
.cl-days i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--color-fg); transition: width 1s var(--ease-out); }
#v-cd { font-variant-numeric: tabular-nums; }
.cl-id[data-t="late"] #v-cd { color: var(--color-hunt); }
.cl-id[data-t="ok"] #v-cd { color: var(--color-vault); }

/* pledge builder */
.cl-pb { display: flex; flex-direction: column; gap: 18px; padding: 24px; }
.cl-pb-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.cl-pb-head h2 { font: 600 22px/28px var(--ff-display); margin: 0 0 4px; }
.cl-pb-head p { font: 400 14px/20px var(--ff-sans); color: var(--color-muted); margin: 0; }
.cl-pb-head .cl-mono { font-size: 12px; white-space: nowrap; padding-top: 6px; }
.cl-cols, .cl-row { display: grid; grid-template-columns: minmax(0, 1fr) 160px 120px 36px; gap: 12px; align-items: center; }
.cl-cols { padding: 0 4px; font: 400 11px/14px var(--ff-mono); color: var(--color-faint); margin-bottom: -8px; }
.cl-ms { display: flex; flex-direction: column; gap: 10px; }
.m .cl-row { animation: cl-rise .35s var(--ease-out) both; }
.cl-row.out { opacity: 0; translate: 0 -6px; transition: opacity .2s, translate .2s; }
.cl-f { position: relative; display: flex; align-items: center; height: 44px; padding: 0 14px; background: #000; border: 1px solid var(--color-line-strong); border-radius: 8px; transition: border-color .15s var(--ease-ui), box-shadow .15s var(--ease-ui); }
.cl-f:hover { border-color: #FFFFFF59; }
.cl-f:focus-within { border-color: var(--color-fg); box-shadow: 0 0 0 3px #FFFFFF1F; }
.cl-f.bad { border-color: var(--color-hunt); box-shadow: 0 0 0 3px #FF615426; }
.cl-f input, .cl-f select { width: 100%; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--color-fg); padding: 0; }
.cl-f select { appearance: none; font: 400 14px/18px var(--ff-sans); cursor: pointer; padding-right: 18px; }
.cl-f select option { background: var(--color-card); }
.cl-sel .chev { position: absolute; right: 14px; color: var(--color-muted); pointer-events: none; }
.cl-th input { font: 400 14px/18px var(--ff-mono); }
.cl-pct input { font: 500 14px/18px var(--ff-mono); color: var(--color-vault); }
.cl-pct span { font: 400 14px/18px var(--ff-mono); color: var(--color-muted); }
.cl-x { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; color: var(--color-faint); background: none; border: 0; cursor: pointer; transition: color .15s, background-color .15s, scale .15s var(--ease-ui); }
.cl-x:hover { color: var(--color-hunt); background: #FF61541A; }
.cl-x:active { scale: .9; }
.cl-ms .cl-row:only-child .cl-x { visibility: hidden; }
.cl-pb-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; border-top: 1px solid var(--color-line); flex-wrap: wrap; }
.cl-add { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px dashed var(--color-line-strong); border-radius: 8px; background: none; color: var(--color-fg); font: 500 13px/1 var(--ff-sans); cursor: pointer; transition: border-color .15s, background-color .15s, scale .15s var(--ease-ui); }
.cl-add:hover:not(:disabled) { border-color: var(--color-fg); background: #FFFFFF08; }
.cl-add:hover:not(:disabled) svg { rotate: 90deg; }
.cl-add svg { transition: rotate .3s var(--ease-out); }
.cl-add:active:not(:disabled) { scale: .97; }
.cl-add:disabled { opacity: .4; cursor: not-allowed; }
.cl-total { display: flex; align-items: center; gap: 12px; font: 400 13px/18px var(--ff-mono); }
.cl-tbar { width: 240px; height: 8px; border-radius: 4px; background: #FFFFFF14; overflow: hidden; }
.cl-tbar i { display: block; height: 100%; width: 0; background: var(--color-vault); border-radius: inherit; transition: width .5s var(--ease-out), background-color .2s; }
.cl-tbar i.over { background: var(--color-hunt); }
.cl-bad { color: var(--color-hunt); }

/* right: live preview */
.cl-ph { display: flex; align-items: center; justify-content: space-between; }
.cl-ph b { font: 600 14px/18px var(--ff-sans); }
.cl-upd { display: inline-flex; align-items: center; gap: 6px; font: 400 11px/14px var(--ff-mono); color: var(--color-muted); }
.cl-upd i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-vault); }
.m .cl-upd i { animation: cl-blink 2s ease-in-out infinite; }
.cl-rc { background: #141414; border: 1px solid #FFFFFF26; border-radius: 14px; }
.cl-rc > * + * { border-top: 1px dashed #FFFFFF33; }
.cl-rc-head { display: flex; align-items: center; gap: 12px; padding: 20px 24px; }
.cl-rc-logo { flex: none; width: 40px; height: 40px; border-radius: 10px; overflow: hidden; background: radial-gradient(circle at 30% 25%, #3DDC97, #0E5A3A 70%); }
.cl-rc-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-rc-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cl-rc-t b { font: 600 14px/20px var(--ff-sans); letter-spacing: -.025em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-rc-t small { font: 400 10px/15px var(--ff-mono); color: var(--color-muted); }
.cl-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border: 1px dashed var(--color-line-strong); border-radius: 999px; font: 400 10px/1 var(--ff-mono); color: var(--color-muted); transition: color .3s, border-color .3s, background-color .3s; }
.cl-chip svg { display: none; }
.cl-chip.on { border-style: solid; border-color: #3DDC9766; color: var(--color-vault); background: #3DDC971A; }
.cl-chip.on svg { display: block; }
.m .cl-chip.on { animation: bump .6s var(--spring); }
.cl-rc-ms { padding: 20px 24px; display: flex; flex-direction: column; gap: 10px; }
.cl-rc-cols { display: flex; justify-content: space-between; font: 400 10px/15px var(--ff-mono); color: var(--color-muted); }
.cl-rc-ms ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cl-rc-ms li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 12px; position: relative; padding-bottom: 14px; }
.cl-rc-ms li:last-child { padding-bottom: 0; }
.cl-rc-ms li::before { content: ""; position: absolute; left: 7.5px; top: 18px; bottom: 0; width: 1px; background: repeating-linear-gradient(#FFFFFF33 0 3px, #0000 0 7px); }
.cl-rc-ms li:last-child::before { display: none; }
.cl-rc-ms li.hit::before { background: var(--color-vault); }
.m .cl-rc-ms li { animation: cl-rise .35s var(--ease-out) both; animation-delay: calc(var(--i) * 40ms); }
.cl-node { width: 16px; height: 16px; border-radius: 50%; border: 1px dashed #FFFFFF66; margin-top: 2px; box-sizing: border-box; display: grid; place-items: center; }
li.go .cl-node { border: 1.5px solid var(--color-fg); }
li.go .cl-node::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-fg); }
li.hit .cl-node { border: 0; background: var(--color-vault) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='%2304130C' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat center; }
.cl-li-h, .cl-li-f { display: flex; justify-content: space-between; gap: 12px; }
.cl-li-h b { font: 600 14px/20px var(--ff-sans); }
.cl-pay { white-space: nowrap; }
li.hit .cl-pay { color: var(--color-vault); }
.cl-prog { display: block; height: 4px; border-radius: 2px; background: #FFFFFF1C; margin: 6px 0; overflow: hidden; }
.cl-prog i { display: block; height: 100%; background: var(--color-fg); border-radius: inherit; transition: width .6s var(--ease-out); }
li.hit .cl-prog i { background: var(--color-vault); }
.cl-li-f small { font: 400 10px/15px var(--ff-mono); color: var(--color-muted); }
.cl-li-f .cl-r { white-space: nowrap; }
.cl-rc-text { margin: 0; padding: 16px 24px; font: 400 13px/20px var(--ff-sans); color: var(--color-muted); text-wrap: pretty; }
.cl-rc-text b { color: var(--color-fg); font-weight: 600; }
.cl-rc-sig { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 20px 24px; flex-wrap: wrap; }
.cl-rc-sig > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.cl-sig { font: italic 400 28px/32px var(--ff-wordmark); color: #FFFFFF66; transition: color .4s; }
.cl-sig.on { color: var(--color-fg); }
.cl-rc-sig small { font: 400 10px/15px var(--ff-mono); color: var(--color-muted); }
.cl-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.cl-tags span { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid #FFFFFF26; border-radius: 6px; font: 400 10px/1 var(--ff-mono); color: var(--color-muted); }
.cl-json summary { padding: 12px 24px; font: 400 11px/14px var(--ff-mono); color: var(--color-faint); cursor: pointer; list-style: none; transition: color .15s; }
.cl-json summary::-webkit-details-marker { display: none; }
.cl-json summary::before { content: "+ "; }
.cl-json[open] summary::before { content: "− "; }
.cl-json summary:hover { color: var(--color-fg); }
.cl-json pre { margin: 0; padding: 0 24px 16px; font: 400 10px/15px var(--ff-mono); color: var(--color-muted); white-space: pre-wrap; word-break: break-all; }

/* claim card */
.cl-act { display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.cl-kv { display: flex; justify-content: space-between; gap: 12px; font: 400 13px/18px var(--ff-sans); color: var(--color-muted); }
.cl-kv b { font: 400 13px/18px var(--ff-mono); color: var(--color-fg); font-variant-numeric: tabular-nums; }
.cl-you { padding-top: 12px; border-top: 1px solid var(--color-line); color: var(--color-fg); font-weight: 600; font-size: 14px; }
.cl-you b { font: 500 16px/20px var(--ff-mono); color: var(--color-vault); display: inline-block; }
.cl-kv b.bump { animation: bump .6s var(--spring); }
.cl-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.cl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--color-line-strong); background: none; color: var(--color-fg); font: 600 15px/1 var(--ff-sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s, translate .2s var(--ease-out), scale .15s var(--ease-ui), box-shadow .2s; }
.cl-btn:hover:not(:disabled) { translate: 0 -1px; border-color: var(--color-fg); }
.cl-btn:active:not(:disabled) { translate: none; scale: .97; transition-duration: .08s; }
.cl-btn-p { background: var(--color-btn); border-color: var(--color-btn); color: #000; }
.cl-btn-p:hover:not(:disabled) { box-shadow: 0 10px 30px -8px #FFFFFF73; border-color: var(--color-btn); }
.cl-btn:disabled { background: #FFFFFF08; border-color: var(--color-line); color: var(--color-faint); cursor: not-allowed; }
.cl-btn.ok:disabled { color: var(--color-vault); border-color: #3DDC9766; background: #3DDC9714; }
.cl-btn.busy { color: transparent !important; position: relative; }
.cl-btn.busy::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--color-faint); border-top-color: var(--color-fg); animation: cl-spin .7s linear infinite; }
@keyframes cl-spin { to { rotate: 360deg; } }
.cl-hint { margin: 0; font: 400 12px/16px var(--ff-sans); color: var(--color-faint); }

/* responsive */
@media (max-width: 1180px) {
  .cl-body { grid-template-columns: minmax(0, 1fr) 400px; }
  .cl-ids { flex-wrap: wrap; }
  .cl-id { flex: 1 1 220px; }
}
@media (max-width: 960px) {
  .cl-body { grid-template-columns: minmax(0, 1fr); }
  .cl-right { position: static; }
  .cl-oc { flex-wrap: wrap; }
}
@media (max-width: 720px) {
  .cl-head { padding: 28px 0 20px; gap: 18px; }
  .cl-title h1 { font-size: 32px; line-height: 38px; }
  .cl-title p { font-size: 14px; line-height: 20px; }
  .cl-steps { gap: 6px; width: 100%; }
  .cl-steps li[data-s] { gap: 6px; font-size: 12px; }
  .cl-sep { flex: 1; width: auto; min-width: 8px; }
  .cl-ids { flex-direction: column; gap: 12px; }
  .cl-id { flex: none; padding: 16px; }
  .cl-pb { padding: 18px; gap: 14px; }
  .cl-pb-head { flex-direction: column; gap: 6px; }
  .cl-pb-head .cl-mono { padding: 0; }
  .cl-cols { display: none; }
  .cl-row { grid-template-columns: minmax(0, 1fr) 96px 36px; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--color-line); }
  .cl-row:last-child { border-bottom: 0; padding-bottom: 0; }
  .cl-row .cl-sel { grid-column: 1 / -1; }
  .cl-total { width: 100%; }
  .cl-tbar { flex: 1; width: auto; }
  .cl-total #tot-tx { font-size: 12px; }
  .cl-add { width: 100%; justify-content: center; }
  .cl-rc-head, .cl-rc-ms, .cl-rc-sig { padding-inline: 18px; }
  .cl-rc-text, .cl-json summary { padding-inline: 18px; }
  .cl-json pre { padding-inline: 18px; }
  .cl-oc { padding: 20px; gap: 14px; flex-direction: column; align-items: flex-start; }
  .cl-oc-ic img, .cl-lock { width: 44px; height: 44px; }
  .cl-oc-acts { width: 100%; flex-direction: column; }
  .cl-oc-acts .cl-btn { width: 100%; }
  .cl-find { padding: 18px; }
  .cl-find-row { min-width: 0; flex-direction: column; }
  .cl-wrow { padding: 12px 14px; }
}