.circle-owner-journey { box-sizing: border-box; width: min(560px, calc(100vw - 28px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid #e3dff0; border-radius: 25px; background: #fff; color: #202137; font-family: inherit; box-shadow: 0 30px 100px #16112c4d; overflow-y: auto; }
.circle-owner-journey::backdrop { background: #100d2673; backdrop-filter: blur(7px); }
.circle-owner-journey__top { position: sticky; top: 0; height: 0; margin: 0; z-index: 2; display: flex; justify-content: flex-end; padding: 14px; }
.circle-owner-journey__top button { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border: 1px solid #e0dbef; border-radius: 50%; color: #5c5678; background: #fff; cursor: pointer; }
.circle-owner-journey__hero { padding: 34px 32px 26px; background: radial-gradient(circle at 85% 5%, #fce8de, transparent 50%), linear-gradient(145deg, #f0ebff, #faf9ff); }
.circle-owner-journey__hero img { width: 58px; height: 58px; margin-bottom: 16px; }
.circle-owner-journey__hero > span { display: block; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; color: #7353c6; }
.circle-owner-journey h2 { margin: 10px 0 12px; font-size: clamp(25px, 5vw, 34px); line-height: 1.15; letter-spacing: -.7px; color: inherit; }
.circle-owner-journey__hero p { margin: 0; font-size: 15px; line-height: 1.6; color: #625c78; }
.circle-owner-journey__body { padding: 22px 32px 12px; font-size: 14px; line-height: 1.6; }
.circle-owner-journey__body > p { margin: 0 0 20px; }
.circle-owner-journey__body ol { display: grid; gap: 17px; padding: 0; margin: 0; list-style: none; }
.circle-owner-journey__body li { display: flex; gap: 13px; align-items: flex-start; }
.circle-owner-journey__body li > .material-icons { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 10px; background: #f0ebfc; color: #7856dd; font-size: 20px; }
.circle-owner-journey__body strong { font-weight: 750; }
.circle-owner-journey__body small { display: block; font-size: 12px; line-height: 1.6; color: #716b81; margin-top: 2px; }
.circle-owner-journey footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 24px 32px; }
.circle-owner-journey footer form { margin: 0; }
.circle-owner-journey footer button { min-height: 46px; padding: 11px 16px; border: 0; border-radius: 12px; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
.circle-owner-journey__primary { color: #fff; background: linear-gradient(110deg, #7654f2, #5651ef); box-shadow: 0 5px 15px #6b4fe52e; }
.circle-owner-journey__later { color: #78718c; background: transparent; }
.circle-owner-journey button:focus-visible { outline: 2px solid #7654f2; outline-offset: 3px; }
.circle-owner-journey__handle { display: none; }
.circle-owner-journey .circle-setup-action { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 11px; margin-top: 8px; border: 1px solid #ddd5f2; border-radius: 9px; color: #6846b5; background: #f8f5ff; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.circle-owner-journey .circle-setup-review { display: grid; gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid #e8e3f0; }
.circle-setup-review > label { display: grid; gap: 6px; font-size: 12px; font-weight: 750; }
.circle-setup-review select { box-sizing: border-box; width: 100%; min-width: 0; height: 44px; padding: 0 11px; border: 1px solid #d9d1e8; border-radius: 10px; background: #fff; color: #342c4e; font: inherit; }
.circle-setup-review .circle-setup-consent { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; color: #6b637c; line-height: 1.6; }
.circle-setup-consent input { width: 19px; height: 19px; margin-top: 2px; flex: 0 0 19px; accent-color: #7654f2; }
.circle-setup-review button, .circle-setup-share .circle-owner-journey__primary { min-height: 44px; border: 0; border-radius: 10px; padding: 11px 14px; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
.circle-owner-journey [data-circle-setup-status] { font-size: 12px; color: #706780; line-height: 1.6; margin: 16px 0 0; }
.circle-owner-journey .circle-setup-share:not([hidden]) { display: grid; gap: 10px; padding: 16px; margin-top: 17px; border: 1px solid #d6e9df; border-radius: 12px; background: #f4fbf7; }.circle-setup-share p { margin: 0; font-size: 12px; color: #626d65; }
.circle-owner-journey .circle-setup-token-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; box-sizing: border-box; border-radius: 12px; padding: 11px 16px; color: #fff; font-size: 12px; font-weight: 750; text-decoration: none; }
.circle-setup-launch:not([hidden]) { box-sizing: border-box; display: flex; align-items: center; gap: 12px; margin: 16px auto; padding: 16px 20px; max-width: 1280px; border: 1px solid #35443e; border-radius: 14px; color: #edf8f1; background: #15211b; }.circle-setup-launch > .material-icons { color: #bca6ff; }.circle-setup-launch > div { flex: 1; min-width: 0; }.circle-setup-launch strong,.circle-setup-launch small { display: block; }.circle-setup-launch strong { font-size: 13px; }.circle-setup-launch small { margin-top: 4px; color: #acbbb3; font-size: 11px; }.circle-setup-launch button { flex: 0 0 auto; padding: 10px 13px; min-height: 42px; border: 1px solid #8d74cf; border-radius: 10px; color: #e6dbff; background: #342746; font: inherit; font-size: 12px; font-weight: 750; cursor: pointer; }
@media(max-width:480px){.circle-setup-launch:not([hidden]){margin:12px;padding:13px;flex-wrap:wrap}.circle-setup-launch>div{flex-basis:calc(100% - 42px)}.circle-setup-launch button{width:100%}.circle-owner-journey .circle-setup-token-link{font-size:11px;padding:10px}}
@media (max-width: 480px) {
  .circle-owner-journey__hero { padding: 30px 24px 23px; }
  .circle-owner-journey__body { padding: 20px 24px 8px; }
  .circle-owner-journey footer { padding: 20px 24px; }
  .circle-owner-journey__handle { display: block; position: absolute; top: 8px; left: calc(50% - 18px); width: 36px; height: 4px; border-radius: 10px; background: #c8c1d9; }
}
@media (prefers-reduced-motion: no-preference) { .circle-owner-journey[open] { animation: circle-journey-enter .2s ease-out; } @keyframes circle-journey-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } }