/* Meta Tag Generator. Needs /assets/css/modern-tool-cards.css (tokens + .cat-website accent). */
.mt, .mt *, .mt *::before, .mt *::after { box-sizing: border-box; }
.mt { display: grid; gap: 1rem; }

.mt-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 860px) { .mt-layout { grid-template-columns: 1fr; } }

.mt-stack { display: grid; gap: 1rem; }

.mt-panel { background: var(--tc-bg); border: 1px solid var(--tc-border); border-radius: 20px; box-shadow: var(--tc-shadow); overflow: hidden; display: grid; align-content: start; }

.mt-panel__head { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; padding: .9rem 1.25rem; background: var(--tc-surface); border-bottom: 1px solid var(--tc-border); }
.mt-panel__head h3 { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tc-muted); }
.mt-panel__head > i { color: var(--accent); font-size: 1.1rem; }
.mt-panel__head .mt-copy { margin-left: auto; }

.mt-body { display: grid; gap: 1rem; padding: 1.25rem; align-content: start; }

.mt-field { display: grid; gap: .35rem; }
.mt-field label { display: flex; justify-content: space-between; align-items: baseline; font-size: .8rem; font-weight: 600; color: var(--tc-text); }
.mt-field label output { font-family: ui-monospace, monospace; font-size: .76rem; font-weight: 700; color: var(--accent); background: rgba(var(--accent-rgb), .1); padding: .1rem .5rem; border-radius: 6px; }
.mt-optional { font-weight: 400; color: var(--tc-muted); }
.mt-field input, .mt-field textarea, .mt-field select {
  width: 100%; padding: .6rem .8rem; font: inherit; font-size: .92rem;
  color: var(--tc-text); background: var(--tc-bg); border: 1px solid var(--tc-border); border-radius: 12px;
  resize: vertical;
}
.mt-field input, .mt-field select { height: 2.6rem; }
.mt-field input:focus-visible, .mt-field textarea:focus-visible, .mt-field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.mt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 520px) { .mt-row { grid-template-columns: 1fr; } }

.mt-checks { display: grid; gap: .5rem; padding-top: .3rem; border-top: 1px solid var(--tc-border); }
.mt-check { display: inline-flex; align-items: center; gap: .5rem; font-size: .86rem; font-weight: 600; color: var(--tc-text); cursor: pointer; }
.mt-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); cursor: pointer; }

.mt-serp { padding: 1rem 0; border-bottom: 1px solid var(--tc-border); }
.mt-serp__site { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--tc-text); margin-bottom: .2rem; }
.mt-serp__favicon { width: 18px; height: 18px; border-radius: 50%; background: rgba(var(--accent-rgb), .25); flex: 0 0 auto; }
.mt-serp__title { color: #1a0dab; font-size: 1.15rem; line-height: 1.3; margin-bottom: .2rem; }
:root[data-theme="dark"] .mt-serp__title, .dark-mode .mt-serp__title { color: #8ab4f8; }
.mt-serp__desc { color: var(--tc-muted); font-size: .9rem; line-height: 1.45; }

.mt-warn { margin: 0; font-size: .8rem; font-weight: 600; color: #b45309; }

.mt-copy {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 700;
  color: var(--tc-text); background: var(--tc-bg); border: 1px solid var(--tc-border); border-radius: 8px;
  padding: .3rem .7rem; cursor: pointer; text-transform: none; letter-spacing: 0;
}
.mt-copy:hover { border-color: var(--accent); color: var(--accent); }
.mt-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.mt-out {
  margin: 0; max-height: 18rem; overflow: auto; padding: 1rem; border-radius: 12px;
  background: var(--tc-surface); border: 1px solid var(--tc-border);
  font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: .8rem; line-height: 1.6;
  color: var(--tc-text); white-space: pre-wrap; word-break: break-word;
}

.mt-foot { margin: 0; display: flex; gap: .5rem; font-size: .84rem; color: var(--tc-muted); }
.mt-foot i { color: var(--accent); margin-top: .15rem; }