/* username-bio-generator (RT-FUN-096) — tool styles. Card system in share-card.css. */

.ug-tool { display: flex; flex-direction: column; gap: 16px; }
.ug-controls { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.ug-field { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--t2, #6b6760); }
.ug-field.grow { flex: 1; min-width: 200px; }
.ug-field input, .ug-field select {
    font: inherit; font-weight: 500; padding: 10px 12px; border: 1.5px solid var(--border, #ebebeb);
    border-radius: 8px; background: var(--card-bg, #fff); color: var(--t1, #1a1814);
}
.ug-field :focus-visible { outline: 3px solid #8b5cf6; outline-offset: 1px; border-color: #8b5cf6; }
.ug-go { font: inherit; font-weight: 700; padding: 11px 22px; border: none; border-radius: 999px; background: #8b5cf6; color: #fff; cursor: pointer; }
.ug-regen { font: inherit; font-weight: 600; padding: 11px 18px; border: 1.5px solid var(--border, #ebebeb); border-radius: 999px; background: var(--card-bg, #fff); color: var(--t1, #1a1814); cursor: pointer; }
.ug-go:focus-visible, .ug-regen:focus-visible { outline: 3px solid #1a1814; outline-offset: 2px; }

.ug-h { font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--t2, #6b6760); margin: 6px 0 0; }
.ug-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ug-row { display: flex; align-items: center; gap: 8px; padding: 9px 10px 9px 14px; border: 1px solid var(--border, #ebebeb); border-radius: 10px; background: var(--card-bg, #fff); }
.ug-out { flex: 1; font-size: 1.05rem; overflow-wrap: anywhere; }
.ug-copy, #ug-bio-copy { font: inherit; font-weight: 600; font-size: .8rem; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--border, #ebebeb); background: var(--bg, #f7f6f3); color: var(--t1, #1a1814); cursor: pointer; white-space: nowrap; }
.ug-copy:hover, #ug-bio-copy:hover { border-color: #8b5cf6; }

.ug-bio-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border, #ebebeb); border-radius: 10px; background: var(--bg, #f7f6f3); }
.ug-bio { flex: 1; font-size: 1.05rem; }

.ug-stage { background: #0c1827; border-radius: 16px; }
.ug-note { font-size: .8rem; color: var(--t2, #6b6760); margin: 0; }

/* Card (1080×1350 coords) */
.ug-card {
    align-items: center; text-align: center; justify-content: center;
    background: radial-gradient(120% 90% at 50% 8%, #2a2350 0%, #181433 55%, #0c0a1e 100%);
    color: #efeaff;
}
.ug-card .sc-eyebrow { font-size: 26px; letter-spacing: 6px; color: #c084fc; }
.ug-card-user { font-family: var(--sc-font-serif, serif); font-size: 104px; font-weight: 700; line-height: 1.08; margin: 26px 40px 18px; overflow-wrap: anywhere; }
.ug-card-bio { font-size: 44px; line-height: 1.4; max-width: 880px; margin: 0 auto; opacity: .9; }