/* Magique Posing Draw — page-specific styles */
html,
body {
	height: 100%;
	margin: 0;
	font-family: Arial, Helvetica, sans-serif
}

body {
	background: linear-gradient(180deg, #17162a 0%, #0b1630 60%);
	color: #cfd8ff
}

/* Outer frame */
.mpd-wrapper {
	box-sizing: border-box;
	padding: 12px;
	border: 8px solid #0b1a3a;
	margin: 8px
}

/* Topbar */
.mpd-topbar {
	height: 72px;
	background: #34d07a;
	color: #14213d;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 22px;
	border-radius: 6px
}

.mpd-topbar .logo {
	position: absolute;
	left: 28px;
	width: 44px;
	height: 44px;
	background: #e6f7ee;
	border-radius: 4px
}

.back-btn {
	position: absolute;
	right: 12px;
	top: 12px;
	background: transparent;
	color: #14213d;
	border: none;
	padding: 6px 10px;
	border-radius: 6px;
	font-weight: 700;
	text-decoration: none
}

.back-btn:hover {
	background: rgba(0, 0, 0, 0.06);
	color: #0b1630
}

/* Layout */
.mpd-layout {
	display: flex;
	gap: 18px;
	padding: 18px;
	height: calc(100vh - 72px - 68px);
	box-sizing: border-box
}

.mpd-left,
.mpd-right {
	width: 220px;
	background: linear-gradient(180deg, rgba(8, 12, 30, 0.9), rgba(6, 10, 28, 0.9));
	border-radius: 6px;
	padding: 12px;
	box-shadow: inset 0 0 0 6px rgba(10, 14, 38, 0.6)
}

.mpd-left {
	display: flex;
	flex-direction: column
}

.mpd-left .panel-title {
	height: 18px;
	background: transparent;
	margin-bottom: 12px
}

/* remove inner black thumb boxes — panels provide the background */
.mpd-left .thumb {
	display: none
}

.mpd-center {
	flex: 1;
	display: flex;
	flex-direction: column;
	border-radius: 6px;
	padding: 12px;
	background: linear-gradient(180deg, #141226, #0e1020);
	box-shadow: inset 0 0 0 6px rgba(6, 10, 28, 0.6);
	position: relative
}

#viewer {
	flex: 1;
	position: relative;
	border-radius: 4px;
	overflow: hidden
}

#viewer canvas {
	width: 100% !important;
	height: 100% !important;
	display: block
}

.mpd-right .panel-title {
	height: 18px;
	background: transparent;
	margin-bottom: 12px
}

.mpd-right .thumb {
	display: none
}

/* Bottom bar */
.mpd-bottombar {
	height: 56px;
	background: linear-gradient(90deg, #06102a, #09163a);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 18px;
	color: #cfe1ff;
	border-radius: 6px;
	margin: 12px
}

.mpd-bottombar .center-tools {
	display: flex;
	gap: 8px
}

.mpd-bottombar .tool {
	background: rgba(255, 255, 255, 0.06);
	padding: 6px 10px;
	border-radius: 6px;
	color: #fff;
	border: none
}

/* small inset square in bottom-right of viewer (like mock) */
.viewer-corner {
	position: absolute;
	right: 18px;
	bottom: 18px;
	width: 48px;
	height: 48px;
	background: rgba(255, 255, 255, 0.85);
	opacity: 0.9;
	border-radius: 4px;
	pointer-events: none
}

/* Responsive */
@media(max-width:980px) {

	.mpd-left,
	.mpd-right {
		display: none
	}

	.mpd-layout {
		padding: 8px
	}
}