/* Container */
.keyword-container { font-family: 'Roboto', sans-serif; max-width: 480px; margin: auto; background: #fff; padding: 20px; border-radius: 15px; box-shadow: 0 8px 25px rgba(0,0,0,0.15); border-top: 5px solid #4285F4; }

/* Heading */
.keyword-heading { text-align: center; color: #4285F4; font-size: 22px; margin-bottom: 15px; font-weight: 700; }

/* Input */
.keyword-input { width: 90%; padding: 12px 15px; font-size: 15px; border-radius: 25px; border: 2px solid #ddd !important; margin-bottom: 10px; outline: none; transition: border-color 0.3s; }
.keyword-input:focus { border-color: #4285F4 !important; }

/* Select */
.keyword-select { width: 100%; padding: 10px; margin-bottom: 10px; border-radius: 25px; border: 2px solid #ddd; font-size: 14px; outline: none; transition: border-color 0.3s; }
.keyword-select:focus { border-color: #4285F4; }

/* Buttons */
.keyword-generate { width: 100%; padding: 12px; font-size: 15px; font-weight: 500; border-radius: 25px; border: none; background: #4285F4; color: #fff; cursor: pointer; margin-bottom: 12px; transition: background 0.3s; display: flex; justify-content: center; align-items: center; gap: 8px; }
.keyword-generate:hover { background: #3367D6; }
.keyword-generate:disabled { background: #aaa; cursor: not-allowed; }

.keyword-copy-all { width: 100%; padding: 12px; border-radius: 25px; border: none; background: #4285F4; color: #fff; cursor: pointer; font-size: 15px; display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 12px; }
.keyword-copy-all:disabled { background: #aaa; cursor: not-allowed; }

/* Tags container */
.keyword-tags-container { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; max-height: 300px; overflow-y: auto; }

/* Individual tag */
.keyword-tag { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 25px; background: #f1f1f1; font-size: 14px; transition: all 0.2s; }
.keyword-tag:hover { background: #e0f0ff; }

/* Keyword text + external link container */
.keyword-text { display: flex; align-items: center; gap: 8px; flex: 1; }
.keyword-text a { text-decoration: none; color: #333; display: flex; align-items: center; gap: 5px; }

/* Icons */
.keyword-tag i { cursor: pointer; color: #555; }
.keyword-tag i:hover { color: #4285F4; }

/* Usage container */
.keyword-usage-container { margin-top: 20px; background-color: #e8f0fe; padding: 15px 20px; border-radius: 15px; }
.keyword-usage-container h3 { margin-bottom: 10px; color: #4285F4; font-size: 16px; }
.keyword-usage-container ul { padding-left: 20px; color: #555; font-size: 14px; line-height: 30px; }

/* Spinner */
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.spinner { border: 3px solid #f3f3f3; border-top: 3px solid #fff; border-radius: 50%; width: 16px; height: 16px; animation: spin 1s linear infinite; }