/* Frontend + Admin shared styles */
.seo-semantic-wrap{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap:16px;
  align-items:start;
  margin: 16px 0;
}
@media (max-width: 1100px){
  .seo-semantic-wrap{ grid-template-columns: 1fr; }
}

.seo-semantic-card{
  background:#fff;
  border:1px solid #dcdcde;
  border-radius:12px;
  padding:16px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.seo-semantic-title{
  margin: 0 0 10px 0;
  font-size: 16px;
  line-height: 1.3;
}

.seo-semantic-textarea{
  width:100%;
  border:1px solid #c3c4c7;
  border-radius:10px;
  padding:10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  box-sizing: border-box;
  min-height: 110px;
  max-height: 220px;
  resize: vertical;
}


.seo-semantic-actions{
  margin-top:10px;
}

.seo-semantic-button{
  display:inline-block;
  border:0;
  border-radius:10px;
  padding:10px 14px;
  cursor:pointer;
  background:#2271b1;
  color:#fff;
  font-weight:600;
}
.seo-semantic-button:hover{ filter: brightness(0.95); }

.seo-semantic-notice{
  margin-top:12px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid #dcdcde;
}
.seo-semantic-notice-error{
  border-color:#d63638;
  background: #ffe7e7;
}

.seo-semantic-muted{
  margin:0;
  color:#646970;
  font-size: 14px;
}

.seo-semantic-result{
  background:#fff;
  border:1px solid #dcdcde;
  border-radius:12px;
  padding:12px;
  overflow:visible;
}


/* Boxes */
.seo-semantic-box{
  border:3px solid #333;
  border-radius:8px;
  padding:10px;
  margin:8px;
  position:relative;
}

.seo-semantic-label{
  position:absolute;
  top:-1.1rem;
  left:10px;
  padding:2px 6px;
  font-size:12px;
  font-weight:700;
  color:#fff;
  border-radius:6px;
  line-height:1.3;
}

.seo-semantic-text{
  font-size:13px;
  margin-top:6px;
}

/* Colors by tag */
.tag-header{ border-color:#ff9800; background:#ffe3bf; }
.tag-header .seo-semantic-label{ background:#ff9800; }

.tag-footer{ border-color:#e91e63; background:#ffd3ea; }
.tag-footer .seo-semantic-label{ background:#e91e63; }

.tag-main{ border-color:#795548; background:#e6d2c7; }
.tag-main .seo-semantic-label{ background:#795548; }

.tag-article{ border-color:#009688; background:#c3f3ec; }
.tag-article .seo-semantic-label{ background:#009688; }

.tag-section{ border-color:#9c27b0; background:#f1d4ff; }
.tag-section .seo-semantic-label{ background:#9c27b0; }

.tag-figure{ border-color:#607d8b; background:#dde7eb; }
.tag-figure .seo-semantic-label{ background:#607d8b; }

.tag-nav{ border-color:#3f51b5; background:#d7ddff; }
.tag-nav .seo-semantic-label{ background:#3f51b5; }

.tag-aside{ border-color:#607d8b; background:#dde7eb; }
.tag-aside .seo-semantic-label{ background:#607d8b; }

.tag-h1{ border-color:#4caf50; background:#d5f7d7; }
.tag-h1 .seo-semantic-label{ background:#4caf50; }

.tag-h2{ border-color:#8bc34a; background:#e3f7c6; }
.tag-h2 .seo-semantic-label{ background:#8bc34a; }

.tag-h3{ border-color:#cddc39; background:#f7f8cf; }
.tag-h3 .seo-semantic-label{ background:#cddc39; }


.seo-semantic-wrap--stacked{ grid-template-columns: 1fr; }