/* 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 rgba(226,232,240,0.9);
    border-radius:18px;
    background:rgba(255,255,255,0.76);
    box-shadow:0 10px 24px rgba(15,23,42,0.04);
}

.output-section-title{
    margin:0;
    font-size:15px;
    font-weight:700;
    color:#1f2937;
    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 #d9e2ff;
    background:#ffffff;
    color:#1d4ed8;
    border-radius:999px;
    min-width:180px;
    padding:13px 26px;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
    box-shadow:0 6px 18px rgba(76,124,255,0.08);
    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:#eef4ff;
    border-color:#4c7cff;
    box-shadow:0 12px 28px rgba(76,124,255,0.16);
    transform:translateY(-2px);
}

.load-more-btn:active{
    transform:translateY(0);
    box-shadow:0 6px 16px rgba(76,124,255,0.12);
}

.load-more-btn:focus-visible{
    outline:none;
    box-shadow:
        0 0 0 3px rgba(76,124,255,0.18),
        0 12px 28px rgba(76,124,255,0.16);
}

/* FONT ITEM CARD */

.item{
    position:relative;
    padding:15px 16px;
    border:1px solid #e6ebf3;
    border-radius:14px;
    background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    transition:all .2s ease;
    word-break:break-word;
    white-space:pre-wrap;
    text-align:center;
    box-shadow:0 8px 18px rgba(15,23,42,0.04);
}

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

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

.item:hover{
    background:#f1f6ff;
    border-color:#4c7cff;
    box-shadow:0 14px 28px rgba(76,124,255,0.10);
}

.item::after{
    content:attr(data-copy-state);
    position:absolute;
    top:10px;
    right:12px;
    padding:5px 8px;
    border-radius:999px;
    background:#1d4ed8;
    color:#ffffff;
    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.is-copied{
    background:#eef4ff;
    border-color:#4c7cff;
    box-shadow:0 10px 24px rgba(76,124,255,0.12);
}

.item.is-copy-failed{
    background:#fff4f4;
    border-color:#f1a8a8;
    box-shadow:0 10px 24px rgba(185,28,28,0.08);
}

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

.item.is-copy-failed::after{
    background:#b91c1c;
}

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

#output{
margin-top:10px;
}