/* "See this name on your profile" preview modal (market + listing pages). Built by /js/tryon.js. */
.tw-overlay{position:fixed;inset:0;z-index:300;background:rgba(21,23,30,.62);display:grid;place-items:center;padding:16px;overflow:auto}
.tw-overlay[hidden]{display:none}
.tw-modal{width:min(520px,100%);max-height:calc(100svh - 32px);overflow:auto;border-radius:var(--r-lg);background:var(--paper);color:var(--ink);padding:clamp(20px,4vw,30px);box-shadow:0 30px 80px rgba(21,23,30,.3)}
.tw-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.tw-head .kicker{font-size:.9rem}
.tw-title{font-size:clamp(1.4rem,4vw,1.8rem);margin-top:6px;word-break:break-word}
.tw-close{flex:none;width:42px;height:42px;border-radius:50%;border:2px solid var(--line);background:transparent;display:grid;place-items:center;cursor:pointer}
.tw-close:hover{border-color:var(--ink)}
.tw-body{display:grid;gap:16px;margin-top:20px}
.tw-field{position:relative}
.tw-field>span{position:absolute;inset-inline-start:18px;top:50%;transform:translateY(-50%);font-weight:800;color:var(--muted)}
.tw-field .input{padding-inline-start:38px}
.tw-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tw-row .field__label{margin:0}
.tw-run{width:100%}
.tw-run [data-timer]{font-variant-numeric:tabular-nums;opacity:.75;font-weight:600}
.tw-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tw-step{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:var(--r-sm);background:var(--cream);font-size:.8rem;font-weight:700}
.tw-step small{font-weight:600;color:var(--muted);font-size:.74rem}
.tw-step.is-active small{color:var(--blue)}
.tw-step.is-done small{color:var(--green)}
.tw-step.is-error small{color:var(--red)}
.tw-status{font-size:.9rem;color:var(--ink-2)}
.tw-status.is-ok{color:var(--green);font-weight:700}
.tw-status.is-error{color:var(--red);font-weight:700}
.tw-actions{display:flex;flex-wrap:wrap;gap:8px}
.tw-actions [hidden]{display:none}
.tw-shot{width:100%;border-radius:var(--r);border:2px solid var(--line)}
.tw-shot[hidden]{display:none}
@media (max-width:420px){.tw-steps{grid-template-columns:1fr}.tw-actions .pill{flex:1 1 100%}}