@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');

.mfg-tool-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  padding: 64px 20px;
  box-sizing: border-box;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 235, 59, 0.34), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(0, 229, 255, 0.32), transparent 30%),
    radial-gradient(circle at 72% 88%, rgba(255, 44, 132, 0.34), transparent 34%),
    linear-gradient(135deg, #15002f 0%, #30106f 38%, #0a4c72 68%, #101827 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #ffffff;
}

.mfg-tool-wrap,
.mfg-tool-wrap div,
.mfg-tool-wrap section,
.mfg-tool-wrap h2,
.mfg-tool-wrap p,
.mfg-tool-wrap label,
.mfg-tool-wrap textarea,
.mfg-tool-wrap button {
  box-sizing: border-box;
}

.mfg-tool-wrap .mfg-container {
  width: min(100%, 1200px);
  max-width: 1200px;
  margin: 0 auto;
}

.mfg-tool-wrap .mfg-heading {
  text-align: center;
  margin: 0 auto 28px;
  max-width: 780px;
}

.mfg-tool-wrap .mfg-heading h2 {
  margin: 0 0 10px;
  font-size: 46px;
  line-height: 1.05;
  letter-spacing: 0;
  font-weight: 900;
  color: #ffffff;
  text-shadow: 0 4px 26px rgba(0, 0, 0, 0.35);
}

.mfg-tool-wrap .mfg-heading p {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.84);
}

.mfg-tool-wrap .mfg-input-panel {
  width: 100%;
  margin: 0 auto 28px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.13);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.mfg-tool-wrap .mfg-label {
  display: block;
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
}

.mfg-tool-wrap .mfg-textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 132px;
  resize: vertical;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 18px;
  outline: none;
  background: rgba(6, 9, 28, 0.66);
  color: #ffffff;
  font-size: 21px;
  line-height: 1.45;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mfg-tool-wrap .mfg-textarea:focus {
  border-color: rgba(0, 229, 255, 0.82);
  background: rgba(6, 9, 28, 0.82);
  box-shadow: 0 0 0 5px rgba(0, 229, 255, 0.16), 0 0 34px rgba(255, 44, 132, 0.18);
}

.mfg-tool-wrap .mfg-actions {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 18px;
}

.mfg-tool-wrap .mfg-clear-btn,
.mfg-tool-wrap .mfg-load-btn,
.mfg-tool-wrap .mfg-copy-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: 0;
  color: #07101d;
  background: linear-gradient(135deg, #ffeb3b, #00e5ff 48%, #ff4f9a);
  box-shadow: 0 12px 32px rgba(0, 229, 255, 0.22);
  transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease, opacity 160ms ease;
}

.mfg-tool-wrap .mfg-clear-btn {
  min-width: 112px;
  min-height: 42px;
  padding: 11px 22px;
  font-size: 14px;
}

.mfg-tool-wrap .mfg-load-btn {
  min-width: 170px;
  min-height: 48px;
  padding: 13px 28px;
  font-size: 15px;
}

.mfg-tool-wrap .mfg-copy-btn {
  width: 100%;
  min-height: 42px;
  padding: 11px 18px;
  font-size: 14px;
}

.mfg-tool-wrap .mfg-clear-btn:hover,
.mfg-tool-wrap .mfg-load-btn:hover,
.mfg-tool-wrap .mfg-copy-btn:hover {
  transform: translateY(-2px);
  filter: saturate(1.12);
  box-shadow: 0 16px 38px rgba(255, 79, 154, 0.28), 0 0 28px rgba(0, 229, 255, 0.18);
}

.mfg-tool-wrap .mfg-clear-btn:active,
.mfg-tool-wrap .mfg-load-btn:active,
.mfg-tool-wrap .mfg-copy-btn:active {
  transform: translateY(0) scale(0.98);
}

.mfg-tool-wrap .mfg-load-btn[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
}

.mfg-tool-wrap .mfg-grid {
  display: grid;
  width: 100%;
  max-width: 100%;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mfg-tool-wrap .mfg-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: mfgFadeIn 360ms ease both;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  overflow: hidden;
}

.mfg-tool-wrap .mfg-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 235, 59, 0.46);
  box-shadow: 0 24px 58px rgba(0, 0, 0, 0.3), 0 0 26px rgba(0, 229, 255, 0.14);
}

.mfg-tool-wrap .mfg-card-title {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 900;
  color: #ffffff;
}

.mfg-tool-wrap .mfg-preview {
  width: 100%;
  max-width: 100%;
  min-height: 126px;
  max-height: 180px;
  margin: 0 0 14px;
  padding: 14px;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(5, 8, 22, 0.54);
  color: #ffffff;
  overflow-y: auto;
  overflow-x: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
  line-height: 1.32;
  font-size: 20px;
}

.mfg-tool-wrap .mfg-preview::-webkit-scrollbar {
  width: 9px;
}

.mfg-tool-wrap .mfg-preview::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}

.mfg-tool-wrap .mfg-preview::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00e5ff, #ff4f9a);
  border-radius: 999px;
}

.mfg-tool-wrap .mfg-load-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 28px;
}

.mfg-tool-wrap .mfg-hidden {
  display: none;
}

.mfg-tool-wrap .mfg-impact { font-family: Impact, Haettenschweiler, "Arial Black", sans-serif; font-weight: 900; text-transform: uppercase; text-shadow: 2px 2px 0 #000, -1px -1px 0 #000; }
.mfg-tool-wrap .mfg-bold { font-weight: 950; text-transform: uppercase; color: #ffeb3b; }
.mfg-tool-wrap .mfg-mocking { font-weight: 800; color: #ff7ac4; }
.mfg-tool-wrap .mfg-vapor { letter-spacing: 2px; color: #8ffcff; text-shadow: 0 0 14px rgba(0,229,255,.75); }
.mfg-tool-wrap .mfg-wide { letter-spacing: 4px; font-weight: 800; }
.mfg-tool-wrap .mfg-bubble { font-weight: 900; color: #ffd6f0; text-shadow: 0 3px 0 #7b1cff; }
.mfg-tool-wrap .mfg-square { font-weight: 900; color: #b7ff3c; }
.mfg-tool-wrap .mfg-glitch { font-weight: 900; color: #fff; text-shadow: 2px 0 #ff2c84, -2px 0 #00e5ff; }
.mfg-tool-wrap .mfg-upside { font-weight: 800; color: #d7c7ff; }
.mfg-tool-wrap .mfg-tiny { font-size: 17px; color: #c7ffef; }
.mfg-tool-wrap .mfg-serif { font-family: Georgia, "Times New Roman", serif; font-weight: 900; color: #fff0b8; }
.mfg-tool-wrap .mfg-sans { font-family: Arial, Helvetica, sans-serif; font-weight: 950; text-transform: uppercase; }
.mfg-tool-wrap .mfg-cursed { color: #f7d6ff; text-shadow: 0 0 10px #ff2c84; }
.mfg-tool-wrap .mfg-arcade { font-family: "Courier New", monospace; font-weight: 900; color: #19ff79; text-shadow: 2px 2px 0 #000; }
.mfg-tool-wrap .mfg-comic { font-family: "Comic Sans MS", "Trebuchet MS", sans-serif; font-weight: 900; color: #ffeb3b; }
.mfg-tool-wrap .mfg-emoji { font-weight: 900; color: #ffffff; }
.mfg-tool-wrap .mfg-rage { font-weight: 950; color: #ff4b4b; text-transform: uppercase; }
.mfg-tool-wrap .mfg-space { letter-spacing: 3px; text-transform: uppercase; color: #dff8ff; }
.mfg-tool-wrap .mfg-outline { font-weight: 950; color: transparent; -webkit-text-stroke: 1px #ffffff; text-shadow: 0 0 16px rgba(255,255,255,.35); }
.mfg-tool-wrap .mfg-fried { font-weight: 950; color: #ffb000; filter: saturate(1.5) contrast(1.15); text-shadow: 2px 2px 0 #c40000; }
.mfg-tool-wrap .mfg-neon { color: #00e5ff; text-shadow: 0 0 8px #00e5ff, 0 0 20px #ff4f9a; }
.mfg-tool-wrap .mfg-classic { font-family: Impact, "Arial Black", sans-serif; text-transform: uppercase; color: #fff; text-shadow: 2px 2px 0 #000; }
.mfg-tool-wrap .mfg-comment { font-weight: 800; color: #e8f2ff; }
.mfg-tool-wrap .mfg-sticker { font-weight: 950; color: #ff4f9a; text-shadow: 2px 2px 0 #fff; }
.mfg-tool-wrap .mfg-terminal { font-family: "Courier New", monospace; color: #30ff90; }
.mfg-tool-wrap .mfg-strike { text-decoration: line-through; text-decoration-thickness: 2px; }
.mfg-tool-wrap .mfg-under { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.mfg-tool-wrap .mfg-warning { color: #111827; background: linear-gradient(135deg, #ffeb3b, #ff9f1c); font-weight: 950; }
.mfg-tool-wrap .mfg-minimal { color: #f8fafc; font-weight: 500; }
.mfg-tool-wrap .mfg-fraktur { color: #e9ddff; }
.mfg-tool-wrap .mfg-quote { font-family: Georgia, serif; font-style: italic; color: #fff5cc; }
.mfg-tool-wrap .mfg-chaos { color: #ffffff; text-shadow: 1px 1px 0 #ff2c84, -1px -1px 0 #00e5ff; }

@keyframes mfgFadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 1200px) {
  .mfg-tool-wrap { padding: 64px 20px; }
  .mfg-tool-wrap .mfg-container { width: min(100%, 1200px); }
  .mfg-tool-wrap .mfg-heading h2 { font-size: 46px; }
  .mfg-tool-wrap .mfg-heading p { font-size: 17px; }
  .mfg-tool-wrap .mfg-textarea { min-height: 132px; font-size: 21px; }
  .mfg-tool-wrap .mfg-clear-btn { min-height: 42px; font-size: 14px; padding: 11px 22px; }
  .mfg-tool-wrap .mfg-load-btn { min-height: 48px; font-size: 15px; padding: 13px 28px; }
  .mfg-tool-wrap .mfg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  .mfg-tool-wrap .mfg-card { padding: 18px; }
  .mfg-tool-wrap .mfg-preview { font-size: 20px; }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .mfg-tool-wrap { padding: 58px 18px; }
  .mfg-tool-wrap .mfg-container { width: 100%; }
  .mfg-tool-wrap .mfg-heading h2 { font-size: 42px; }
  .mfg-tool-wrap .mfg-heading p { font-size: 16px; }
  .mfg-tool-wrap .mfg-textarea { min-height: 126px; font-size: 20px; }
  .mfg-tool-wrap .mfg-clear-btn { min-height: 42px; font-size: 14px; padding: 10px 21px; }
  .mfg-tool-wrap .mfg-load-btn { min-height: 46px; font-size: 15px; padding: 12px 26px; }
  .mfg-tool-wrap .mfg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .mfg-tool-wrap .mfg-card { padding: 18px; }
  .mfg-tool-wrap .mfg-preview { font-size: 19px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .mfg-tool-wrap { padding: 52px 18px; }
  .mfg-tool-wrap .mfg-container { width: 100%; }
  .mfg-tool-wrap .mfg-heading h2 { font-size: 38px; }
  .mfg-tool-wrap .mfg-heading p { font-size: 16px; }
  .mfg-tool-wrap .mfg-input-panel { padding: 22px; }
  .mfg-tool-wrap .mfg-textarea { min-height: 122px; font-size: 19px; }
  .mfg-tool-wrap .mfg-clear-btn { min-height: 41px; font-size: 14px; padding: 10px 20px; }
  .mfg-tool-wrap .mfg-load-btn { min-height: 45px; font-size: 14px; padding: 12px 24px; }
  .mfg-tool-wrap .mfg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .mfg-tool-wrap .mfg-card { padding: 17px; }
  .mfg-tool-wrap .mfg-preview { font-size: 18px; }
}

@media (min-width: 430px) and (max-width: 767px) {
  .mfg-tool-wrap { padding: 42px 14px; }
  .mfg-tool-wrap .mfg-container { width: 100%; }
  .mfg-tool-wrap .mfg-heading h2 { font-size: 32px; }
  .mfg-tool-wrap .mfg-heading p { font-size: 15px; }
  .mfg-tool-wrap .mfg-input-panel { padding: 18px; border-radius: 18px; }
  .mfg-tool-wrap .mfg-textarea { min-height: 116px; font-size: 17px; padding: 15px; }
  .mfg-tool-wrap .mfg-clear-btn { min-height: 40px; font-size: 13px; padding: 10px 19px; }
  .mfg-tool-wrap .mfg-load-btn { min-height: 44px; font-size: 14px; padding: 12px 23px; }
  .mfg-tool-wrap .mfg-grid { grid-template-columns: 1fr !important; gap: 15px; }
  .mfg-tool-wrap .mfg-card { padding: 16px; }
  .mfg-tool-wrap .mfg-preview { font-size: 17px; }
}

@media (min-width: 375px) and (max-width: 429px) {
  .mfg-tool-wrap { padding: 38px 12px; }
  .mfg-tool-wrap .mfg-container { width: 100%; }
  .mfg-tool-wrap .mfg-heading h2 { font-size: 29px; }
  .mfg-tool-wrap .mfg-heading p { font-size: 14px; }
  .mfg-tool-wrap .mfg-input-panel { padding: 16px; border-radius: 17px; }
  .mfg-tool-wrap .mfg-textarea { min-height: 112px; font-size: 16px; padding: 14px; }
  .mfg-tool-wrap .mfg-clear-btn { min-height: 39px; font-size: 13px; padding: 9px 18px; }
  .mfg-tool-wrap .mfg-load-btn { min-height: 43px; font-size: 14px; padding: 11px 22px; }
  .mfg-tool-wrap .mfg-grid { grid-template-columns: 1fr !important; gap: 14px; }
  .mfg-tool-wrap .mfg-card { padding: 15px; }
  .mfg-tool-wrap .mfg-preview { font-size: 16px; }
}

@media (min-width: 320px) and (max-width: 374px) {
  .mfg-tool-wrap { padding: 34px 10px; }
  .mfg-tool-wrap .mfg-container { width: 100%; }
  .mfg-tool-wrap .mfg-heading h2 { font-size: 26px; }
  .mfg-tool-wrap .mfg-heading p { font-size: 13px; }
  .mfg-tool-wrap .mfg-input-panel { padding: 14px; border-radius: 16px; }
  .mfg-tool-wrap .mfg-textarea { min-height: 108px; font-size: 15px; padding: 13px; }
  .mfg-tool-wrap .mfg-clear-btn { min-height: 38px; font-size: 12px; padding: 9px 17px; }
  .mfg-tool-wrap .mfg-load-btn { min-height: 42px; font-size: 13px; padding: 11px 21px; }
  .mfg-tool-wrap .mfg-grid { grid-template-columns: 1fr !important; gap: 13px; }
  .mfg-tool-wrap .mfg-card { padding: 14px; }
  .mfg-tool-wrap .mfg-preview { font-size: 15px; }
}