/* Free Logo Maker: styles for the tool (adapted from the Modularity Maker plugin). Everything lives under .mm-wrap. */
.mm-wrap {
	--bg: #0A0E17; --panel: #111827; --panel2: #0F1522; --line: #1F2A3D; --fg: #F0F4FF; --mut: #8A97B2;
	--blue: #38BDF8; --blue2: #0EA5E9; --violet: #A78BFA; --ok: #34D399; --err: #F87171; --warn: #FBBF24; --accent: #3bb8e8;
	position: relative; color: var(--fg); font-family: 'DM Sans', system-ui, sans-serif; font-size: 15px; line-height: 1.55;
	background: var(--bg); border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
}
.mm-wrap *, .mm-wrap *::before, .mm-wrap *::after { box-sizing: border-box; }
.mm-wrap a { color: var(--blue); }
.mm-wrap button { font-family: inherit; }
.mm-link { color: var(--mut) !important; text-decoration: none; background: none; border: 0; cursor: pointer; font: inherit; padding: 0; }
.mm-link:hover { color: var(--fg) !important; }
.mm-muted { color: var(--mut); }
.mm-ok { color: var(--ok); } .mm-bad { color: var(--err); }
.mm-dots { display: flex; height: 22px; border-radius: 6px; overflow: hidden; width: 100%; }
.mm-dots i { flex: 1; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mm-field { display: block; margin-bottom: 16px; }
.mm-field > span { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; color: #C9D3E8; }
.mm-field small { display: block; color: var(--mut); font-size: 12.5px; margin-top: 6px; }
.mm-check { display: flex; align-items: center; gap: 10px; margin: 8px 0; cursor: pointer; }
.mm-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--blue); color: #04121C !important; border: 1px solid transparent; border-radius: 999px; padding: 10px 18px; font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: none; transition: background .15s, transform .15s; }
.mm-btn:hover { background: #7DD3FC; transform: translateY(-1px); }
.mm-btn:disabled { opacity: .5; cursor: default; transform: none; }
.mm-btn--ghost { background: transparent; color: var(--fg) !important; border-color: var(--line); }
.mm-btn--ghost:hover { background: var(--panel); border-color: #33415C; }
.mm-btn--sm { padding: 7px 12px; font-size: 13px; }
.mm-wrap .mm-field input, .mm-wrap .mm-field textarea, .mm-wrap .mm-field select { width: 100%; background: var(--panel2); color: var(--fg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; font: inherit; font-size: 14.5px; }
.mm-wrap .mm-field input::placeholder { color: #4B5873; }
.mm-wrap .mm-field input:focus, .mm-wrap .mm-field select:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(56,189,248,.18); }
.mm-wrap .mm-field input[type=range] { padding: 0; border: 0; background: none; accent-color: var(--blue); }
.mm-wrap .mm-check input[type=checkbox] { width: 18px; height: 18px; margin: 0; accent-color: var(--blue); flex: none; }
.mm-lm-fit-off {}
.mm-link {color: var(--mut) !important; text-decoration: none; background: none; border: 0; cursor: pointer; font: inherit; padding: 0;}
.mm-link:hover {color: var(--fg) !important;}
.mm-muted {color: var(--mut);}
.mm-field {display: block; margin-bottom: 16px;}
.mm-field > span {display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; color: #C9D3E8;}
.mm-wrap .mm-field input, .mm-wrap .mm-field textarea, .mm-wrap .mm-field select {width: 100%; max-width: none; background: var(--panel2); color: var(--fg); border: 1px solid var(--line); border-radius: 10px;
	padding: 11px 13px; font: inherit; font-size: 15px; line-height: 1.4; min-height: 44px; box-shadow: none;}
.mm-wrap .mm-field select {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A97B2' fill='none' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px;}
.mm-wrap .mm-field input::placeholder, .mm-wrap .mm-field textarea::placeholder {color: #4B5873;}
.mm-wrap .mm-field input:focus, .mm-wrap .mm-field textarea:focus, .mm-wrap .mm-field select:focus {border-color: var(--blue); outline: 0; box-shadow: 0 0 0 3px rgba(56,189,248,.18);}
.mm-field small {display: block; color: var(--mut); font-size: 12.5px; margin-top: 6px;}
.mm-field.mm-invalid input, .mm-field.mm-invalid textarea {border-color: var(--err); box-shadow: 0 0 0 3px rgba(248,113,113,.15);}
.mm-check {display: flex; align-items: center; gap: 10px; margin: 8px 0; cursor: pointer;}
.mm-wrap .mm-check input[type=checkbox] {width: 18px; height: 18px; margin: 0; accent-color: var(--blue); background: var(--panel2); border-color: #3A4760;}
.mm-wrap .mm-check input[type=checkbox]:checked {background: var(--blue); border-color: var(--blue);}
.mm-btn {display: inline-flex; align-items: center; gap: 8px; background: var(--blue); color: #04121C !important; border: 1px solid var(--blue); border-radius: 10px;
	padding: 11px 20px; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; transition: transform .12s, background .12s; line-height: 1.2;}
.mm-btn:hover {background: #7DD3FC; transform: translateY(-1px);}
.mm-btn:disabled {opacity: .5; cursor: default; transform: none;}
.mm-btn--ghost {background: transparent; color: var(--fg) !important; border-color: var(--line);}
.mm-btn--ghost:hover {background: var(--panel); border-color: #33415C;}
.mm-btn--lg {padding: 15px 26px; font-size: 16px;}
.mm-btn--sm {padding: 7px 12px; font-size: 13px;}
.mm-ok {color: var(--ok);}
.mm-bad {color: var(--err);}
.mm-dots {display: flex; height: 22px; border-radius: 6px; overflow: hidden; width: 100%;}
.mm-dots i {flex: 1;}
.mm-dots--ai {align-items: center; justify-content: center; background: linear-gradient(90deg, var(--blue), var(--violet), #F472B6); color: #fff; font-style: normal;}
.mm-field--inline {margin-top: 6px;}
.mm-small {font-size: 12.5px;}
.mm-btn {border-radius: 999px;}
.mm-input {position: relative;}
.mm-wrap .mm-field--icon .mm-input input {padding-left: 42px;}
.mm-field-ico {position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--mut); pointer-events: none; font-style: normal; display: grid; place-items: center;}
.mm-field-ico svg {width: 18px; height: 18px; fill: currentColor;}
.mm-field--icon:focus-within .mm-field-ico {color: var(--blue);}
.mm-seg {display: inline-flex; background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px;}
.mm-seg-btn {background: none; border: 0; color: var(--mut); font: inherit; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 999px; cursor: pointer;}
.mm-seg-btn:hover {color: var(--fg);}
.mm-seg-btn.on {background: var(--fg); color: var(--bg);}
.mm-slot-head .mm-muted {font-size: 13px;}
.mm-qs-foot .mm-btn {width: 100%; justify-content: center;}
.mm-swatch--sm .mm-dots {height: 14px;}
.mm-seg label {display: inline-flex; align-items: center; gap: 6px; color: var(--mut); font-size: 13px; font-weight: 600; padding: 7px 16px; border-radius: 999px; cursor: pointer;}
.mm-seg label:has(input:checked) {background: var(--accent, #3bb8e8); color: #06101c;}
.mm-seg label input, .mm-wrap .mm-field .mm-seg label input {position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; min-height: 0; padding: 0; margin: 0;}
.mm-note .mm-btn {margin-top: 10px;}
.mm-row-inline .mm-input {flex: 1;}
.mm-dcard-top .mm-dots--sm {width: 64px; margin-top: 0; flex: none;}
.mm-dots--auto i:nth-child(1) {background: #EF4444;}
.mm-dots--auto i:nth-child(2) {background: #F59E0B;}
.mm-dots--auto i:nth-child(3) {background: #22C55E;}
.mm-dots--auto i:nth-child(4) {background: #38BDF8;}
.mm-dots--auto i:nth-child(5) {background: #A78BFA;}
.mm-dcards--shots .mm-dcard-btns .mm-btn, .mm-dcards--shots .mm-dcard-btns .mm-link {white-space: nowrap;}
.mm-dcards--shots .mm-dcard-btns .mm-btn {padding-left: 12px; padding-right: 12px;}
.mm-todo-add .mm-input {flex: 1;}
.mm-lm-overlay {position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(4,8,16,.72); backdrop-filter: blur(4px);}
.mm-lm {display: flex; flex-direction: column; width: min(1080px, 100%); max-height: calc(100vh - 48px); background: var(--panel); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 40px 120px rgba(0,0,0,.5); overflow: hidden;}
.mm-lm-head {display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px 12px;}
.mm-lm-head h2 {margin: 0 0 4px; color: var(--fg); font-size: 20px;}
.mm-lm-head p {margin: 0; color: var(--mut); font-size: 13.5px;}
.mm-lm-x {flex: none; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: var(--panel2); color: var(--fg); font-size: 20px; line-height: 1; cursor: pointer;}
.mm-lm-x:hover {border-color: #33415C;}
.mm-lm-controls {display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; padding: 8px 24px 16px; border-bottom: 1px solid var(--line);}
.mm-lm-controls .mm-field {margin: 0;}
.mm-lm-controls .mm-field > span {display: block; margin-bottom: 6px;}
.mm-lm-name {flex: 1 1 220px; min-width: 200px;}
.mm-lm-grid {flex: 1; min-height: 160px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; padding: 18px 24px;}
.mm-lm-grid--icon {grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));}
.mm-lm-grid--stacked {grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));}
.mm-lm-grid--text {grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));}
.mm-lm-card {display: flex; align-items: center; justify-content: center; height: 104px; padding: 18px 16px; border: 2px solid transparent; border-radius: 14px; background: #fff; cursor: pointer; transition: transform .12s, box-shadow .12s;}
.mm-lm-grid--stacked .mm-lm-card, .mm-lm-grid--icon .mm-lm-card {height: 150px; padding: 22px;}
.mm-lm-on-dark .mm-lm-card, .mm-lm-chosen.mm-lm-on-dark {background: var(--lm-dark, #0F172A);}
.mm-lm-card svg, .mm-lm-chosen svg {display: block; max-width: 100%; max-height: 100%; width: auto; height: 100%; overflow: visible;}
.mm-lm-card:hover {transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.35);}
.mm-lm-card.on {border-color: var(--blue); box-shadow: 0 0 0 4px rgba(56,189,248,.28);}
.mm-lm-card:focus-visible {outline: 2px solid var(--blue); outline-offset: 2px;}
.mm-lm-foot {display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 24px; border-top: 1px solid var(--line); background: var(--panel2);}
.mm-lm-chosen {display: flex; align-items: center; height: 56px; max-width: 300px; padding: 10px 16px; border-radius: 12px; background: #fff; margin-right: auto;}
.mm-lm-foot .mm-check {margin: 0;}
@media (max-width: 700px) {
.mm-lm-overlay {padding: 8px;}
.mm-lm {max-height: calc(100vh - 16px);}
.mm-lm-chosen {display: none;}
}
.mm-lm-filter {display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 24px 0;}
.mm-lm-search {flex: 0 1 260px; min-width: 200px;}
.mm-lm-search input, .mm-lm-controls .mm-input input {width: 100%; min-height: 38px; padding: 8px 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; color: var(--fg); font: inherit; font-size: 14px; box-shadow: none;}
.mm-lm-search input:focus, .mm-lm-controls .mm-input input:focus {border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(56,189,248,.18);}
.mm-lm-cats, .mm-lm-fonts {display: flex; flex-wrap: wrap; gap: 6px; flex: 1;}
.mm-lm-cat, .mm-lm-font {padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel2); color: var(--mut); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;}
.mm-lm-font {color: var(--fg); font-size: 14px;}
.mm-lm-cat:hover, .mm-lm-font:hover {border-color: #33415C; color: var(--fg);}
.mm-lm-cat.on, .mm-lm-font.on {border-color: var(--blue); background: rgba(56,189,248,.14); color: var(--blue);}
.mm-lm-none {grid-column: 1 / -1; margin: 30px 0; text-align: center; color: var(--mut);}
.mm-lm-controls--more {border-bottom: 1px solid var(--line); padding-top: 14px;}
.mm-lm-wide {flex: 1 1 100%;}
.mm-lm-pal {flex: none; width: 74px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); cursor: pointer; text-align: left;}
.mm-lm-pal .mm-dots {height: 14px;}
.mm-lm-pal small {display: block; margin-top: 4px; color: var(--mut); font-size: 10.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.mm-lm-pal:hover {border-color: #33415C;}
.mm-lm-pal.on {border-color: var(--blue); box-shadow: 0 0 0 3px rgba(56,189,248,.18);}
.mm-lm-pal.on small {color: var(--blue);}
.mm-lm-page {max-width: 1240px; margin: 0 auto; padding: 8px 24px 40px;}
.mm-lm--page {width: 100%; max-height: none; overflow: visible; box-shadow: none;}
.mm-lm--page .mm-lm-head .mm-h1 {margin: 0 0 4px;}
.mm-lm--page .mm-lm-grid {overflow: visible; min-height: 240px;}
.mm-lm--page .mm-lm-foot {position: sticky; bottom: 0; z-index: 5; border-radius: 0 0 20px 20px;}
.mm-lm-foot #mm-lm-msg a {color: var(--blue);}
.mm-lm-foot .mm-btn:disabled {opacity: .5; cursor: not-allowed;}
.mm-lm--page .mm-lm-chosen {max-width: 220px;}
.mm-lm-pals {display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; overflow: visible; padding: 2px 0;}
.mm-lm-pal {width: auto; min-width: 0;}
.mm-inbox-tools .mm-input input {width: 100%; min-height: 38px; padding: 8px 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; color: var(--fg); font: inherit; font-size: 14px; box-shadow: none;}
.mm-inbox-tools .mm-input input:focus {border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(56,189,248,.18);}
.mm-lead-chips .mm-lm-cat small {opacity: .7; margin-left: 2px;}
.mm-link--danger {color: var(--err) !important;}
.mm-kit-overlay {z-index: 100001;}
.mm-kit-grid {flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; padding: 18px 24px;}
.mm-kit-card {margin: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--panel2); overflow: hidden; display: flex; flex-direction: column;}
.mm-kit-img {display: flex; align-items: center; justify-content: center; height: 150px; padding: 12px; background: conic-gradient(#e8ebf1 25%, #fff 0 50%, #e8ebf1 0 75%, #fff 0) 0 0 / 16px 16px;}
.mm-kit-img img {max-width: 100%; max-height: 100%; object-fit: contain;}
.mm-kit-card figcaption {display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 14px;}
.mm-kit-card figcaption b {color: var(--fg); font-size: 14px;}
.mm-kit-card figcaption small {color: var(--mut); font-size: 12px; line-height: 1.4;}
.mm-kit-card .mm-link {align-self: flex-start; margin-top: 4px; font-size: 12.5px;}
.mm-kit-grid {grid-auto-rows: max-content; align-content: start;}
.mm-kit-img.is-dark {background: #1B2333;}
.mm-ff-opts-row .mm-check {margin: 0;}
#mm-hub .mm-input input[type=text], #mm-hub .mm-input input[type=email], #mm-hub .mm-input input[type=tel], #mm-hub .mm-input input[type=date], #mm-hub .mm-input input[type=time], #mm-hub .mm-input input[type=url], #mm-hub .mm-input input[type=number], #mm-hub .mm-input input[type=search], #mm-hub .mm-input select, #mm-hub .mm-input textarea, .mm-modal .mm-input input, .mm-modal .mm-input select, .mm-modal .mm-input textarea {width: 100%; box-sizing: border-box; min-height: 38px; padding: 8px 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; color: var(--fg); font: inherit; font-size: 14px; box-shadow: none;}
#mm-hub .mm-input input:focus, #mm-hub .mm-input select:focus, #mm-hub .mm-input textarea:focus, .mm-modal .mm-input input:focus, .mm-modal .mm-input select:focus, .mm-modal .mm-input textarea:focus {border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(56,189,248,.18);}
.mm-modal .mm-lm-foot {justify-content: flex-end;}
.mm-modal .mm-lm-foot .mm-small {margin-right: auto;}
.mm-field--wide {display: block;}
.mm-lm-controls--extra {margin-top: 12px;}
.mm-lm-sliders {min-width: 200px;}
.mm-lm-sliders > span b {color: var(--blue); font-weight: 700; margin-left: 6px;}
.mm-lm-sliders input[type=range] {width: 100%; accent-color: var(--blue);}
.mm-lm-sliders .mm-check {margin-top: 6px;}
.mm-lm-versions {margin: 14px 0 6px;}
.mm-lm-vhead {display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;}
.mm-lm-vhead small {flex: 1 1 200px;}
.mm-lm-vlist {display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px;}
.mm-lm-v {position: relative; width: 150px; height: 74px; border: 1px solid var(--line); border-radius: 12px; background: #fff;}
.mm-lm-v.mm-lm-on-dark {background: var(--lm-dark, #0F172A);}
.mm-lm-v > button:first-child {display: grid; place-items: center; width: 100%; height: 100%; padding: 10px 12px; border: 0; background: transparent; cursor: pointer; border-radius: 12px;}
.mm-lm-v svg {max-width: 100%; max-height: 100%; width: auto; height: 100%; overflow: visible;}
.mm-lm-vdel {position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--fg); cursor: pointer; line-height: 1;}
.mm-lm-vdel:hover {background: var(--err); color: #fff;}
.mm-lm-card {position: relative;}
.mm-lm-sug {position: absolute; top: 6px; right: 8px; color: #E8A400; font-style: normal; font-size: 14px;}
.mm-lm-contrast {flex: 1 0 100%; margin: 0; padding: 8px 12px; border-radius: 10px; background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.35); color: var(--warn);}
.mm-lm-contrast[hidden] {display: none;}
.mm-wrap .mm-lm-sliders .mm-check input[type=checkbox] {width: 18px; height: 18px; min-height: 0; padding: 0; flex: none;}
.mm-lm-controls--extra {align-items: flex-start;}
.mm-lm-sliders {flex: 1 1 220px;}
.mm-lm-split {display: grid; grid-template-columns: 330px minmax(0, 1fr); flex: 1; min-height: 0; border-top: 1px solid var(--line);}
.mm-lm-side {overflow-y: auto; padding: 8px 0 16px; border-right: 1px solid var(--line); background: var(--panel);}
.mm-lm-sec {border-bottom: 1px solid var(--line);}
.mm-lm-sec > summary {cursor: pointer; padding: 13px 20px; font-weight: 700; font-size: 13.5px; letter-spacing: .02em; color: var(--fg); list-style: none; display: flex; justify-content: space-between; align-items: center;}
.mm-lm-sec > summary::-webkit-details-marker {display: none;}
.mm-lm-sec > summary::after {content: '＋'; color: var(--blue); font-weight: 700;}
.mm-lm-sec[open] > summary::after {content: '−';}
.mm-lm-secbody {padding: 0 20px 16px; display: flex; flex-direction: column; gap: 14px;}
.mm-lm-secbody .mm-field {margin: 0;}
.mm-lm-secbody .mm-field > span {display: block; margin-bottom: 6px; font-size: 12.5px;}
.mm-lm-secbody .mm-seg {display: flex; flex-wrap: wrap; border-radius: 14px;}
.mm-lm-secbody .mm-seg-btn {flex: 1 1 auto; padding: 7px 10px; font-size: 12.5px;}
.mm-lm-secbody .mm-input input {width: 100%; min-height: 38px; padding: 8px 12px; background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; color: var(--fg); font: inherit; font-size: 14px; box-shadow: none;}
.mm-lm-secbody .mm-input input:focus {border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(56,189,248,.18);}
.mm-lm-secbody .mm-lm-pals {grid-template-columns: repeat(3, 1fr);}
.mm-lm-secbody .mm-lm-fonts {max-height: none; overflow: visible;}
.mm-lm-main {display: flex; flex-direction: column; min-width: 0; min-height: 0;}
.mm-lm-stage {padding: 16px 24px 14px; border-bottom: 1px solid var(--line); background: var(--panel2); display: flex; flex-direction: column; gap: 10px;}
.mm-lm-stagehead {display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;}
.mm-lm-stagehead b {font-size: 15px; color: var(--fg);}
.mm-lm-stagehead em {font-style: normal; font-weight: 700; color: var(--fg);}
.mm-lm-stage .mm-lm-chosen {height: 150px; max-width: none; width: 100%; margin: 0; padding: 20px 28px; justify-content: center; border: 1px solid var(--line); border-radius: 14px;}
.mm-lm-actions {display: flex; flex-wrap: wrap; align-items: center; gap: 10px;}
.mm-lm-actions .mm-btn:disabled {opacity: .5; cursor: not-allowed;}
.mm-lm-main .mm-lm-filter {padding: 14px 24px 0;}
.mm-lm-main .mm-lm-grid {padding: 14px 24px 22px;}
.mm-lm-card.on {border-color: var(--blue); box-shadow: 0 0 0 4px rgba(56,189,248,.28);}
.mm-lm-card.on::after {content: '✓ Selected'; position: absolute; left: 8px; bottom: 6px; padding: 2px 8px; border-radius: 99px; background: var(--blue); color: #04121C; font-size: 11px; font-weight: 700;}
.mm-lm .mm-lm-versions {margin: 0;}
.mm-lm-secbody .mm-lm-v {width: 100%;}
.mm-lm-secbody .mm-lm-vlist {display: grid; grid-template-columns: 1fr 1fr;}
.mm-lm--page .mm-lm-split {overflow: visible;}
.mm-lm--page .mm-lm-side {position: static; max-height: none; overflow: visible;}
.mm-lm--page .mm-lm-stage {position: sticky; top: 32px; z-index: 6;}
.mm-lm--page .mm-lm-main .mm-lm-grid {overflow: visible;}
.mm-lm-overlay .mm-lm-main .mm-lm-grid {overflow-y: auto; min-height: 0; flex: 1;}
.mm-lm-overlay .mm-lm {height: min(860px, calc(100vh - 48px));}
@media (max-width: 860px) {
.mm-lm-split {grid-template-columns: 1fr; overflow-y: auto;}
.mm-lm-side {border-right: 0; border-bottom: 1px solid var(--line); max-height: none; overflow: visible;}
.mm-lm-overlay .mm-lm-main .mm-lm-grid {overflow: visible;}
.mm-lm--page .mm-lm-side, .mm-lm--page .mm-lm-stage {position: static; max-height: none;}
}
.mm-dcard-btns .mm-btn {flex: 0 0 auto; margin-left: auto;}
.mm-dcard-btns .mm-link {min-width: 0;}
.mm-em-steph .mm-link {margin-left: auto;}
.mm-sched-svc .mm-field {margin: 0;}
.mm-sched-svc > .mm-link {justify-self: end; padding-bottom: 12px;}
.tk-side-h .mm-link {text-transform: none; letter-spacing: 0; font-size: 12.5px;}
.tk-field-check .mm-input {min-height: 40px; display: flex; align-items: center; padding-left: 6px;}
.tk-field-check .mm-input input {width: 18px; height: 18px;}
.tk-dash-card h3 .mm-link {text-transform: none; letter-spacing: 0; font-size: 12.5px;}
@media (max-width: 760px) {
.tk-tools .mm-seg {max-width: 100%; overflow-x: auto;}
}
.tk-dh .mm-small:first-child {flex: 1;}
.tk-grid .mm-field {margin: 0;}
.tk-inline .mm-input {flex: 1;}
.tk-colsed .mm-input {flex: 1;}
.tk-colsed .mm-check {margin: 0; white-space: nowrap;}
.mm-import-map .mm-field {margin: 0 0 8px;}
.mm-seg--sm .mm-seg-btn {padding: 4px 12px; font-size: 12.5px;}
.tk-keys-hint .mm-link {font-size: 12px;}
.mm-lm-own {display: flex; align-items: center; gap: 10px; flex-wrap: wrap;}
.mm-lm-own img {width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: repeating-conic-gradient(#e5e9f0 0 25%, #f8fafc 0 50%) 0 0 / 12px 12px; border: 1px solid var(--line, #d6deeb); padding: 3px;}
.mm-lm-two {display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line, #d6deeb); border-radius: 12px;}
.mm-lm-two .mm-field {margin: 0;}
.mm-lm-two-btns {display: flex; gap: 8px; flex-wrap: wrap;}
.mm-sample .mm-btn {flex: none;}
.mm-stage-row .mm-link--danger {margin-top: 8px;}
.mm-dcust-row .mm-check {margin: 0;}
.mm-cfx .mm-input {flex: 1 1 120px; min-width: 0;}
.mm-bulk .mm-input {min-width: 140px;}
.mm-copyrow .mm-input {flex: 1; min-width: 0;}
@media print {
.mm-link {color: #111 !important; text-decoration: none;}
}
.mm-field > span {display: flex; align-items: center; gap: 10px;}
.mm-pv-toolbar > .mm-seg:first-child .mm-seg-btn {font-weight: 700;}
.mm-dots--sm {height: 8px; width: 90px; border-radius: 99px; margin-top: 4px;}
.mm-pv-group .mm-seg {flex-wrap: wrap;}
.mm-wrap .mm-link--danger {color: var(--err);}
.mm-mode-seg .mm-seg-btn {padding: 7px 14px;}
.mm-lm-secbody .mm-lm-sliders {flex: none; min-width: 0;}
.mm-lm-overlay .mm-lm-side, .mm-lm-overlay .mm-lm-main .mm-lm-grid {overscroll-behavior: contain;}
.mm-lm-secbody .mm-field {flex: none;}
.mm-lm-overlay {overscroll-behavior: contain;}
.mm-lm-overlay .mm-lm-split {overflow: hidden; grid-template-rows: minmax(0, 1fr);}
.mm-lm-overlay .mm-lm-side, .mm-lm-overlay .mm-lm-main {min-height: 0; overflow-y: auto; overscroll-behavior: contain;}
.mm-lm-overlay .mm-lm-main {display: block;}
.mm-lm-overlay .mm-lm-main .mm-lm-grid {overflow: visible; flex: none; min-height: 0;}
.mm-lm-overlay .mm-lm-stage {position: sticky; top: 0; z-index: 6;}
.mm-lm-stage .mm-lm-chosen {height: 120px;}
@media (max-height: 820px) {
.mm-lm-stage .mm-lm-chosen {height: 84px; padding: 12px 20px;}
.mm-lm-stagehead small {display: none;}
.mm-lm-stage {padding: 12px 24px 10px; gap: 8px;}
}
@media (max-width: 860px) {
.mm-lm-overlay .mm-lm-split {overflow-y: auto;}
.mm-lm-overlay .mm-lm-side, .mm-lm-overlay .mm-lm-main {overflow: visible;}
.mm-lm-overlay .mm-lm-stage {position: static;}
}
.mm-lm-main .mm-lm-filter {flex-wrap: nowrap; align-items: center; gap: 10px 12px; padding: 12px 24px 0;}
.mm-lm-main .mm-lm-search {flex: 1 1 220px; min-width: 0;}
.mm-lm-catsel {flex: 0 0 auto;}
.mm-lm-catsel select {min-height: 38px; padding: 6px 34px 6px 12px; background-color: var(--panel2); border: 1px solid var(--line); border-radius: 10px; color: var(--fg); font: inherit; font-size: 14px; max-width: 220px;}
.mm-lm-catsel select:focus {border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(56,189,248,.18);}
.mm-lm-count {flex: none; white-space: nowrap;}
@media (max-width: 560px) {
.mm-lm-main .mm-lm-filter {flex-wrap: wrap;}
.mm-lm-catsel select {max-width: none;}
}
.mm-lm-grid {align-content: start; grid-auto-rows: max-content;}
.mm-lm--page .mm-lm-grid {min-height: 0; flex: none;}
.mm-lm-head {padding: 10px 20px; align-items: center;}
.mm-lm-title {display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; min-width: 0;}
.mm-lm-title h2, .mm-lm-title .mm-h1 {margin: 0 !important; font-size: 18px !important; line-height: 1.2;}
.mm-lm-title em {font-style: normal; font-weight: 700; color: var(--fg);}
.mm-lm-page {padding: 0 24px 20px;}
.mm-lm--page .mm-lm-head {padding: 4px 4px 12px;}
.mm-lm-stage {padding: 10px 20px 12px; gap: 8px;}
.mm-lm-stage .mm-lm-chosen {height: 88px; padding: 10px 20px;}
.mm-lm-stage .mm-check {margin: 0;}
@media (max-height: 820px) {
.mm-lm-stage .mm-lm-chosen {height: 68px; padding: 8px 16px;}
}
.mm-lm-main .mm-lm-filter {padding: 10px 20px 0;}
.mm-lm-main .mm-lm-grid {padding: 12px 20px 20px;}
@media (min-width: 861px) {
.mm-lm--page .mm-lm-side {position: sticky; top: 40px; align-self: start; max-height: calc(100vh - 56px); overflow-y: auto; overscroll-behavior: contain;}
.mm-lm--page .mm-lm-stage {top: 32px;}
}
.mm-lm-actions {gap: 8px 10px;}
.mm-lm-actions .mm-check {margin: 0 0 0 auto; font-size: 13px;}
.mm-lm-actions #mm-lm-msg {flex: 1 0 100%;}
.mm-lm-actions #mm-lm-msg:empty {display: none;}
@media (min-width: 861px) {
html.mm-lm-fit, html.mm-lm-fit body {overflow: hidden;}
.mm-lm-page {padding-bottom: 0;}
.mm-lm--page {height: var(--lm-h, auto); display: flex; flex-direction: column; overflow: hidden; max-height: none;}
.mm-lm--page .mm-lm-split {flex: 1; min-height: 0; overflow: hidden; grid-template-rows: minmax(0, 1fr);}
.mm-lm--page .mm-lm-side, .mm-lm--page .mm-lm-main {position: static; max-height: none; min-height: 0; overflow-y: auto; overscroll-behavior: contain;}
.mm-lm--page .mm-lm-main {display: block;}
.mm-lm--page .mm-lm-stage {position: sticky; top: 0; z-index: 6;}
.mm-lm--page .mm-lm-main .mm-lm-grid {overflow: visible; flex: none; min-height: 0;}
}
@media (min-width: 861px) {
.mm-lm--page .mm-lm-side {align-self: stretch;}
}
.mm-lm-title {align-items: center;}
.mm-lm-title h1, .mm-lm-title h2, .mm-lm-title .mm-h1 {padding: 0 !important; margin: 0 !important; line-height: 1.2 !important;}
.mm-lm-title .mm-small {line-height: 1.2;}
.mm-lm--page .mm-lm-head {padding: 2px 0 10px;}
.mm-lm--page .mm-lm-head {padding: 12px 20px 10px;}
.mm-kit-h {grid-column: 1 / -1; margin: 18px 0 2px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--mut);}
.mm-kit-h:first-child {margin-top: 0;}
.mm-sp-search .mm-input {flex: 1;}
@media (min-width: 1001px) {
html.mm-lm-fit, html.mm-lm-fit body {overflow: hidden;}
}
.mm-cmenu-i .mm-dots i {width: 9px; height: 9px;}
.mm-cmenu-i .mm-dots {flex: none;}
/* ---- Page layout (the tool sits inside the site page, not a full-screen admin screen) ---- */
.mm-wrap .mm-lm-page { padding: 0; }
.mm-wrap .mm-lm--page { display: flex; flex-direction: column; width: 100%; max-width: none; max-height: none; height: min(88vh, 860px); min-height: 620px; border: 0; border-radius: 0; box-shadow: none; background: transparent; overflow: hidden; }
.mm-wrap .mm-lm--page .mm-lm-head { padding: 14px 22px; border-bottom: 1px solid var(--line); }
.mm-wrap .mm-lm--page .mm-lm-split { flex: 1; min-height: 0; overflow: hidden; display: grid; grid-template-columns: 320px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.mm-wrap .mm-lm--page .mm-lm-side, .mm-wrap .mm-lm--page .mm-lm-main { position: static; max-height: none; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.mm-wrap .mm-lm--page .mm-lm-side { align-self: stretch; }
.mm-wrap .mm-lm--page .mm-lm-main { display: block; }
.mm-wrap .mm-lm--page .mm-lm-stage { position: sticky; top: 0; z-index: 6; }
.mm-wrap .mm-lm--page .mm-lm-main .mm-lm-grid { overflow: visible; flex: none; min-height: 0; }
.mm-wrap .mm-lm-title .mm-h1 { margin: 0 !important; padding: 0 !important; font-size: 18px !important; line-height: 1.2; color: var(--fg); font-family: inherit; }
@media (max-width: 860px) {
	.mm-wrap .mm-lm--page { height: auto; min-height: 0; overflow: visible; }
	.mm-wrap .mm-lm--page .mm-lm-split { display: block; overflow: visible; }
	.mm-wrap .mm-lm--page .mm-lm-side, .mm-wrap .mm-lm--page .mm-lm-main { overflow: visible; }
	.mm-wrap .mm-lm--page .mm-lm-main .mm-lm-grid { max-height: 60vh; overflow-y: auto; }
	.mm-wrap .mm-lm--page .mm-lm-stage { position: sticky; top: 0; }
}
/* Dialogs (brand kit and the email step) cover the tool, not the whole window. */
.mm-wrap .mm-lm-overlay { position: fixed; z-index: 2147483000; }
.mm-gate { max-width: 460px; width: min(460px, 100%); }
.mm-gate-form { padding: 6px 24px 22px; }
.mm-gate-actions { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.mm-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.mm-wrap .mm-lm-overlay .mm-gate.mm-lm { height: auto; max-height: calc(100vh - 32px); overflow-y: auto; }
/* Phones: the preview and the designs come first, the options follow underneath. */
@media (max-width: 860px) {
	.mm-wrap .mm-lm--page .mm-lm-split { display: flex; flex-direction: column; }
	.mm-wrap .mm-lm--page .mm-lm-main { order: 1; }
	.mm-wrap .mm-lm--page .mm-lm-side { order: 2; border-top: 1px solid var(--line); }
	.mm-wrap .mm-lm--page .mm-lm-stage { top: 64px; }
}

/* ---- Follows the site's light / dark toggle (html[data-theme]) ---- */
:root[data-theme="light"] .mm-wrap { --bg: #F7F9FC; --panel: #FFFFFF; --panel2: #EEF2F8; --line: #D5DDEA; --fg: #0F172A; --mut: #56657F; --blue: #0284C7; --blue2: #0369A1; --ok: #059669; --err: #DC2626; }
:root[data-theme="light"] .mm-wrap .mm-field > span { color: var(--fg); }
:root[data-theme="light"] .mm-wrap .mm-field input::placeholder { color: #8A97B2; }
:root[data-theme="light"] .mm-wrap .mm-btn { color: #fff !important; }
:root[data-theme="light"] .mm-wrap .mm-btn:hover { background: #0369A1; }
:root[data-theme="light"] .mm-wrap .mm-btn--ghost { background: transparent; color: var(--fg) !important; }
:root[data-theme="light"] .mm-wrap .mm-btn--ghost:hover { background: var(--panel2); border-color: #9AA8C0; }
:root[data-theme="light"] .mm-wrap .mm-lm-card:hover { box-shadow: 0 10px 26px rgba(15,23,42,.16); }
:root[data-theme="light"] .mm-wrap .mm-lm-card:not(.on) { border-color: var(--line); }
:root[data-theme="light"] .mm-wrap .mm-lm-chosen:not(.mm-lm-on-dark) { border: 1px solid var(--line); }
:root[data-theme="light"] .mm-wrap .mm-lm-cat:hover, :root[data-theme="light"] .mm-wrap .mm-lm-font:hover, :root[data-theme="light"] .mm-wrap .mm-lm-pal:hover, :root[data-theme="light"] .mm-wrap .mm-lm-x:hover { border-color: #9AA8C0; }
:root[data-theme="light"] .mm-wrap .mm-lm-cat.on, :root[data-theme="light"] .mm-wrap .mm-lm-font.on { background: rgba(2,132,199,.1); }
:root[data-theme="light"] .mm-wrap .mm-lm-overlay { background: rgba(15,23,42,.45); }
:root[data-theme="light"] .mm-wrap .mm-kit-img.is-dark { background: #1B2333; }

/* ---- Phones: one natural page scroll, with the chosen logo pinned under the site header ---- */
@media (max-width: 860px) {
	.mm-wrap .mm-lm--page .mm-lm-main .mm-lm-grid { max-height: none; overflow: visible; }
	.mm-wrap .mm-lm--page .mm-lm-stage { top: var(--nav-h, 64px); padding: 8px 14px 10px; gap: 6px; box-shadow: 0 8px 18px -10px rgba(0,0,0,.45); background: var(--panel); border-bottom: 1px solid var(--line); }
	.mm-wrap .mm-lm--page .mm-lm-stage .mm-lm-chosen { height: 64px; padding: 8px 14px; max-width: none; margin-right: 0; }
	.mm-wrap .mm-lm--page .mm-lm-actions .mm-check { margin-left: 0; }
	.mm-wrap .mm-lm--page .mm-lm-actions .mm-btn { flex: 1 1 auto; justify-content: center; }
	.mm-wrap .mm-lm--page .mm-lm-main .mm-lm-filter { padding: 10px 14px 0; }
	.mm-wrap .mm-lm--page .mm-lm-main .mm-lm-grid { padding: 12px 14px 20px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
	.mm-wrap .mm-lm--page .mm-lm-grid--text { grid-template-columns: 1fr; }
	.mm-wrap { overflow: clip; }
	.mm-wrap .mm-lm--page .mm-lm-stage .mm-lm-chosen { display: flex; }
}

/* ---- Full screen (the site header stays) ---- */
.mm-lm-fs { margin-left: auto; flex: none; }
html.mm-fs-lock, html.mm-fs-lock body { overflow: hidden; }
.mm-wrap.mm-fs { position: fixed; top: var(--nav-h, 76px); left: 0; right: 0; bottom: 0; z-index: 90; border-radius: 0; border-width: 1px 0 0; overflow: hidden; }
.mm-wrap.mm-fs .mm-lm--page { height: 100%; min-height: 0; }

/* ---- Phones: the logo preview stays pinned while you change options too ---- */
@media (max-width: 860px) {
	.mm-wrap .mm-lm--page .mm-lm-main { display: contents; }
	.mm-wrap .mm-lm--page .mm-lm-stage { z-index: 20; }
	.mm-wrap.mm-fs { overflow-y: auto; overscroll-behavior: contain; }
	.mm-wrap.mm-fs .mm-lm--page { height: auto; overflow: visible; }
	.mm-wrap.mm-fs .mm-lm--page .mm-lm-stage { top: 0; }
	.mm-wrap.mm-fs .mm-lm--page .mm-lm-head { position: static; }
	.mm-lm-fs { padding: 6px 10px; }
}
.mm-wrap.mm-fs .mm-lm-page { height: 100%; }
@media (max-width: 860px) { .mm-wrap.mm-fs .mm-lm-page { height: auto; } }
html.mm-fs-lock section:has(.mm-wrap.mm-fs) { z-index: 95 !important; }

/* ---- Guided steps: floating Back / Next at the bottom right ---- */
.mm-lm-nextbar { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: none; align-items: center; gap: 8px; }
.mm-lm-nextbar[hidden] { display: none !important; }
.mm-wrap.mm-inview .mm-lm-nextbar, .mm-wrap.mm-fs .mm-lm-nextbar { display: flex; }
.mm-wrap.mm-fs .mm-lm-nextbar { z-index: 96; }
.mm-lm-nextbar .mm-btn { box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.mm-lm-nextbar .mm-btn--ghost { background: var(--panel); }
.mm-lm-next { padding: 11px 18px; }
.mm-lm-flash { animation: mm-lm-flash 1.8s ease-out; border-radius: 12px; }
@keyframes mm-lm-flash { 0%, 60% { box-shadow: 0 0 0 3px var(--blue); } 100% { box-shadow: 0 0 0 3px transparent; } }

/* ---- Random and custom colors ---- */
.mm-lm-pal .mm-dots--rand, .mm-lm-pal .mm-dots--custom { align-items: center; justify-content: center; font-size: 12px; line-height: 14px; background: var(--panel); border: 1px solid var(--line); }
.mm-lm-pal .mm-dots--custom { background: conic-gradient(#ef4444, #f59e0b, #22c55e, #06b6d4, #6366f1, #d946ef, #ef4444); border: 0; }
.mm-lm-custom { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.mm-lm-custom label { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--mut); cursor: pointer; }
.mm-lm-custom input[type=color] { width: 100%; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; }
.mm-wrap .mm-field .mm-lm-custom input[type=color] { min-height: 34px; height: 34px; padding: 2px; border-radius: 8px; }