.mtg-form { gap: 4px; }
.mtg-group { border: 1px solid var(--border); border-radius: var(--r-ctl); padding: 10px 14px; margin-bottom: 10px; }
.mtg-group > summary { font-weight: 600; cursor: pointer; padding: 4px 0; }
.mtg-group[open] > summary { margin-bottom: 8px; }
.mtg-f { margin-bottom: 10px; min-width: 0; }
.mtg-f > label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.mtg-f input[type="text"], .mtg-f input[type="url"], .mtg-f textarea, .mtg-f select {
  width: 100%; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; }
.mtg-f textarea { height: auto; padding: 8px 12px; resize: vertical; line-height: 1.45; }
.mtg-f input:focus, .mtg-f textarea:focus, .mtg-f select:focus { outline: none; border-color: var(--blue); box-shadow: var(--focus); }
.mtg-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
.mtg-row { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 10px; font-size: 14px; }
.mtg-row label, .mtg-chk { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.mtg-chk { margin-bottom: 10px; }
.mtg-form input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--blue); margin: 0; }
.mtg-color { display: flex; gap: 8px; }
.mtg-color input[type="color"] { width: 44px; height: 40px; padding: 2px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); flex: none; }
.mtg-count { font-size: 13px; margin-top: 4px; color: var(--muted); }
.mtg-count .good { color: var(--teal-dark); } .mtg-count .short, .mtg-count .long { color: var(--warn); } .mtg-count .bad { color: var(--danger); }
.mtg-out .code-view { max-height: 360px; margin-bottom: 14px; }
.mtg-ph { margin-top: 4px; }
.mtg-gmode { margin-bottom: 10px; }
.mtg-links a { white-space: nowrap; }
/* Google */
.g-card { max-width: 600px; font-family: Arial, sans-serif; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-ctl); background: #fff; color: #202124; }
.g-card.mobile { max-width: 360px; }
.g-site { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.g-fav { width: 26px; height: 26px; border-radius: 50%; background: #f1f3f4; border: 1px solid #dadce0; flex: none; }
.g-name { display: block; font-size: 14px; color: #202124; }
.g-crumb { display: block; font-size: 12px; color: #4d5156; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 520px; }
.g-title { font-size: 20px; line-height: 1.3; color: #1a0dab; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 580px; }
.g-card.mobile .g-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.g-desc { font-size: 14px; line-height: 1.58; color: #4d5156; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; max-width: 600px; }
.g-card.mobile .g-desc { -webkit-line-clamp: 3; }
.ph { color: #9aa0a6 !important; }
/* Facebook */
.fb-card { max-width: 500px; border: 1px solid #dadde1; border-radius: 8px; overflow: hidden; background: #f0f2f5; font-family: Helvetica, Arial, sans-serif; }
.fb-img, .x-img { aspect-ratio: 1.91 / 1; background: #e4e6eb center / cover no-repeat; display: grid; place-items: center; color: #65676b; font-size: 13px; }
.fb-img.loaded span, .x-img.loaded span { display: none; }
.fb-body { padding: 10px 12px; }
.fb-domain { font-size: 12px; color: #65676b; text-transform: uppercase; }
.fb-title { font-size: 16px; font-weight: 600; color: #050505; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fb-desc { font-size: 14px; color: #65676b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* X */
.x-card { max-width: 500px; border: 1px solid #cfd9de; border-radius: 16px; overflow: hidden; background: #fff; font-family: -apple-system, "Segoe UI", sans-serif; position: relative; }
.x-card .x-body { padding: 10px 12px; }
.x-card.large .x-title { position: absolute; left: 12px; bottom: 44px; background: rgba(0,0,0,.77); color: #fff; padding: 2px 8px; border-radius: 4px; font-size: 13px; max-width: calc(100% - 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x-card.large .x-domain { font-size: 13px; color: #536471; }
.x-card.small { display: flex; align-items: stretch; }
.x-card.small .x-img { aspect-ratio: 1 / 1; width: 130px; flex: none; border-right: 1px solid #cfd9de; }
.x-card.small .x-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.x-card.small .x-title { font-size: 15px; color: #0f1419; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.x-card.small .x-domain { font-size: 14px; color: #536471; }
@media (max-width: 768px) {
  .mtg-2 { grid-template-columns: minmax(0, 1fr); }
  .g-crumb, .g-title { max-width: 100%; }
  .mtg-out .pane-head:first-child { position: sticky; top: 60px; z-index: 5; background: var(--surface); }
}
@media (max-width: 900px) { #tool > .tool-grid > .mtg-form { order: 1; } #tool > .tool-grid > .mtg-out { order: 2; border-top: 1px solid var(--border); } #tool > .notice { order: 3; } }