/* MeraTool AI Tools - all selectors are prefixed with .mtai- to avoid theme conflicts */

.mtai-tool, .mtai-grid-wrap { font-family: inherit; line-height: 1.55; color: #1f2937; box-sizing: border-box; }
.mtai-tool *, .mtai-grid-wrap * { box-sizing: border-box; }

/* ---------- tool box ---------- */
.mtai-box {
  max-width: 760px; margin: 20px auto; padding: 22px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}
.mtai-box-title { margin: 0 0 14px; font-size: 1.5rem; line-height: 1.25; }

.mtai-file { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.mtai-drop {
  display: block; padding: 22px 16px; text-align: center; cursor: pointer;
  border: 2px dashed #8b5cf6; border-radius: 14px; background: #f5f3ff; transition: background .15s;
}
.mtai-drop:hover { background: #ede9fe; }
.mtai-file:focus-visible + .mtai-drop { outline: 3px solid #111; outline-offset: 2px; }
.mtai-drop-icon { display: block; font-size: 26px; }
.mtai-drop-text { display: block; margin-top: 4px; font-weight: 600; word-break: break-word; }
.mtai-tone-red   { border-color: #ef4444; background: #fef2f2; }
.mtai-tone-red:hover { background: #fee2e2; }
.mtai-tone-green { border-color: #10b981; background: #ecfdf5; }
.mtai-tone-green:hover { background: #d1fae5; }

.mtai-video, .mtai-preview { display: block; width: 100%; max-height: 360px; margin-top: 12px; border-radius: 12px; object-fit: contain; background: #f3f4f6; }
.mtai-video[hidden], .mtai-preview[hidden] { display: none; }

.mtai-label { display: block; margin: 14px 0 6px; font-weight: 600; font-size: .9rem; }
.mtai-textarea, .mtai-input, .mtai-select {
  display: block; width: 100%; padding: 11px 12px; font: inherit; font-size: .95rem; color: #111;
  background: #fff; border: 1px solid #d1d5db; border-radius: 12px;
}
.mtai-textarea { resize: vertical; }
.mtai-textarea:focus, .mtai-input:focus, .mtai-select:focus { outline: 3px solid rgba(124, 58, 237, .35); border-color: #7c3aed; }

.mtai-row { display: flex; gap: 12px; flex-wrap: wrap; }
.mtai-col { flex: 1 1 240px; min-width: 0; }
.mtai-col-small { flex: 0 1 160px; }

.mtai-status { min-height: 1.4em; margin: 12px 0 4px; font-size: .85rem; color: #6d28d9; }
.mtai-status.is-error { color: #b91c1c; }

.mtai-btn {
  display: block; width: 100%; margin-top: 10px; padding: 13px 16px; font: inherit; font-weight: 700;
  color: #fff; background: #111; border: 0; border-radius: 12px; cursor: pointer; transition: opacity .15s, transform .1s;
}
.mtai-btn:hover { opacity: .9; }
.mtai-btn:active { transform: translateY(1px); }
.mtai-btn:focus-visible { outline: 3px solid #7c3aed; outline-offset: 2px; }
.mtai-btn[disabled] { opacity: .5; cursor: not-allowed; }
.mtai-btn-violet { background: #7c3aed; }
.mtai-btn-red    { background: #ef4444; }
.mtai-btn-green  { background: #10b981; }
.mtai-btn-ghost  { color: #111; background: #f3f4f6; font-weight: 600; padding: 9px 14px; width: auto; display: inline-block; }

.mtai-privacy { margin: 16px 0 0; font-size: .8rem; color: #6b7280; }

/* ---------- SEO text ---------- */
.mtai-seo { max-width: 760px; margin: 28px auto 0; }
.mtai-seo h2 { font-size: 1.45rem; margin: 0 0 .5em; }
.mtai-seo h3 { font-size: 1.15rem; margin: 1.6em 0 .5em; }
.mtai-seo h4 { font-size: 1rem; margin: 1.1em 0 .25em; }
.mtai-seo p { margin: 0 0 .8em; }
.mtai-seo ol, .mtai-seo ul { margin: 0 0 1em 1.3em; padding: 0; }
.mtai-seo li { margin-bottom: .35em; }

/* ---------- front page grid ---------- */
.mtai-grid-wrap { max-width: 1100px; margin: 36px auto; padding: 0 16px; }
.mtai-grid-title { margin: 0 0 6px; text-align: center; font-size: 1.8rem; }
.mtai-grid-sub { margin: 0 auto 22px; max-width: 640px; text-align: center; color: #4b5563; }
.mtai-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.mtai-card {
  display: block; padding: 20px 16px; text-align: center; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; transition: transform .2s, box-shadow .2s;
}
.mtai-card:hover, .mtai-card:focus-visible { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0, 0, 0, .1); }
.mtai-card:focus-visible { outline: 3px solid #7c3aed; outline-offset: 2px; }
.mtai-card-icon { display: block; font-size: 34px; }
.mtai-card-title { margin: 8px 0 6px; font-size: 1.1rem; }
.mtai-card-text { margin: 0 0 10px; font-size: .9rem; color: #4b5563; }
.mtai-card-cta { font-weight: 700; font-size: .9rem; color: #7c3aed; }

@media (max-width: 480px) {
  .mtai-box { padding: 16px; border-radius: 16px; }
  .mtai-col-small { flex-basis: 100%; }
}