/* ============================================================
   Live Grid – sisältöpaneeli (modal) ja jakopainikkeet
   Osa 5/6
============================================================ */

.lg-modal {
    background: #0a0a0a;
    border-left: 1px solid rgba(221,199,109,.12);
    padding: 32px 28px;
    overflow-y: auto;
    position: sticky;
    top: 0;
    max-height: 100vh;
}

.lg-modal-header {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(221,199,109,.1);
}

.lg-modal h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.3;
}

#lg-modal-content {
    line-height: 1.75;
    font-size: 14px;
    color: var(--muted);
    animation: lg-fade-up .3s var(--ease) both;
}

.lg-modal-link {
    display: inline-block;
    margin-top: 18px;
    color: var(--gold);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: color .2s var(--ease);
}

.lg-modal-link:hover {
    color: #fff;
}

.lg-modal-loading {
    text-align: center;
    padding: 40px;
    color: var(--gold);
    letter-spacing: 6px;
    animation: lg-pulse 1s infinite;
}

@keyframes lg-pulse {
    0%, 100% { opacity: .3; }
    50%       { opacity: 1; }
}

/* ---- Tyhjä tila ---- */

.lg-empty-state {
    text-align: center;
    padding: 60px 20px;
}

.lg-empty-icon {
    font-size: 44px;
    margin-bottom: 14px;
    opacity: .5;
}

.lg-empty-state p {
    color: #666;
    font-size: 13px;
}

/* ============================================================
   JAKOPAINIKKEET
============================================================ */

.lg-share {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 18px;
    border-top: 1px solid var(--border);
}

.lg-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 34px;
    padding: 0 14px;

    border-radius: var(--radius-btn);
    border: none;
    cursor: pointer;

    background: linear-gradient(135deg, var(--red), var(--red-dark));
    color: #fff;

    font-size: 12px;
    font-weight: 700;
    text-decoration: none;

    transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}

.lg-share-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: #000;
}

.lg-share-btn.lg-copy[data-copied="true"] {
    background: linear-gradient(135deg, #2fae5e, #1f7d43);
}