body { font-family: 'Segoe UI', sans-serif; background: #f8f9fa; margin: 0; color: #333; }
        .container { max-width: 850px; margin: 30px auto; padding: 0 20px; }
        h1 { color: #2c3e50; }
        .top-text, .bottom-text, .faq-section { background: #fff; padding: 25px; border-radius: 8px; margin-bottom: 30px; line-height: 1.7; font-weight: 300; color: #282829 !important; }
        .emoji-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; background: transparent; padding: 0px; border-radius: 8px; margin-bottom: 30px; }
        .emoji-card { display: flex; flex-direction: column; background: white; align-items: center; justify-content: center; padding: 15px 5px; border-radius: 8px; transition: 0.1s; cursor: pointer; position: relative; }
        .emoji-card:hover { background: #f0f8ff; }
        .emoji-char { font-size: 32px; margin-bottom: 5px; pointer-events: none; }
        .emoji-name { font-size: 11px; color: #666; text-align: center; pointer-events: none; }
        .copy-tooltip { position: absolute; bottom: 5px; font-size: 10px; color: #fff; background: #27ae60; padding: 2px 6px; border-radius: 4px; opacity: 0; transition: opacity 0.2s; }
        .emoji-card.copied .copy-tooltip { opacity: 1; }
        
        @media (max-width: 768px) { .emoji-grid { grid-template-columns: repeat(4, 1fr); } }
        @media (max-width: 480px) { .emoji-grid { grid-template-columns: repeat(4, 1fr); } }