html,
body{

margin:0;
height:100%;
background:#eef2f7;
font-family:Segoe UI,sans-serif;

}

.header{

height:65px;
background:#696cff;
color:#fff;

display:flex;
justify-content:space-between;
align-items:center;

padding:0 25px;

box-shadow:0 2px 10px rgba(0,0,0,.15);

}

.back{

color:#fff;

text-decoration:none;

display:flex;

align-items:center;

gap:8px;

font-size:15px;

}

.title{

font-size:18px;

font-weight:600;

}

.toolbar{

background:#fff;

padding:12px 20px;

display:flex;

align-items:center;

gap:8px;

box-shadow:0 2px 10px rgba(0,0,0,.08);

}

.toolbar button{

background:#696cff;

border:none;

color:#fff;

padding:8px 15px;

border-radius:8px;

cursor:pointer;

transition:.3s;

}

.toolbar button:hover{

background:#5b5ee8;

}

.separator{

width:1px;

height:28px;

background:#ddd;

margin:0 10px;

}

.viewer{

padding:30px;

display:flex;

justify-content:center;

}

canvas{

background:white;

box-shadow:0 8px 25px rgba(0,0,0,.2);

border-radius:6px;

}

#zoom-value{

width:55px;

text-align:center;

font-weight:bold;

}