.seometa-tabs {display: flex;gap: 0;margin-bottom: 25px;border-bottom: 2px solid #e0e0e0;flex-wrap: wrap;}
.seometa-tab {padding: 12px 24px;border: none;background: transparent;cursor: pointer;font-size: 14px;font-weight: 500;color: #666;transition: all 0.3s;border-bottom: 3px solid transparent;margin-bottom: -2px;}
.seometa-tab:hover {color: #2196F3;background: #f5f5f5;}
.seometa-tab.active {color: #2196F3;border-bottom-color: #2196F3;background: transparent;}
.seometa-panel {display: none;}
.seometa-panel.active {display: block;}

.seometa-form-group {margin-bottom: 20px;}
.seometa-form-group label {display: block;font-size: 14px;color: #333;margin-bottom: 8px;font-weight: 500;}
.seometa-form-group label .seometa-char-count {float: right;font-size: 12px;color: #999;font-weight: normal;}
.seometa-form-group label .seometa-char-count.seometa-over {color: #f44336;}
.seometa-form-group input[type="text"],
.seometa-form-group input[type="url"],
.seometa-form-group textarea,
.seometa-form-group select {width: 100%;padding: 12px 15px;border: 2px solid #dee2e6;border-radius: 8px;font-size: 14px;transition: border-color 0.3s, box-shadow 0.3s;}
.seometa-form-group input:focus,
.seometa-form-group textarea:focus,
.seometa-form-group select:focus {outline: none;border-color: #2196F3;box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);}
.seometa-form-group textarea {min-height: 80px;resize: vertical;font-family: inherit;}
.seometa-form-group .seometa-hint {font-size: 12px;color: #999;margin-top: 5px;}

.seometa-preview-section {margin-top: 30px;}
.seometa-preview-title {font-size: 16px;font-weight: 600;color: #333;margin-bottom: 15px;display: flex;align-items: center;gap: 8px;}
.seometa-preview-title i {color: #2196F3;}

.seometa-google-preview {background: white;border: 1px solid #dfe1e5;border-radius: 8px;padding: 20px;max-width: 600px;}
.seometa-google-preview .seometa-gg-site {font-size: 14px;color: #202124;margin-bottom: 5px;}
.seometa-google-preview .seometa-gg-url {font-size: 12px;color: #006621;margin-bottom: 5px;}
.seometa-google-preview .seometa-gg-title {font-size: 20px;color: #1a0dab;line-height: 1.3;margin-bottom: 5px;cursor: pointer;}
.seometa-google-preview .seometa-gg-title:hover {text-decoration: underline;}
.seometa-google-preview .seometa-gg-desc {font-size: 14px;color: #4d5156;line-height: 1.58;}

.seometa-facebook-preview {background: white;border: 1px solid #ddd;border-radius: 8px;max-width: 500px;overflow: hidden;}
.seometa-facebook-preview .seometa-fb-image {width: 100%;height: 260px;background: #f0f2f5;display: flex;align-items: center;justify-content: center;color: #999;font-size: 14px;overflow: hidden;}
.seometa-facebook-preview .seometa-fb-image img {width: 100%;height: 100%;object-fit: cover;}
.seometa-facebook-preview .seometa-fb-info {padding: 12px;background: #f0f2f5;border-top: 1px solid #ddd;}
.seometa-facebook-preview .seometa-fb-site {font-size: 12px;color: #606770;text-transform: uppercase;margin-bottom: 4px;}
.seometa-facebook-preview .seometa-fb-title {font-size: 14px;font-weight: 600;color: #1d2129;margin-bottom: 4px;}
.seometa-facebook-preview .seometa-fb-desc {font-size: 12px;color: #606770;}

.seometa-twitter-preview {background: white;border: 1px solid #e1e8ed;border-radius: 12px;max-width: 500px;overflow: hidden;}
.seometa-twitter-preview .seometa-tw-image {width: 100%;height: 260px;background: #e1e8ed;display: flex;align-items: center;justify-content: center;color: #999;font-size: 14px;overflow: hidden;}
.seometa-twitter-preview .seometa-tw-image img {width: 100%;height: 100%;object-fit: cover;}
.seometa-twitter-preview .seometa-tw-info {padding: 12px;}
.seometa-twitter-preview .seometa-tw-title {font-size: 14px;font-weight: 700;color: #0f1419;margin-bottom: 4px;}
.seometa-twitter-preview .seometa-tw-desc {font-size: 14px;color: #536471;margin-bottom: 4px;}
.seometa-twitter-preview .seometa-tw-domain {font-size: 13px;color: #8899a6;}

.seometa-code-section {margin-top: 30px;}
.seometa-code-actions {display: flex;gap: 10px;margin-bottom: 15px;flex-wrap: wrap;}
.seometa-code-container {position: relative;background: #263238;border-radius: 8px;padding: 20px;overflow-x: auto;}
.seometa-code-container pre {margin: 0;color: #e0e0e0;font-size: 13px;line-height: 1.6;font-family: 'Courier New', monospace;white-space: pre-wrap;word-break: break-all;}
.seometa-copy-btn {position: absolute;top: 10px;right: 10px;padding: 8px 16px;background: #2196F3;color: white;border: none;border-radius: 6px;cursor: pointer;font-size: 13px;transition: background 0.3s;}
.seometa-copy-btn:hover {background: #1976D2;}

.seometa-template-select {margin-bottom: 20px;}
.seometa-template-select select {padding: 10px 15px;border: 2px solid #dee2e6;border-radius: 8px;font-size: 14px;cursor: pointer;min-width: 200px;}

.seometa-jsonld-type-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));gap: 10px;margin-bottom: 20px;}
.seometa-jsonld-type-btn {padding: 12px;border: 2px solid #dee2e6;border-radius: 8px;background: white;cursor: pointer;font-size: 13px;text-align: center;transition: all 0.3s;}
.seometa-jsonld-type-btn:hover {border-color: #2196F3;background: #e3f2fd;}
.seometa-jsonld-type-btn.active {border-color: #2196F3;background: #2196F3;color: white;}

.seometa-grid-2 {display: grid;grid-template-columns: repeat(2, 1fr);gap: 20px;}
.seometa-grid-3 {display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px;}

@media (max-width: 992px) {
  .seometa-grid-2, .seometa-grid-3 {grid-template-columns: 1fr;}
}

@media (max-width: 768px) {
  .seometa-tabs {gap: 0;}
  .seometa-tab {padding: 10px 16px;font-size: 13px;}
  .seometa-code-actions {flex-direction: column;}
  .seometa-code-actions .btn {width: 100%;margin: 0;}
}
