.msp-app {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	border: 1px solid #e2e2e2;
	background: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #222;
	
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	position: relative;
	box-sizing: border-box;
}

.msp-map-credit {
	font-size: 11px;
	color: #999;
	max-width: 460px;
	text-align: center;
	margin: 14px 0 0;
}
.msp-map-credit a { color: #999; }

/* ---------- Sidebar ---------- */
.msp-sidebar {
	flex: 0 0 360px;
	max-width: 100%;
	border-right: 1px solid #e2e2e2;
	display: flex;
	flex-direction: column;
}

.msp-tabs {
	display: flex;
	flex-wrap: wrap;
	background: #1a1a1a;
}

.msp-tab {
	flex: 1 1 auto;
	background: transparent;
	border: none;
	color: #b7b7b7;
	padding: 14px 6px;
	font-size: 11px;
	letter-spacing: .03em;
	text-transform: uppercase;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	transition: color .15s ease, background .15s ease;
}
.msp-tab svg { width: 19px; height: 19px; }
.msp-tab:hover { color: #fff; }
.msp-tab.active { color: #fff; background: #2b2b2b; box-shadow: inset 0 -2px 0 #fff; }

.msp-panels {
	padding: 24px;
	flex: 1;
	overflow-y: auto;
	max-height: 640px;
}

.msp-panel { display: none; }
.msp-panel.active { display: block; }

.msp-help {
	color: #666;
	font-size: 13px;
	line-height: 1.5;
	margin: 0 0 18px;
}
.msp-help-small { font-size: 12px; margin: -4px 0 12px; }

.msp-advanced-title { font-size: 26px; font-weight: 800; margin: 0 0 10px; }

.msp-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #444;
	margin: 18px 0 8px;
}
.msp-label:first-child { margin-top: 0; }

.msp-input {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	border: 1px solid #d5d5d5;
	border-radius: 4px;
	font-size: 14px;
}

.msp-checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: #444;
	margin-top: 14px;
}

.msp-search-wrap { position: relative; }
.msp-search-results {
	position: absolute;
	top: 100%; left: 0; right: 0;
	background: #fff;
	border: 1px solid #d5d5d5;
	border-top: none;
	max-height: 220px;
	overflow-y: auto;
	z-index: 20;
	display: none;
}
.msp-search-results.show { display: block; }
.msp-search-results div {
	padding: 10px 12px;
	font-size: 13px;
	cursor: pointer;
	border-bottom: 1px solid #f0f0f0;
}
.msp-search-results div:hover { background: #f6f6f6; }

.msp-link-btn {
	background: none;
	border: none;
	color: #6b6b6b;
	text-decoration: underline;
	font-size: 13px;
	cursor: pointer;
	padding: 0;
	margin-top: 10px;
}

.msp-popular-places { list-style: none; margin: 8px 0 0; padding: 0; }
.msp-popular-places li {
	padding: 8px 0;
	font-size: 14px;
	border-bottom: 1px solid #f0f0f0;
	cursor: pointer;
	color: #333;
}
.msp-popular-places li:hover { color: #000; text-decoration: underline; }

.msp-swatch-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}
.msp-swatch {
	border: 1px solid #d5d5d5;
	background: #fafafa;
	border-radius: 4px;
	padding: 0 0 8px;
	font-size: 12px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: #444;
	overflow: hidden;
}
.msp-swatch.active { border-color: #222; box-shadow: 0 0 0 1px #222; }
.msp-swatch-preview {
	width: 100%;
	height: 40px;
	border-radius: 3px;
	display: block;
}


.msp-frame-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.msp-frame-swatch {
	border: 1px solid #d5d5d5;
	background: #fafafa;
	border-radius: 4px;
	padding: 8px 6px 10px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	color: #444;
	font-size: 11px;
}
.msp-frame-swatch.active { border-color: #222; box-shadow: 0 0 0 1px #222; }
.msp-frame-corner {
	position: relative;
	width: 100%;
	height: 46px;
	border-radius: 3px;
	overflow: hidden;
	background: #f0f0f0;
}
.msp-frame-corner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: inherit;
	clip-path: polygon(0 0, 100% 0, 100% 35%, 35% 100%, 0 100%);
	filter: brightness(1.15);
}
.msp-frame-corner::after {
	content: '';
	position: absolute;
	inset: 0;
	clip-path: polygon(100% 35%, 100% 100%, 35% 100%);
	filter: brightness(.75);
}
.msp-frame-badge {
	position: absolute;
	top: 3px; left: 3px;
	background: #4a3324;
	color: #fff;
	font-size: 8px;
	font-weight: 700;
	padding: 1px 5px;
	border-radius: 2px;
	text-transform: uppercase;
	z-index: 2;
}
.msp-frame-label { font-weight: 600; color: #222; }
.msp-frame-price { display: flex; gap: 6px; align-items: baseline; }
.msp-frame-price .msp-compare { text-decoration: line-through; color: #999; }
.msp-frame-price .msp-current { color: #99413a; font-weight: 700; }

/* Icon buttons: monochrome black SVGs */
.msp-icon-grid .msp-icon-btn {
	border: 1px solid #d5d5d5;
	background: #fafafa;
	border-radius: 4px;
	padding: 12px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.msp-icon-btn svg { width: 22px; height: 22px; fill: #000; }
.msp-icon-btn.active { border-color: #222; box-shadow: 0 0 0 1px #222; background: #eee; }

.msp-toggle-group { display: flex; gap: 10px; }
.msp-toggle {
	flex: 1;
	padding: 10px;
	border: 1px solid #d5d5d5;
	background: #fafafa;
	cursor: pointer;
	border-radius: 4px;
	position: relative;
}
.msp-toggle.active { border-color: #222; background: #222; color: #fff; }
.msp-toggle-with-badge { overflow: visible; }
.msp-badge-new-inline {
	position: absolute;
	top: -8px; right: -6px;
	background: #99413a;
	color: #fff;
	font-size: 9px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 10px;
	text-transform: uppercase;
}


.msp-shape-preview {
	width: 100%;
	height: 74px;
	display: block;
	background: #eee;
	background-size: cover;
	background-position: center;
}
.msp-shape-preview-none { border-radius: 3px; }
.msp-shape-preview-circle { clip-path: circle(42% at 50% 50%); }
.msp-shape-preview-heart { clip-path: path('M37,15 C37,26 20,38 20,38 C20,38 3,26 3,15 C3,8 8,3 15,3 C17.5,3 20,4.5 20,8 C20,4.5 22.5,3 25,3 C32,3 37,8 37,15 Z'); }
.msp-shape-preview-star { clip-path: polygon(50% 2%, 61% 35%, 96% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 4% 35%, 39% 35%); }


.msp-offer-badge {
	position: absolute;
	top: -18px;
	right: -18px;
	width: 68px;
	height: 68px;
	border-radius: 50%;
	background: rgba(153,65,58,.85);
	backdrop-filter: blur(1px);
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-weight: 800;
	font-size: 14px;
	line-height: 1.1;
	box-shadow: 0 4px 10px rgba(0,0,0,.2);
	z-index: 30;
	gap: 2px;
}
.msp-offer-badge svg { width: 16px; height: 16px; opacity: .9; }

/* Accordion (Advanced tab) */
.msp-accordion { border-top: 1px solid #eee; padding: 10px 0; }
.msp-accordion-head {
	width: 100%;
	background: none;
	border: none;
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #333;
	padding: 8px 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.msp-chevron { transition: transform .15s ease; display: inline-block; }
.msp-accordion-head.active .msp-chevron { transform: rotate(90deg); }
.msp-accordion-body { padding: 10px 0 4px; }

.msp-theme-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.msp-theme-pill {
	border: 1px solid #d5d5d5;
	background: #fafafa;
	border-radius: 20px;
	padding: 8px 16px;
	font-size: 12px;
	cursor: pointer;
	color: #333;
}
.msp-theme-pill.active { border-color: #222; background: #222; color: #fff; }

.msp-style-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-bottom: 4px;
}
.msp-style-swatch {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 4;
	border-radius: 4px;
	border: 1px solid #d5d5d5;
	cursor: pointer;
	background-size: cover;
	background-position: center;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
	padding: 0;
}
.msp-style-swatch.active { border-color: #222; box-shadow: 0 0 0 1px #222; }
.msp-style-swatch-label {
	background: rgba(255,255,255,.92);
	color: #333;
	font-size: 11px;
	font-weight: 600;
	text-align: center;
	padding: 6px 4px;
	border-top: 1px solid rgba(0,0,0,.06);
}
.msp-style-swatch .msp-badge-new {
	position: absolute;
	top: 4px; left: 4px;
	background: #1a1a1a;
	color: #fff;
	font-size: 8px;
	padding: 2px 5px;
	border-radius: 2px;
	text-transform: uppercase;
	z-index: 2;
}
.msp-style-swatch .msp-ribbon {
	position: absolute;
	top: 4px; left: 4px;
	background: #1a1a1a;
	color: #fff;
	font-size: 8px;
	padding: 2px 5px;
	border-radius: 2px;
	text-transform: uppercase;
	z-index: 2;
}

#msp-style-grid .msp-style-swatch { aspect-ratio: 1; }
#msp-style-grid .msp-style-swatch-label { display: none; }

/* ---------- Preview column ---------- */
.msp-preview-wrap {
	flex: 1 1 480px;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #e9e9e7;
	padding: 40px 60px;
	position: relative;
}

.msp-preview-scale {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	position: relative;
	padding-right: 40px;
	padding-bottom: 30px;
}

.msp-poster {
	background: #d9b98b;
	box-shadow: 0 10px 40px rgba(0,0,0,.18);
	padding: 20px;
	width: 340px;
	transition: padding .2s ease, background .2s ease;
}
.msp-poster.msp-orientation-landscape { width: 460px; }

.msp-frame-none  { background: #d9b98b; }
.msp-frame-oak   { background: #c9a876; padding: 22px; }
.msp-frame-white { background: #f2f2f2; padding: 22px; }
.msp-frame-black { background: #222222; padding: 22px; }

.msp-poster-inner {
	background: #fff;
	padding: 20px 20px 24px;
	display: flex;
	flex-direction: column;
	position: relative;
}

.msp-map-container {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #eee;
}
.msp-orientation-landscape .msp-map-container { aspect-ratio: 4 / 3; }

#msp-map { width: 100%; height: 100%; }


.maplibregl-canvas { display: block; }
.maplibregl-ctrl-attrib { font-size: 9px !important; }


.msp-map-zoom-controls {
	position: absolute;
	top: 12px; left: 12px;
	z-index: 400;
	display: flex;
	flex-direction: column;
	box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.msp-map-zoom-controls.msp-zoom-bottom { top: auto; bottom: 12px; }
.msp-map-zoom-controls button {
	width: 32px; height: 32px;
	background: #fff;
	border: 1px solid #ccc;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	font-weight: 600;
	color: #222;
}
.msp-map-zoom-controls button#msp-zoom-in { border-bottom: none; }
.msp-map-zoom-controls button:hover { background: #f2f2f2; }
.msp-map-zoom-controls button:disabled { color: #ccc; cursor: default; }

/* Shape masks */
.msp-shape-circle  { clip-path: circle(50% at 50% 50%); }
.msp-shape-heart   { clip-path: path('M150,300 C20,220 -20,120 40,60 C80,20 130,30 150,80 C170,30 220,20 260,60 C320,120 280,220 150,300 Z'); }
.msp-shape-star    { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }


.msp-map-icon {
	position: absolute;
	width: 22px;
	height: 22px;
	transform: translate(-50%, -100%);
	z-index: 500;
	pointer-events: none;
}
.msp-map-icon svg { width: 100%; height: 100%; fill: #000; }



.msp-poster-text {
	text-align: center;
	padding-top: 18px;
	border-top: 2px solid #222;
	margin-top: 18px;
}
.msp-poster-headline { font-size: 22px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.msp-poster-divider  { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #444; margin-top: 4px; }
.msp-poster-tagline  { font-size: 11px; color: #777; margin-top: 8px; }


.msp-labeltheme-modern { outline: 1px solid #222; outline-offset: -6px; }
.msp-labeltheme-modern .msp-poster-divider::before { content: '— '; }
.msp-labeltheme-modern .msp-poster-divider::after  { content: ' —'; }


.msp-labeltheme-legend .msp-poster-text { border-top-color: #222; }


.msp-labeltheme-abstract .msp-poster-inner { flex-direction: column-reverse; }
.msp-labeltheme-abstract .msp-poster-text {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "headline divider" "headline tagline";
	text-align: left;
	border-top: none;
	border-bottom: 2px solid #222;
	margin-top: 0;
	margin-bottom: 18px;
	padding-top: 0;
	padding-bottom: 14px;
}
.msp-labeltheme-abstract .msp-poster-headline { grid-area: headline; text-transform: none; align-self: center; font-weight: 700; }
.msp-labeltheme-abstract .msp-poster-divider  { grid-area: divider; text-align: right; margin-top: 0; }
.msp-labeltheme-abstract .msp-poster-divider::before,
.msp-labeltheme-abstract .msp-poster-divider::after { content: none; }
.msp-labeltheme-abstract .msp-poster-tagline  { grid-area: tagline; text-align: right; }


.msp-labeltheme-pantone .msp-poster-text { border-top-width: 3px; }
.msp-labeltheme-pantone .msp-poster-divider { color: #9a6a2a; font-weight: 700; }
.msp-labeltheme-pantone .msp-poster-divider::before,
.msp-labeltheme-pantone .msp-poster-divider::after { content: none; }


.msp-labeltheme-smooth .msp-poster-headline,
.msp-labeltheme-smooth .msp-poster-divider,
.msp-labeltheme-smooth .msp-poster-tagline { font-family: Georgia, "Times New Roman", serif; }
.msp-labeltheme-smooth .msp-poster-divider::before,
.msp-labeltheme-smooth .msp-poster-divider::after { content: none; }


.msp-labeltheme-nara .msp-poster-headline,
.msp-labeltheme-nara .msp-poster-divider,
.msp-labeltheme-nara .msp-poster-tagline { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: .16em; }
.msp-labeltheme-nara .msp-poster-headline { font-weight: 600; }
.msp-labeltheme-nara .msp-poster-divider::before,
.msp-labeltheme-nara .msp-poster-divider::after { content: none; }


.msp-labeltheme-gaia .msp-poster-inner { flex-direction: column-reverse; }
.msp-labeltheme-gaia .msp-poster-text {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "headline divider" "headline tagline";
	text-align: left;
	border: none;
	margin-top: 0;
	margin-bottom: 18px;
	padding-top: 0;
	padding-bottom: 10px;
}
.msp-labeltheme-gaia .msp-poster-headline {
	grid-area: headline;
	text-transform: none;
	font-family: "Brush Script MT", "Segoe Script", cursive;
	font-size: 30px;
	font-weight: 400;
	align-self: center;
}
.msp-labeltheme-gaia .msp-poster-divider { grid-area: divider; text-align: right; margin-top: 0; }
.msp-labeltheme-gaia .msp-poster-tagline { grid-area: tagline; text-align: right; }


.msp-labeltheme-playroom .msp-map-container { position: relative; }
.msp-labeltheme-playroom .msp-poster-text {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	border: none;
	margin: 0;
	padding: 30px 16px 16px;
	background: linear-gradient(to top, rgba(150,190,180,.9), rgba(150,190,180,0));
}
.msp-labeltheme-playroom .msp-poster-headline,
.msp-labeltheme-playroom .msp-poster-divider,
.msp-labeltheme-playroom .msp-poster-tagline { color: #fff; }
.msp-labeltheme-playroom .msp-poster-divider::before,
.msp-labeltheme-playroom .msp-poster-divider::after { content: none; }


.msp-labeltheme-valentine .msp-poster-text {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "headline divider" "headline tagline";
	text-align: left;
	border-top: none;
	align-items: end;
}
.msp-labeltheme-valentine .msp-poster-headline {
	grid-area: headline;
	text-transform: none;
	font-family: "Brush Script MT", "Segoe Script", cursive;
	font-size: 24px;
	font-weight: 400;
}
.msp-labeltheme-valentine .msp-poster-divider { grid-area: divider; text-align: right; margin-top: 0; }
.msp-labeltheme-valentine .msp-poster-divider::before,
.msp-labeltheme-valentine .msp-poster-divider::after { content: none; }
.msp-labeltheme-valentine .msp-poster-tagline { grid-area: tagline; text-align: right; }

.msp-labeltheme-humble .msp-poster-text { text-align: left; border-top: none; padding-top: 0; }
.msp-labeltheme-humble .msp-poster-headline { text-transform: none; }
.msp-labeltheme-humble .msp-poster-divider { text-transform: none; color: #7c3a2a; }
.msp-labeltheme-humble .msp-poster-divider::before,
.msp-labeltheme-humble .msp-poster-divider::after { content: none; }

/* ---------- Rulers ---------- */
.msp-ruler-h {
	position: absolute;
	left: 0; right: 40px; bottom: 6px;
	height: 1px;
	background: #999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.msp-ruler-h::before, .msp-ruler-h::after {
	content: ''; position: absolute; top: -4px; width: 1px; height: 9px; background: #999;
}
.msp-ruler-h::before { left: 0; }
.msp-ruler-h::after { right: 0; }
.msp-ruler-h span {
	background: #e9e9e7;
	padding: 0 8px;
	font-size: 11px;
	color: #777;
	position: relative;
	top: 8px;
}

.msp-ruler-v {
	position: absolute;
	top: 0; bottom: 40px; right: 6px;
	width: 1px;
	background: #999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.msp-ruler-v::before, .msp-ruler-v::after {
	content: ''; position: absolute; left: -4px; height: 1px; width: 9px; background: #999;
}
.msp-ruler-v::before { top: 0; }
.msp-ruler-v::after { bottom: 0; }
.msp-ruler-v span {
	background: #e9e9e7;
	padding: 8px 0;
	font-size: 11px;
	color: #777;
	writing-mode: vertical-rl;
	position: relative;
	left: 8px;
}

/* ---------- Icon edit/delete popup ---------- */
.msp-icon-popup {
	position: absolute;
	display: none;
	gap: 4px;
	transform: translate(-50%, -140%);
	z-index: 600;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba(0,0,0,.25);
	padding: 4px;
}
.msp-icon-popup button {
	width: 30px; height: 30px;
	border: 1px solid #e0e0e0;
	background: #fafafa;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
}
.msp-icon-popup button svg { width: 16px; height: 16px; }
.msp-icon-popup button:hover { background: #eee; }

/* ---------- Right-side icon edit drawer ---------- */
.msp-icon-drawer {
	position: fixed;
	top: 0;
	right: 0;
	margin-right: 0;
	width: 340px;
	max-width: 90vw;
	height: 100vh;
	background: #fff;
	box-shadow: -4px 0 20px rgba(0,0,0,.15);
	z-index: 1000;
	transform: translateX(100%);
	transition: transform .25s ease;
	display: flex;
	flex-direction: column;
}
.msp-icon-drawer.open { transform: translateX(0); }
.msp-icon-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid #eee;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 13px;
	letter-spacing: .04em;
}
.msp-icon-drawer-header button {
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
}
.msp-icon-drawer-header button svg { width: 18px; height: 18px; }
.msp-icon-drawer-body { padding: 20px; overflow-y: auto; }
.msp-icon-drawer-body input[type="color"] {
	width: 100%;
	height: 40px;
	border: 1px solid #d5d5d5;
	border-radius: 4px;
	padding: 2px;
	cursor: pointer;
}
.msp-icon-drawer-body input[type="range"] { width: 100%; }
.msp-drawer-scale-labels {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	color: #888;
	margin-top: 4px;
}


.msp-material-canvas {
	position: relative;
}
.msp-material-canvas::before {
	content: '';
	position: absolute;
	top: 10px;
	left: 10px;
	right: -10px;
	bottom: -10px;
	background: #cbb693;
	z-index: -1;
	border-radius: 2px;
	box-shadow: 2px 4px 10px rgba(0,0,0,.15);
}
.msp-material-canvas.msp-frame-none,
.msp-material-canvas.msp-frame-oak,
.msp-material-canvas.msp-frame-white,
.msp-material-canvas.msp-frame-black {
	padding: 0;
	background: #fff;
}
.msp-material-canvas .msp-poster-inner {
	padding: 0;
	position: relative;
}
.msp-material-canvas .msp-poster-inner::after {
	content: '';
	position: absolute;
	inset: 14px;
	border: 1px dashed rgba(0,0,0,.25);
	pointer-events: none;
	z-index: 5;
}

.msp-buybar {
	margin-top: 24px;
	width: 100%;
	max-width: 460px;
	background: #4b5340;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 20px;
	border-radius: 4px;
}
.msp-price { font-size: 20px; font-weight: 700; }
.msp-price small { display: block; font-size: 11px; font-weight: 400; opacity: .8; }
.msp-btn-primary {
	background: transparent;
	border: none;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
}
.msp-btn-primary:disabled { opacity: .6; cursor: default; }

@media (max-width: 820px) {
	.msp-sidebar { flex: 1 1 100%; border-right: none; border-bottom: 1px solid #e2e2e2; }
	.msp-preview-wrap { flex: 1 1 100%; padding: 30px 40px 40px; }
}