/* FONT OUTPUT GRID */

#output{
    margin-top:20px;
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
}

.output-section{
    display:grid;
    gap:10px;
    padding:14px;
    border:1px solid var(--ust-border);
    border-radius:18px;
    background:linear-gradient(180deg, rgba(18,40,64,0.92) 0%, rgba(12,27,44,0.94) 100%);
    box-shadow:0 14px 28px rgba(3,10,20,0.22);
}

.output-section-title{
    margin:0;
    font-size:15px;
    font-weight:700;
    color:var(--ust-text);
    letter-spacing:-0.01em;
    text-align:center;
}

.output-section-list{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
}

.output-actions{
    display:flex;
    justify-content:center;
}

.load-more-btn{
    border:1px solid var(--ust-border);
    background:linear-gradient(180deg, rgba(18,40,64,0.98) 0%, rgba(11,26,43,0.98) 100%);
    color:var(--ust-text);
    border-radius:999px;
    min-width:180px;
    padding:13px 26px;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(4,12,22,0.24);
    transform:translateY(0);
    transition:
        background-color .22s ease,
        border-color .22s ease,
        color .22s ease,
        box-shadow .22s ease,
        transform .22s ease;
}

.load-more-btn:hover{
    background:linear-gradient(180deg, rgba(20,47,76,0.98) 0%, rgba(14,33,54,0.98) 100%);
    border-color:var(--ust-border-strong);
    color:#ffffff;
    box-shadow:0 16px 32px rgba(5,15,28,0.30);
    transform:translateY(-2px);
}

.load-more-btn:active{
    transform:translateY(0);
    box-shadow:0 8px 18px rgba(5,15,28,0.22);
}

.load-more-btn:focus-visible{
    outline:none;
    box-shadow:
        0 0 0 3px rgba(103,198,255,0.16),
        0 16px 32px rgba(5,15,28,0.30);
}

/* FONT ITEM CARD */

.item{
    position:relative;
    padding:15px 16px;
    border:1px solid rgba(143,181,232,0.16);
    border-radius:14px;
    background:linear-gradient(180deg, rgba(23,50,82,0.88) 0%, rgba(16,35,56,0.92) 100%);
    transition:all .2s ease;
    word-break:break-word;
    white-space:pre-wrap;
    text-align:center;
    color:var(--ust-text);
    box-shadow:0 10px 20px rgba(2,10,20,0.18);
}

.item-instagram{
    text-align:center;
}

.item-multiline{
    text-align:center;
    font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
}

.item:hover{
    background:linear-gradient(180deg, rgba(28,61,98,0.96) 0%, rgba(18,42,68,0.96) 100%);
    border-color:var(--ust-border-strong);
    box-shadow:0 16px 30px rgba(4,12,22,0.28);
}

.item::before{
    content:"Click to copy";
    position:absolute;
    top:10px;
    left:12px;
    padding:5px 8px;
    border-radius:999px;
    background:rgba(103,198,255,0.12);
    color:#dff5ff;
    font-size:11px;
    font-weight:700;
    letter-spacing:.01em;
    opacity:0;
    transform:translateY(-4px);
    transition:opacity .18s ease, transform .18s ease, background-color .18s ease;
    pointer-events:none;
}

.item::after{
    content:attr(data-copy-state);
    position:absolute;
    top:10px;
    right:12px;
    padding:5px 8px;
    border-radius:999px;
    background:linear-gradient(180deg, #59c3ff 0%, #299ce3 100%);
    color:#071321;
    font-size:11px;
    font-weight:700;
    letter-spacing:.01em;
    opacity:0;
    transform:translateY(-4px);
    transition:opacity .18s ease, transform .18s ease;
    pointer-events:none;
}

.item:hover::before,
.item:focus-visible::before,
.item.is-touch-hint::before{
    opacity:1;
    transform:translateY(0);
}

.item.is-copied::before{
    background:rgba(103,198,255,0.16);
}

.item.is-copy-failed::before{
    background:rgba(244,99,99,0.12);
    color:#ffd0d0;
}

.item.is-copied{
    background:linear-gradient(180deg, rgba(31,72,110,0.96) 0%, rgba(18,42,68,0.98) 100%);
    border-color:var(--ust-border-strong);
    box-shadow:0 14px 28px rgba(5,15,28,0.30);
}

.item.is-copy-failed{
    background:linear-gradient(180deg, rgba(74,29,29,0.94) 0%, rgba(48,18,18,0.96) 100%);
    border-color:rgba(244,99,99,0.35);
    box-shadow:0 12px 24px rgba(48,18,18,0.24);
}

.item.is-copied::after,
.item.is-copy-failed::after{
    opacity:1;
    transform:translateY(0);
}

.item.is-copy-failed::after{
    background:linear-gradient(180deg, #ff8f8f 0%, #f66363 100%);
}

/* ===== OUTPUT FIX ===== */

#output{
margin-top:10px;
}