/* v6: preserve the existing black/gold layout; add editing and result effects. */
button.step{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
button.step:focus-visible{outline:2px solid var(--gold,#cbb982);outline-offset:7px;border-radius:12px}
button.step:disabled{cursor:not-allowed}
.field-wrap .main-input.with-action{padding-right:99px}
.field-wrap .input-action{right:48px}
.expand-action{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:40px;height:44px;border:0;background:none;color:var(--gold,#cbb982);font-size:27px;cursor:pointer}
.expand-action:focus-visible{outline:2px solid currentColor;border-radius:8px}
.expand-action:disabled{opacity:.5;cursor:not-allowed}
textarea.credential-text{display:block;resize:none;outline:none;border-radius:0;font-size:16px;caret-color:var(--gold,#cbb982)}
textarea.credential-text:focus{box-shadow:inset 0 0 0 1px var(--gold,#cbb982)}
.credential-toolbar{flex-wrap:wrap;gap:10px;padding-bottom:max(16px,env(safe-area-inset-bottom))}
.editor-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.credential-toolbar .primary{margin-left:auto;min-width:130px}
.credential-toolbar .secondary{min-height:42px;padding:10px 14px;font-size:13px}
.ring.is-success .percentage{font:500 72px/1 system-ui;color:var(--gold,#cbb982)}
.celebration{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1000}
.celebration[hidden]{display:none}
@media(max-width:480px){.credential-toolbar{padding-inline:14px}.credential-toolbar .primary{width:100%;margin:0}.editor-tools{width:100%;justify-content:space-between}}
@media(prefers-reduced-motion:reduce){.celebration{display:none}}