body { font-family: 'Segoe UI', sans-serif; background: #eef2f3; margin: 0; padding: 20px; display: flex; justify-content: center; }
.container { background: #fff; padding: 20px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); width: 95vw; max-width: 1200px; }
h1 { text-align: center; color: #2c3e50; }

.main-layout { display: flex; gap: 20px; height: 75vh; }
.preview-area { flex: 2; border: 2px solid #ddd; background: #999; overflow-y: auto; position: relative; border-radius: 8px; padding: 10px; }
.pdf-wrapper { display: flex; flex-direction: column; gap: 20px; align-items: center; position: relative; }
.page-container { position: relative; box-shadow: 0 5px 15px rgba(0,0,0,0.3); background: white; cursor: crosshair; }

/* Multiple Signatures Style */
.placed-sign { 
    position: absolute; 
    width: 120px; 
    height: 50px; 
    border: 1px dashed #3498db; 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-position: center; 
    cursor: no-drop; /* Double click to remove hint */
    z-index: 10;
    background-color: rgba(52, 152, 219, 0.1);
}

.side-panel { flex: 1; display: flex; flex-direction: column; gap: 20px; background: #f9f9f9; padding: 15px; border-radius: 8px; }
#sig-canvas { border: 1px dashed #666; width: 100%; background: #fff; }
button { padding: 12px; cursor: pointer; border: none; border-radius: 4px; font-weight: bold; }
.btn-danger { background: #e74c3c; color: white; }
.main-btn { background: #27ae60; color: white; font-size: 1.2rem; margin-top: auto; }