.mf-generator {
--mf-text: #231927;
--mf-muted: #706477;
--mf-border: #e4dbe9;
--mf-surface: #ffffff;
--mf-soft: #faf7fb;
--mf-accent: #e9007f;
--mf-accent-strong: #c90072;
--mf-focus: rgba(233, 0, 127, .18);
width: min(100%, 460px);
margin: 24px auto;
padding: 16px;
border: 1px solid rgba(228, 219, 233, .9);
border-radius: 14px;
background: var(--mf-surface);
box-shadow: 0 18px 44px rgba(41, 25, 49, .10);
color: var(--mf-text);
font-family: inherit;
}
.mf-generator *,
.mf-generator *::before,
.mf-generator *::after {
box-sizing: border-box;
}
.mf-generator [hidden],
.mf-generator .mf-is-hidden {
display: none !important;
}
.mf-generator__form,
.mf-generator__editor,
.mf-generator__result {
display: grid;
gap: 14px;
}
.mf-generator__form-row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(138px, .62fr);
gap: 10px;
align-items: end;
}
.mf-generator__field {
display: grid;
gap: 6px;
font-size: .88rem;
font-weight: 800;
line-height: 1.2;
}
.mf-generator__field input {
width: 100%;
min-height: 42px;
padding: 9px 12px;
border: 1px solid var(--mf-border);
border-radius: 10px;
background: #fff;
color: var(--mf-text);
font: inherit;
font-weight: 600;
outline: none;
transition: border-color .16s ease, box-shadow .16s ease;
}
.mf-generator__field input:focus {
border-color: var(--mf-accent);
box-shadow: 0 0 0 4px var(--mf-focus);
}
.mf-generator__upload {
position: relative;
display: grid;
place-items: center;
min-height: 42px;
padding: 9px 12px;
border: 1.5px dashed #d7c9df;
border-radius: 10px;
background: var(--mf-soft);
color: #5d5264;
font-weight: 900;
line-height: 1.15;
text-align: center;
cursor: pointer;
overflow: hidden;
transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.mf-generator__upload:hover,
.mf-generator__upload:focus-within {
border-color: var(--mf-accent);
background: #fff4fa;
color: var(--mf-accent-strong);
}
.mf-generator__upload:only-child {
grid-column: 1 / -1;
}
.mf-generator__upload input {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.mf-generator__upload span {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mf-generator__button,
.mf-generator__secondary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
border-radius: 10px;
padding: 9px 16px;
border: 1px solid transparent;
text-decoration: none !important;
font: inherit;
font-weight: 900;
line-height: 1.1;
cursor: pointer;
appearance: none;
transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.mf-generator__button {
background: var(--mf-accent);
color: #fff !important;
box-shadow: 0 8px 20px rgba(233, 0, 127, .22);
}
.mf-generator__button:hover,
.mf-generator__button:focus {
background: var(--mf-accent-strong);
color: #fff !important;
box-shadow: 0 10px 26px rgba(201, 0, 114, .26);
}
.mf-generator__button:disabled {
opacity: .55;
cursor: not-allowed;
box-shadow: none;
}
.mf-generator__secondary {
background: #fff;
color: var(--mf-text) !important;
border-color: var(--mf-border);
box-shadow: 0 3px 10px rgba(41, 25, 49, .05);
}
.mf-generator__secondary:hover,
.mf-generator__secondary:focus {
border-color: #cfc1d8;
background: var(--mf-soft);
color: var(--mf-text) !important;
}
.mf-generator__form > .mf-generator__button {
justify-self: end;
min-width: 210px;
}
.mf-generator__canvas-shell {
position: relative;
width: min(100%, 410px);
margin: 4px auto 2px;
padding: 0;
touch-action: none;
}
.mf-generator canvas,
.mf-generator__result img {
display: block;
width: 100%;
height: auto;
border-radius: 12px;
background: #fff;
box-shadow: 0 10px 30px rgba(41, 25, 49, .14);
}
.mf-generator__result img {
width: min(100%, 380px);
margin: 0 auto 2px;
}
.mf-editor-frame {
position: absolute;
z-index: 3;
border: 2px solid #18d8ff;
border-radius: 8px;
background: rgba(24, 216, 255, .12);
color: #005f82;
display: grid;
place-items: center;
padding: 4px;
font-size: 10px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: .04em;
text-align: center;
cursor: move;
user-select: none;
touch-action: none;
}
.mf-editor-frame span {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mf-editor-frame__handle {
position: absolute;
right: -9px;
bottom: -9px;
width: 20px;
height: 20px;
border-radius: 999px;
background: #18d8ff;
border: 3px solid #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, .24);
cursor: nwse-resize;
}
.mf-generator__controls {
display: grid;
gap: 10px;
}
.mf-generator__actions {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 10px;
align-items: center;
}
.mf-generator__actions .mf-generator__button {
min-width: 170px;
}
.mf-generator__result .mf-generator__actions {
grid-template-columns: 1fr 1fr;
}
.mf-generator__result [data-mf-again] {
grid-column: 1 / -1;
justify-self: center;
min-width: 190px;
}
.mf-generator__fallback {
margin: 0;
color: var(--mf-muted);
font-size: .9rem;
line-height: 1.45;
text-align: center;
}
@media (max-width: 520px) {
.mf-generator {
width: 100%;
margin: 18px auto;
padding: 12px;
border-radius: 12px;
}
.mf-generator__form-row,
.mf-generator__actions,
.mf-generator__result .mf-generator__actions {
grid-template-columns: 1fr;
}
.mf-generator__form > .mf-generator__button,
.mf-generator__actions .mf-generator__button,
.mf-generator__result [data-mf-again] {
width: 100%;
min-width: 0;
}
}