/* --- RESET & BASICS --- */
.ngl-screen * { box-sizing: border-box; }
.ngl-screen {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    min-height: 600px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 12px;
}

/* --- BACKGROUNDS --- */
.ngl-gradient-bg {
    background: linear-gradient(135deg, #FF4B6B 0%, #FF2E93 50%, #7F27FF 100%);
    color: white;
}
.ngl-dark-bg {
    background: #111;
    color: white;
}

/* --- COMPONENTS --- */
.ngl-content-box { width: 100%; max-width: 400px; text-align: center; }
.ngl-logo-text { font-size: 60px; font-weight: 900; font-style: italic; margin: 0; text-shadow: 2px 2px 0px rgba(0,0,0,0.2); }
.ngl-input-group { background: rgba(255,255,255,0.2); padding: 15px; border-radius: 15px; margin-bottom: 20px; text-align: left; }
.ngl-input-group label { display: block; font-size: 12px; margin-bottom: 5px; opacity: 0.8; }
.ngl-input-group input { width: 100%; background: transparent; border: none; color: white; font-size: 18px; outline: none; }
.ngl-input-group input::placeholder { color: rgba(255,255,255,0.6); }

/* --- BUTTONS --- */
.ngl-btn {
    width: 100%; padding: 16px; border-radius: 50px; border: none; font-size: 18px; font-weight: bold; cursor: pointer; transition: transform 0.1s; display: block; text-decoration: none; text-align: center;
}
.ngl-btn:active { transform: scale(0.98); }
.ngl-btn.white { background: white; color: #FF2E93; }
.ngl-btn.black { background: black; color: white; margin-top: 15px; }
.ngl-btn.small-btn { display: inline-block; width: auto; padding: 10px 30px; font-size: 14px; }

/* --- SEND CARD --- */
.ngl-send-card {
    background: white; width: 100%; max-width: 380px; padding: 30px 20px; border-radius: 24px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
.ngl-avatar-area { margin-top: -60px; margin-bottom: 15px; }
.ngl-avatar-img { 
    width: 70px; height: 70px; background: linear-gradient(135deg, #FF9966, #FF5E62); 
    border-radius: 50%; margin: 0 auto; border: 4px solid white; font-size: 30px; 
    display: flex; align-items: center; justify-content: center; 
}
.ngl-prompt-header { color: #333; font-weight: 800; font-size: 20px; margin-bottom: 15px; }
.ngl-send-card textarea {
    width: 100%; height: 100px; border: none; background: #f0f0f0; border-radius: 12px; padding: 15px; font-size: 16px; outline: none; resize: none;
}
.ngl-footer-info { color: #999; font-size: 12px; margin-top: 15px; font-weight: 500; }

/* --- DASHBOARD / INBOX --- */
.ngl-dashboard-header { width: 100%; max-width: 500px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
#ngl-logout { background: #333; color: white; border: none; padding: 5px 15px; border-radius: 20px; cursor: pointer; }

/* Share Section */
.ngl-share-section { background: #222; padding: 20px; border-radius: 15px; margin-bottom: 30px; width: 100%; max-width: 500px; text-align: center; }
.ngl-link-preview { 
    background: #333; padding: 10px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; font-size: 12px; color: #aaa;
}
.ngl-link-preview span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80%; }
.copy-trigger { background: #555; border: none; color: white; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 10px; }

/* Social Buttons */
.ngl-social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.social-btn {
    display: block; text-decoration: none; padding: 12px; border-radius: 8px; color: white; font-weight: bold; font-size: 14px; border: none; cursor: pointer; text-align: center;
}
.social-btn.whatsapp { background: #25D366; }
.social-btn.facebook { background: #1877F2; }
.social-btn.instagram { background: #E4405F; }
.social-btn.tiktok { background: #000000; border: 1px solid #333; }

/* Messages */
.ngl-msg-list { width: 100%; max-width: 500px; }
.ngl-msg-card { background: white; color: black; padding: 20px; border-radius: 15px; margin-bottom: 15px; position: relative; }
.ngl-card-top { display: flex; justify-content: space-between; font-size: 12px; color: #888; margin-bottom: 10px; }
.ngl-card-body { font-size: 18px; font-weight: bold; margin-bottom: 10px; }
.ngl-delete-btn { background: #ffeded; color: #ff4b6b; border: none; padding: 5px 10px; border-radius: 5px; font-size: 12px; cursor: pointer; }

/* Loader */
.ngl-loader { display: none; width: 20px; height: 20px; border: 3px solid rgba(255,255,255,0.3); border-top-color: white; border-radius: 50%; animation: spin 1s infinite; margin: 10px auto; }
@keyframes spin { to { transform: rotate(360deg); } }