.ai-blog-generator-container {   max-width:100%;   font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;   display:flex;   flex-direction:column;   align-items:center;   justify-content:center; } .ai-blog-form-container {   background:white;   border-radius:24px;   padding:32px;   box-shadow:0 20px 60px rgba(0, 0, 0, 33%);   width:100%;   position:relative; } .ai-blog-form-header {   display:flex;   align-items:center;   gap:12px;   margin-bottom:32px; } .ai-blog-lightbulb-icon {   color:#667eea; } .ai-blog-form-title {   font-size:24px;   font-weight:600;   color:#1a202c;   margin:0; } .ai-blog-form {   display:flex;   flex-direction:column;   gap:24px; } .ai-blog-field-group {   display:flex;   flex-direction:column;   gap:8px; } .ai-blog-label {   font-size:16px;   font-weight:600;   color:#2d3748;   margin:0; } .ai-blog-textarea, .ai-blog-select {   padding:16px;   border:2px solid #e2e8f0;   border-radius:12px;   font-size:16px;   font-family:inherit;   transition:all 0.2s ease;   background:white; } .ai-blog-textarea:focus, .ai-blog-select:focus {   outline:none;   border-color:#667eea;   box-shadow:0 0 0 3px rgba(102, 126, 234, 0.1); } .ai-blog-textarea {   resize:vertical;   min-height:120px;   line-height:1.5; } .ai-blog-textarea::placeholder {   color:#a0aec0; } .ai-blog-select {   cursor:pointer;   appearance:none;   background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");   background-repeat:no-repeat;   background-position:right 16px center;   background-size:16px;   padding-right:48px; } .ai-blog-form-row {   display:grid;   grid-template-columns:1fr 1fr;   gap:16px; } .ai-blog-half-width {   margin:0; } .ai-blog-generate-btn {   color:white;   border:none;   border-radius:10px;   padding:15px 32px;   font-size:18px;   font-weight:600;   cursor:pointer;   transition:all 0.3s ease;   display:flex;   align-items:center;   justify-content:center;   gap:10px;   margin-top:8px;   box-shadow:0 8px 25px rgba(102, 126, 234, 0.3);   background:linear-gradient(1deg, #1e55b2, #3477e8) !important; } .ai-blog-generate-btn:hover {   transform:translateY(-2px);   box-shadow:0 12px 35px rgb(42 103 206 / 49%); } .ai-blog-generate-btn:active {   transform:translateY(0); } .ai-blog-generate-btn:disabled {   opacity:0.7;   cursor:not-allowed;   transform:none; } .ai-blog-btn-icon {   transition:transform 0.2s ease; } .ai-blog-generate-btn:hover .ai-blog-btn-icon {   transform:rotate(180deg); } .ai-blog-loading {   text-align:center;   padding:40px;   color:#4a5568; } .ai-blog-spinner {   width:40px;   height:40px;   border:3px solid #e2e8f0;   border-top:3px solid #667eea;   border-radius:50%;   animation:ai-blog-spin 1s linear infinite;   margin:0 auto 16px; } @keyframes ai-blog-spin {   0% { transform:rotate(0deg); }   100% { transform:rotate(360deg); } } .ai-blog-results {   margin-top:32px;   padding-top:32px;   border-top:2px solid #e2e8f0; } .ai-blog-results-title {   font-size:20px;   font-weight:600;   color:#1a202c;   margin:0 0 20px 0; } .ai-blog-titles-list {   display:flex;   flex-direction:column;   gap:12px; } .ai-blog-title-item {   background:#f7fafc;   border:2px solid #e2e8f0;   border-radius:12px;   padding:16px;   font-size:16px;   line-height:1.5;   color:#2d3748;   cursor:pointer;   transition:all 0.2s ease;   position:relative; } .ai-blog-title-item:hover {   border-color:#667eea;   background:#edf2f7;   transform:translateY(-1px); } .ai-blog-title-item::after {   content:'Click to copy';   position:absolute;   top:50%;   right:10px;   font-size:16px;   color:#000000;   opacity:0;   transition:opacity 0.2s ease;   transform:translateY(-50%);   font-weight:500; }  .ai-blog-title-item:hover::after {   opacity:1; } .ai-blog-title-item.ai-blog-copied {   border-color:#48bb78;   background:#f0fff4; } .ai-blog-title-item.ai-blog-copied::after {   content:'Copied!';   color:#48bb78;   opacity:1; }  @media (max-width:768px) {   .ai-blog-generator-container {  padding:20px 16px;  min-height:auto;   }  .ai-blog-title {  font-size:32px;   }  .ai-blog-form-container {  padding:24px;  border-radius:16px;   }  .ai-blog-form-row {  grid-template-columns:1fr;  gap:24px;   }  .ai-blog-form-header {  flex-direction:column;  text-align:center;  gap:8px;   }  .ai-blog-form-title {  font-size:20px;   } } @media (max-width:480px) {   .ai-blog-title {  font-size:28px;   }  .ai-blog-form-container {  padding:20px;   }  .ai-blog-generate-btn {  padding:16px 24px;   } } #ai-blog-generate-btn img {   width:20px;   height:20px; } .ai-blog-generator-container {   margin-bottom:40px; }