.mode-switch{display:inline-flex;padding:4px;background:var(--pa-tint);border:1px solid var(--pa-border);border-radius:12px;margin:24px 0}.mode-switch button{border:0;background:transparent;color:var(--pa-muted);padding:10px 18px;border-radius:9px;font-weight:750}.mode-switch button.active{background:var(--pa-surface);color:var(--pa-primary);box-shadow:0 3px 12px rgba(0,0,0,.08)}.upload-zone{display:grid;gap:14px;padding:28px;border:2px dashed var(--pa-border);border-radius:16px;background:var(--pa-surface)}.upload-zone label{font-weight:750}.upload-zone input[type=file]{max-width:100%}.upload-zone textarea{opacity:.85}
.code-editor{display:grid;grid-template-columns:auto 1fr;border:1px solid var(--pa-border);border-radius:12px;overflow:hidden;background:var(--pa-code)}.code-editor .line-numbers{margin:0;padding:14px 10px;min-width:3.2rem;text-align:right;color:#73859a;background:#0a1728;border-right:1px solid #263b53;font:inherit;line-height:1.5;user-select:none}.code-editor textarea{width:100%;border:0;border-radius:0;resize:vertical;margin:0;line-height:1.5;white-space:pre;overflow:auto}
.conversion-steps{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;padding:0;margin:28px 0 8px}.conversion-steps li{position:relative;display:flex;gap:10px;align-items:center;color:var(--pa-muted)}.conversion-steps li:not(:last-child):after{content:'';position:absolute;height:2px;left:38px;right:10px;top:16px;background:var(--pa-border);z-index:0}.conversion-steps li>span{display:grid;place-items:center;width:34px;height:34px;flex:none;border:2px solid var(--pa-border);border-radius:50%;background:var(--pa-bg);font-weight:800;z-index:1}.conversion-steps li>div{display:grid;z-index:1;background:var(--pa-bg);padding-right:10px}.conversion-steps small{font-size:.75rem}.conversion-steps .active{color:var(--pa-primary)}.conversion-steps .active>span{border-color:var(--pa-primary)}.conversion-steps .complete>span{border-color:var(--pa-primary);background:var(--pa-primary);color:#fff}.conversion-steps .complete:after{background:var(--pa-primary)}@media(max-width:700px){.conversion-steps{gap:6px}.conversion-steps li{display:grid;justify-items:center;text-align:center}.conversion-steps li:not(:last-child):after{left:55%;right:-55%;top:16px}.conversion-steps li>div{padding:0;background:transparent}.conversion-steps small{display:none}}