/* MultiTools Tools — frontend styles (all classes prefixed mtt-) */
.mtt-wrap {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #1c2438;
  line-height: 1.5;
  max-width: 860px;
  margin: 0 auto;
}
.mtt-wrap *, .mtt-wrap *::before, .mtt-wrap *::after { box-sizing: border-box; }

/* ---------- directory ---------- */
.mtt-dir-cat { margin: 28px 0 8px; }
.mtt-dir-cat-title {
  font-size: 20px; font-weight: 700; margin: 0 0 12px;
  display: flex; align-items: center; gap: 10px;
}
.mtt-dir-cat-title::after { content: ""; flex: 1; height: 1px; background: #e2e8f5; }
.mtt-dir-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px;
}
.mtt-card {
  border: 1px solid #e2e8f5; border-radius: 12px; background: #fff;
  padding: 14px 14px 12px; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.mtt-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(31,77,142,.10); border-color: #b9cdf3; }
a.mtt-card { display: block; text-decoration: none; color: inherit; }
.mtt-card h3 { margin: 0 0 4px; font-size: 15px; }
.mtt-card p { margin: 0; font-size: 12.5px; color: #5e6b8b; }
.mtt-card .mtt-open-hint { font-size: 12px; color: #1378ff; font-weight: 600; margin-top: 8px; display: inline-block; }
.mtt-tool-slot { grid-column: 1 / -1; }
.mtt-tool-panel {
  border: 1px solid #d7e3f8; border-radius: 14px; background: #fbfdff;
  padding: 18px; box-shadow: 0 12px 30px rgba(31,77,142,.08);
}

/* ---------- single tool frame ---------- */
.mtt-tool { border: 1px solid #e2e8f5; border-radius: 14px; background: #fff; padding: 18px; box-shadow: 0 8px 22px rgba(31,77,142,.06); }
.mtt-tool h3.mtt-title { margin: 0 0 4px; font-size: 18px; }
.mtt-tool p.mtt-desc { margin: 0 0 14px; font-size: 13px; color: #5e6b8b; }

/* ---------- form elements ---------- */
.mtt-field { margin-bottom: 12px; }
.mtt-field label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; color: #33405e; }
.mtt-input, .mtt-select, .mtt-textarea {
  width: 100%; padding: 10px 12px; font-size: 14px; color: #1c2438;
  border: 1px solid #cfdaef; border-radius: 9px; background: #fff; outline: none;
}
.mtt-input:focus, .mtt-select:focus, .mtt-textarea:focus { border-color: #1378ff; box-shadow: 0 0 0 3px rgba(19,120,255,.12); }
.mtt-textarea { min-height: 120px; resize: vertical; font-family: inherit; }
.mtt-row { display: flex; gap: 10px; flex-wrap: wrap; }
.mtt-row .mtt-field { flex: 1 1 140px; margin-bottom: 0; }
.mtt-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; margin: 6px 0; }
.mtt-check input { width: 16px; height: 16px; accent-color: #1378ff; }
.mtt-range { width: 100%; accent-color: #1378ff; }

/* ---------- buttons ---------- */
.mtt-btn {
  display: inline-block; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(110deg, #147cff, #9b30f0); color: #fff;
  padding: 10px 22px; font-size: 13.5px; font-weight: 700;
  box-shadow: 0 6px 16px rgba(75,65,235,.22); transition: transform .1s ease, box-shadow .1s ease;
}
.mtt-btn:hover { transform: translateY(-1px); box-shadow: 0 9px 20px rgba(75,65,235,.28); }
.mtt-btn:active { transform: translateY(0); }
.mtt-btn.mtt-secondary { background: #eef3fd; color: #1c2438; box-shadow: none; border: 1px solid #d7e3f8; }
.mtt-btn.mtt-secondary:hover { background: #e2ebfb; box-shadow: none; }
.mtt-btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ---------- results ---------- */
.mtt-result {
  margin-top: 12px; padding: 12px 14px; background: #eef4ff; border: 1px solid #d7e3f8;
  border-radius: 9px; font-size: 13.5px; white-space: pre-wrap; word-break: break-word;
}
.mtt-result strong { color: #0f2a6b; }
.mtt-error { color: #c22747; background: #fdeef1; border: 1px solid #f5c2cd; padding: 10px 12px; border-radius: 9px; font-size: 13px; }
.mtt-note { font-size: 12.5px; color: #5e6b8b; margin-top: 8px; }
.mtt-swatch { width: 100%; height: 64px; border-radius: 10px; border: 1px solid #d7e3f8; margin: 8px 0; }
.mtt-grad-preview { width: 100%; height: 110px; border-radius: 10px; border: 1px solid #d7e3f8; margin: 8px 0; }
.mtt-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 10px 0; }
.mtt-stat { background: #eef3fd; border-radius: 9px; padding: 10px; text-align: center; }
.mtt-stat b { display: block; font-size: 20px; color: #1378ff; }
.mtt-stat span { font-size: 11.5px; color: #5e6b8b; }

/* ---------- calculator pad ---------- */
.mtt-display {
  width: 100%; text-align: right; font-size: 24px; font-weight: 700; padding: 12px;
  border: 1px solid #cfdaef; border-radius: 9px; background: #f7faff; margin-bottom: 10px; min-height: 56px; overflow-x: auto;
}
.mtt-pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.mtt-pad button {
  border: 1px solid #d7e3f8; background: #fff; border-radius: 8px; padding: 11px 4px;
  font-size: 14px; font-weight: 600; cursor: pointer; color: #1c2438;
}
.mtt-pad button:hover { background: #eef3fd; }
.mtt-pad button.mtt-op { background: #e3edff; color: #0f5fd0; }
.mtt-pad button.mtt-fn { background: #f2ecff; color: #6a2fd0; font-size: 12.5px; }
.mtt-pad button.mtt-eq { background: linear-gradient(110deg, #147cff, #9b30f0); color: #fff; border: 0; }

.mtt-drop { border: 2px dashed #9db4dd; border-radius: 10px; padding: 20px; text-align: center; color: #5e6b8b; font-size: 13px; margin-bottom: 10px; }
.mtt-drop input { max-width: 100%; margin-top: 8px; }
.mtt-qr-box { text-align: center; margin-top: 10px; }
.mtt-qr-box img, .mtt-qr-box svg { max-width: 100%; height: auto; }

@media (max-width: 560px) {
  .mtt-pad { grid-template-columns: repeat(4, 1fr); }
  .mtt-dir-grid { grid-template-columns: 1fr 1fr; }
}

/* tool icons (v1.7.0) */
.mtt-card-icon{display:inline-flex;width:46px;height:46px;border-radius:12px;background:linear-gradient(145deg,#eef4ff,#dbe7ff);align-items:center;justify-content:center;font-size:24px;margin-bottom:10px}
.mtt-tool-head{display:flex;align-items:center;gap:14px;margin-bottom:8px}
.mtt-tool-icon{font-size:36px;line-height:1}

/* category pages (v1.8.0) */
.mtt-cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin:18px 0}
.mtt-cat-card{display:flex;align-items:center;gap:14px;border:1px solid #e2e8f5;border-radius:12px;background:#fff;padding:14px;text-decoration:none;color:inherit;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.mtt-cat-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(31,77,142,.10);border-color:#b9cdf3}
.mtt-cat-card img{width:64px;height:64px;border-radius:12px;flex:none}
.mtt-cat-card span{display:block}
.mtt-cat-card strong{display:block;font-size:15px}
.mtt-cat-card small{font-size:12.5px;color:#5e6b8b}
.mtt-cat-cover{display:block;width:100%;max-width:780px;border-radius:14px;margin:0 auto 22px}
.mtt-dir-cat-link{color:inherit;text-decoration:none}
.mtt-dir-cat-link:hover{color:#1378ff}

/* Blog index grid ([multitools_blog]) — same card language as the tools directory. */
.mtt-blog-intro{color:#5e6b8b;font-size:14px;margin:0 0 16px}
.mtt-blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:0 0 22px}
.mtt-blog-card{display:flex;flex-direction:column;border:1px solid #e2e8f5;border-radius:12px;background:#fff;overflow:hidden;text-decoration:none;color:inherit;transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.mtt-blog-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(31,77,142,.10);border-color:#b9cdf3}
.mtt-blog-img{display:block;aspect-ratio:16/9;background:#eef3fd;overflow:hidden}
.mtt-blog-img img{width:100%;height:100%;object-fit:cover;display:block}
.mtt-blog-ph{display:grid;place-items:center;height:100%;min-height:120px;font-size:34px;color:#9db4dd}
.mtt-blog-body{display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px}
.mtt-blog-body strong{font-size:15.5px;line-height:1.35}
.mtt-blog-body small{font-size:12px;color:#8a97b5}
.mtt-blog-ex{font-size:13px;color:#5e6b8b;line-height:1.55}
.mtt-blog-empty{border:1px dashed #b9cdf3;border-radius:12px;background:#f7faff;padding:38px 24px;text-align:center;color:#5e6b8b}
.mtt-blog-empty strong{display:block;font-size:17px;color:#101b3d;margin-bottom:6px}
.mtt-blog-pag{text-align:center;margin:8px 0 4px}
.mtt-blog-pag .page-numbers{display:inline-block;min-width:34px;padding:7px 10px;margin:0 3px;border:1px solid #e2e8f5;border-radius:8px;background:#fff;color:#1378ff;text-decoration:none;font-size:13px;font-weight:700}
.mtt-blog-pag .page-numbers.current{background:#1378ff;border-color:#1378ff;color:#fff}